Postavili sme prezentačný web a predajný funnel pre Rasťa Kiavčina, zakladateľa marketingovej komunity Digitálci a spolumajiteľa ToTheMoon Studio. Pôvodný web bežal na WordPresse s Elementorom, my sme ho nahradili kompletne custom riešením v Next.js s plain CSS, podporou troch jazykov a naživo napojeným Klaviyo formulárom. Submit rate na kľúčovom formulári stúpol z 32 % na 91 %.
(VÍZIA)
Web mal fungovať ako digitálne stelesnenie značky Kiavčin, teda niečo, čo na prvý pohľad odkomunikuje jeho kvalitu a odlíši ho od ostatných webov v podobnej téme (kouči, tvorcovia, marketingové komunity). Zároveň mal byť extrémne rýchly, aby rýchlosť webu podporovala dojem "táto značka má veci pod kontrolou", nie ho podkopávala pomalým načítaním.
(PROBLÉM)
Pôvodný web na WordPresse a Elementore nedokázal držať krok s tým, ako rýchlo a výrazne Kiavčin buduje svoju značku na sociálnych sieťach. Bol pomalší, vizuálne generickejší a nedal sa dobre škálovať naprieč jazykmi ani novým sekciám, ktoré si rýchlo rastúca komunita Digitálci vyžadovala. Formulár na prihlásenie mal navyše nízky submit rate (32 %) vzhľadom na počet návštev.
(NÁŠ POSTUP)
Celý UX dizajn webu sme spracovali kompletne vo Figme, od wireframov cez informačnú architektúru až po finálne rozloženie jednotlivých sekcií, ešte pred tým, než sme čokoľvek začali stavať v kóde. Vychádzali sme z toho, že Kiavčin má silnú, veľmi rozpoznateľnú vizuálnu identitu na sociálnych sieťach, takže web sa jej musel prispôsobiť. Namiesto štandardnej šablóny sme postavili unifikovaný, škálovateľný systém komponentov v Next.js, ktorý zvláda flashy dizajn s množstvom absolútne pozicovaných prvkov a zároveň drží čitateľnú štruktúru podľa bežných scanovacích vzorcov. Súbežne sme riešili i18n pre SK, CZ a EN (default SK), JSON-LD štruktúrované dáta prispôsobené presne obsahu jednotlivých stránok a priame napojenie na Klaviyo API, aby mal klient v reálnom čase prehľad o výkone formulárov bez nutnosti manuálneho reportovania.
(POTREBY UŽÍVATEĽA)
Návštevník potrebuje za pár sekúnd pochopiť, kto je Kiavčin a prečo mu má veriť, a potom sa bez trenia dostať k akcii, ktorú práve hľadá, teda k bezplatnému tréningu, členstvu v Digitálcoch alebo ku kontaktu na spoluprácu. Vzhľadom na to, že veľa návštevníkov prichádza z odkazov v reelsoch a storyčkách, web musel fungovať bezchybne aj pri veľmi rýchlom, "scrollujúcom" správaní.
(VÝZVY)
Najväčšia výzva bola premeniť dizajnovo veľmi expresívny koncept (výrazná typografia, absolútne pozicované dekoratívne prvky, "street" štýl) na funkčné UX riešenie, ktoré zostane používateľovi zrozumiteľné a nerozbije scanovacie vzorce, na ktoré sú návštevníci zvyknutí. Druhá výzva bola technická: rovnaký vizuálny jazyk sa musel dať znovupoužiť naprieč viacerými jazykovými verziami bez toho, aby sme dizajn pri každej mutácii stavali odznova, čo viedlo k rozhodnutiu investovať do unifikovaného component systému namiesto rýchlejších, ale menej škálovateľných riešení.
(USER CENTRIC)
Aj napriek výraznému, "hlučnému" dizajnu sme v UX fáze vo Figme dbali na to, aby návštevník vedel web rýchlo preskenovať a nájsť cestu k jasnej akcii, hlavne k prihláseniu na tréning alebo do komunity Digitálci. Veľká časť návštevnosti prichádza priamo zo sociálnych sietí na mobile, takže rýchlosť načítania bola rovnako súčasťou UX ako súčasťou brandu.
Vybrané projekty
(projekt)
GUMIDECK - Eshop
Kategória
E-shopy
Klient
GUMIDECK
Doba trvania
2 týždne
(projekt)
Sophia Cigerova
Kategória
Tvorba webstránok
Klient
Sophia Cígerová
Doba trvania
1 týždeň
(projekt)
BE-PRIM
Kategória
Tvorba webstránok
Klient
BE-PRIM
Doba trvania
1 týždeň
(projekt)
Harbor Equity
Kategória
Tvorba webstránok
Klient
Harbor Equity a.s.
Doba trvania
2 týždne
