Robootiq měl široké portfolio robotických řešení pro různé typy provozů. Někteří zákazníci přicházeli s poměrně jasnou představou, jaký typ robota hledají. Jiní ale věděli jen to, že chtějí například zefektivnit úklid, logistiku nebo provoz ve své firmě.

Na projektu jsem vedla UX/UI návrh nového webu od discovery a informační architektury přes user flows a wireframy až po responzivní UI, komunikaci s klientem a spolupráci s developerem při implementaci.

V této case study se zaměřuji na jedno z hlavních rozhodnutí projektu: jak navrhnout web pro dvě odlišné výchozí situace a zároveň vysvětlit robotická řešení lidem, kteří zatím nevědí, co přesně potřebují.

Kontext

Široké portfolio, různé typy zákazníků

Robootiq dodává robotická řešení pro různé typy firem a provozů. Nabídka zahrnuje několik značek, typů robotů, příslušenství a řešení využitelných v různých segmentech.

Klient na začátku projektu neměl existující web, který bychom redesignovali. Měl fungující business, zákazníky a produktové portfolio, ale potřeboval vytvořit nové digitální prostředí, které nabídku srozumitelně představí a pomůže návštěvníka dovést k relevantnímu řešení, demu nebo poptávce.

Během discovery a práce se strukturou nabídky se ukázalo, že zákazníci nepřicházejí na web se stejnou úrovní znalostí.

Někteří už vědí:

Jiní přemýšlejí spíš:

Oba mohou hledat stejné řešení. Jen k němu potřebují dojít jinou cestou.

Problém

Produktový katalog nestačil

Nejjednodušší řešení by bylo postavit web kolem produktového portfolia a nechat zákazníka vybrat si kategorii, značku a konkrétní model.

Pro zákazníka, který teprve řeší problém svého provozu, by například seznam úklidových robotů s technickými parametry poskytoval jen malou pomoc. Nejdřív potřebuje pochopit, kde lze robotizaci využít, co mu může přinést a jaké řešení je pro jeho situaci relevantní.

Zároveň jsme nechtěli komplikovat cestu zkušenějším zákazníkům, kteří už přesně věděli, co hledají.

Vznikla tak hlavní UX otázka projektu:

Řešení

Dvě cesty k jedné nabídce

Místo jedné produktové hierarchie jsem strukturu webu postavila kolem dvou způsobů, jakými zákazníci přemýšlejí.

Ti, kteří už věděli, jaký typ robota hledají, mohli jít přímo přes produktové portfolio:

Zákazníci, kteří začínali spíš u problému svého provozu, mohli vstoupit přes segment:

Obě cesty se potkávaly u stejného produktového portfolia. Segmentové stránky odkazovaly na relevantní roboty a produktové stránky naopak ukazovaly, kde a jak lze dané řešení využít.

Cílem nebylo vytvořit dvě navigace, ale dvě cesty ke stejné nabídce.

Jiná úroveň znalosti potřebovala jiný příběh

Rozdíl nebyl jen v navigaci. Ovlivnil také pořadí informací na jednotlivých stránkách.

U segmentu jsme nemohli předpokládat, že návštěvník už robotickému řešení rozumí. Stránka proto nejdřív vysvětluje kontext provozu, jeho potřeby a možné přínosy automatizace a až potom představuje konkrétní produkty.

Na produktové stránce jsme naopak mohli jít ke konkrétním informacím rychleji:

Stejná nabídka tak pracuje s různou mírou znalosti uživatele, místo aby od všech očekávala stejný způsob rozhodování.

Od orientace k dalšímu kroku

Obě cesty nakonec vedly k demu nebo poptávce. Ani tu jsme nechtěli pojmout jen jako klasický kontaktní formulář.

Uživatel mohl před odesláním poptávky pracovat s konkrétním robotem, jeho konfigurací, orientační cenou, dostupnými variantami služby nebo příslušenstvím. Poptávka tak navazovala na předchozí rozhodování a zároveň předávala obchodnímu týmu více kontextu.

UI a realizace

Od základního vizuálního směru ke spuštěnému webu

Logo, základní barevnost a první vizuální směr vznikly ještě před mojí prací na projektu. Mojí rolí bylo tento základ převést do konzistentního digitálního prostředí fungujícího napříč produktovými stránkami, segmenty, značkami i poptávkovou částí.

Navrhovala jsem layouty, komponenty, obsahové vzory i responzivní chování. S developerem jsem spolupracovala průběžně i během implementace, kdy jsme řešili reálný obsah, výjimky, responzivní stavy a situace, které se ukázaly až při převodu návrhu do funkčního webu.

Návrh pro mě proto nekončil předáním Figmy, ale až ve chvíli, kdy jednotlivé části fungovaly společně v reálném prostředí.

Výsledek

Web pro zákazníky, kteří začínají na různých místech

Výsledkem je spuštěný B2B web, který umožňuje zákazníkům vstoupit do nabídky podle toho, co už o robotických řešeních vědí.

Zkušenější návštěvník se může rychle dostat ke konkrétnímu typu robota. Člověk, který teprve hledá řešení pro svůj provoz, může začít přes segment, pochopit možnosti automatizace a postupně dojít k relevantním produktům.

Obě cesty se potkávají ve stejném portfoliu a pokračují k demu nebo konkrétní poptávce.

Web je dnes spuštěný, klient ho používá jako hlavní digitální prezentaci své nabídky a přes web přicházejí zákaznické poptávky.

Na projektu jsem úzce spolupracovala s developerem i během implementace.

Co bych dnes udělala jinak

U podobně komplexního B2B projektu bych dříve propojila návrh struktury s přípravou finálního obsahu. Texty se během projektu měnily až poměrně pozdě, což ovlivňovalo i některá UX rozhodnutí.

Zároveň bych na začátku ještě přesněji nastavila, které části procesu chceme vzhledem k rychlému time-to-market chránit a které můžeme zjednodušit.