Kateřina KopeckáDesign
Zpět na blog

Jak jsem pomocí vibe codingu zjednodušila rezervace předváděcích motorek

14. 7. 2026 · 7 min čtení
Úvodní stránka rezervačního systému Motocentrum HK Experience

Jedna rezervace předváděcí motorky nám zabrala přibližně 45 minut administrativy. Když hotové rezervační nástroje nestačily, navrhla jsem vlastní proces a pomocí vibe codingu v Lovable postavila aplikaci Motocentrum HK Experience. Case study o tom, proč nestačí jen hezký formulář, jak důležitý je interní proces a co mi první větší vibe coding projekt ukázal o UX designu.

Jedna rezervace nám zabrala přibližně 45 minut administrativy. Formulář, telefonát, Google Kalendář, kontrola dostupnosti a nakonec ruční příprava smlouvy.

Když se blížila další motorkářská sezóna, začala jsem hledat způsob, jak celý proces zjednodušit. Hotové rezervační nástroje nestačily, a tak vzniklo Motocentrum HK Experience.

Webová aplikace, která zákazníkům usnadňuje rezervaci předváděcí motorky a nám uvnitř firmy pomáhá držet pohromadě všechno, co se kolem jedné jízdy musí stát.

Když samotná jízda funguje skvěle, ale cesta k ní už o něco méně

V Motocentru HK máme širokou flotilu předváděcích motorek. Zákazník si může přijít motorku vyzkoušet, půjčit si ji na víkend nebo s ní strávit i několik dní.

Samotný produkt je skvělý. Sednete, nastartujete a jedete. Jenže než se zákazník k téhle chvíli dostal, bylo za tím poměrně dost práce jak pro nás, tak pro něj. Na webu vyplnil formulář. Někdo z týmu se mu následně ozval, společně našli vhodný termín, ověřili dostupnost konkrétní motorky a rezervaci ručně zapsali do Google Kalendáře.

Před samotnou jízdou bylo potřeba znovu dohledat údaje zákazníka v kalendáři, připravit smlouvu, předávací protokol, zkontrolovat řidičský průkaz a nachystat motorku. A když měl zákazník zájem o delší výpůjčku, přidalo se ještě hledání v ceníku a počítání ceny.

Každý krok je potřeba. Problém byl, že dohromady jich bylo prostě moc.

45 minut práce kvůli jedné rezervaci

Když jsem celý proces rozebrala, vycházelo mi, že jedna předváděcí jízda znamená přibližně 45 minut administrativy. A to ještě v ideálním případě, kdy si všichni rychle zavolají, zákazník má jasno v termínu a motorka je zrovna volná.

Z pohledu zákazníka byl problém trochu jiný. Po odeslání formuláře vlastně nevěděl, jestli je jeho vybraná motorka v daném termínu dostupná. Musel čekat, až se mu někdo ozve. Pokud si chtěl porovnat více modelů nebo zjistit cenu delší výpůjčky, čekalo ho další hledání.

Přitom značka Motocentra HK stojí na jednoduché myšlence: Motorka má být radost, ne starost.

No, cesta k předváděcí jízdě tuhle myšlenku úplně nenaplňuje.

První nápad? Použít něco, co už existuje

Nechtěla jsem hned stavět vlastní systém. Ve firmě už používáme Microsoft Bookings pro rezervace jízd na testovacích akcích, takže první logický krok byl zjistit, jestli bychom přes ně nemohli vyřešit i běžné předváděcí jízdy. Pro jednoduchou rezervaci typu „vyber si hodinový slot“ fungují dobře. Jenže půjčování motorek má několik specifik.

Motorka může být pryč několik hodin, celý víkend nebo více dní. Zákazník ji může vyzvednout jen během otevírací doby, její obsazenost ale samozřejmě pokračuje i přes noc. Potřebujeme hlídat předání, vrácení, návaznost jednotlivých rezervací a někdy i příslušenství, které se k motorce půjčuje. Do toho se podle délky výpůjčky mění cena.

A rezervací samotná práce týmu nekončí. Takže jsem postupně došla k tomu, že nepotřebujeme další rezervační formulář. Potřebujeme systém pro celý proces.

A tak jsem poprvé naplno zkusila vibe coding

V tu dobu jsem už nějakou dobu sledovala, kam se posouvají AI nástroje pro tvorbu webů a aplikací. A řekla jsem si, že tohle je přesně ten typ problému, na kterém to můžu zkusit.

Začala jsem v Lovable. Ne obrazovkami, ale procesem.

Jaká pravidla ovlivňují dostupnost motorky? Co musí vidět tým? Co se děje poté, co rezervace přijde? Kdo ji schvaluje? Co se připravuje před předáním? A co potřebujeme vědět ve chvíli, kdy se motorka vrací? Co musí udělat zákazník? Co potřebuje vědět?

Teprve potom jsem jednotlivé kroky začala převádět do aplikace.

A tady pro mě přišlo jedno z největších zjištění celého projektu. Vibe coding výrazně zrychlí stavbu. Neudělá za vás ale rozhodnutí, co vlastně stavíte.

Otevírací doba není totéž co dostupnost motorky

Jedna z věcí, která na první pohled působí úplně jednoduše. Jenže není.

Pokud si zákazník půjčí motorku v pátek odpoledne a vrátí ji v pondělí ráno, potřebujeme řešit dvě různé věci.

