Případová studie: Jak jsem si vyzkoušel práci s Figmou a přitom přidat do mobilní aplikace správu uživatelů

Většina digitálních produktů pro firmy začíná na desktopu. Časem se ale ukáže, že majitelé firem nepotřebují sedět v kanceláři, aby vyřídili administrativu. Potřebují ji vyřídit "teď hned" z mobilu. Chtěl jsem si v praxi vyzkoušet celý designový proces od A do Z na reálném, komplexním problému. Proto jsem si jako osobní výzvu vybral 'bílé místo' v mobilní aplikaci George Business: nemožnost přidat nového uživatele. Mým cílem bylo navrhnout řešení, které obstojí před kritickým okem majitelů firem.

Kontext a problém: Mobilní gap

George Business je moderní bankovní nástroj, který firemním klientům na webu umožňuje komplexní správu oprávnění. Mobilní aplikace však tuto funkci dlouhodobě postrádala, což vytvářelo výraznou mezeru v uživatelském zážitku a nenaplněnou potřebu cílové skupiny.

Problem statement: Majitelé firem nemohou flexibilně přidat nového kolegu (např. účetní) v terénu, což je nutí čekat na přístup k PC.

Mobilní aplikaci používá 100 % firemních uživatelů České spořitelny a měsíčně přibývá velké množství nových disponentů. Designová výzva byla jasná: Jak navrhnout urgentní přidání uživatele tak, aby ho administrátor vyřešil okamžitě a odkudkoliv?

Designový proces: Od Sketch k Figmě

Důležitou součástí mého postupu byla technologická adaptace. Naposledy jsem prototypoval ve Sketch někdy v roce 2018, kdy jsem ještě měl příležitost více pracovat hands-on. Od té doby jsem spíše zadával designérům práci/problémy k řešení, ale sám jsem nástroje nepoužíval. Tento projekt jsem realizoval ve Figmě v rámci specializovaného kurzu a rozdíl byl markantní.

Co se změnilo od roku 2018:

Ve Sketch jsem byl zvyklý pracovat s pluginy jako Anima Auto-Layout nebo Fluid jen proto, abych dokázal vytvořit responsivní komponenty. Layouty, které se přizpůsobí obsahu, znamenaly hodinové ladění "resizing constraints", pořadí layerů a manuální nastavování pinů k okrajům. Pro spolupráci s vývojáři jsem potřeboval InVision nebo Zeplin, další nástroje, další exporty, další friction.

Ve Figmě je Auto Layout nativní funkce inspirovaná CSS flexboxem. To, co mi dříve zabralo hodiny s pluginy, jsem vyřešil během minut. Tlačítka, která rostou s textem, seznamy, které se přeuspořádají při změně obsahu, nested layouts. Všechno funguje out-of-the-box. Žádné pluginy, žádné workaroundy.

Pro George Business jsem manuálně adaptoval prvky existujícího design systému (tlačítka, inputy, typografii), ale s Auto Layout jsem je dokázal udělat skutečně responsivní. Tlačítko se nejen vizuálně podobá produkční verzi, ono se i chová se stejně. Když změním délku labelu, tlačítko se automaticky přizpůsobí. Když přidám položku do seznamu, layout se přeskládá sám.

Tento posun z "designérského nástroje s pluginy" na "cloud-based collaboration platform" mi zpětně dal větší respekt k tomu, jak moc se designérská práce za posledních několik let zjednodušila a zároveň zvýšily nároky na výsledek.

Iterace s lektorem

První drafty user flow byly komplexní, inspirované robustní webovou verzí. Díky zpětné vazbě od lektora Martina Puškáče jsem však diagram "napřímil" a zjednodušil. Výsledkem byla lineární "happy-path", která palcem ovládanému rozhraní sedí nejlépe. Do flow jsem zařadil i důležitou Recap page jako bezpečnostní pojistku proti překlepům v citlivých osobních datech pozvaného disponenta.

Validace: Víkendový sprint s FaceTime

Abych ověřil srozumitelnost, zrekrutoval jsem během jediného víkendu 5 respondentů z řad majitelů firem a CFO.

Při testování se mi skvěle osvědčila technika kombinující FaceTime a sdílení obrazovky. Respondent s iPhonem procházel interaktivní prototyp v prohlížeči, zatímco já jsem na MacBooku sledoval jeho obličej i interakce. Tato sestava mi umožnila zachytit mikro-reakce a momenty zaváhání, které by v čistě vzdáleném testování na mobilu zanikly.

Klíčová zjištění a pivot

Testování přineslo zásadní aha moment. Ačkoliv samotné flow přidání uživatele bylo pro 100 % respondentů intuitivní, nalezitelnost funkce byla tragická.

Původní návrh: Entry point byl skrytý v sekci "Permissions" pod piktogramem profilu.

Realita: Respondenti zde správu týmu nehledali. Očekávali sekce jako "Users" nebo "Settings".

Na základě těchto zjištění jsem přistoupil k iteraci a entry point přesunul do sekce 'More' v navigačním panelu. Cílem bylo sladit design s mentálním modelem uživatelů, tedy jasně oddělit správu osobního profilu od administrativních nástrojů firmy.

Reflexe: Zpátky u řemesla

Tento projekt byl pro mě osobní výzvou v přechodu z role manažera, který řeší "big picture", do role designéra, který musí nakreslit konkrétní stavy tlačítek, input fieldů a layouty.

Naučil jsem se, že i když neplánuji být UX designérem na plný úvazek, schopnost "myslet tvorbou" (thinking through making) odhalí logické díry mnohem dříve než abstraktní debaty. Dává mi to větší pokoru k řemeslu a umožňuje mi formulovat konstruktivnější zadání pro můj tým.

Co dál?

Projekt aktuálně putuje "do šuplíku", protože pracovní backlog obsahuje prioritnější položky. Je to ale připravený koncept, který může v následujících letech posloužit jako validovaný základ pro reálnou implementaci.