32 vrcholů

O projektu

32 vrcholů je turistická výzva. Navrhl jsem pro ni nové logo, malý brand a webovou aplikaci. Lidé si v ní vyberou výzvu (například štreku v pohoří, postup se počítá z 32 vrcholů), zvolí registrační balíček s odměnami, zaplatí převodem a po každém zdolání vrcholu zapisují aktivitu. Aplikace má desktopovou i mobilní podobu.

Klientem je projekt 32 vrcholů. Výzva míří na lidi, kteří rádi zdolávají překážky a chodí na výpravy do hor a na túry. Web ani aplikace před tím neexistovaly, začínalo se od nuly.

Moje role

Jako UX/UI designér a product designér jsem navrhl logo, malý brand a celou webovou aplikaci: od struktury obrazovek přes komponenty a vizuální definici po desktopové a mobilní varianty. Vývoj jsem nedělal. Spolupracoval jsem s jedním vývojářem. S klientkou jsem komunikoval přímo přes facebookový chat, facebookovou skupinu a podle potřeby telefonicky. Prezentace jsem nahrával na video, které si mohla v klidu prohlédnout, o každé aktualizaci jsem ji informoval a posílal jí screenshoty a dotazy k řešení.

Úkol: nové logo

Původní logo byl šedý kruh s horami a rukopisným nápisem 32vrcholu.cz. Použil jsem ho jako podklad, obtáhl ho a přestavěl na přesné konstrukci. Výsledkem je kruhový odznak, který funguje jako značka, jako ikona i na tmavém pozadí.

Revize původního loga

Než jsem logo začal přepracovávat, udělal jsem jeho revizi. Poslal jsem klientce dokument, ve kterém popisuji, kde vidím nekonzistence, nedostatky a místa, kde logo není funkční. Na základě těchto zjištění jsem ho přepracoval.

Dokument vycházel z konkrétních měření. Mezikruží nemá stejnou šířku (nahoře a dole je přibližně 38 px, po stranách jinak), nápis není geometricky vystředěný a jeho oblouk nemá stálé zakřivení. Dva pruhy v lemu se při zmenšení slévají v jeden, takže doporučením byl jediný silnější lem. Plné logo s textem je čitelné do šířky přibližně 150 px a pod 75 px se má zobrazovat jen ikona (favicon, avatar, mapová značka).

Samostatné téma byl odznakový koncept. Ilustrace odznaků výzev vznikly z původního badge vizuálu a lidé si je s projektem spojují, proto jsem je doporučil ponechat jako produktové prvky. Jako hlavní logo ale badge se stužkami, dvojitými pruhy a nápisy v reálném použití nefunguje: jemné detaily se při malé velikosti slévají a silueta se mění mezi médii. Je také drahý na výšivku, ražbu a laser. Logo podle mě není celá prezentace, je to spouštěč rozpoznání.

Navrhl jsem také odebrat kroužek nad písmenem ů, mezeru v názvu a koncovku .cz. Bez diakritiky a mezery působí název jako jeden celek, lépe se zobrazuje v různých fontech a v malých velikostech a bez domény zůstává značka volná pro jiné kanály.

Klientka nechtěla úplně nové logo. Lidé jsou na stávající logo zvyklí, mají ho rádi a mají k němu navázané materiály, vlastní odkazy, odznaky a potisky na trička. Úplný rebranding proto nedával smysl, a tak jsem logo spíš zjednodušil. Zachoval jsem klíčové kotvy: barvy, hřeben hor a oblouk.

Od obtažení k mřížce

Tvar jsem přestavěl na mřížce ze tří soustředných kruhů. Oblouk s textem, hora a slunce se tak drží ve stejných poměrech a nápis se dá vést po obvodu. Kontrolní vrstvy ukazují, jak jsem text na oblouk vedl a ověřoval.

Atmosféra a varianty