Kdy smí motorku převzít nebo vrátit a zároveň, kdy je konkrétní motorka skutečně obsazená. Další zákazník nemůže naskočit hned co pomine čas vrácení prvního zákazníka. To nejsou stejná pravidla. A právě podobné drobnosti jsou podle mě krásný příklad toho, proč nestačí jen říct AI nástroji „udělej mi rezervační systém“.

Funkční aplikace vzniká až ve chvíli, kdy naplno rozumím tomu, co se v reálném světě kolem rezervace děje.

Zákazník by neměl studovat ceník

Další věc, kterou jsem chtěla odstranit, bylo zbytečné přemýšlení. Když si chci půjčit motorku, měla bych si vybrat model, termín a rovnou vidět, kolik mě to bude stát.

Ne hledat cenu v ceníku, počítat počet dní a přemýšlet, jestli se na mnou vybraný termín vztahuje jiná sazba.

Aplikace proto pracuje s cenou přímo v rezervačním procesu. Zákazník si vybírá motorku a délku výpůjčky a má jasno ještě předtím, než rezervaci odešle.

Je to malá změna, ale právě z podobných drobností se podle mě skládá dobrá zákaznická zkušenost

Katalog motocyklů k rezervaci v Motocentrum HK Experience
Katalog motocyklů k rezervaci v Motocentrum HK Experience
Rezervační kalendář na detailu motocyklu
Rezervační kalendář na detailu motocyklu

Administrace není vedlejší produkt

Na začátku by bylo snadné soustředit se hlavně na zákaznickou část. Hezký katalog motorek. Filtry. Detail modelu. Rezervační formulář.

Jenže tím bych vyřešila jen polovinu problému. Největší úspora času byla schovaná uvnitř firmy.

Proto jsem administrační část od začátku navrhovala jako stejně důležitou část aplikace. Tým nepotřebuje „databázi všech rezervací“, potřebuje ráno otevřít aplikaci a rychle zjistit, které motorky dnes předáváme, které se vrací, co je potřeba připravit, jaké příslušenství zákazník potřebuje, v jakém stavu rezervace je a co nás čeká v dalších dnech.

Najednou tedy nešlo jen o to, kam uložit data, ale jak je ukázat tak, aby podle nich člověk dokázal pracovat. A právě tady se mi znovu potvrdilo, jak moc spolu UX design a interní procesy souvisí.

Co jednou zadám, nechci zadávat podruhé

Další jednoduché pravidlo, které jsem se snažila držet: Pokud už zákazník nějakou informaci jednou vyplnil, proč bychom ji měli znovu ručně opisovat?

Údaje z rezervace proto aplikace využívá i při přípravě smluv a předávacích dokumentů. Stejně tak se stav rezervace propisuje do komunikace se zákazníkem a navazují na něj transakční e-maily. To jsou přesně ty části administrativy, které šetří ve firmě čas.

Co nakonec vzniklo

Motocentrum HK Experience dnes propojuje dvě strany jednoho procesu.

Pro zákazníka

Může si na jednom místě:

  • prohlédnout předváděcí motorky,
  • filtrovat je podle značky nebo typu,
  • podívat se na detail modelu,
  • zjistit cenu výpůjčky,
  • vybrat termín,
  • a odeslat konkrétní rezervaci.

Místo obecné poptávky tedy přichází mnohem přesnější požadavek.

Pro tým

V administraci máme:

  • přehled aktuálních a budoucích rezervací,
  • informace o předání a vrácení,
  • stav rezervace,
  • potřebné příslušenství,
  • data pro přípravu smluv,
  • přehled toho, co je potřeba řešit dnes a v dalších dnech. A část komunikace se zákazníkem přebírají automatické e-maily.

Není to nic revolučního. Je to prostě na míru nástroj postavený kolem toho, jak opravdu pracujeme.

Co se změnilo

Před aplikací byl proces rozdělený mezi webový formulář, telefon, Google Kalendář, ceník a ručně připravované dokumenty.

Dnes má zákazník katalog modelů, cenu i rezervaci na jednom místě a interní tým vidí celý proces v jednom systému. Část informací se nemusí znovu přepisovat, smlouvy se připravují z již zadaných dat a rezervace nejsou jen událostí někde v kalendáři, ale součástí celého workflow.

A pro mě je na tom nejdůležitější ještě jedna věc. Aplikace se dostala do reálného provozu a lidi ji používají. A řeší problém, který jsme předtím ve firmě řešili znovu a znovu každý týden.

Co mi tenhle projekt ukázal o vibe codingu

Vibe coding mě nadchl. Odstranil část bariéry mezi nápadem a funkčním produktem.

Dřív bych podobný projekt mohla namapovat, navrhnout flow, vytvořit prototyp ve Figmě a následně čekat, až ho někdo naprogramuje. Tentokrát jsem mohla pokračovat dál. Navrhnout. Postavit. Vyzkoušet. Zjistit, že něco nefunguje. Upravit to. A znovu pustit do provozu.

Ten cyklus je najednou neuvěřitelně rychlý. Jenže čím rychleji dokážu něco vytvořit, tím důležitější je podle mě umět si předem položit správné otázky.

Jaký problém řeším? Pro koho? Co se musí změnit oproti dnešnímu procesu? A potřebujeme vůbec vlastní aplikaci?

AI umí vytvořit spoustu věcí. Ale sama nepozná, která z nich má pro firmu skutečnou hodnotu.

Mohlo by se hodit

Portfolio