Originální e‑shop s originálními séry

Tělo a mysl v rovnováze, design a funkční e‑shop v rovnováze

Před několika měsíci nás kontaktoval Tomáš Uher, jeden ze zakladatelů značky SÉRUM. Příběh Séra tu do pár řádků napasovat nezvládneme (přečíst si jej ale můžete přímo na stránkách). Ve zkratce – jde o originální a dlouho vyvíjené doplňky stravy obsahující kanabinoidy, séra mají zlepšovat rovnováhu těla a mysli a pomáhat s chronickými zdravotními problémy.

V Séru měli jasnou vizi. Zkušenosti s online prodejem si totiž už vyzkoušeli na pronajímaném řešení. Jenže zjistili, že krabicové řešení jim zdaleka nestačí. Pro naplnění své vize tak potřeboval o poznání kvalitnější online obchod.

„Nejprve jsme si vytipovali pár agentur a sjednali si schůzky. Už po prvním setkání s Cognitem bylo jasné, kdo to v našich očích vyhrál. Jejich nápady měly přesah. Oproti ostatním to bylo nesrovnatelné.“
Tomáš Uher, SÉRUM.cz

Tomáš s kolegy chtěli e‑shop na míru, ale potřebovali jej koncipovat nejen jako prodejní platformu pro své produkty, ale i jako místo, kde lidé mohou čerpat relevantní informace o vývoji a složení sér, informace o duševním zdraví nebo si nechat poradit ohledně výběru a způsobu užívání.

„Cognito nás umí vést k cíli a usměrňovat, když je potřeba. Celé si to, troufám si říct, dobře sedlo.“
Tomáš Uher, SÉRUM.cz

A tak, i když je jejich základnou západočeská Plzeň, oboustranná chemie, která mezi námi vznikla, odbourala geografickou vzdálenost, a my jsme se domluvili na spolupráci s vidinou toho, že produkty značky SÉRUM se budou prodávat skrze Marco, naše vlastní řešení e‑shopů na míru. Od UX a UI designu až po kompletní vývoj frontendu a backendu. 

Zadání: Krásný design, praktické použití

• Designově propracovaný e-shop na míru s nabídkou doplňků stravy a kosmetiky obsahující CBD
• Aplikace brand identity na jednotlivé produktové řady CBD Plus, Brain Balance a později Alergyno a Herbra
• Důraz na design, lehkost, ikonografii, odlišné vizuály produktových řad, produktové animace atd.
• Napojení na platební bránu, Zásilkovnu aj.

Vývoj e‑shopu, který má svůj účel

Nejdřív bylo potřeba si s klientem cíle a očekávání, pak jsme specifikovali funkce, kterými by měl e‑shop disponovat jak z uživatelského, tak administrátorského pohledu. Zaštítili jsme kompletní realizaci e‑shopu na míru. Klient sám měl už blokově rozkreslenou zamýšlenou strukturu webu a představu o jednotlivých sekcích. Tu jsme převedli a dále rozvinuli do formy interaktivního prototypu v Adobe Axure. Provázali jsme jednotlivé sekce a umístili zamýšlený obsah.

Pak nastala designérská výzva. SÉRUM totiž není příkladem běžného e‑shopu. Šlo o vizuálně komplikovanou aplikaci silně produktově zaměřeného webu se znalostní platformou, která uživateli rozšíří povědomí o „biohackingu“, vyvrátí zažité mýty a ukáže, jak složitý nástroj je lidské tělo a že je potřeba mu porozumět do hloubky.

Nebylo jednoduché uchopit celou koncepci tak, aby plnila definované cíle. Soudě dle klientovy zpětné vazby můžeme říct, že jsme přinesli přesně ten úhel pohledu, který se potkal s tím klientovým, a cit, který pomohl zhmotnit klientovu myšlenku.

„Tahle práce je o lidech. A account manager Vojta byl pro projekt klíčovým člověkem. Nikoho jako je on žádná firma, se kterou jsme komunikovali předtím, neměla.”
Tomáš Uher, SÉRUM.cz

Design, který teče

Pro jednodušší spolupráci jsme využívali aplikaci Zeplin. Díky ní je práce s jednotlivými grafickými komponentami efektivnější a redukuje čas kodéra, který následně zpracovává design do jednotlivých šablon stránek. Každý návrh se může připomínkovat, komunikace mezi designérem a klientem je tak o dost snazší. 

Vývoj a aplikace UX i UI designu

No, a pokud jsme doposud považovali design za výzvu, vývoj e‑shopu byl výzvou na druhou. Hlavně kódování šablon typových stránek. V rámci vdechnutí „fluidního“ designu, který má evokovat tekuté skupenství sér, jsme použili spoustu vizuálních prvků, animací a přechodů, které bych dost náročné pohlídat na různých rozlišeních, zařízeních a prohlížečích.

Z hlediska vývoje bylo nelehkým úkolem připravit kompletní hierarchii backendu tak, aby se daly aplikovat odlišné barevnosti produktových řad do designu jednotlivých stránek. Každá z řad CBD plus, Brain Balance, Alergyno nebo Herbra má jiné barevné ladění. A to se prolíná celým webem, včetně blogových článků, sekcí s dotazy nebo samotnými produktovými detaily.

„E-shop se líbí laikům i lidem z oboru. Jako značka před sebou máme ještě kus práce, ale už teď z nás mají přímí konkurenti radost… “
Tomáš Uher, SÉRUM.cz

V rámci vývoje e‑shopu na míru jsme implementovali i interaktivního průvodce, který umí zákazníkům na základě zdravotních problémů doporučit odpovídající doplněk stravy.

Složitá výroba, jednoduchá editace

Klient potřebuje jakýkoliv obsah upravit jednoduše a hlavně rychle. Proto je administrace e‑shopů, která vyvíjíme, navržena tak, aby v ní klient mohl jednoduše vlastními silami editovat obsah webu.

V rámci přípravy webu na ostrý start jsme nastavili webovou analytiku, upravili datové vrstvy a s přicházejícím rokem 2022 jsme nasadili novou cookies lištu, která je pro všechny weby používající analytické a marketingové skripty nutností.

A sérum může působit!

Oboustranná spolupráce vyústila ve spuštění vizuálně atraktivního e‑shopu www.serum.cz, na kterém mohou zákazníci vybírat produkty v kategoriích CBD Plus a Brainbalance, strávit hodiny konzumováním obsáhlých článků týkajících se biohackingu a nechat si doporučit produkt, pasující přesně na míru pomocí interaktivního průvodce. Již brzy se zákazníci mohou těšit na produkty zaměřující se na alergiky (Alergyno) a produkty pomáhající speciálně ženám (Herbra).