Ako som na kolene nadizajnoval aplikáciu s miliónovým potenciálom

Niekedy sa také veci proste stávajú. Dávid skolí goliáša, orol Eddie napriek svojej športovej “neschopnosti” dokáže vytlieskať celé štadióny a stať sa symbolom olympiády. A niekedy sa človeku, ktorý v škôlke kreslil ľudí len ako beztelové monštrá s dlhými nohami, podarí o pár rokov neskôr nadizajnovať niečo, o čom píše Forbes.

Disclaimer: Týmto blogom sa nechcem chváliť, týmto blogom nechcem hovoriť, že som dobrý dizajnér (keďže ani vlastne nie som dizajnér), chcem len ukázať, že je možné dosiahnuť veľké veci, aj keď o niečom na začiatku zdanlivo prd viete.

Will I make it if I fake it?

Boli príjemné Vianoce 2017 a ja som sa ako vždy pokúsil posunúť svoje zručnosti niekam ďalej. Ulahodila mi idea práce s mobilnými aplikáciami, považoval som to za možnú budúcnosť svojej kariéry, keďže sa na tom (vraj) dá slušne zarobiť. Tak som si sadol za sketch a začal som kresliť prvé screeny.

Ak sa vám naskytuje otázka, ako som sa dostal ku tvorbe grafiky, v tej chvíli som už viac než pol roka vytváral e-booky a infografiky pre reklamnú agentúru Basta Digital (bývalé PizzaSEO). K tejto práci som sa dostal “prirodzenou” premenou z copywritera na grafika. “Fake it till you make it” taktika zafungovala, a pracoval som pre jednu z mála miliónových digitálnych agentúr na Slovensku. Jednu z infografík, ktorú som tam vytvoril, si môžete pozrieť nižšie.

Infografika vyzerá celkom dobre, no je to na míle vzdialené od toho, čo treba robiť, aby ste nadizajnovali aplikáciu.

Cesta späť k decembru. Rozhodol som sa pracovať koncepčnejšie, pristúpil som k redizajnu aplikácie Bazoš.sk (najväčší lokálny inzerčný portál). Zbúchal som pár obrazoviek, odpozeral som, ako to prezentujú ľudia na internete, nakreslil zopár ikon a vyplodil svoj prvý projekt. Hneď som hotový projekt poslal do najväčšieho slovenského portálu, ktorý píše o dizajne a reklame, a zverejnili ho. Zniesol kritiku, rovnako by som ho skritizoval aj ja, nebolo to naozaj nič naozaj dobré. ALE, je tu jedno veľké ale. Prinieslo mi to publicitu a článok doplával tam, kde som potreboval. K potenciálnemu klientovi.

Screen z článku — skvelý ten redizajn zrovna nebol, no stále si myslím, že bol lepší, než aktuálna aplikácia..

Zložité začiatky

Potenciálnym klientom bol práve môj neskorší pracovný parťák, Stano Šulko. Nepotreboval ale iba aplikáciu, potreboval všetko. Identitu. Kompletný dizajn. Celý brand. Netušil som, ako na to, ako sa to robí, som 100%-ný samouk a práve preto sa to pre mňa zdala byť nadľudská úloha. Potrebovali sme sa stretnúť osobne.

Na stretnutí mi Stano predstavil svoju firmu, ktorá sa zaoberá procesmi na stavbe, dohodli sme si spôsob spolupráce, najbližšie stretnutie a rozdali sme si úlohy. Mojou bolo pripraviť prvé návrhy nového loga pre aplikáciu, ktorá bude digitalizovať administratívu na stavenisku a tým uľahčovať prácu každému jednému človeku tam. V živote nikdy som predtým nikomu nepripravoval logo, práca na niečom takom je oveľa zložitejšia než tvorba infografiky alebo e-booku, pri ktorom sa riadite danými farbami, danými informáciami, a nemiešate “mágiu z ničoho”, najväčšiu záťaž zažilo moje abstraktné zmýšľanie.

Predtyp 1: ak študujete na strednej škole v maturitnom ročníku, zvážte, či podobné kroky utiahne váš time management …

