Lazarev.agency
Jakisnyj UX/UI dyzajn potriben usim. Nu dobre, ne usim, lyše tym, hto pragne stvoryty onlajn-majdančyk, jakyj efektyvno ta prozoro bude komunikuvaty z ljuďmy ta prynosyty rezuľtaty. Okrim biznesiv, ce stosujeťsja i blagodijnyh fondiv. Dlja ostannih takož nadvažlyvo čitko donesty suť svojeї dijaľnosti ta zdobuty cinnyj aktyv — doviru ljudej.
Ščob dosjagty ćogo čerez vizuaľnu komunikaciju, dyzajn — odyn z potužnyh instrumentiv.
Same nym naša Lazarev.agency ↗ j skorystalasja, koly my pracjuvaly nad novym volonterśkym projektom — redyzajnom vebsajtu blagodijnogo fondu Sergija Prytuly↗. Jaki zavdannja vyrišuvaly, jakyj pidhid obraly ta ščo z ćogo vyjšlo? Diznajteś u kejs-stadi.
Vyklyky ta zavdannja projektu
Versijeju «do» buv sajt fondu, osnovna funkcija jakogo poljagala u tomu, ščo korystuvači mogly podavaty zajavky na dopomogu, zapovnyvšy speciaľnu formu ta/abo zrobyty blagodijnyj vnesok za rekvizytamy.
Vebsajtu brakuvalo čitkoї komunikaciї, jaka b donesla korystuvačam detaľnu informaciju pro sam blagodijnyj fond, jogo robotu ta zbory, jaki vin provodyť.
Dyzajn vebsajtu blagodijnogo fondu Sergija Prytuly
Do togo ž u rozdili FAQ buly lyše bazovi zapytannja, jakyh vyjavylosja nedostatńo. Tomu, koly u vidviduvačiv sajtu vynykaly problemy, zazvyčaj vony zvertalysja do kol-centru organizaciї ta bezposeredńo do fondu abo jogo zasnovnyka u socmerežah. Jak naslidok, ce perevantažuvalo garjaču liniju fondu.
Inšoju problemoju bulo te, ščo storinky dvoh golovnyh naprjamiv roboty fondu, vijśkova ta gumanitarna dopomogy, znahodylysja na okremyh domenah z riznymy vizuaľnymy styljamy. Takyj pidhid buv dalekyj vid zručnosti ta poslidovnosti.
Use ce razom vyklykalo v audytoriї nedoviru do fondu ta jogo dijaľnosti, a otže ljudy mogly menše donatyty.
Tomu sered osnovnyh zavdań Lazarev. buly:
- stvoryty sajt, ščo stane golovnym habom, na jakomu ljudy znajduť neobhidnu informaciju pro fond, jogo proces roboty, peregljadatymuť novyny, zvitnisť ta zakupivli;
- ob’jednaty kategoriї militarnoї ta gumanitarnoї dopomogy na odnomu sajti;
- maksymaľno pokraščyty vzajemodiju ljudej iz sajtom fondu j zaohočuvaty ljudej bezpereškodno donatyty jak v Ukraїni, tak i za її mežamy.
A teper do dyzajnu.
Ale spočatku bulo doslidžennja
Dyzajn-proces Lazarev.agency gnučkyj, ale doslidžennja — ce ta konstanta, jaka formuje naši podaľši kroky.
Juzabiliti audyt
My proanalizuvaty sajt, doslidyly, ščo i jak pracjuje, ščob rozumity, jak možemo pokraščyty dosvid korystuvača. Napryklad, naša komanda vyjavyla, ščo informacija na blokah z platižnymy rekvizytamy fondu nestrukturovana, tomu її važko peregljadaty.
Šče odnijeju problemoju bula adaptyvnisť sajtu pid rizni prystroї. Vidtak golovne menju zlyvalosja z fonom vebstorinky, ščo stvorjuvalo pereškody dlja korystuvaćkogo dosvidu.
Poperednij dyzajn
Vebstorinka sajtu fondu do redyzajnu
Novyj dyzajn
Vebstorinka sajtu fondu pislja redyzajnu
Dyzajn vebstorinky dlja donativ
Naša komanda takož vyvčyla analityku vebsajtu, proanalizuvala socmereži fondu ta komentari, jaki ljudy zalyšajuť pid dopysamy. Ce nam dopomoglo znajty informaciju pro problemy, z jakymy vony stykajuťsja, koly vzajemodijuť iz sajtom fondu. Napryklad, my diznalysja, ščo ljudy ne mogly znajty formu dlja zapovnennja na otrymannja dopomogy. Vyjavylosja, vona znahodylasja vseredyni storinky j zagubylasja sered rešty tekstu.
Naša komanda takož pospilkuvalasja z kol-centrom fondu, ščob diznatysja, z jakymy zapytannjamy ljudy zvertajuťsja najčastiše. Spojler, my dodaly їh v onovlenyj rozdil zapytannja-vidpoviď.
Analiz konkurentiv
Oskiľky blagodijnyj fond Sergija Prytuly pracjuje u dosyť unikaľnomu naprjami, jak ot militarna dopomoga, to identyčnyh organizacij ne tak bagato. Osnovnymy konkurentamy fondu je «Povernyś žyvym» ta United24. Tomu, ščob znajty biľš glybynni insajty, my proanalizuvaly takož neprjamyh konkurentiv jak KOLO, Volonterska, Donor.ua toščo.
Cej analiz dopomig nam pobačyty, jak možna zrobyty dijaľnisť fondu prozorišoju zavdjaky zvitnosti, de ljudy peregljadatymuť detali ščodo zakupiveľ, jaki robyť organizacija.
Zibravšy dani ta cinni insajty, my sformuvaly gipotezy j vzjalysja їh perevirjaty z ljuďmy.
Opytuvannja ta interv’ju
Za dopomogoju opytuvań ta interv’ju my spilkuvalysja z vijśkovymy, volonteramy, biznesamy, jaki pragnuť spivpracjuvaty z fondom i zagalom ukraїncjamy, jaki robljať blagodijni vnesky.
Našoju metoju bulo zrozumity vzajemodiju z fondamy kožnogo segmentu, vyjavyty problemy, potreby, očikuvannja ta paterny povedinky ljudej. Napryklad, my diznalysja, ščo ščob volonteram zapovnyty zajavku na otrymannja dopomogy, potribno vytratyty čymalo času j maty specyfični znannja. Aby sprostyty cej proces, my dodaly na vebstorinci formu dlja zapovnennja ta instrukciju, z jakymy naprjamamy pracjuje fond, jaku dopomogu i jak možna otrymaty.
Vebstorinky gumanitarnoї ta vijśkovoї dopomogy
“Z vijśkovymy my zastosuvaly rizni sposoby komunikaciї, ščob bulo zručno dlja vsih — hto ne mig vzjaty učasť v interv’ju, my prosyly zapovnjuvaty opytuvaľnyk. Takož odnym z vyklykiv ćogo projektu bulo te, ščo my maly spravu z vijśkovoju informacijeju j tomu dejaki dani zalyšylysja konfidencijnymy”
Volodymyr Hljupin
Head of UX
Usju informaciju, jaku my zibraly, naša komanda peretvoryla na ideї, jak zrobyty vzajemodiju ljudej z fondom maksymaľno prostoju ta zaohočuvaty ukraїnciv biľše pidtrymuvaty blagodijni iniciatyvy organizaciї. Pogljańmo, jak my ci ideї vtilyly v dyzajn.
UX-častyna: budujemo dosvid korystuvača
Perš za vse, onovlenyj sajt stav platformoju, ščo ob’jednuje dva golovni naprjamy dijaľnosti fondu — vijśkovu ta gumanitarnu dopomogu.
Golovna storinka sajtu zustričaje ljudej 3D-modellju narodnogo Bajraktara, velykymy knopkamy, jaki zaklykajuť vidviduvačiv zrobyty vnesok abo podaty zapyt na dopomogu. Tut že audytorija može peregljanuty aktuaľni zbory fondu ta pidtrymaty їh gryvneju abo inšoju valjutoju.
Do reči pro ostannje.
Novyj sposib donatyty
Odnym iz vyklykiv, z jakymy mala spravu komanda fondu te, ščo u poperednij versiї sajtu valjutni rahunky bulo skladno znajty. Tomu ljudy, jaki meškajuť za kordonom často robyly vnesky na gryvnevi kartky. Čerez ce fond vtračav častynu donatu pid čas konvertaciї. Našym rišennjam stav peremykač, za dopomogoju jakogo donory možuť perekazuvaty groši na valjutni rahunky fondu.
A šče, zirkoju vebstorinky finansovoї dopomogy stav interaktyvnyj vidžet, jakyj my stvoryly, ščob zaohočuvaty ljudej donatyty ta sprostyty sam proces perekazu koštiv. Jogo osoblyvisť v tomu, ščo vin reaguje na buď-jaku sumu frazoju Sergija Prytuly.
Do reči v kinci ljutogo my zapustyly novyj sajt, a vže čerez dva tyžni komanda fondu počala otrymuvaty biľše donativ čerez vidžet, niž rekvizyty.
Takož sered promižnyh rezuľtativ je zrostannja seredńogo času zalučennja korystuvačiv. U sični ta ljutomu pokaznyk buv 14 sekund, a v berezni j kvitni — 26 sekund. A šče zavdjaky gejmifikaciї storinky donativ, serednij čas vzajemodiї praktyčno podvoїvsja z 10 sekund do 18. Kiľkisť vidviduvačiv, jaki pokynuly sajt bez buď-jakoї diї navpaky zmenšylasja na 18%.
Peremykač miž gryvnevymy ta valjutnymy rahunkamy fondu ta interaktyvnyj vidžet dlja donativ
Vebstorinka «Partnery», ščob pidsylyty pidtrymku fondu
Ščob zaohočuvaty biznes spivpracjuvaty z fondom ta pidtrymuvaty jogo blagodijni iniciatyvy, my onovyly vebstorinku «Partnery». Tut jak kompaniї, tak i okremi ljudy možuť diznatysja pro typy partnerstva, jak počaty spivpracjuvaty z fondom i jaki materialy dlja ćogo potribni.
Dyzajn vebstorinky «Partnery»
Informacijnyj hab fondu
Zrobyty sajt prozoroju bazoju znań pro fond — odna z golovnyh cilej projektu, jaka stala osnovoju našoї roboty. Teper kožen vidviduvač resursu može diznatysja, jak same pracjuje organizacija, a takož pro її projekty jak aktuaľni, tak i zaveršeni ta peregljanuty detaľnu zvitnisť.
“Koly my pracjuvaly nad projektom, našoju cillju bulo zrobyty novu versiju dyzajnu, za dopomogoju jakogo kožna vzajemodija korystuvačiv iz sajtom je efektyvnoju, zrozumiloju ta prozoroju.”
Oleksandr Golovko
UX Designer
Dyzajn vebstorinky «Projekty»
Novyny
Ta na ćomu my ne zupynylysja. Razom iz komandoju fondu my vyrišyly, ščo važlyvo takož dodaty novynnyj rozdil z presrelizamy ta onovlennjamy. Takyj hid dopomagaje informuvaty ljudej pro dijaľnisť organizaciї ta pidtrymuvaty prozorisť roboty fondu.
Dyzajn vebstorinky «Novyny»
Pytannja-vidpovidi
U vidviduvačiv sajtu fondu je zapytannja, a my poturbuvalysja, ščob vony znajšly na nyh vidpovidi. Naša komanda stvoryla cilu biblioteku z informacijeju, jaka može cikavyty ljudej.
Takož dlja kožnogo zapytannja my zrobyly okremu vebstorinku, de korystuvači znajduť pov’jazani temy ta kontakty dlja zv’jazku z garjačoju linijeju fondu, jakščo їm potribno biľše informaciї.
Dyzajn rozdilu «Pytannja-vidpovidi»
Ščo po UI-častyni?
My pobuduvaly naš pidhid do vizuaľnogo dyzajnu sajtu na universaľnosti ta prostoti. A ce označaje, ščo veś kontent povynen balansuvaty miž tym, ščob buty strukturovanym, čytabeľnym i pryvablyvym.
Takož važlyvym momentom bulo te, ščob sajt vantažyvsja maksymaľno švydko pry riznij švydkosti internetu na buď-jakomu prystroї. Adže ljudy, jaki potrebujuť zv’jazatysja z fondom — ce vijśkovi ta volontery, jaki možuť znahodytysja u miscjah, de je problemy zi zv’jazkom. Tomu my napovnyly sajt, lyše neobhidnym kontentom ta unykaly velykoї kiľkosti zobražeń, animacij ta inšyh elementiv, jaki možuť jogo obtjažuvaty.
Ta ce ne označaje, ščo їh zovsim nemaje. Naša komanda rozrobyla brendovi 3D-modeli, jaki vidobražajuť konkretnyj rozdil sajtu, napryklad, gumanitarna, vijśkova dopomoga, zvitnisť toščo.
“Koly my pracjuvaly nad 3D-modeljamy, nam važlyvo bulo zberegty garmoniju miž tym, ščob dodaty vizuaľnoї estetyky ta ne peretjaguvaty usju uvagu na neї”
Anna Dem’janenko
Lead Product Designer
Brendovi 3D-modeli dlja sajtu
Sitka
I nasamkineć — moduľna sitka sajtu. My zrobyly її z 3-4 kolonkamy dlja togo, ščob ljudy z peršogo ekranu bačyly plašku iz zaklykom zrobyty vnesok, jaka suprovodžuvatyme їh po vsij vebstorinci. A ce pidvyščuje šansy konversiї — u ćomu vypadku donatu.
Vebstorinka dlja donativ
Koly ž dyzajn buv gotovyj, my peredaly estafetu našym partneram, komandi rozrobnykiv Brights↗ .
“Kožna zadača, jaku my vykonujemo u Fondi, — vid zakupivli bronetehniky do posta u socmerežah, — sprjamovana na te, ščob dopomagaty Sylam Oborony Ukraїny, a takož cyviľnym na deokupovanyh i pryfrontovyh terytorijah. Dlja ćogo zokrema potribno pidtrymuvaty riveń doviry do organizaciї, akumuljuvaty donaty, zalučaty partneriv. Sajt takož maje pracjuvaty na ce.
Komandy Lazarev. i Brights provely kolosaľnu robotu, vyvčajučy konkretni zadači Fondu i rozrobljajučy rišennja, jaki dopomagajuť nam zvituvaty pered blagodijnykamy ta fandrejzyty košty na nastupni zakupivli.
My vdjačni obom kompanijam za robotu nad onovlenym sajtom Fondu Sergija Prytuly. I okremo djakujemo, ščo vony zrobyly ce pro bono. Ce dopomoglo nam zekonomyty značnu častku okremogo operacijnogo bjudžetu fondu”
Anna Gvozdjar
Dyrektorka Blagodijnogo Fondu Sergija Prytuly
Zamisť vysnovku
Robota nad dyzajnom sajtu stala cikavym, važlyvym i vodnočas skladnym projektom dlja našoї komandy. Adže nam vypala možlyvisť zrobyty vlasnyj vnesok v peremogu ne lyše donatamy, ale tym, ščo my vmijemo najkrašče — buduvaty dosvid korystuvača, jakyj prynosyť rezuľtaty.
[Kejs-stadi Lazarev.agency]