Vysvetliť novú kategóriu
Prepojiť mobilné služby a budovanie úverovej histórie tak, aby to pôsobilo jednoducho, dôveryhodne a malo okamžitú hodnotu.
Prípadová štúdia – Systém značky a produktové UI/UX
Jedna identita. Každá digitálna cesta.
Perch Mobile nepotreboval len nový vzhľad. Potreboval prepojený zážitok, ktorý zákazníka prevedie od prvého dojmu zo značky cez výber paušálu a objednávku až po konverziu, bez straty prehľadnosti aj osobnosti.
Recommended plan
$19.99 /mo
Complete your order
Find your best plan4 steps
1
Pôvodná vizuálna identita vytvorená od základov
4
Prepojený web a produktové cesty navrhnuté v jednom jazyku
Desktop + Mobil
Responzívne správanie premyslené naprieč kľúčovými časťami
1
Spoločný zdroj pravdy vo Figme pre dizajn aj vývoj
01 – Prehľad projektu
Značka a zážitok ako jeden systém
Minerva Visuals vytvorila kompletnú vizuálnu identitu Perch Mobile a následne ju pretavila do škálovateľného digitálneho jazyka pre získavanie zákazníkov, vysvetlenie produktu, konverziu aj objednávku.
Rozsah spolupráce
Práca začala na úrovni identity: logo, farby, typografia, obrazový štýl a art direction. Tieto základy sa stali referenčným bodom pre každé digitálne rozhodnutie, od marketingovej úvodnej sekcie a kampaňovej karty až po formulárové pole, výber paušálu, ukazovateľ priebehu a potvrdenie objednávky.
Vizuálna identitaKreatívne vedenieUI/UX dizajnResponzívny dizajnInterakčné tokyOdovzdanie vo Figme
Prísľub produktu
Perch spája cenovo dostupné mobilné služby s nástrojmi, ktoré zákazníkom pomáhajú budovať úverovú históriu. Rozhranie preto muselo pôsobiť optimisticky a motivujúco, no zároveň dôveryhodne, zrozumiteľne a bez zbytočných prekážok vo chvíľach, keď ide o paušály, platby a osobné údaje.
02 – Problém
Odvážna identita musela fungovať aj ako prehľadný produkt
Perch potreboval výraznú značku pre mladých, no jeho digitálny zážitok musel zároveň vysvetliť neznámu ponuku, sprevádzať pri výbere paušálu a získať si dôveru pri objednávke.
Zjednotiť rôzne cesty
Udržať kampaňové stránky, výber paušálu, onboarding aj objednávku vizuálne prepojené bez toho, aby každá stránka musela mať rovnaké rozloženie.
Zachovať prehľadnosť konverzie
Využiť energickú vizuálnu identitu bez toho, aby prehlušila ceny, formuláre, výbery, priebeh či rozhodovanie o platbe.
Navrhnúť responzívne správanie
Prispôsobiť hutné informácie o paušáloch a objednávke pre mobil a zachovať viditeľnú hierarchiu, stav aj ďalšie kroky.
Zladiť dizajn a vývoj
Dať vývoju spoľahlivú referenciu pre rozloženie, interakčné stavy a úpravy počas celej realizácie.
Umožniť udržateľný rast
Vytvoriť opakovateľné vizuálne vzory a vzory rozhrania, na ktorých sa dajú stavať nové stránky a zákaznícke toky bez začínania odznova.
03 – Náš prístup
Od princípov identity k opakovane použiteľným produktovým vzorom
Systém vznikal ako prepojená postupnosť. Rozhodnutia o značke určili jazyk, produktové vzory ho urobili použiteľným, kompletné cesty ho otestovali a spolupráca ho preniesla do živého webu.
Krok 1
Definovať identitu
Postaviť značku, paletu, typografiu, obrazový štýl a tón na slobode, pokroku a sebavedomej voľbe.
Krok 2
Preniesť do UI
Premeniť základy značky na navigáciu, tlačidlá, karty, polia, výbery, priebeh a stavy spätnej väzby.
Krok 3
Navrhnúť cesty
Uplatniť systém v marketingu, stáži, odporúčaní paušálu, objednávke aj responzívnych rozloženiach.
Krok 4
Odovzdať a vyladiť
Cez Figmu, e-mail a Zoom riešiť otázky, komunikovať úpravy a podporovať implementáciu.
Vizuálne základy
Jazyk značky navrhnutý pre pohyb
Identita Perch spája rozpoznateľnú značku vtáka a písmena s vysoko kontrastnými čiernobielymi fotografiami, energickou fialovou a optimistickým limetkovým akcentom.
Systém zážitku
Jeden vizuálny jazyk prispôsobený každej úlohe
Pozrite sa, ako systém prechádzal medzi výrazným kampaňovým rozprávaním a štruktúrovanými produktovými rozhodnutiami.
Sprevádzaný výber
Sprievodca odporúčaním paušálu
Viacstupňový dotazník uľahčuje porovnávanie mobilných paušálov tým, že z osobného používania vytvorí sprevádzané odporúčanie.
- Viditeľný krok aj percentuálny priebeh
- Jednoduché výbery a jasné ďalšie kroky
- Rýchla skratka pre rozhodnutých používateľov
- Responzívna hierarchia pre desktop aj mobil
Konverzný tok
Objednávka a aktivácia
Objednávka vyvažuje fakturačné údaje a údaje o zariadení so stále viditeľným súhrnom paušálu, takže zákazník rozumie tomu, čo vypĺňa, aj tomu, čo kupuje.
- Paušál a cena zostávajú stále na očiach
- Fakturácia, IMEI a objednávka sú prehľadne zoskupené
- Overenie a potvrdenie úspechu uzatvárajú proces
- Desktopová aj mobilná verzia majú rovnakú hierarchiu
Kampaňový zážitok
Landing page stáže
Výraznejšia strana systému využíva rovnaké základy redakčnejším spôsobom: silnú typografiu, rozprávanie cez obraz, dôkazy a integrovaný prihlasovací formulár.
- Posolstvo kampane a prihláška hneď na prvej obrazovke
- Opakovateľné karty výhod a referencií
- Integrovaný prihlasovací formulár so súhlasmi
- Spoločná navigácia, pätička, paleta a správanie výziev k akcii
Rozšírený systém
Stránka O nás a podporné stránky
Koncepty ďalších stránok ukazujú, ako rovnaká identita a základy UI unesú aj dlhšie firemné rozprávanie a zostanú pritom prepojené so zvyškom zážitku Perch.
- Spoločný systém navigácie a pätičky
- Jednotná hierarchia sekcií a jazyk kariet
- Obrazový štýl značky a redakčná kompozícia
- Opakovane použiteľné výzvy k akcii naprieč typmi stránok
Zrealizovaný výsledok
Web Perch Mobile
Živý web prenáša systém do verejnej zákazníckej cesty, ktorá vysvetľuje produkt, porovnáva ponuku, predstavuje ceny a vedie návštevníkov k výberu paušálu.
- Prezentácia v duchu značky, no zameraná na konverziu
- Jednotné vzory pre ceny, porovnania a funkcie
- Jasné cesty pri prechode od operátora a výbere paušálu
- Responzívny zážitok implementoval vývojár Perch
Od dizajnu k vývoju
Spoločná referencia, nie jednorazové odovzdanie
Minerva Visuals počas celej realizácie spolupracovala priamo s vývojárom Perch Jimom Hendersonom, aby otázky aj úpravy zostali prepojené so zdrojovým dizajnom.
Figma ako zdroj pravdy
Rozloženia, responzívne kompozície, interakčné toky, zoskupenia polí aj úpravy zostali viditeľné v jednom spoločnom dizajnovom prostredí, čo počas vývoja znižovalo nejasnosti.
RozloženiaResponzívne zobrazeniaStavy tokovKomentáre
Priamy dialóg pri implementácii
Počas realizácie sme cez e-mail a stretnutia na Zoome preberali požiadavky, odpovedali na otázky a zlaďovali zámer dizajnu s obmedzeniami vývoja a úpravami.
E-mailZoomKomentáre vo FigmePostupná realizácia
04 – Výsledky
Rozpoznateľná značka s praktickou digitálnou chrbticou
Výsledkom nie je súbor izolovaných obrazoviek. Je to prepojená identita a jazyk rozhrania, ktorý sa prispôsobí rozprávaniu príbehu, výberu paušálu, formulárom aj nákupu.
Jednotná zákaznícka skúsenosť
Rovnaké vizuálne a interakčné princípy spájajú marketing, výber paušálu aj objednávku.
Jasnejšia referencia pre vývoj
Figma, komentáre a priame stretnutia dali implementácii udržiavaný zdroj rozhodnutí a úprav.
Opakovane použiteľné produktové vzory
Karty, polia, tlačidlá, výbery, priebeh aj spätná väzba sa dajú rozšíriť do budúcich ciest.
Značka pretavená do správania
Sebavedomie a optimizmus Perch sa prejavujú nielen vo vizuáli, ale aj v hierarchii, navádzaní a interakcii.
Časté otázky
Projekt v priamych odpovediach
Stručný pohľad na úlohu, rozsah a realizáciu.
Minerva Visuals vytvorila kompletnú vizuálnu identitu a navrhla UI/UX hlavného webu, objednávky, sprievodcu odporúčaním paušálu, kampane na stáž aj responzívnych rozložení.
Základná paleta, typografia, obrazový štýl a osobnosť značky sa premenili na opakovateľné vzory navigácie, tlačidiel, kariet, formulárov, výberov, priebehu a spätnej väzby, ktoré sa potom uplatnili v celých zákazníckych cestách.
Minerva Visuals počas celej realizácie spolupracovala priamo s vývojárom Perch Jimom Hendersonom cez komentáre vo Figme, e-mail a stretnutia na Zoome. Figma zostala spoločnou dizajnovou referenciou pre rozloženia, responzívne správanie, toky aj úpravy.
Celá prípadová štúdia identity Perch Mobile je na Behance a zrealizovaný zákaznícky zážitok nájdete na perchmobile.app.
Potrebujete značku, ktorá funguje v celom produkte?
Prepájame identitu, dizajn rozhrania a myslenie na implementáciu, aby každý kontakt so zákazníkom pôsobil ako súčasť jedného zážitku.
Súvisiace projekty
Perch Mobile
Vytvorili sme minimalistickú vizuálnu identitu s archetypom rebela pre odvážneho newyorského mobilného operátora, ktorý pomáha ľuďom budovať si úverovú históriu len tým, že platia účty za telefón.
Justice For Nature
Moderná a pútavá viacjazyčná platforma, ktorá predstavuje 15 rokov ochrany prírody a je postavená tak, aby získavala dobrovoľníkov, dary a šírila ekologické povedomie po celom svete.
Bolt Taxi
Vytvorili a strihli sme energickú kampaň pre sociálne siete pre Bolt Taxi, postavenú na krátkych filmoch s reálnymi vodičmi, na podporu náboru vodičov v Bratislave.