Půjčovna aut

Vlastní dvoudenní UI projekt zkoumající, jak vizuální přehlednost, struktura a modulární systém mohou zlepšit důvěryhodnost a použitelnost — i bez zásahu do základní logiky produktu.

Role

UI designer

Role

UI designer

Role

UI designer

Role

UI designer

Doba trvání

2 dny (leden 2025)

Doba trvání

2 dny (leden 2025)

Doba trvání

2 dny (leden 2025)

Doba trvání

2 dny (leden 2025)

Tým

Samostatně

Tým

Samostatně

Tým

Samostatně

Tým

Samostatně

Typ projektu

Studijní

Typ projektu

Studijní

Typ projektu

Studijní

Typ projektu

Studijní

UX Design

UX Design

UI Design

UI Design

Webdesign

Webdesign

#hero —

#nav-trigger-1 —

Proč redesign?

Proč redesign?

Na tento web jsem narazila náhodou při procházení Google Ads. Působil zastarale, vizuálně chaoticky a byl nešikovný na mobilu – což není ideální, když se rozhodujete, komu svěřit pronájem auta.

Rezervační formulář byl přeplněný, stavy tlačítek nebyly konzistentní a chyběla mu logika rozvržení. Rozhodla jsem se ho přepracovat – začít od toku informací a hierarchie.

#context —

Tři typy uživatelů, jedna společná potřeba

Tři typy uživatelů, jedna společná potřeba

dostupnost

dostupnost

Místní obyvatelé se zaměřují na cenu a dostupnost

efektivita

efektivita

Obchodní cestující chtějí rychlost a efektivitu

mobilní přístup

mobilní přístup

Turisté chtějí snadné rezervace přes mobil.

Nový design musel fungovat stejně dobře pro všechny – bez zbytečného komplikování.

#users —

Struktura před stylem

Wireframy, které dávají přednost logice
Začala jsem s lo-fi náčrty pro desktop i mobil, s využitím známých vzorců čtení:
  • Z-vzor na domovské stránce pro vedení pozornosti
  • F-vzor v rozvržení formuláře pro větší přehlednost
To mi pomohlo určit hierarchii dříve, než jsem přešla k vizuální stránce.

#structure —

Modulární a čistý UI systém

Modulární a čistý UI systém

Navrhování škálovatelných komponent
Navrhování škálovatelných komponent
Rozhraní jsem přepracovala pomocí vizuálního systému s:
  • 12sloupcovou mřížkou pro desktop a 4 sloupce pro mobil
  • Škálovatelnými mezerami a logikou zaoblení
  • Dostatečným kontrastem a čitelnou typografií
  • Modulárními komponentami: tlačítka, štítky, karty, vstupní pole
Díky tomu je rozvržení snadnější na údržbu a rozšiřování.

#system —

#form —

Formulář. Z nepřehledného k intuitivnímu

Původní formulář byl přeplněný a obtížně čitelný. Seskupila jsem související pole, správně zarovnala vstupy a zajistila, aby bylo CTA tlačítko vždy viditelné. Přidala jsem přepínač „vrácení na jiné pobočce“ s jasnou vizuální logikou. Na mobilu je vše přizpůsobené pro ovládání palcem a podporuje gesta.
Původní formulář byl přeplněný a obtížně čitelný. Seskupila jsem související pole, správně zarovnala vstupy a zajistila, aby bylo CTA tlačítko vždy viditelné. Přidala jsem přepínač „vrácení na jiné pobočce“ s jasnou vizuální logikou. Na mobilu je vše přizpůsobené pro ovládání palcem a podporuje gesta.
Původní formulář byl přeplněný a obtížně čitelný. Seskupila jsem související pole, správně zarovnala vstupy a zajistila, aby bylo CTA tlačítko vždy viditelné. Přidala jsem přepínač „vrácení na jiné pobočce“ s jasnou vizuální logikou. Na mobilu je vše přizpůsobené pro ovládání palcem a podporuje gesta.
Každá karta zobrazuje jen to nejnutnější – nic navíc: typ vozu, palivo, převodovku, počet míst a cenu.
Oblíbená auta jsou vizuálně označená. Akce se zobrazí při najetí myší (na desktopu) nebo jsou viditelné hned od začátku (na mobilu), aby rozhraní zůstalo čisté, ale přístupné.
Každá karta zobrazuje jen to nejnutnější – nic navíc: typ vozu, palivo, převodovku, počet míst a cenu.
Oblíbená auta jsou vizuálně označená. Akce se zobrazí při najetí myší (na desktopu) nebo jsou viditelné hned od začátku (na mobilu), aby rozhraní zůstalo čisté, ale přístupné.

Obrazovky

Obrazovky

Navrženo pro všechny velikosti displejů — a pro udržení pozornosti
Od úvodní stránky až po rezervační tok — každý prvek byl navržen tak, aby se přizpůsobil různým breakpointům a podporoval mikrointerakce.
Výsledek: konzistentní uživatelský zážitek, který působí přirozeně na desktopu i mobilu.

Co jsem si z projektu odnesla

A co bych příště rozhodně udělala jinak.
Tento projekt mi připomněl, jak moc struktura ovlivňuje vnímání.
Neupravovala jsem značku, obsah ani nepřidávala nové funkce – ale už jen úklid v rozvržení a promyšlení chování komponent způsobil, že produkt působil jistěji. A lidštěji.
I bez analytiky a uživatelských rozhovorů se malé designové volby nasčítaly: přehlednější logika formuláře, čistší karty, responzivní chování, které neruší. Rozhraní působilo důvěryhodně – ne kvůli barvám nebo mikrotextům, ale protože všechno bylo tam, kde má být.
To ale neznamená, že bych to udělala stejně i příště.
Testovala bych víc předpokladů: jak lidé procházejí tok, jak rychle rezervují, kde váhají. Ověřila bych si, jestli vizuální čistota skutečně snižuje tření, nebo jen působí dobře na mě jako designérku.

Důvěra ve vizuál není styl – je to rozhodnutí

Karty mohly být flexibilnější. Zpětně bych je navrhla tak, aby se snadno škálovaly pro akce, věrnostní programy nebo upselling. Soustředila jsem se na přehlednost – ale netestovala jsem složitost.
A přesto – na 2denní vlastní projekt bez zadání a bez dat splnil přesně to, co měl:
Zpochybnil moje předpoklady. A přiměl mě přehodnotit, kolik hodnoty je v jednoduché struktuře.

#context —

#reflections —

What will we build?

© Ekaterina Pykhova, 2025

#footer —

#contact —

What will we build?

© Ekaterina Pykhova, 2025

#footer —

#contact —

What will we build?

© Ekaterina Pykhova, 2025

#footer —

#contact —

What will we build?

© Ekaterina Pykhova, 2025

#footer —

#contact —