William & Thomas e-shop
Odvětví:
Výstupy:
Projekt ve Figmě
Klient
Quanti s. r. o.
Rok
2024
Shrnutí
Projekt představuje kompletní redesign e-commerce webu William & Thomas Bakery s cílem vytvořit moderní a intuitivní online prostředí pro nákup pečiva. Nový design vychází z existující vizuální identity značky a respektuje její řemeslný charakter, zároveň je však přehlednější, škálovatelný a uživatelsky přívětivější.
O William & Thomas Bakery
William & Thomas Bakery je síť řemeslných pekáren inspirovaných francouzskou tradicí s pobočkami v Brně a Praze. Pekařství si zakládá na používání kvalitních surovin od lokálních dodavatelů a dodržování tradičních postupů při výrobě. Díky tomu nese pečivo, jež je připravováno přímo na pobočkách po celý den, chuť čerstvého českého másla a nutričně bohaté mouky z českých polí.
Hlavní problém
Původní e-commerce web William & Thomas Bakery funkčně naplňoval základní potřeby značky, nicméně z pohledu uživatelského zážitku zde byl prostor pro výrazné zlepšení. Hlavní navigace a hamburger menu obsahovaly položky, které bylo možné lépe pojmenovat a logičtěji uspořádat. Některé důležité funkce typické pro moderní e-commerce, jako například vyhledávání produktů nebo filtrování dostupnosti zboží, buď chyběly, nebo jejich implementace nebyla dostatečně uživatelsky přívětivá.
Další oblastí k úpravě byla vizuální stránka webu. Barevnost a kontrast bylo potřeba sjednotit a upravit tak, aby lépe odpovídaly současným standardům přístupnosti. Samotný nákupní proces a průchod košíkem bylo vhodné zjednodušit a zpřehlednit tak, aby uživatelé měli jasnější přehled o jednotlivých krocích objednávky.
Cílem redesignu proto nebylo kompletně měnit původní koncept, ale navázat na stávající řešení, zachovat jeho silné stránky (především v oblasti vizuální podoby) a zároveň odstranit třecí plochy, které by mohly negativně ovlivňovat uživatelský komfort.
Řešení
Pro William & Thomas Bakery bylo navrženo kompletní UX/UI řešení zahrnující více než 20 obrazovek. Celkový návrh vycházel z UX analýzy provedené UX oddělením společnosti Quanti a ze sumarizace klientských požadavků, které vyplynuly ze schůzek přímo s Vilémem a Tomášem, zakladateli William & Thomas Bakery.
Finální design je postaven na čistém, moderním rozhraní s jemnými pastelovými barvami, které podtrhují řemeslný charakter pekárny. Struktura webu je navržena tak, aby se uživatelé mohli pohybovat přirozeně a intuitivně — podobně, jako by procházeli skutečnou pekárnou. Součástí řešení je například stránka „Výloha“, která uživatele nenutí k okamžitému nákupu, ale umožňuje jim nerušeně procházet celou nabídku produktů William & Thomas Bakery.
Produktová stránka je navržena tak, aby přehledně prezentovala širokou nabídku produktů a umožnila uživatelům snadno vybrat a přidat do košíku požadovanou variantu. Detail produktu poskytuje všechny klíčové i doplňující informace, včetně složení produktu a zobrazení doporučených podobných položek. Checkout proces je transparentní, přehledný a uživatelé mají neustálý přehled o obsahu objednávky, cenách i jednotlivých krocích nákupu.
Součástí redesignu byly také menší, ale důležité UX zásahy zaměřené na zjednodušení rozhodování uživatelů. Například nový widget pro výběr dopravy umístěný přímo v hlavním menu umožňuje zákazníkům okamžitě nastavit místo a způsob doručení objednávky bez nutnosti procházet několik podnabídek či stránek. Při změně místa nebo způsobu dopravy se zároveň zobrazuje přehled rozdílů v cenách mezi jednotlivými pobočkami. Tyto mikro-interakce pomáhají snižovat nejistotu a nastavují správná očekávání už v rané fázi nákupního procesu.
Výsledky
Výsledkem redesignu je moderní e-commerce řešení, které nabízí:
intuitivní a plynulý nákupní proces
výrazně lepší orientaci a přehlednost
čisté, klidné vizuální prostředí v souladu s brand manuálem
přístupné rozhraní splňující kontrastní normy
konzistentní uživatelský zážitek napříč zařízeními
Web nyní nejen podporuje online prodej, ale také posiluje vztah zákazníků ke značce a jejím hodnotám.
Výzvy a zkušenosti
Hlavní výzvou projektu byla jeho komplexnost. Jednalo se o rozsáhlý e-commerce web s velkým množstvím obrazovek a vzájemně provázanými funkcionalitami. Šlo o jeden z nejrozsáhlejších projektů, na kterých jsem se dosud podílel, a vyžadoval důslednou organizaci a konzistenci napříč celým rozhraním.
Další výzvou byla moje částečná účast na samotném vývoji front-endového rozhraní. Díky tomu jsem se mohl blíže zapojit do technické realizace návrhu a získat praktické zkušenosti s implementací designu, mimo jiné při práci s frameworkem Tailwind CSS. Tento přesah mi pomohl lépe chápat omezení i možnosti vývoje a navrhovat řešení, která jsou nejen vizuálně kvalitní, ale zároveň realistická a efektivně realizovatelná.
Projekt mi přinesl cenné zkušenosti s návrhem komplexních e-commerce řešení, spoluprací s vývojovým týmem a dalšími designéry i s přenosem návrhu do funkčního digitálního produktu.