Case Study 01   Product Design · SaaS · Gaming Analytics

Rankacy AI —
Změna layoutu
saas platformy.

Role
Product Designer (sole designer)
Období
Nov 2023 — Mar 2026
Platforma
Web + Mobile (iOS/Android)
Doména
SaaS · Gaming Analytics · AI
Rankacy AI — dashboard

Kontext

Rankacy od začátku pracovalo s obrovským množstvím herních dat sbíraných přímo ze CS2. Na backendu vznikala rozsáhlá datová knihovna, která se postupně rozšiřovala a prohlubovala. Produkt v této fázi data především sbíral, zkoumal a ověřoval, co všechno je z nich možné vytěžit.

Produktová vrstva se tomuto vývoji spíše přizpůsobovaly. Hledali jsme způsoby, jak data zobrazovat, kombinovat a dávat jim smysl, ale bez jasně definované struktury nebo dlouhodobé vize. Platforma měla zhruba 20 000 uživatelů, ale stále fungovala spíš jako experimentální prostředí pro proof of concept, testování funkcí a práci s uživatelskou zpětnou vazbou.

Problém

Od začátku vývoje produkt trpěl jedním zásadním problémem: funkce přibývaly rychle a bez jasné struktury. Podle stakeholderů bylo důležité všechno, což ve výsledku znamenalo, že nebylo důležité nic. Zároveň jsme hledali cestu, jak se odlišit od přímé konkurence – zavedených analytických platforem s miliony hráčů. Místo kopírování existujících řešení jsem začala experimentovat s přístupem založeným na gamifikaci a storytellingu.

Cílem bylo udělat datově náročný produkt přístupnější a více „game-like", hlavně pro mladší generaci hráčů.

Postup

Produkt se postupně dostal do fáze, kdy bylo potřeba se zastavit a znovu promyslet jeho uchopení.

Společně s kolegou jsme připravili prezentaci pro vedení, která definovala hlavní message platformy a její storytelling. V té chvíli jsme položili základní kostru budoucího produktu. I když jsme se jí později ne vždy drželi na 100 %, byl to důležitý moment – dal celému týmu společný směr a kontext.

Interní prezentace — framework a storytelling
Framework: Challenge · Familiarity · Reward · Talking Point · Mods

Získání podpory stakeholderů znamenalo zelenou. Následovalo wireframování nového systému. Místo klasického levého sidebaru, typického pro analytické platformy, jsme hledali úplně nové pojetí navigace. Inspirovali jsme se herním prostředím, což znamenalo opustit zaběhlá UX řešení a začít přemýšlet jinak.

Zároveň jsme pracovali s velmi datově náročnou platformou. Vše proto muselo působit jednoduše a přehledně, i když se pod povrchem skrývalo velké množství informací. Data jsme začali strukturovat do více vrstev podle úrovně znalostí hráče. Experimentovali jsme s vizuální hierarchií a novými UI prvky, přičemž důležitým principem se stal silný vizuální střed – podobně jako v hrách, kde se vše podstatné odehrává uprostřed obrazovky.

Součástí redesignu bylo také narovnání informační architektury a navigace, které byly do té doby spíše opomíjené. Stanovili jsme priority základních funkcí a ostatní prvky jsme buď logicky podřadili, nebo sloučili do větších celků. To nám zároveň otevřelo prostor lépe korigovat chování hráčů napříč platformou.

Vizuální inspirace — herní UI reference
CS:GO dashboard a Witcher inventory jako reference pro navigaci a datovou hierarchii

Testování

Během vývoje jsme průběžně testovali a vedli otevřené diskuze na Rankacy Discordu. Komunita byla sice malá, ale velmi aktivní a zapojená. Hráči jsou specifická skupina uživatelů, ale právě tahle kapitola byla extrémně přínosná.

Do vývoje jsme zapojovali uživatele formou porovnávání návrhů, anket, hlasování a otevřené zpětné vazby. Vývoj tak měl hodně komunitní charakter a uživatelé se cítili být jeho součástí.

Proběhlo také několik živých testování, kdy si uživatelé nový vizuál poprvé sami proklikávali. Dostávali jednoduché úkoly a my sledovali jejich reakce. Kromě několika specifických míst byla odezva velmi pozitivní a rychle se ukázalo, že prostředí je intuitivní i pro nové uživatele.

Usability testing — výzkumný board
Goal of testing · Our testers · Main points · Findings
Discord — komunita, ankety a research analýza
Komunitní design: Discord hlasování, A/B porovnání layoutů, user activity analysis
„Do vývoje jsme zapojovali uživatele formou porovnávání návrhů, anket, hlasování a otevřené zpětné vazby. Vývoj tak měl hodně komunitní charakter a uživatelé se cítili být jeho součástí."

Dopady

Redesign měl na celý projekt zásadní dopad. Rozhodnutí „překopat" produkt v rané fázi se zpětně ukázalo jako klíčové.

Připravili jsme si půdu pro budování robustní datové platformy do budoucna. Gamingové pojetí nám dalo větší kreativní svobodu, aniž bychom ztratili datovou hloubku.

Design posunul Rankacy výrazně i po vizuální stránce a pomohl platformě jasně se odlišit od konkurence.

20k
Uživatelů na platformě
v době zahájení redesignu
0→1
Design system od nuly
web + mobile, kompletní component library
2+
Roky jako sole designer
plná odpovědnost za každé designové rozhodnutí
7
Hlavních oblastí produktu
dashboard, srovnání, training, highlights, mobile, AI, design system