Atmosféru jsem hledal ve fotografiích z hor. Vedle odznaku jsem zkoušel horizontální variantu s malou ikonou, linkovou verzi a ikonu hory ve tvaru srdce v červené. Nakonec zůstal kruhový odznak.

Výsledek: odznak

Oranžové slunce v pásech, tmavě modrá hora s bílým vrcholem a nápis 32VRCHOLU po obvodu. K tomu světlá a tmavá verze a samostatná ikona pro avatar a malé velikosti.

Úkol: webová aplikace

Aplikace provede člověka od prvního vstupu až k zapsání prvního zdolaného vrcholu. Každý krok musí říct, co přijde dál: od registrace přes detail výzvy a balíček po platbu a první zápis.

Uzamčený detail výzvy jako pozvánka

Detail výzvy je před přihlášením uzamčený. Místo prázdné stránky ukazuje rozmazaný seznam vrcholů a jednu výzvu k akci, takže člověk vidí, co ho čeká, a ví, jak to odemknout. Po přihlášení se obsah odkryje a zdolané vrcholy jsou označené datem a hodnocením.

Registrační balíčky a odměny

Čtyři úrovně (základní, stříbrný, zlatý a exkluzivní) se liší odměnami. Co v dané úrovni chybí, je ve výpisu šedé, takže rozdíl je vidět bez čtení tabulky, a zlatý balíček je označený jako oblíbená volba. Odměny mají vlastní stránku s obrázky (diplom, medaile, mapa, tričko).

Platba převodem

Platba probíhá převodem. Stránka ukazuje částku, variabilní symbol, číslo účtu a QR kód a pod tím tři věci, které se stanou po zaplacení: potvrzení e-mailem, aktivace balíčku a příprava odměn. Člověk tak ví, co bude dál.

Zápis zdolání

Na detailu vrcholu je hlavní akce Zapsat zdolání. Formulář má datum, počet kroků, poznámku, fotku a hodnocení vrcholu. Než záznam vznikne, stránka ukazuje prázdný stav s tlačítkem Zahájit výšlap, po zápisu přehled aktivity.

Dashboard a seznam výzev

Dashboard sdružuje feed příspěvků a postranní panel s aktivními výzvami a postupem, týmem, přehledem a historií. Seznam výzev ukazuje karty štrek s filtrem mezi celoročními výzvami a štrekami.

Desktop a mobil

Hlavní obrazovky mají desktopovou i mobilní podobu. Na mobilu přechází navigace do dolní lišty (Dashboard, Seznam výzev, Skupiny, Oznámení) a uživatelské menu se otevírá jako panel.

Návrh pro použití v terénu

Většina lidí používá aplikaci venku, mimo civilizaci, a s tím jsem při návrhu počítal. Aplikace měla být jednoduchá, aby se v ní člověk zorientoval hned, a dostatečně kontrastní, protože displej na přímém slunci nebo za špatného počasí je špatně vidět. V horách navíc nemusí být signál, proto se musí načíst i při slabém připojení.

Jak probíhala práce

Práce běžela dvanáct týdnů. První dva týdny patřily přípravě a definici (Figma, vizuální definice, komponenty, research, proces projektu a první výkop dashboardu). Pak následovalo devět fází, v každé jedna obrazovka nebo oblast, a závěrečné iterace.

Každá fáze končila uzavřenou obrazovkou a po několika fázích přišlo učesání Figmy, aby zůstal soubor uklizený. Z procesu si beru dvě věci. Dělení práce na fáze po obrazovkách s uzavřeným výstupem mi pomohlo udržet přehled i v dvanácti týdnech. A když spolupráce běží přes víc kanálů, tady chat, skupinu, telefon i videozáznamy, je potřeba mít jedno místo, kde jsou rozhodnutí zapsaná, aby se nedělo, že každý pracuje s jinou verzí domluvy.

Výsledky

Co z toho beru

Nejvíc práce v aplikaci odvedla návaznost kroků. Uzamčený detail, balíčky a platba tvoří jeden příběh vstupu a každý krok musí říct, co bude dál.