— Case study
Beginning.com
Tervikliku brändi ja digikogemuse loomine naiste heaolubrändile
Beginning.com loodi multifunktsionaalse naiste heaoluäpina, mis koondas ühes digikeskkonnas kokku teraapilised helirännakud, heaoluteemalise sisu ja kursused, viljakuse ja menstruaaltsükli jälgimise ning raseduse toetamise.
Projekti ulatus:
Brändi identiteet
Mobiiliäpi ja veebilehe UI/UX disain
AI-põhiste illustratsioonide genereerimine
Loovjuhtimine
/ Kontekst
Üks toode, mitu erinevat naiste heaolu valdkonda
Beginning loodi laiahaardelise naiste heaolu digikeskkonnana, mitte ainufunktsionaalse rakendusena.
Toode ühendas väga erineva kasutusloogikaga kogemusi: teraapilised helirännakud, heaoluteemaline sisu, menstruatsiooni ja viljakuse jälgimine ning raseduse toetamine.
Tootekontseptsioon, funktsioonid ja positsioneerimine olid määratletud asutajate poolt. Minu ülesanne oli muuta see visioon terviklikuks visuaalseks ja digitaalseks kasutuskogemuseks.
Projekti tegi huvitavaks mitte ainult rakenduse multifunktsionaalsus, vaid see, kuidas luua ühtne tunnetus ja visuaalne keel kõikide nende erinevate funktsioonide vahel, et nad ei mõjuks kui neli eraldiseisvat tööriista ühe rakenduse all.
/ Väljakutse
muutES keerukusE terviklikuks kogemuseks
Iga Beginningu funktsioon vajas kasutajaliideselt midagi erinevat.
Helirännakud vajasid atmosfääri ja emotsionaalset sügavust.
Viljakuse jälgija pidi esitama tihedat tsüklilist infot kiiresti ja arusaadavalt.
Heaolu voog ja kursused vajasid sotsiaalmeediast voogudest tuttavat sisuhierarhiat.
Pregnancy tracker had to balance practical information with a more personal emotional context.
Väljakutse oli luua igale funktsioonile just talle sobiv kasutajaliides, kaotamata tunnet, et kõik kuulub ühe ja sama toote juurde.
Tööd kujundasid kolm põhimõtet
Selgus enne dekoratiivsust
Funktsionaalne info pidi jääma kergesti mõistetavaks ka siis, kui seda ümbritsev visuaalne maailm muutus väljendusrikkamaks.
Järjepidevus ilma ühetaolisuseta
Ühine navigatsioon, ruumikasutus, tüpograafia ja interaktsioonimustrid lõid terviku, samal ajal kui eri funktsioonid säilitasid oma iseloomu.
Emotsioon peab täitma eesmärki
Visuaalne süsteem pidi muutma Beginningu pehmemaks ja inimlikumaks, ilma et atmosfäär hakkaks kasutatavust segama.
— Roll ja töö ulatus —
Toote identiteedi ja visuaalse suuna loomine
Beginning.com oli pikaajaline koostööprojekt (MindSpa kõrval), mis arenes novembrist 2020 kuni märtsini 2023 läbi paljude uuenduste.
Vastutasin kogu mobiilirakenduse kasutajaliidese ja kasutuskogemuse kujundamise eest toote peamiste funktsioonide lõikes, lõin algse visuaalse identiteedi ja logo, kujundasin esialgse mitmelehelise veebiliidese ning aitasin luua toodet ümbritseva laiema visuaalse maailma.
Töötasin kogu realiseerimise vältel otse asutajate ja arendustiimiga, kasutades disainiks ja handoff’iks Adobe XD-d ning Zeplinit, arenduse koordineerimiseks Jirat ning regulaarseid iganädalasi kohtumisi, kus vaatasime üle progressi ja täpsustasime toodet.
Lisaks juhendasin kahe ettevõttesisese disaineri tööd, et säilitada visuaalne järjepidevus ka siis, kui disaini- ja tootemaht kasvas.
Visual Identity
original Beginning logo and visual identity.
Mobile UI/UX
complete interface design across iOS and Android product experiences.
Web UI
Initial multi-page Beginning.com website design, developed by the client’s development team.
Design Collaboration
Ongoing developer handoff, iteration and direction across a multi-year product cycle.
Visual Direction
Art direction and development of the soft, surreal visual language used across the digital experience.
/ UX lähenemine
Selguse loomine väga erinevate funktsioonide vahel
Kuna funktsioonide strateegia oli asutajate poolt juba määratletud, ei olnud minu roll otsustada, mida Beginning teeb. Minu ülesanne oli määratleda, kuidas need funktsioonid kasutajaliideses toimivad ja omavahel koos eksisteerivad.
Toode pidi olema piisavalt paindlik, et toetada väga erinevaid interaktsioone, ilma et kasutaja peaks iga mooduli juurde liikudes kogu kasutusloogikat uuesti õppima.
Tuttavad mustrid seal, kus standartsus aitab
Põhilised navigatsiooni- ja interaktsioonimustrid jäid teadlikult äratuntavaks. Uudsust kasutasin ainult seal, kus see kogemust päriselt parandas, mitte lihtsalt selleks, et liides tunduks teistsugune.
Hierarhia enne infotihedust
Infomahukad funktsioonid ehitasin üles selgelt eristatava infohierahia alusel, et kõige olulisem oleks selgelt eristatav, samal ajal kui sekundaarne info jäi seda toetama ega konkureerinud tähelepanu pärast.
Emotsionaalne järjepidevus
Tüpograafia, ruumikasutus, värvid, navigatsioon ja korduvad visuaalsed mustrid ühendasid funktsioone, mille praktilised vajadused olid muidu väga erinevad.
Järk-järgult avanev keerukus
Kõige olulisem info pidi olema mõistetav esimesena, samal ajal kui detailsem sisu muutus kättesaadavaks siis, kui kasutaja liikus konkreetsesse funktsiooni sügavamale.
/ Toote disainisüsteem
Ühtne interaktsioonikeel
Suur osa tööst seisnes piisavalt tugeva disainisüsteemi loomises, et Beginning saaks kasvada ilma, et iga uus funktsioon muutuks täiesti eraldiseisvaks disainiülesandeks.
Ühine navigatsiooniloogika, tüpograafia, ruumikasutus, nuppude loogika, kaardid, sisuhierarhia ja korduvad kasutajaliidese mustrid lõid süsteemi aluse.
Selle peale said üksikud moodulid oma eesmärgist lähtuvalt visuaalselt muutuda, kaotamata toote aluseks olevat ühist disainikeelt.
See tasakaal muutus eriti oluliseks, sest Beginning liikus mitme erineva kasutusrežiimi vahel.
Funktsionaalsed kogemused, kus esmatähtsad olid selgus ja infohierarhia, ning immersiivsed kogemused, kus visuaalne atmosfäär võis võtta palju suurema rolli.
Süsteem pidi suutma toetada mõlemat.
/ Visuaalne identiteet
Pehmem visuaalne STIIL digitaalse heaolu jaoks
Beginningu positsioneerimine ja sõnumid olid juba asutajate poolt määratletud. Minu roll oli luua visuaalne identiteet, mis suudaks seda suunda kogu toote ulatuses väljendada.
Identiteet kujundati teadlikult kerge, naiseliku ja emotsionaalselt sooja tunnetusega, kasutades pehmeid vorme, avarat ruumikasutust ja vaoshoitud pastellpaletti, et eristuda tervise- ja jälgimisrakendustele omasest külmemast visuaalsest keelest.
Selle asemel, et ehitada identiteet suure hulga dekoratiivsete brändielementide ümber, põhines süsteem eelkõige tüpograafial, värvil, kujundikeelel ja kasutajaliidesel endal.
Logo
Lõin Beginningu liblika sümboli lihtsa, kaasaegse ja piisavalt pehme iseloomuga, et see toimiks loomulikult nii funktsionaalsetes kui ka emotsionaalselt väljendusrikkamates keskkondades.
Värvid
Pehmed roosad, heledad sinised ja neutraalsed pinnad moodustasid toote põhikeskkonna, samal ajal kui sügavamaid roosa, ploomi ja atmosfäärseid toone kasutasin seal, kus konkreetne kogemus vajas rohkem immersiivsust.
Kasutajaliidese välimus
Brändiidentiteeti ja kasutajaeliidest käsitlesin ühe ühendatud süsteemina. Samad visuaalsed põhimõtted kandusid identiteedist edasi nuppudesse, navigatsiooni, kaartidesse, pildikeelde ja ekraanide hierarhiasse.
/ Kunstiline Juhtimine
Äratuntava emotsionaalse maailma loomine
Beginning vajas pildikeelt, mis oleks eristatavam tavapärasest fotopanga visuaalidest.
Visuaalne suund kujunes pehmuse, looduse, sürreaalsete ruumide ja teadlikult unenäolise eskapismi ümber. Pilved, õied, inimfiguurid ja kujuteldavad maastikud muutusid korduvateks motiivideks, luues toote eri osades äratuntava atmosfääri.
Eesmärk ei olnud sürrealism iseenesest. Pildikeelt kasutati eelkõige emotsionaalse seisundi edasiandmiseks.
Heledamad keskkonnad toetasid rahu, avatust ja igapäevast heaolu. Tumedamaid ja immersiivsemaid visuaalseid maailmu kasutasin seal, kus kogemus ise muutus introspektiivsemaks või sensoorsemaks.
/ Visuaalsed põhimõtted
Pehme, mitte kliiniline
Pildikeel vältis teadlikult tavapärase tervisetehnoloogia steriilset visuaalset maailma.
Sürreaalne, kuid emotsionaalselt arusaadav
Ka kujuteldavates keskkondades säilisid tuttavad inimlikud ja looduslikud ankrud.
Paindlik ühe maailma sees
Eri funktsioonid said olla iseloomult erinevad, loobumata ühisest paletist ja visuaalsest grammatikast.
Atmosfäär toetab funktsiooni
Illustratsioon ei asendanud kunagi tootehierarhiat, vaid ümbritses ja tugevdas kogemust.
/ Visuaalide tootmine
Kunstiline juhtimine, mis ulatus kaugemale ühest pildist
Osa visuaalsest süsteemist valmis AI-toega pildiloome abil kindla art direction’i raames, mitte üksikute juhuslike generatsioonidena.
Järjepidevus tuli samade muutujate teadlikust kontrollimisest: värvipalett, pehmus, loodusmotiivid, inimeste kohalolu, kompositsioon ja emotsionaalne tonaalsus.
See võimaldas luua toote eri osadele erinevaid visuaalseid keskkondi, säilitades samal ajal piisava ühtsuse, et kõik tunduks selgelt Beginninguna.
AI-tööriist MidJourney oli osa tootmisprotsessist. Süsteemi ülesehitus ja selle taga olevad loomingulised otsused olid disainitöö.
— Tootekogemus —
ÜHTNE süsteem väga erinevate kasutusvajaduste jaoks
Beginningu ulatus tuleb kõige selgemalt esile konkreetsete funktsioonide kaudu.
Helipleier, viljakuse jälgija, toimetatud sisuvoog ja raseduskogemus nõuavad kõik väga erinevat kasutajaliidese käitumist.
Järgnevad sektsioonid näitavad, kuidas ühine tootedisaini keel kohandus nende erinevate vajadustega.
/ 01 · Immersiivne heli
3D Helirännakud
Väljakutse
Sound Journeys pidi tunduma tavalisest audiokogust immersiivsem, kuid atmosfäär ei tohtinud tulla tuttava taasesitusloogika arvelt.
Disainilahendus
Avastamine oli teadlikult visuaalne, et iga helirännak saaks oma emotsionaalse tonaalsuse edasi anda juba enne kuulamise alustamist.
Kuulamisvaates jäid tuttavad juhtnupud kergesti leitavaks, samal ajal kui neid ümbritsev liides muutus tumedamaks ja atmosfäärsemaks.
Tulemuseks oli selgelt erineva emotsionaalse iseloomuga moodul, mis käitus siiski loomuliku osana kogu Beginningu tootest.
/ 02 · Jälgimine
Tsükli ja viljakuse jälgija
Väljakutse
Tsükli jälgimine sisaldab oluliselt rohkem infot kui immersiivne sisukogemus. Kuupäevad, faasid, viljakusolekud ja igapäevane staatus hakkavad ilma hoolikalt läbimõeldud hierarhiata kiiresti omavahel tähelepanu pärast konkureerima.
Disainilahendus
Liides kasutab ringikujulist mudelit, mis peegeldab otseselt info tsüklilist olemust.
Kõige olulisem hetkeseis paikneb visuaalselt keskmes, samal ajal kui sekundaarne info jaotub selle ümber värvide, märgiste ja toetava andmestiku kaudu.
Nii sai kasutaja oma hetkeolukorrast kiiresti aru, ilma et kogu olemasolev info oleks korraga sama tugevalt esile toodud.
/ 03 · Sisu
Heaolu voog
Väljakutse
Sisukogemus pidi mahutama erinevaid teemasid, autoreid ja soovitusi, muutumata tavaliseks vooguks, kus kõik kaardid konkureerivad võrdselt tähelepanu pärast.
Disainilahendus
Selge sisuhierarhia eristab peamisi soovitusi toetavatest lugudest, samal ajal kui tuttavad feed’i mustrid muudavad sirvimise intuitiivseks.
Fotograafia loob emotsionaalse konteksti, tüpograafia, metaandmed ja korduvad kaardistruktuurid annavad aga piisavalt järjepidevust, et kasutaja saaks sisu kiiresti skaneerida.
Tulemuseks on toimetusliku tunnetusega sisuvoog, mis säilitab mobiilsele sisukogemusele vajaliku efektiivsuse.
/ 04 · Juhendamine
Raseduse jälgija
Väljakutse
Raseduse jälgimine ühendab praktilise info teemaga, mille emotsionaalne tähendus võib olla tavalisest terviseinfost oluliselt suurem.
Seetõttu pidi kogemus andma arengut edasi selgelt, muutumata liiga kliiniliseks.
Disainilahendus
Etapipõhine info jääb struktureerituks ja kergesti navigeeritavaks, samal ajal kui intiimsem visuaalne sisu loob funktsionaalse info ümber emotsionaalsema kihi.
Põhilised kasutajaliidese põhimõtted jäävad samaks, kuid visuaalne maailm kohandub nii, et progress tunduks isiklikum ja tähenduslikum.
— Brändi rakendamine —
Kuidas identiteet võiks ulatuda ekraanist kaugemale
Siin näidatud füüsilised rakendused loodi kontseptuaalsete brändilaiendustena, et saada aru, kuidas identiteet võiks kanduda laiemasse heaolumaailma läbi pakendite, päevikute, audiotoodete ja valitud elustiili puutepunktide.
— Disaini tulemus —
Ühtne tootedisaini keel laiahaardelise heaolukogemuse jaoks
Koostöö jooksul arenes Beginning uuest tooteideest terviklikuks digikogemuseks, millel oli oma visuaalne identiteet, mobiilirakenduse süsteem ja veebileht.
Disainitöö tulemusena kujunes:
Täielik visuaalne identiteet
Järjepidev visuaalne alus Beginningu esimesele tootesuunale.
Ühtne mobiilikogemus
Üks kasutajaliidese keel, mis ühendas immersiivse sisu, toimetuslikud kogemused ja infomahukad jälgimisfunktsioonid.
Skaleeritav visuaalne süsteem
Äratuntav art direction, mis suutis kohaneda väga erinevate emotsionaalsete ja funktsionaalsete olukordadega.
Ühendatud veebikogemus
Mitmeleheline veebiliides, mis kandis sama toote- ja identiteediloogika edasi ka väljapoole rakendust.
Toode jõudis avalikult turule nii iOS-i kui Androidi rakendusena 2023 märtsis.
Kommertslik kasutuselevõtt ei arenenud lõpuks selliselt, nagu ettevõte oli lootnud, ning Beginning muutis hiljem oma suunda põhjalikult. Selles case study’s näidatud identiteet, veebileht ja tootesuund asendati aja jooksul uute lahendustega. Seetõttu esitleb see case study Beginningu algse versiooni jaoks tehtud disainitööd, mitte brändi tänast kuju.
Koostöö Rivoga on nagu koostöö oma parima sõbraga – lõbus ja pingevaba. Ning tema tähelepanu detailidele on märkimisväärne!
/ Reflektsioon
Mida ma sellest projektist õppisin
Beginning oli üks neist projektidest, mis viis mind kaugele erinevate distsipliinide vahele.
Nii erinevate funktsionaalsete ja emotsionaalsete režiimidega toote kujundamine kinnitas midagi, millesse usun siiani tugevalt: selgus ja iseloom ei ole vastandid.
Toode võib olla väljendusrikas ilma, et selle kasutamine muutuks keeruliseks, ja funktsionaalne ilma, et see muutuks emotsionaalselt sisutuks. Mida tugevam on alussüsteem, seda rohkem vabadust tekib selle peale tähendusliku varieeruvuse loomiseks.
Projekt õpetas mulle ka järjepidevuse väärtust. Mitme aasta jooksul sama tootega töötamine tähendas võimalust näha, kuidas disainiotsused jõuavad arendusse, muutuvad tagasiside põhjal ja mõjutavad täiesti erinevaid tooteosi.
See perspektiiv mõjutab siiani tugevalt seda, kuidas ma brändi- ja digiprojektidele lähenen.