— CASE STUDY
MindSpa
Keeruka heaolurakenduse arendamine üheks terviklikuks kogemuseks
MindSpa on vaimse heaolu rakendus, mis ühendab immersiivsed helirännakud, eneseanalüüsi tööriistad ja pidevalt areneva sisukeskkonna.
Olin osa Euroopa suurima mindfulness äpi Synctuition rebrandimisest MindSpa'ks.
Projekti ulatus:
Mobiilirakenduse UI/UX disain
Veebilehe disain
Osaline brändi identiteedi disain
AI- põhiste illustratioonide genereerimine
Loovjuhtimine
/ Toote transformatsioon
Vaimse heaolu äpp, mis vajas uut hingamist
MindSpa (endine Synctuition) oli arenemas palju laiemaks kui selle algne versioon. Uued sisuformaadid, eneseanalüüsi tööriistad, hindamisvood ja laiemad heaolufunktsioonid kasvatasid pidevalt seda, mida rakendus pidi suutma.
Funktsioonide lisandudes muutus ka disainiülesanne. Üksikuid ekraane ei saanud enam käsitleda eraldiseisvate lahendustena. Navigatsioon, infohierarhia, sisu avastamine, taasesitus ja personaliseerimine pidid hakkama toimima ühe suurema tootesüsteemi osadena.
Minu roll oli kogu konseptsioon seest-väljapoole ümber mõtestada, luues piisavalt struktuuri, et muuta äpp lihtsamini kasutatavaks, kuid samal ajal piisavalt paindlikuks, et toetada ka seda, mis võiks tulevikus juurde lisanduda.
/ Disain, mis arvestab muutustega
Kasvav keerukus.
Üks terviklik kogemus.
Väljakutse seisnes selles,kuidas luua piisavalt selgust ja terviklikkust ambitsioonikale tootele, mis pidevalt edasi arenes.
Koostöö jooksul laienes MindSpa väga erinevatesse kasutuskogemustesse: immersiivsed helirännakud, isikliku heaolu näitajad, sisuvood, eneseanalüüsi tööriistad, taustakuulamine ja toetavad materjalid.
Igal valdkonnal olid oma interaktsioonivajadused, kuid kogu rakendus pidi endiselt tunduma ühe tootena.
Kasvav keerukus
Uus funktsionaalsus pidi sobituma olemasolevasse kogemusse nii, et navigatsioon ja infohierarhia ei muutuks iga järgmise lisandusega raskemini mõistetavaks.
Terviklikkuse säilitamine
Uued ekraanid ja funktsioonid pidid tunduma omavahel seotud ka siis, kui nende eesmärk, infotihedus ja kasutusloogika olid väga erinevad.
Valmis järgmisteks sammudeks
Süsteem vajas piisavalt selgeid reegleid, et püsida äratuntav ja järjepidev, kuid samal ajal piisavalt paindlikkust, et toetada ka funktsionaalsust, mida ümberdisaini alguses veel olemas ei olnud.
Enne → Pärast
Üksikutest funktsioonidest
skaleeruva tootesüsteemini
Transformatsioon ei seisnenud mitte ainult visuaalses muutuses, vaid ka selles, kuidas kogu toode aja jooksul terviklikumaks muutus
Enne
Kasvav hulk eraldiseisvaid funktsioone
Üksteisest eraldi arenevad interaktsioonimustrid
Järjest keerulisem navigatsioon ja sisu
Uued funktsioonid nõudsid korduvalt samu disainiotsuseid
Visuaalset järjepidevust oli järjest raskem säilitada
Pärast
Ühised interaktsioonimustrid seotud funktsioonide vahel
Modulaarsem ja taaskasutatav liidese süsteem
Selgem hierarhia suure infomahuga kogemustes
Järjepidev navigatsiooni- ja taasesitusloogika
Tugevam alus toote edasiseks arendamiseks
Tulemuseks oli toode, mis sai edasi areneda ilma, et iga uus funktsioon tähendaks järjekordset nullist disainimist.
Tootesüsteem
Erinevad funktsioonid.
Ühine LOOGIKA JA DISAINIKEEL.
MindSpa arenedes pidi kasutajaliides toetama väga erinevaid tegevusi, ilma et kogu kogemus hakkaks killustuma. Iga põhifunktsioon kujundati vastavalt selle eesmärgile, kuid ühise navigatsiooni-, visuaalse ja interaktsiooniloogika järgi.
Helirännakud
Mitmekihiline sisu avastamise ja kuulamise kogemus, mis muutis kasvava immersiivsete helirännakute kogu lihtsamini sirvitavaks, mõistetavaks, salvestatavaks ja hiljem jätkatavaks.
Selgusetest
Juhendatud eneseanalüüsi test, mille eesmärk oli muuta pikem küsimustik rahulikuks ja fokusseeritud kogemuseks, pakkudes selget progressi ning ülejäänud tootega kooskõlas olevat kasutusloogikat.
Minu selgus
Isiklik ülevaade, mis koondas mitu kasutaja enda hinnatud heaolunäitajat üheks struktureeritud vaateks ning muutis suhteliselt andmerohke kogemuse lihtsamini hoomatavaks ja jälgitavaks.
Positiivsuse voog
Paindlik sisuvoog, mis ühendas personaalsed sõnumid, artiklid, videod ja inspireeriva sisu, säilitades samal ajal ülejäänud rakendusega ühise visuaalse rütmi ja navigatsiooniloogika.
/ 01 · Helirännakud
3D Helirännakud
Helirännakud on üks MindSpa põhikogemustest, kuid kasutusloogika ulatus palju kaugemale kui lihtsalt ühe helifaili valimine. Kasutajad pidid saama sirvida temaatilisi rännakuid, mõista nende ülesehitust, liikuda erinevate tasemete vahel, naasta varem avastatud sisu juurde ja jõuda loomulikult kuulamiskogemuseni.
Arendasin rännakute kogu ja player'i ühe ühendatud voona, mitte kahe eraldiseisva ekraanina. Infohierarhiat, progressi, lemmikuid, taasesitusfunktsioone ja toetavat sisu täiustati järk-järgult nii, et sisu avastamine saaks jääda visuaalselt rikkalikuks ilma, et kogemus muutuks raskesti navigeeritavaks.
Playlist'id ja player olid ka nende interaktsioonimustrite seas, mida MindSpa jagas Beginning.com-iga. Kuna mõlemad tooted arenesid paralleelselt, võis ühes tehtud täiustus tuua nähtavale teise nõrkuse või uue võimaluse. Mitmete iteratsioonide jooksul muutus ühine kasutusloogika järjest selgemaks ja töökindlamaks, samal ajal kui kummagi toote visuaalne väljendus jäi omanäoliseks.
/ 02 · Selguse test & minu selgus
Eneseanalüüsist
lihtsa isikliku ülevaateni
Selguse sektsiooni kasutajakogemus tõi kaasa täiesti teistsuguse UX-probleemi kui immersiivne helisisu. Sirvimise ja kuulamise asemel pidi kasutaja vastama reale isiklikele küsimustele ning seejärel saadud infot enda jaoks mõtestama.
Väljakutse oli hoida suhteliselt keerukas test eemal kliinilisest või ülekoormavast tundest. Ehitasin hindamise üles selge progressi, ühe sammu kaupa liikumise ja rahuliku visuaalse hierarhia ümber, et tähelepanu püsiks alati hetkel käsil oleval küsimusel.
Saadud info kandus edasi Minu Selguse vaatesse, kus mitmed erinevad näitajad pidid muutuma ühe pilguga mõistetavaks, ilma et kogemus muutuks tavapäraseks analüütikadashboard'iks.
Seetõttu tasakaalustas kasutajaliides struktuuri ja emotsionaalset soojust. Ühel pool olid selge kategooriahierarhia ja progressinäitajad, teisel pool MindSpa atmosfäärilisem visuaalne keel.
/ 03 · Positiivsuse voog
Pidevalt kasvav sisuvoog
Positivity Feed pidi toetama väga erinevaid sisuvorme: personaalseid sõnumeid, soovitusi, artikleid, videoid ja motiveerivat sisu, arvestades samal ajal võimalusega, et toote arenedes lisandub formaate veelgi.
Selle asemel et kujundada iga sisutüüp eraldiseisva moodulina, arendasin paindliku kaartide ja hierarhia süsteemi, mis võimaldas erineva infotihedusega sisul ühe voo sees loomulikult koos eksisteerida.
Korduvad navigatsiooni- ja interaktsioonimustrid lõid järjepidevuse, samal ajal kui erinevused pildikeeles, tüpograafias ja sisu ülesehituses andsid igale elemendile piisavalt oma karakterit.
Selline modulaarne lähenemine võimaldas uusi sisutüüpe juurde tuua ilma, et kogu kogemus oleks tulnud iga kord nende ümber uuesti üles ehitada.
/ UX lähenemine
Kuidas muuta keerukus
rahulikuks kogemuseks
MindSpa visuaalne karakter oli teadlikult immersiivne, kuid selle atmosfääri all pidi kasutajaliides jääma endiselt lihtsasti kasutatavaks.
Selle asemel et käsitleda esteetikat ja kasutatavust kahe eraldi eesmärgina, ehitasin kogemuse korduvate disainiprintsiipide ümber.
Kihiline infohierarhia
Infotihedad ekraanid struktureeriti nii, et kõige olulisem tegevus või info oleks mõistetav enne, kui kasutaja liigub sekundaarsete detailideni.
Järjepidevad interaktsioonimustrid
Navigatsioon, meediakontrollid, sisukaardid ja korduvad tegevused järgisid võimalikult palju sama loogikat, vähendades seda, mida kasutaja pidi erinevate funktsioonide vahel liikudes uuesti õppima.
Modulaarsed komponendid
Taaskasutatavad struktuurid võimaldasid ekraanidel ja funktsioonidel edasi areneda ilma, et iga muudatusega tuleks kogu visuaalne keel uuesti üles ehitada.
Emotsionaalne atmosfäär
Läbipaistvus, sügavus, pildikeel ja soojad tonaalsed suhted andsid tootele eristuva emotsionaalse karakteri, laskmata visuaalsetel efektidel kasutatavuse üle domineerida.
Loetavus ja ligipääsetavus
Tüpograafiat, kontrasti, vahekaugusi ja interaktsioonialasid käsitleti koos immersiivse visuaalse keelega, et kogemus oleks ka praktiliselt mugav kasutada.
/ MindSpa × Beginning.com
KAKS PARALLEELSET TOOTEARENDUST.
ÜHINE ARENEV DISAINISÜSTEEM.
MindSpa ja Beginning.com loodi sama asutajate tiimi poolt ning arenesid suure osa 2020–2023 koostööperioodist paralleelselt.
Toodetel olid erinevad eesmärgid ja nad vajasid erinevat üldist kasutuskogemust, kuid osa nende interaktsioonimustreid kattus loomulikult.
See tekitas ebatavalise, kuid väga kasuliku disaini tagasisideahela.
Töötasin periooditi ühe tootega, samal ajal kui teine sai aega n-ö settida. Hiljem värske pilguga tagasi tulles oli sageli lihtsam näha, mis toimis, mis oli muutunud üleliigseks ja kus mõni ühine muster saaks veel paremaks areneda.
Selliselt arenesid näiteks Journey playlist'id ja audio player. Kui üks lahendus muutus ühes tootes selgemaks või töökindlamaks, sai sama õppetundi kasutada ka teise rakenduse vastava funktsiooni edasiarendamisel.
Eesmärk ei olnud kunagi muuta MindSpa ja Beginning.com ühesuguseks. Ühiseid kasutusmustreid täiustati seal, kus see lõi väärtust, kuid mõlemad tooted säilitasid oma eesmärgi, struktuuri, visuaalse karakteri ja emotsionaalse kogemuse.
/ Iteratsioon kui töömeetod
Lõpptulemus kujunes läbi
pideva täiustamise
MindSpa ei sündinud ühe lineaarse disainiprotsessi tulemusena, kuna allolev konseptsioon oli pidevas muutuses.
Toote suund arenes pidevalt edasi ning see tähendas, et ka disainiotsused pidid jääma avatuks ümberhindamisele, kui lisandusid uued funktsioonid, prioriteedid või reaalsed tehnilised piirangud.
Selle asemel et käsitleda iteratsiooni vigade parandamisena, kujunes sellest disainiprotsessi loomulik osa.
Üks ekraan või komponent võis läbida mitu versiooni enne, kui selle hierarhia, kasutusloogika ja visuaalne tasakaal tundusid päriselt lahendatud. Ka iteratsioonide vaheline aeg oli sageli väärtuslik, sest võimaldas otsustel settida enne, kui neid värske pilguga uuesti hinnata.
Selline pikaajaline rütm aitas muuta toodet järk-järgult terviklikumaks, mitte lihtsalt suuremaks.
/ Visuaalide tootmine
EMOTSIOONI JA ATMOSFÄÄRI TÕLGENDAMINE VISUAALSESSE KEELDE
MindSpa sisumudel vajas suures mahus originaalset pildimaterjali. Erinevad Helirännakud, playlist'id ja toetavad kogemused vajasid oma atmosfääri, kuid pidid samal ajal kuuluma ühte laiemasse MindSpa visuaalsesse maailma.
Sellise mahu loomine tavapärase eritellimusel illustratsiooniproduktsiooniga oleks olnud aeglane ja raskesti skaleeritav, samas kui stock-visuaalid ei suutnud pakkuda vajalikku järjepidevust ega kujutlusvõime ulatust.
Arendasin varajasi Midjourney mudeleid kasutades AI-toega visuaalide loomise töövoo ning genereerisin, täiustasin ja kureerisin platvormi jaoks üle 200 unikaalse pildi.
Väljakutse ei olnud lihtsalt piltide genereerimine. Iga visuaal pidi toetama konkreetset teemat, emotsionaalset tonaalsust ja kasutajaliidese konteksti, jäädes samal ajal selgelt MindSpa maailma osaks.
Visuaale kasutati järgmistes valdkondades:
Helirännakute kaanepildid · Rännakute playlist'id · Toetav sisu · Funktsioonide visuaalid · Atmosfääriline storytelling
See oli varajane näide generatiivse AI kasutamisest struktureeritud loovproduktsiooni tööriistana, mitte lihtsalt uue tehnoloogilise efektina.
200+ Originaalset visuaali
Üks toode.
Palju emotsionaalseid maailmu.
Visuaalne süsteem vajas piisavalt suurt ulatust, et liikuda väga erinevate teemade vahel ilma oma põhilist identiteeti kaotamata.
Sürreaalsed maastikud, sümboolsed tegelased, orgaanilised vormid, arhitektuursed keskkonnad ja abstraktsem psühholoogiline pildikeel said koos eksisteerida tänu ühisele sügavuse, atmosfääri ja emotsionaalse intensiivsuse tunnetusele.
/ Pikaajaline koostöö
MindSpa arenes koostöös asutajatega
Töö kestis ligikaudu kolm aastat ning toimus tihedas koostöös asutajate ja arendustiimiga.
Kujundasin kasutajaliidese peamiselt Adobe XD-s ja valmistasin arenduse handoff'i ette Zeplini kaudu, kuid töövoo kõige olulisem osa ei olnud tarkvara. Oluline oli hoida pidevat dialoogi toote suuna, disaini ja tehnilise teostuse vahel.
Regulaarsed strateegia- ja tootearutelud võimaldasid uusi ideid varakult läbi mõelda, samal ajal kui iteratiivne disainiprotsess hoidis kasutajaliidese paindlikuna ka nõuete muutudes.
Kuna toode arenes pidevalt edasi, pidi disainisüsteem tegema korraga kahte asja: looma järjepidevuse juba olemasoleva ümber ja jätma piisavalt ruumi funktsioonidele, mida ei olnud veel välja mõeldud.
Pikaajalise koostöö käigus nihkus minu roll järk-järgult üksikute ekraanide kujundamisest terve omavahel seotud tootesüsteemi hoidmise ja edasiarendamiseni.
/ Milleks projekt kujunes
Rohkem kui ümberdisain.
Süsteem, mis sai edasi areneda.
MindSpa kujunes pikaajaliseks praktikaks sellest, kuidas disainida arengujärgus olevat digitoodet.
Väljakutse ei seisnenud ainult rakenduse visuaalse väljanägemise parandamises. Eesmärk oli luua tootekogemus, mis suudaks vastu võtta uusi funktsioone, uut sisu ja muutuvaid prioriteete ilma oma sisemist loogikat kaotamata.
Korduvate iteratsioonide jooksul muutusid üksikud funktsioonid omavahel rohkem seotuks, jagatud kasutusmustrid arenesid taaskasutatavateks komponentideks ning kasutajaliidesest kujunes paindlikum alus toote edasiseks kasvuks.
Minu jaoks kinnistas see projekt lähenemise, mida kasutan siiani:
Mõista tervet süsteemi, lahenda see, mida on vaja praegu, ning jäta piisavalt struktuuri ja paindlikkust selle jaoks, mis tuleb järgmisena.
Elus on asju, mida lihtsalt ei saa õppida – talent ja hea maitse. Ascend Creative särab mõlemaga.
Tooted arenevad. Kogemus peaks arenema koos nendega
Kas sinu digitoode on oma
praegusest vormist välja kasvanud?
Kui sinu toode on muutunud keerukamaks kui seda ümbritsev kasutuskogemus, saan aidata tuua strateegia, struktuuri ja loomingulise suuna tagasi üheks terviklikuks süsteemiks.
Olenemata sellest, kas järgmine samm on fokusseeritud UX-transformatsioon või laiem brändi ja digikogemuse edasiarendus, alustame sellest, et mõistame, mis on muutunud, mis töötab endiselt hästi ja mis peab edasi arenema.