Disainisprint - 1 nädalaga, logo ja maandumislehe UI/UX disain
Mis on Taskily
Taskily on Läti start-up, mis arendab uut ülessannete planeerimis ja projektijuhtimis tarkvara. Jah, midagi sellist nagu on Basecamp, Trello, Linear, Asana või Jira. Asutajatel on selge plaan ennast positsioneerida nende tuntud konkurentide vahele. Mitte liiga vähese funktsionaalsusega aga lihtne kasutada. Nagu tänapäeval moodne, on neil ka natukene tööd lihtsustavat tehisintelligentsi ehk AI-d. Hetkel on toode veel arenduses ja avalikult kasutatav ei ole. Sain seda testida ja usun, et siit võib midagi head tulla.
Kuna hetkel on nende meeskonnas ainult programmeerijad, siis konsulteerisin neid kodulehe disaini ja UI/UX teemade. Taskily kaasasutajal Jim Dreyeril tekkis küsimus, et kas saaksin neid disainiga sammukese edasi aidata. Et nii-öelda luua professionaalne ja tõsiseltvõetav kaubanduslik välimus kodulehele ja tutvustada Taskilyt selgemalt. Muidugi saab. Mulle meeldib töötada just alustavate ettevõtetega, kus saan disainerina luua kiiresti väga palju nähtavat kasu.
Ühe nädalane disainisprint
Kuna toode on veel arenduse staadiumis siis hetkel tutvustab Taskily ennast läbi lihtsa maandumislehe ja kogub huviliste e-maile, et toote avaldamisel neid teavitada. Põhilise fookuse seadsime kodulehe loogika ja visuaalse disaini parandamisse. Kindlasti oleks disainitööd teha palju rohkem, aga ilma käibeta startupi puhul on eelarvel omad piirangud.
Siinkohal usun, et Give on hetkel turul üks parim disainipartner just alustavatele ingel, seemne staadiumi startuppidele. Kogemus erinevate disainitöödega ja paindlikkus võimaldavad meil pakkuda modernset disaini mõistliku eelarvega.
Ülesande püstitus oli muuta maandumisleht ülevaatlikumaks ning kujunduslikult usaldusväärsemaks. Maandumislehe kujundus ei ole enamikel juhtudel pikk projekt. Aga päris lihtsalt seekord see ei läinud. Tavaliselt on maandumislehe kujundamiseks olemas ettevõtte logo, värvid, kirjatüübid ja vajalik graafika ning pildid. Antud juhul aga Taskilyl ei olnud praktiliselt midagi ja disainisprinti fookust tuli natukene laiendada.
Selguse huvides panen kirja, et disainisprint algas esmaspäeval 23.10.2023. Ja enne disainisprindi algust oli seis Taskily kodulehe ja SaaS töölauaga selline.
SaaS tarkvara ettevõtte logo kujundamine
Taskilyl puudus logo. Tegelikult puudus igasugune bränding. Olemas oli valmiskujunduse põhjale tehtud maandumisleht ja sinakas-rohelistes toonides illustratsioonid ning nupud.
Iga brändingu või rebrändingu projekti juurde peaks kuuluma taustainfo kogumine. Kuna erinevaid projektijuhtimise tarkvarasid olen kasutanud aastaid ning ajaliselt oli töömaht väga piiratud, siis suures osas toetusin varasemale kogemusele ja eraldi uurimistööd logo kujundamiseks ette ei võtnud.
Logo disaini projekti puhul esitlen enamasti kliendile 3-6 logo kavandit.Kujundasin ka seekord mitmed erinevad logo kavandid, aga kliendile esitlesin ainult ühte.
See otsus sai vastu võetud kuna edasi tagasi suhtluseks ja logo kinnitamiseks ei saa tervet nädalat kulutada.
Kliendil jäi üle kinnitada kas sobib või ei sobi. Seekord sobis kohe.
Teisipäeva õhtu 24.10.2023 ja logo on lukus. Logoga koos otsustasin, et brändi värvideks jäävad rohelised toonid. Roheline on usaldusväärne toon ja sellega on suhteliselt lihtne kujundada. Samas on seda hetkel kujundustes kasutusel võibolla veidi vähem kui siniseid ja lillakaid toone.
Saame ka teie ettevõtet aidata modernse logo kujundusega.
SaaS töölaua UI/UX disain
Taskily puhul on tegemist veebipõhise SaaS ehk Software as a Service tööriistaga. Usun, et maandimislehe kujunduses konkreetse toote näitamine annab kõige selgema ülevaate sellest, millega tegu. SaaS töölaua UI/UX disainimine ei ole kindlasti lihtne töö ja võtab kaua aega ning nõuab planeerimist. Valida oli kas kasutada arendusjärgus oleva toote ekraanipilte, teha uued kujundusvaated, või siis näidata kasutajaliidest abstraktsete illustratsioonidena. Esialgu ei olnud veel selge kuidas seda teen.
Olemasoleva töölaua ekraanipiltide kasutamine oleks hakanud piirama kodulehe visuaalset disaini. Kui oleks tahtnud selle disaini viisakalt uuele kodulehele integreerida oleks kodulehe kujunduses pidanud kasutama sarnast stilistikat. Minule tundus see veidi aegunud ja sellepärast sai sellest mõttest loobutud. Abstraktsete illustratsioonide kasutamine tundus ka hea versioonina aga siin oli kohe kaks puudust. Esiteks ei ole ma hea illustraator ja spetsiaalse illustraatoriga töötamiseks poleks olnud aega. Ma oleksin kindlasti saanud hakkama keskpärase graafika kujundamisega aga see ei oleks arvatavasti andnud tootest nii konkreetset ülevaadet.
Kõige mõistlikum tundus võtta disainisprindist aega ja uuendada ka SaaS töölaua põhiliste vaadete UI/UX disaini. Lisaks usun, et see aitab Taskily meeskonnal ka toodet parandada.
UI/UX uuendused
Taskily üldine UX (kasutusmugavus) ja ülesehituse loogika on toote tuum. Antud disainisprindi raames ei olnud eesmärk hakata toodet disainima. Kaardistasin ära paar olulisemat komponendi või vaatepõhist kasutusmugavuse probleemi. Uue kasutajaliidese UI/UX disaini kujundamise juures proovisin luua nii kaasaegsemat välimust kui parandada leitud probleemid. Kuhu välja jõudsin saate näha järgnevalt pildilt.
Loodetavasti saame tulevikus osaleda ka Taskily tootedisaini juures ja teha seal juba konkreetsemaid uuendusi.
Maandumislehe kujundamine
Nüüd olid olemas kõik vajalikud jupid (uus logo disain ja SaaS töölaua UI/UX disaini kontseptsioon) hea kodulehe kujunduse loomiseks. Sisutekstide poole pealt otsustasime suures pildis jääda olemasolevate juurde ja neid natukene täpsemaks kirjutada ning paremini organiseerida. Maandumislehe põhiliseks eesmärgiks sai seatud toote selgem tutvustamine, usaldusväärse ja kaasaegse brändi loomine ja tootest huvitatud inimeste kontaktide kogumine. Nüüd tuli Figmas valida fonte, värve ja leida õige struktuur ja ülesehitus sõnumite edastamiseks.
Kolmapäeva 25.10.2023 õhtupoolikul esitlesin järgnevat maandumislehe kujundust kliendile.
"Well, you got me smiling 👍 I can't understand though If I'm a fan of that font, but overall I think I like it quite much so far."
Pole paha nagu ütlevad klassikud. Iga disainiprojekti puhul on uuele kliendile esimese kavandi esitlemine kriitiline moment. Nagu näete on uus maadumislehe kujundus küllaltki omanäoline ja erineb klassikalistest SaaS maandumislehtedest. Pean tunnistama, et rõõm on töötada nende klientidega, kes saavad aru, milleks nad disaineri palkavad ja suudavad ka usaldada. Aga päris valutult meil ei läinud.
Maandumislehe ülesehitus
Kui klassikaline SaaS maandumisleht koosneb enamasti kindlatest sektsioonidest, siis seekord võtsin disainiga teistsuguse suuna.
Kasutajatega SaaS tooted saavad maandumislehel müüa konkreetseid väärtuspakkumisi. Kui palju kasutajad aega või raha säästavad. Näidata klientide tagasisidet ja kommentaare. Avalikustamata tootel selliseid võimalusi ei ole. Otsustasin kasutada "bento gridi", mis on hetkel populaarne disainielement kodulehtede kujundustes. Enamasti kasutatakse "bento gridi" ühe seksiooni puhul. Taskily kodulehe kujunduses, aga otsustasin terve maandumislehe sisu paigutada gridi.
Usun, et selline organiseeritud segadus on kasutajatel natukene huvitavam jälgida ja kuna hoiame sisutekstide mahu lühikese siis suudetakse kogu sisu nii tarbida.
Maandumislehe visuaalne disain
Soovisin kodulehe disaini puhul katsetada natukene teistsugust lähenemist. Kui tõmmata veebidisainis paralleele päris maailmaga, siis füüsika seaduste järgi valguse langemisel, on kõrgemal olevad esemed paremini valgustatud ja paistavad heledamad. Üldiselt on hea praktika, et kodulehtede kujunduste puhul järgitakse füüsika reegleid. See aitab kasutajatele kodulehel kiiremini ja paremini navigeerida ning muudab üldise kasutuskogemuse meeldivamaks. Taskily maandumislehe disaini juures soovisin aga veidi eksperimenteerida ja kasutada värvipalletti risti vastupidi. Sisukaardid ehk elemendid, mis võiks olla esile tõstetud, oleksid tumedamad ja taust heledam. Kas see oli õige või vale otsus, sellest natukene hiljem.
Kodulehe värvid
Seekord võtsin kiiruse mõttes aluseks Harmony värvipalletti. Tegemist on kasutajasõbraliku värvipalletiga mille loomise juures on tähelepanu pööratud ligipääsetavusele. Lisaks on tegemist alles paar päeva tagasi avalikustatud tootega ning selle kasutajate hulk on kindlasti väike.
UI disaini värvide valik on küll huvitav osa kujundaja tööst aga tegelikult väga aeganõudev kui on soov kontrollida erinevate värvide kontrastsust ja luua pallett mis omavahel harmoniseeruks. Disainisprindi puhul töötades alles alustava brändiga on igaljuhul mõistlik kasutada saadaolevaid tööriistu ja automatiseeritud lahendusi.
Fontide valik
Maandumislehe pealkirjade puhul valisin serif tüüpi fondi Cormorant Garamond. Oma nägemuses soovisin kasutada tegelikult kitsamat serif tüüpi fonti. Fontide litsenseerimise peale ei olnud siinkohal mõistlik eelarvet kulutada ja lihtsama arenduse mõttes tegin valiku Google Fontide hulgast.
Nagu juba kliendi esimesest kommentaarist saite lugeda, siis tekitas fondi valik küsimusi. Suures pildis olime väga heas tempos liikunud. Õldine maandumislehe UI/UX disain ja loogika tundus töötavat, meil oli natukene aega fontidega katsetada. Proovisin maandumislehe disainis erinevaid sans-serif kirjatüüpe. Lõppkokkuvõttes jäi nii, et kliendile meeldisid sans-serif fondiga kavandid rohkem, aga panime lukku esialgu valitud serif tüüpi fondiga versiooni.
- Kodulehe kujunduses ei ole tähtis individuaalsetele kasutajate meeldimine või mittemeeldimine.
- Serif font seostub usaldusväärsuse ja kirjatehnikaga. Siin saab tõmmata paralleele projektide juhtimisega. Usun, et üldine tunnetus on sobiv.
- Omapärane. Jah, serif fontide kasutamine tech startuppide veebilehtedel on hetkel trend. Aga üldiselt on nii, et trende järgib ainult < 5% veebilehtedest.
- Hea visuaalne kontrast pealkirjade ja sisutekstide vahel. Huvitav.
Hele ja tume maandumislehe UI disain
Light ja dark mode või day and night mode disainid. Eesti keeles siis võiks kutsuda päeva või öö kujunduseks. Kuna hea kasutusmugavus on lasta kasutajatel valida, kas nad kasutavad digitaalset toodet päeva või öö režiimis, siis on see funktsionaalsus ka Taskilyl tootesse sisse kodeeritud. Esialgne idee oli ka maandumisleht teha mõlema stiiliga. Lõpuks sai see mõte esialgu kõrvale pandud. Tegemist on maandumislehe kujunduse puhul pigem "nice to have" funktsiooniga. Selle arendamine oleks sisu graafika kasutamise puhul aga tähendanud, et kõik pildid tuleb teha kahes versioonis. Aga üldine maandumislehe UI disain on kujundatud nii, et soovi korral saab üsna kergesti luua nii päeva kui öö vaadetega disainid.
Maandumislehe UI disaini detailid
UI disaini võlu ja valu peitub detailides. Võlu on selles, et halva ja keskpärase UI disaini vahe on suur ja kõigile nähtav. Keskpärase ja hea disaini vahe võib peituda ainult 8 või 24 pixslis ja mõne lause ümber tõstmises.
Valu seisneb selles, et ega kuskil ei ole täpselt defineeritud, kuidas ja millal nüüd disain on väga hea. Disainisprindi puhul ei tasu küll oodata täiuslikkuseni viimistletud UI/UX disaini, kuid eesmärk disainerina on iga uue projektiga saada veel paremaks. Osaliselt tuleb disainisprindi ajaline piirang siinkohal kasuks ja saab vältida ülemõtlemist. Eriti alustavate ettevõtete puhul on oluline liikuda keskmisest kiiremas tempos ja teha tippdisaini asemel keskmisest paremat disaini.
Kaks UI/UX disainerit on parem kui üks.
Disainisprindi omapära on selles, et aega mõelda ja arutada väga ei ole. 80-20. 20% ajaga tuleb teha 80% tulemust. Küsisin tagasisidet ka teiselt UI/UX eksperdilt. Üldiselt oli tagasiside positiivne, aga aitas teatud detaile veelgi täiuslikumaks muuta.
Kliendiga arutades jõudsin aga arusaamisele, et esialgne värvide valik on küll huvitav ja omapärane, aga mõjub visuaalselt veidi võõralt. Enamuse kodulehtede disainimisel ei tohiks eesmärgiks võtta midagi väga unikaalset või ainulaadset kujundada, vaid keskenduda meeldiva lõpptulemuse loomisele. Siinkohal otsustasin ikkagi maandumislehe värvide kasutamise loogika ümber mõelda.
Disainisprindi puhul on oluline mõista, et kõiki erinevaid arvamusi ja soove ei ole võimalik läbi katsetada. Sellepärast tasub sprinti läbi viia pigem kogenud UI/UX või graafilise disaineriga, kes tunneb ja teab oma tööd ning suudab paljud asjad kujundada ilma, et peaks Internetist õpetusi juurde otsima. Ideaalis võiks kaasata konsultandina või tagasiside saamiseks ka teisi disainereid. Tähtis on aru saada millised muudatused loovad kõige rohkem väärtus ja tuleks ära teha ning mille puhul võib kasutegur olla väga väike.
Kodulehe UI/UX komponendid
Lisaks nähtavale maandumislehe kujundusele on kodulehtede puhul veel komponentide vaateid, millega tuleb arvestada. Kuidas töötavad nupud kui kasutaja hiirekursoriga peale läheb või vajutab? Mis juhtub vormiga kui kasutaja sisestab andmed, mis ei valideeru= Kui maandumislehe üldine visuaalne stiil oli kinnitatud, siis tuli kiiresti disainida ka vajalikud komponentide vaated. Nii on front-end arendajal lihtne ja selge ülevaade, mida ta peab ehitama hakkama.
Kujundustöö kiiremaks tegemiseks võib kasutada valmis UI-kitte mida siis vastavalt disainitava brändi stiilile modifitseerida. Ma ise disainin enamasti kõik komponendid Figmas ise.
Responsive kujundus
Mobiilseid seadmeid ei tohi ära unustada. Kindlasti jõuavad väga paljud kasutajad Taskily maandumislehele läbi mobiilse seadme. Seega tuli kinnitatud kujundusvaade kujundada ka mobiili ekraanile sobivas mõõdus. Nii saab front-end disainer selge ülevaate kuidas ta peab kodulehe mobiilsetes seadmetes tööle panema.
Disainisprindiga tegime ära
Disainisprindiga sai Taskily endale uue logo, maandumislehe kujunduse ja SaaS töölaua UI/UX disainikontseptsiooni. Loodan, et antud kujundus vastab püstitatud eesmärkidele ja on Taskily teekonna alguses abiks.
Kliendi kommentaar tehtud tööle
When I approached Tanel, I had only a vague idea for my landing page based on Taskily's positioning. From the outset, his expertise was evident. The end product far exceeded my expectations, with every detail being spot on. He didn't stop there; he proactively updated and refined it, elevating the design even further. Throughout the project, responses were prompt and he was always up for a discussion. Working with him was not just about his skills, but also the genuine pleasure of the collaboration.
Disainisprint võib olla väga hea mõte
Seekordne UI/UX disainisprint kukkus siis nii välja. Üldjuhul soovitaks disainisprindi puhul keskenduda pigem ühe konkreetse elemendi või komponendi täiustamisele. Pigem võiks nädalase sprindi asemel arvestada ka 2 või 3 nädalaga. Sellisel juhul jääb lihtsalt tööde vahele veidi hingetõmbe aega ja jõuab paremini tagasisidet saata ning vastu võtta. Disainisprindi läbiviimisel ei tasu meeskonda ja otsustajate arvu väga suureks muuta, kuna vastasel juhul hakkab suhlemine ja eri arvamuste ühildamine töö tempot pidurdama.
Disainisprindi tulemuseks ei pruugi alati olla valmis kodulehe kujundus või digitaalne toode. Peale disainisprinti on arvatavasti palju selgem, kuidas ja mis suunas võiks edasi töötada. Igal juhul on tegemist väga kiire ja taskukohase võimalusega, kuidas oma ettevõtte disaini taset tõsta. Juba kontseptsioonide disainimine saab aidata mõista disaini olulisust ja koguda kasutajatelt vajalikku tagasisidet.
Kui soovid ka kodulehe disaini või maandumislehe kujundust - võta ühendust.