Redesign Keboola Connection UX - part 1 Kick-off

Jan Michek
500 Internal server error
3 min readMay 16, 2017

--

V této sérii se chci podělit o procesu redesignu UI a UX naší klientské aplikace, která právě začíná. Je to případová studie za chodu. Třeba to někoho inspiruje.

Připojuji se

Aplikace Keboola Connection je ETL nástroj, lego na data. Neobsahuje žádné nástroje pro vizualizaci — prezentační dashboardy necháváme třetí straně, která si nad Connection teprve staví business. Takže v appce uživatelé konfigurují ETL procesy a sledují jejich výsledky. Poměrně složitá věc, suchá čísla.

Což o to, počítá to hezky, klienti jsou nadšení, plány jsou velké. Problém ale je, že nikdo zatím neřešil ovládání aplikace, natož jak udělat z práce radost. Je to pole neorané.

Tady začíná moje mise. Dostal jsem exkluzivní pozvánku do Keboola Tech teamu, s posláním postarat se o tyto záležitosti. Nepovažuji se za UX designera (na to tu máme Jacka), ale zřejmě tu mám největší zkušenosti s frontendem (viditelnou částí aplikace). Využil jsem nezkušenosti a vytvořil jsem si nový pohled na aplikaci, narozdíl od kolegů, kteří do toho čumí už roky. V předešlých jobech jsem řešil responsivitu aplikací, animace, custom bootstrapy, crossbrowser, wireframování. Baví mě dělat počítače víc lidské (narozdíl od programátorů xD). Čeká mě tu velká výzva.

Offsite Kick-off

První měsíc v práci jsem analyzoval stav aplikace z různých úhlů pohledu a seznamoval se s prostředím. To jsem sesypal do slidů, které jsem prezentoval na firemním offsitu v Lozici. Prezentace obsahovala statistiky a grafický audit. Nedělal jsem závěry, na to je moc brzo. Nějaký názor na to samo mám. Prezentace měla, zdá se, úspěch. Nemusel jsem investovat příliš energie, abych přesvědčil zbytek teamu, že je potřeba dělat změny = win-win.

Grafický audit

Takže víme co máme a obecně se shodneme na tom co chceme — sjednotit UI elementy, vytvořit předlohu pro developery (styleguide), zjednodušit ovládání pro nově příchozí uživatele, zahrnout user testy do procesu.

Slovo redesign je docela na místě, protože nebude jen stačit přejmenovat buttony.

Next-steps

Budoucnost ještě není nakódována a několik měsíců ani nebude. Tvoříme tady něco dlouhodobějšího a nevyplatí se ‘hned to začít bušit’. Jasně, budu to já, kdo to bude nakonec bušit, ale taky chci tady zavést platformu, na který se to bude (sebe)organizovat.

Nezáleží ani tak co si myslím já, nebo zbytek teamu. Měli bychom do procesu zahrnout uživatele, což se zatím děje okrajově.

Pro další postup jsem vydefinoval následující roadmapu. Jednotlivé body = náměty na další části blogové příspěvky. Jasně, bude se to různě prolínat.

  • Sepsat manifest
  • Vision of future
  • Prototypy a koncepty
  • Implementace
  • Validace z vnějška a user testy
  • Zavedení testování

Odkazy / Nástroje

Google analytics, diskuze s kolegy, grafický audit, výsledky z uživatelského testování (díky Jacku), Zendesk tickety, frontendisti.cz, React Sketch.app, atlassian.design.

Rád bych vypíchnul toto video — po shlednutí už jsem věděl jak na to. Doslova gamechanger.

Věřim, že to bude sranda, až si po odvedené práci zpětně přečtu tyhle řádky a zjistim, jako moc jsem byl / nebyl naivní.

--

--