ÚvodPrvní mobilní aplikace pro Smarty.cz
Smarty.cz patří mezi největší české prodejce elektroniky. Klient nás oslovil s cílem vytvořit historicky první mobilní aplikaci pro iOS a Android, která rozšíří stávající web a síť kamenných prodejen o nový prodejní kanál. Vedle samotného vývoje jsme navrhli kompletní UX/UI design a architekturu aplikace tak, aby nabídla rychlé, intuitivní a pohodlné nakupování i na mobilních zařízeních.
VýstupyUXDesignMobilní aplikace (iOS, Android)Testování
KategorieE-commerce
TechnologieReact NativeReactExpo SDKTypeScriptBabelARES APIFirebase Cloud MessagingSentry/react-nativeMaestroGitLab CI
VýzvaJak přenést e-shop do mobilu
Převést dobře fungující webový e-shop do mobilní aplikace neznamená jen zmenšit rozhraní na menší obrazovku. Největší výzvou bylo zachovat jednoduchost nákupního procesu i u rozsáhlého produktového katalogu a složitých konfigurací produktů.
Identifikovali jsme tři hlavní rizikové oblasti:
- Chybovost konfigurace variant: Webový konfigurátor produktů fungoval na principu závislých polí (např. výběr modelu telefonu vylučoval určité varianty pouzder). Zatímco na desktopu tento systém může fungovat, na mobilu hrozí přehlédnutí změn, chybná objednávka nebo odchod z frustrace.
- Riziko odchodu v checkoutu: Složitý proces dokončení nákupu (mnoho kroků na malé obrazovce) zvyšuje kognitivní zátěž a snižuje pravděpodobnost, že uživatel nákup skutečně dokončí.
- Prodlužování nákupní cesty: Zdlouhavý proces nákupu od výběru produktu k potvrzení objednávky zvyšuje tření a odrazuje zákazníky od jeho dokončení, což je na mobilu kritičtější než na webu.
ŘešeníMobilní aplikace navržená pro konverze
Projekt jsme zahájili produktovým workshopem, během kterého jsme společně definovali rozsah MVP i technické řešení. Klient se rozhodl pro React Native, který umožnil sdílet většinu kódu mezi iOS a Android a usnadnil budoucí rozvoj internímu týmu. Navrhli jsme novou informační architekturu, UX/UI design i řešení konfigurátoru produktů, které se osvědčilo natolik, že se stalo inspirací i pro webovou verzi e-shopu.
- Intuitivní konfigurátor: Přehledné UX rozhraní na detailu produktu zjednodušilo kombinování parametrů i příslušenství a snížilo riziko chybných objednávek.
- Bleskový checkout: Nákupní proces jsme zredukovali na minimum kroků a zapracovali automatické předvyplňování údajů z minulých nákupů, což zkracuje dobu do dokončení objednávky.
- Sdílení know-how: V závěrečné fázi vývoje jsme skrze průběžné code review předali osvědčené postupy pro vývoj v React Native internímu týmu klienta.
ZajímavostiKnow-how předáno klientovi
Vývoj takto rozsáhlé e-commerce aplikace v React Native vyžadoval pokročilou architekturu zaručující bleskovou plynulost i při procházení tisíců položek v katalogu. Spolupráce navíc vynikla přesahem do hlavního byznysu klienta: nové UX řešení konfigurátoru se osvědčilo natolik, že ho Smarty.cz převzalo i na svůj primární web. Zásadní byl také přenos know-how – po dodání 90 % frontendu jsme formou průběžných code reviews předali internímu týmu osvědčené postupy pro samostatný a dlouhodobý rozvoj aplikace.
FAQ
Mobilní aplikace doplňuje web jako samostatný prodejní kanál. Umožňuje rychlejší opakované nákupy, práci s push notifikacemi, personalizaci i lepší využití funkcí telefonu. Správně navržená e-commerce aplikace zvyšuje komfort zákazníků a může přispět k vyšší retenci i počtu opakovaných objednávek.
Nestačí pouze zkopírovat web do mobilního prostředí. Mobilní aplikace vyžaduje novou informační architekturu, jednodušší navigaci a optimalizovaný nákupní proces pro menší obrazovku a ovládání prstem. Důležité je zachovat vysokou použitelnost i konverzní potenciál, zejména při výběru produktů a dokončení objednávky.
React Native je vhodný pro projekty, které chtějí vyvíjet aplikace pro iOS i Android z jednoho sdíleného zdroje kódu. Přináší rychlejší vývoj, nižší náklady na údržbu a jednodušší předávání projektu interním vývojovým týmům. Správná volba technologie ale vždy závisí na požadavcích produktu, výkonu i dlouhodobých plánech rozvoje.
Konfigurátor musí uživatele jasně provést výběrem jednotlivých variant a zabránit neplatným kombinacím. Na mobilu je přehlednost ještě důležitější než na webu, protože menší obrazovka zvyšuje riziko chyb. Správně navržený konfigurátor zkracuje cestu k objednávce a snižuje počet nedokončených nákupů.
„Chtěli jsme rozšířit e-shop o aplikaci, ale s mobilním vývojem jsme neměli zkušenosti. Spolupráce s Ackee byla profesionální a maximálně transparentní – pomohli nám vytvořit kvalitní základ a předat potřebné know-how, abychom aplikaci mohli samostatně rozvíjet. Výsledkem je nejen funkční MVP, ale především rozšíření kompetencí našeho týmu o mobilní vývoj.“
Adam KošťálekWeb Development Team Leader, Smarty.cz
Team
ManagementRoman Veis
DesignMarkéta HejnáRegina Yusupova
AndroidJakub BaierlMartin Foldyna
iOSJakub BaierlMartin Foldyna
TestingAnna Zmeevskaja
