Menší IT firma řešila nedostatek kapacit pro aktuální projekty. Backendisté se soustředili na databáze, frontendistka měla plné ruce práce s aplikační logikou. Na implementaci uživatelského rozhraní nezbýval čas ani chuť – ale firma věděla, že některé projekty jejich budou kvalitní UI potřebovat. A tak začala naše spolupráce.
Navázání spolupráce
Práce bylo hodně, dalšího interního člověka by to však nepokrylo. Proto se firma rozhodla oslovit externistu – a našli mě (prý obvolávali firmy v okolí a já byla jedna z mála, kdo zvedl telefon…).
Začali jsme menšími testovacími úkoly, pak přišly dva větší projekty pro jejich klíčového klienta ze sportovního sektoru.
Projekt 1: Redesign rozhraní pro zápis zápasů
Existující webová aplikace zobrazovala průběh zápasů v reálném čase. Fungovala, ale dodavatel cítil, že by chtěla vizuálně vylepšit – a to byl úkol pro mě.
UI design a kódování
Bylo potřeba přehledně zobrazit velké množství informací najednou, optimalizovat rozložení pro tablet, a pak vše nakódovat v samostatné HTML šabloně. Pro zpřehlednění velkého množství dynamických stylů jsem se rozhodla využívat CSS framework Sass. Některou drobnější funkcionalitu jsem řešila sama s pomocí JavaScriptu, abych frontendistce uvolnila ještě více ruce.
Jeden hezký moment: v rozhraní byl prvek, který se měl otáčet. Použila jsem pro to „obyčejnou” CSS animaci, kterou využívám snad denně. Pro zbytek týmu to bylo nové řešení a byli nadšení z jeho jednoduchosti.
Testování v praxi a předání
Část práce probíhala i po předání, kdy tým zkoušel aplikaci přímo v terénu. Podle toho, co zjistili, jsme pak ladili UI. Ukázalo se například, že aplikace se využívá téměř výhradně venku, za plného denního osvětlení. Nebo že uživatelé mají tablet umístěný na stojanu půl metru před sebou. Zvýšili jsme tedy kontrast některých prvků a velikost jiných, což uživatelský zážitek značně pozvedlo.
Projekt měl pevný deadline podmíněný akcí klienta. Dodavatel odevzdal včas – a klient byl spokojen. Hlavně tedy s tím, že vše fungovalo podle očekávání :).
Projekt 2: Nové statistické rozhraní
U druhého projektu pro stejného klienta existovala data a backendová logika, rozhraní ale bylo potřeba vytvořit znovu.
Wireframy a design
Na začátku nebylo jasné přesné vymezení dat. Prošla jsem dostupné podklady a vzor, podle kterého měla aplikace fungovat, a připravila sérii wireframů. Ty pomohly upřesnit rozsah – programátoři je porovnali s reálnými daty a rozsah podle toho upravili.
Design vycházel z grafického manuálu klienta: písmo na míru, brandové barvy, celý vizuální systém. Díky bohu za grafické manuály, šetří tolik práce.
Vývoj – od HTML šablon ke komponentům
Abychom dále zrychlili vývoj, opustili jsme workflow se statickými HTML šablonami, které někdo z týmu musel přece jen vložit do vlastního kódu. Firma mi zpřístupnila dev server a svůj vlastní PHP framework – naučila jsem se základy a začala kódovat přímo v aplikaci. Komponentová struktura mi umožnila tvořit opakující se prvky (záhlaví, zápatí, navigaci…) jen jednou, bez zbytečného kopírování; pro stylování jsem opět využila Sass.
Největší výzva projektu kupodivu nebyla naučit se s neznámým frameworkem, ale věčná designová otázka „jak nastylovat tabulky s daty tak, aby zůstaly čitelné, ale zároveň nevypadaly jako devadesátkový Excel?” 🙂
I tento projekt dospěl ke šťastnému konci, i když se (klasicky) ukázal být složitějším, než na první pohled vypadal.
A já se těším na další.