Toto boli prvé náčrty. Prvé kroky k tomu, aby sme vytvorili niečo poriadne. Chceli sme sa držať pôvodnej farebnej škály, ktorá bola takáto. Aby som nezabudol, určili sme si so Stanom nejaké mantinely, nech má moja abstraktná iskierka v hlave šancu odrážať sa od niečoho: Idea bolo “worldwide, connected, building, construction, system, cooperation…”:

Sladké

A vzniklo niečo takéto:

Ešte moje obľúbené :D:

delfínik a kamaráti

V preklade — Idea bolo staviteľstvo, globálny zásah a spolupráca. Farebnosť určená nebola. Vytvorili sme niekoľko verzií, no najzaujímavejšou nakoniec zostalo využitie typických “výstražných”, resp. staviteľských farieb, a to žltej a čiernej. Usúďte sami, či to na vás samých hovorí tým jazykom, akým sme chceli.

Pocity po prvom stretnutí a vyvesení loga všade, kde sa dalo, na steny, na tapety mobilu, počítača, sme nechali celú myšlienku niekoľko dní uležať a dokonale sme sa s logom stotožnili. Na najbližšie stretnutie už som mal k dispozícii “technickú špecifikáciu aplikácie”, pre vtedajšieho laika ako ja, to bolo šialených 30 strán textu, ktoré mi príliš nič nehovorili. Mojou úlohou bolo ich zhmotniť do aplikácie. Vynárali sa mi otázky. Koľko screenov to bude? Koľko práce mi to zaberie? Ako zložité to bude celé pripraviť? Bude s tým spokojný Stano? Bude sa to páčiť ľuďom?

Iba malá ukážka toho, čomu som musel ako úplný laik porozumieť

Napriek tomu som musel zostať hlavou pri logu a dizajn manuále, aby sme ho úspešne dokončili a mohli ho posunúť ďalej v prípade spolupráce s nejakými externými agentúrami, freelancermi. Tak som si na internete stiahol 10 dizajn manuálov rôznych spoločností a pokúsil som sa vytvoriť niečo podobné pre bsgapp.

A takto som sa naučil robiť dizajn manuál

Pokus to bol celkom úspešný, som na to pyšný, je to pekná práca a ako tak to hovorí o tom, aké písma, farebnosť a využitie loga sa má aplikovať. Bol to však iba jeden malý, no dôležitý krok k tomu, aby sme spolu vytvorili identitu aplikácie, za ktorou smerujeme.

Pre tých, ktorých to zaujíma, celý proces od momentu, kedy sme sa rozhodli stretnúť, až po dokončenie dizajn manuálu a úprav, mi to trvalo približne 30 hodín čistej práce, premýšľania, brainstormingu, kreslenia. Nevedel som, ako sa niečo kreslí, vyklikával som to naozaj zložito a celkovo som sa pri tvorbe tohto veľmi zapotil. Vždy mi však dokázali vyčariť úsmev Stanove šialene pozitívne reakcie na všetko, čo sme splodili. Stiahol ma do tvorivého procesu aplikácie, s ktorou som ešte pár dní predtým nič nemal, no potom som ňou naozaj začal žiť.

Okej — branding je pre zatiaľ v poriadku, môžeme sa naozaj plnohodnotne pripraviť na tvorbu aplikácie.

A robím to vôbec dobre?

Prišli prvé návrhy — vyzerali ohavne. Otrasne. Skúšali sme, ako by to vyzeralo v starých farbách building services group — čiže ružovej a fialovej. Pôvodná aplikácia, ktorá vznikla dávno dávno, v tých farbách bola.

Vitajte v roku 2004

Chceli sme sa posunúť niekde inde. Jednoduchosť, prehľadnosť. Zanalyzovali sme cieľovú skupinu — pracovníkov na stavenisku. Zamysleli sme sa nad tým, koľko času majú na prácu s aplikáciou. Ako rýchlo na ňu musia vedieť reagovať. Ako intiuitívna a prehľadná musí byť na to, aby jej rozumeli. A tak sme sa dizajnom posunuli do roku 2006.

Stále to nebolo ono — tak sme išli do najjednoduchších farieb — biela, sivá, čierna. Skúšal som kresliť obrazovky, vytvoril som nejaký jednotný jazyk toho dizajnu. To, ako by mala, resp. mohla aplikácia vyzerať, som nevedel. Jednoducho som sa snažil len kopírovať princípy, na ktoré som bol zvyknutý z mobilných aplikácií, ktoré sám používam.

