Redesign rezervačního systému Previo
V letech 2023 až 2026 jsem jako UX/UI designér pracoval v produktovém týmu Previo na redesignu rezervačního systému. Vytvořil jsem design system se 71 komponentami, pěti šablonami obrazovek a 15 popsanými vzory, sjednotil klíčové uživatelské toky a do produktového procesu zavedl principy Human Centered Designu.
Výchozí problém
Previo je systém pro správu ubytování a rezervací, ve kterém recepční tráví celou směnu. Recepční si ho nevybírá, dostane ho k práci, a právě proto musí fungovat bez vysvětlování. Produkt ale rostl roky a s každou funkcí přibyla obrazovka i další způsob, jak udělat tutéž věc. Na telefonu navíc nebyl responzivní.
Podobné situace vypadaly pokaždé jinak a nové návrhy vznikaly od nuly, protože nebylo z čeho skládat. Rozhodovalo se navíc podle toho, co dávalo smysl uvnitř firmy, ne podle toho, jak se systém používá na recepci v deset večer.
Moje role
V produktovém týmu jsem odpovídal za tvorbu a správu design systému, navrhoval nové moduly a zlepšoval uživatelské toky. Cílem bylo zrychlit každodenní obsluhu systému, aby recepční mohli věnovat víc pozornosti hostům.
Klíčová rozhodnutí
-
01
Design system ze soupisu, ne od nuly
Než jsem navrhl první novou komponentu, sesbíral jsem všechno, co v produktu existovalo, od tlačítek a formulářů po tabulky, stavy a typografii. Z toho vznikla knihovna 71 komponent seřazená od základních tokenů, jako jsou barvy, odsazení a typografie, přes tlačítka a 19 typů vstupních polí po tabulky. K tomu 8 komponent přímo pro PMS a CRM. Nová obrazovka se tak skládá z hotových dílů a uživatel se stejnou věc neučí na třech místech.
-
02
Pět šablon místo nových obrazovek
Z opakujících se obrazovek jsem udělal pět šablon, základní rozvržení, detail, stránku přes celou šířku, stránku s filtrem a nastavení. K nim jsem popsal 15 vzorů pro situace, které se v systému opakují, třeba filtraci, prázdný stav, oprávnění, formuláře nebo mazání. Nová funkce nezačíná otázkou, jak to tentokrát uděláme, ale volbou šablony a rozhodnutím, co je na ní opravdu jiné.
-
03
Toky od příchodu rezervace
Klíčové cesty jsem rozkreslil od chvíle, kdy přijde rezervace, po to, co s ní kdo udělá dál. Teprve na celém toku je vidět, kde recepční zbytečně přeskakuje mezi obrazovkami a kde se rozhoduje bez informací, které potřebuje.
Na obrázku je vzadu původní rezervační kalendář a vpředu nový na počítači i na telefonu. Základ zůstal stejný, pokoje v řádcích a dny ve sloupcích. Nový kalendář má ale větší a čitelnější rezervace a méně ovládacích prvků kolem nich.
-
04
Previo i v telefonu
Původní Previo nebylo na telefonu responzivní a pohodlně se s ním dalo pracovat jen na počítači. Proto byl telefon jednou z priorit redesignu. Každá šablona má podobu pro telefon i počítač podle mřížek pro šířku 376, 1280 a 1640 px, takže recepční najdou stejné obrazovky na obou.
Na obrázku je vzadu původní kalendář, který šel používat jen na počítači, a vpředu nové rozhraní na telefonu, navigace a formulář nového hosta.
-
05
Ověřit na recepci, ne na poradě
Do procesu jsem zavedl základy Human Centered Designu, tedy ptát se před návrhem, ověřovat návrhy na lidech, kteří v systému skutečně pracují, a rozhodovat podle toho, co dělají, ne podle toho, co si o nich myslíme na poradě.
Výsledek
Pro recepční
Podobné situace vypadají v celém systému stejně, takže se stejnou věc neučí na třech místech, a systém funguje i na telefonu.
Pro produktový tým
Design system se 71 komponentami, pěti šablonami a 15 popsanými vzory. Nové obrazovky vznikají skládáním hotových dílů a na poradách se místo odstínů a odsazení řeší, co má uživatel na obrazovce zvládnout.
Pro proces
Human Centered Design v procesu zůstal i po odevzdání redesignu, a to je na celé práci ta nejtrvanlivější část.
Když vaše aplikace roste podobně a lidé v ní tápou, můžete začít UX auditem, nebo rovnou redesignem po etapách.
Co klient ode mě dostal
Čtyři věci, které po redesignu v produktu i v procesu zůstaly.
Design system
71 komponent a 7 skupin tokenů. Jedno místo, kam tým chodí pro odpověď „jak to má vypadat“.
Uživatelské toky
Klíčové cesty systémem rozkreslené od začátku do konce, na kterých je vidět každý zbytečný krok.
Šablony obrazovek
Pět šablon a 15 popsaných vzorů, ze kterých se skládá každá nová funkce.
Human Centered Design
Zvyk ptát se uživatelů před návrhem a ověřovat na nich návrhy.