Bolo to namáhavé. Skúšal som to obrazovku po obrazovke posielať Stanovi. Menil som slová a písmená, tú technickú špecifikáciu na dizajn. Nikdy som nič podobné nerobil, všetko som sa učil za chodu. Vyhľadávač google horel a každý jeden dopyt, ktorý som zadával, začínal “how to..”

Prehľad

Po chvíle tvorby obrazoviek aplikácie som si uvedomil, že by som mal svoju prácu nejak usporiadať. A tak som začal s deľbou obrazoviek do skupín a vznikli tieto časti : Prihlásenie + registrácia (neutrálna zóna), Menu + supermenu + kategórie z menu + subdodávatelia (neutrálna), Rozširujúce obrazovky k závadám (žltá zóna), Rozširujúce obrazovky k stavbám (modrá zóna), Schematicky pohľad (sivá zóna + rozlíšenia farby od bytov, dokumentácia modrá).

Pre laika, resp. človeka nezasväteného do problematiky, do toho, čo sa vlastne, čo sa týka administratívy na stavenisku deje, je to absolútna španielska dedina. O to väčšia sranda bola, že to isté to bolo pre mňa. Najprv som to všetko urobil presne podľa technickej špecifikácie, po porade so Stanom sme pridávali funkčné prvky, ktoré tam neboli (napr. označiť závadu za vyriešenú).

Zrazu som mal hotových približne 30 obrazoviek a uvedomil som si, aký neskutočný bordel mám vo všetkých tých súboroch, a že pre programátora by to bol nerozlúsknuteľný oriešok. Tak som si sadol k počítaču a niekoľko hodín som pracoval na tom, aby som z totálneho trashu a nezmyselného usporiadania súborov vytvoril zmysluplné celky.

Ponaučenie: Pracujte systematicky, zoskupujte jednotlivé objekty v dizajne logicky a hlavne priebežne.

Keď som to spravil a so Stanom sme sa niekoľkokrát behom dvoch týždňov stretli, aby sme dolaďovali posledné obrazovky, pridali nové funkcie a schematický pohľad, oznámil mi, že aplikácia bude len na Android. Tváril som sa, že je to okej, no oblial ma studený pot a skoro som dostal infarkt, popravde.

Ponaučenie 2: Hneď na začiatku si zistite, na aké mobilné zariadenia vlastne dizajn robíte.

Snažil som sa vnútorne tváriť že nič, a keď sme prácu už chceli odovzdávať programátorom, tak sme sa presunuli na druhú úlohu. Ako aplikáciu predať, posunúť o nej informácie ďalej? Ideme robiť web. Super. Web som takisto nikdy nedizajnoval, tak sme zohnali jedného známeho, čo býva v Trnave a snažili sme sa to s ním nejak zbúchať, no stroskotalo to na nedostatku času.

Nakoniec to dopadlo tak, že som nadizajnoval web ako “dlhý slíž” v sketchi, a jednotlivé podstatné prvky som vyexportoval spoločne s tým slížom a odovzdal to na tvorbu programátorovi, ktorý podľa mňa odviedol výbornú prácu, najmä rýchlu a splnil presne to, čo sme chceli. Bola na tom celkom kopa práce, museli sme nahrať videá funkčných častí aplikácie, na čom som sa nepohodol so Stanom, pretože som ich chcel rýchle a názorné, on ich chcel naopak pomalé a lepšie vysvetľujúce, pretože potenciálni klienti by takú rýchlosť nestíhali.

Pozn.: Kvôli videám som vytváral prototyp v InVision, v tej dobe ešte nemal sketch verziu aj s prototypingom. O tom, ako sa mi kazila synchronizácia s týmto online nástrojom, by som dokázal napísať samostatný článok, aj ako ma MarvelApp sklamal pri tomto istom. Je to problematické, no nakoniec som bol aj tak nútený sa vrátiť k InVision.

Okej. Nervydrásajúci moment. Bolesť brucha. Prišiel e-mail z creatixu (od programátorov), v ktorom pripomienkujú môj dizajn. Všetky pripomienky boli naozaj vecné, konkrétne, aplikovateľné behom niekoľkých hodín. Ale jedna mi zostala v pamäti najviac, z jednej sa mi roztriasli ruky a pot zalial moje čelo:

“- navrhujeme vacsi redesign v zmysle s Google odporucaniami pre Android mobilne aplikacie: https://material.io/guidelines/ Malo byt to byt cele viac rozlozene/vzdusnejsie a pod. — v principe ak aplikujete to co popisuju, malo byt to dost pomoct tomu dizajnu.”

A tak zase odznova

Toto bola rana pod pás. Niekoľkotýždňová práca bola zrazu celá zahodená za hlavu — to bol teda prvý pocit. Začal som študovať. Študoval som. Začal som tvoriť. Pretvárať. Dodal aplikácii novú, žlto-bielo-sivú identitu. Mal som nového najlepšieho kamaráta — túto stránku.

Využíval som prvky, na ktoré sú používatelia androidu zvyknutí. Po niekoľkých konzultáciách s ďalšími dizajnérmi — seniormi sme dospeli k verzii aplikácie, ktorá bola programovateľná. Popravde, vždy, keď mi od nich prišiel nový mail s pripomienkami, bol som z toho nervózny, bál som sa každej ich reakcie, keďže som bol absolútny samouk a nikto mi až do poslednej sekundy nepovedal, či to nie je náhodou celé zle..

Aplikácia sa programovala. Okej. Ale, na to, aby si mohli klienti pridávať subdodávateľov, nové závady a podobne, mal byť prioritne využívaný aj počítač. Bolo potrebné vytvoriť dizajn webového rozhrania aplikácie bsgapp. V tejto chvíli som vedel ešte oveľa menej o tom, ako to urobiť, než v prípade mobilnej verzie. Tam som sa aspoň mohol chytiť toho nespočetného množstva aplikácií, s ktorými mám skúsenosti. Tu som si mohol akurát tak otvoriť stránku vtedajšej digitálnej garáže a skúmať, ako to robili, resp. čítať návody v Google Material Design Guidelines.

Pomohlo. Vytvoril som si artboardy o veľkosti desktopu, pridával funkčné prvky, ktoré boli nevyhnutné pre pridávanie stavieb a závad cez počítačovú aplikáciu, navštevoval som Stana a konzultoval s ním všetko, nevyzeralo to podľa mňa na oko príliš prívetivo, no snažili sme sa ísť do funkčnosti, toto je brutálne dlhá veta, ale popisuje aj to, ako často repetitívny a zdĺhavý proces takto komplexnej aplikácie bol. Po pár dňoch bol dizajn hotový — a so zvláštným smútkom víťazov som od Stana prijal správu, že nateraz sa lúčime… Pár sekúnd na to som si spomenul, že o dva týždne maturujem a bol som vlastne rád, že to mám z krku.

A čo teraz? Stano pracuje s inými profíkmi, má klientov zo zahraničia, snaží sa dostať aplikáciu tam, kde patrí. Na každú stavbu. Píšu o ňom lokálne noviny, píše o ňom forbes. Nie som priamo v centre diania, no všade sa píše, že klientov získava rad za radom ešte pred oficiálnou 1.00 verziou aplikácie. Úctihodné, nie? Vraj si ani len neviem predstaviť reakcie investorov a stavebných spoločností, keď videli, čo im ponúka.

Namiesto nekonečného množstva papierových plánov a zbytočnej práce celý svet stavebnej administratívy v jednej aplikácii. Všetko doľaďuje už bezomňa, no pre mňa to bola vysoká škola. Dizajn aplikácie sa budúci rok bude meniť. Identita však zostáva a bude so značkou kráčať ďalej.

Keď si uvedomím, že môj dizajn prechádza cez ruky profesionálov a navrhoval ho chlapec, čo dovtedy ani netušil, ako vyzerá projektová dokumentácia.. no.. mám úsmev na tvári.

Aj keď sa dizajn aplikácie bude meniť, identita a prvá verzia zostáva, keď nie v pamäti iných, v mojej určite.

Finálne ponaučenie: Nebojte sa výziev.. nemáte čo stratiť.

Len kvalitný spánok. Haha.