Vývoj rozhraní pro obchod b2c nebo b2b je poměrně přímočarý a typický úkol. Pokud ale potřebujete vytvořit scénář vhodný pro obě cílové skupiny na jednom webu, stane se úkol poněkud komplikovanější a zajímavější. To je případ, o kterém budeme diskutovat v tomto článku.
Něco málo o nás
Jsme ZenDesign. Navrhujeme a vyvíjíme projekty elektronického obchodování.
Navrhovali jsme online obchody pro takové značky jako: ALBA, BoConcept, Williams et Oliver, Audiomania a mnoho dalších.
Pro koho je obchod určen?
EGLO je společnost zabývající se dekorativním osvětlením interiéru, která se od svého vzniku stala jedním z hlavních hráčů na mezinárodním trhu. Společnost prodává přibližně 18 milionů svítidel ročně do více než 132 zemí.
Když mnoho lidí po celém světě slyší frázi „populární obchod s nábytkem“, vzniká v jejich hlavách asociace s „IKEA“. V Evropě, pokud jde o osvětlení, si EGLO pamatují podobně. Ale v Rusku není EGLO tak slavné jako v Evropě. A jejich ruská zastupitelská kancelář nás kontaktovala, abychom tuto situaci napravili.
Předprojektová analytika
Briefing
Nejprve je důležité se ponořit do oblasti předmětu projekt za účelem rozhovoru se zákazníkem ve stejném jazyce a lepší pochopení specifik. Stručný přehled se standardními otázkami, jako je „Seznam webů, které se vám líbí“, není ponořující. Potřebujete individuální přístup s přípravou opravdu důležitých otázek a pochopení toho, na koho se jich ptáte.
Podařilo se nám komunikovat s vrcholovým vedením, s lidmi odpovědnými za stávající web, s prodejními konzultanty a shromáždit ucelený obraz o dané oblasti, aktuální situaci, publiku, bolestech a cílech projektu.
Auditovat
Vzhledem k tomu, že v době zahájení vývoje společnost EGLO již měla aktuální web s určitým publikem, měli jsme možnost vidět, jak se problém nyní řeší, jaké problémy existují, jaké otázky a potíže mají uživatelé. Díky tomu bylo možné zohlednit dosavadní zkušenosti (pozitivní i negativní) a vyhnout se stejným chybám v nové verzi webu, aniž bychom uživatele zbavili toho, co se jim již líbilo.
Dozvěděli jsme se o cesta a potřeby publika b2c a b2b … Zjistili jsme, že web nepoužívají pouze zákazníci, ale také zaměstnanci offline obchodů, pro pohodlí kterých byla vyvinuta aktuální adresářová struktura.
Architektura Společnost má papírové katalogy, které konzultanti ukazují návštěvníkům off-line: „Moderní lampy“, „Vintage lampy“, „Hvězdy světla“, „Profesionální světlo“. Na základě tohoto rozdělení byla vytvořena navigace na webu.
Budování struktury externího online obchodu založené na zvycích zaměstnanců je nesprávný přístup, protože je třeba postupovat z pohodlí uživatelů.
Po analýze sortimentu, aktuální cesty uživatele pomocí filtrů, stránek konkurence, jsme přepracovali architekturu a navrhli rozdělit zboží ne podle dvou stylů, ale podle následujících parametrů.
„Podle typu zařízení“
To umožní potenciálnímu kupujícímu okamžitě vybrat konkrétní typ produktu. Navíc pokrývá scénář, kdy uživatel ví, že potřebuje lustr, ale ještě se nerozhodl o stylu.
„Podle typu instalace“
Ve fázi briefingu a auditu vyšlo najevo, že ne všichni uživatelé chápou rozdíl mezi bodovým a nástěnným svítidlem, stojací lampou, lampou a lampu. Typ instalace proto tento problém dokonale řeší. „Nevím, jak se tomu říká, ale mělo by to být na zdi“ 🙂
„Podle stylu“
To je pro tu část publika, která ví, jak se Provence liší od Vintage a Art Deco. Mezi kupujícími osvětlení se ukázalo být značné procento, zejména v segmentu b2b.
„Podle katalogu“
Nezapomněli jsme ani na publikum kupujících, kteří si vybírají produkty v offline katalogu a teprve poté přejdou na web, kde si je mohou koupit.
< img src = "/wp-content/uploads/e869a446257052628c5cb31be9d1efb6.png" />
design
Navrhli jsme celkem 16 sekcí. Zní to celkem jednoduše, nesouhlasíte?
Ve skutečnosti však jde o 113 prototypů. Každá část byla zpracována s přihlédnutím ke skutečnosti, že ji budou používat dvě publika: b2b a b2c. Byly zobrazeny všechny stavy a nuance. Bylo jich opravdu hodně. A to vše muselo být zohledněno ve fázi návrhu, aby v dalších fázích nebylo nutné vše přepracovávat. Samotná stránka pokladny se skládá z 10 prototypů, protože existuje rozdíl: b2b nebo b2c, autorizovaný nebo ne, dodávka nebo vyzvednutí atd. Níže vám řekneme více o klíčových sekcích.
Katalog
Vyvinuli jsme 2 verze katalogu: pro fyzické a právnické osoby. Katalog pro jednotlivce je klasický pro internetový obchod.
Verze katalogu pro právnické osoby má ale další subjekty: možnost stáhnout ceník, který se generuje pro každou sekci, na základě filtrů použitých uživatelem, funkce „Rezervovat“ na kartě. Tato rezerva umožňuje publiku b2b po určitou dobu shromáždit požadovaný počet produktů na osobním účtu, aby si ho ostatní uživatelé nekupovali. Vzhledem k tomu, že objednávky v tomto segmentu jsou velkoobchodní, pomáhá tato funkce vyhnout se situaci, kdy uživatel vytvoří svůj košík a v době nákupu již některé zboží chybí a musí hledat analogie.
< img src = "/wp-content/uploads /685d3d78e302abedb38f0679acc63008.png" />
Produktová karta
Již ve fázi návrhu jsme uvažovali o tom, jak by měl být produkt představen konečnému spotřebiteli, proto jsme se zaměřili na fotografii produktu.
Karta produktu je také individuální pro fyzické a právnické osoby.
Karta pro právnické osoby zobrazuje aktuální stav dostupnosti zboží: kolik pozic je v Maďarsku, v Moskvě nebo na cestě. Právní osoba také vidí osobní cenu se slevami, obecnými velkoobchodními a maloobchodními cenami, aby pochopila její výhody.
Ve fázi návrhu je důležité zjistit stavy dynamických bloků. V tomto případě se jedná o blok s cenou a množstvím:
Jedním z „triků“ karty produktu a některých dalších částí webu je možnost prohlížení produktu v různých interiérech. To vám umožní vidět produkt ve skutečném kontextu, nejen na bílém pozadí. Díky tomu je pro uživatele snazší prezentovat produkt doma, navíc nástroj zobrazuje další produkty, které se současnému produktu daří, čímž se zvyšuje průměrná kontrola košíku.
Vzhledem k tomu, že se jedná o web s jednou značkou, bylo důležité zajistit možnost prohlížení produktů z kolekce, aby si uživatel mohl zakoupit vizuálně odpovídající produkty pro různé místnosti a různé typy instalace.
Je také důležité nezapomenout na malé věci – doplňky. V tomto případě se jedná o žárovky, na které lidé při nákupu zpravidla zapomínají. Uvědomili jsme si možnost nákupu souprav. Uživatel nyní nezapomene koupit žárovky a nebude se muset trápit se základnou a dalšími parametry, které jsou při nákupu důležité.
Nákupní košík
U jednotlivců se vše dělá jednoduše:
Zobrazuje celkový počet produktů na skladě, možnost odebrat nebo přidat k oblíbeným.
U b2b je situace výrazně odlišná:
Nyní si můžete stáhnout šablonu a nahrát produkty ze souboru. To bylo provedeno záměrně, protože mnoho zástupců tohoto segmentu dává přednost shromažďování informací o zboží v aplikaci Excel, aby před nákupem provedli nezbytné výpočty.
Zobrazuje také informace o množství konkrétní pozice v rezervě a v košíku.
Pokud jde o velkoobchodní dodávky, mají uživatelé b2b přístup k podrobným informacím o dostupnosti zboží ve skladu v Moskvě a Maďarsku. To vám umožní vybrat například 10 kusů z další dodávky z Moskvy a 15 z další dodávky z Maďarska. V takovém případě uživatel bere na vědomí, že doručení z Maďarska bude později. K tomu jsme navrhli konfigurátor, ve kterém si můžete vybrat zboží z konkrétního skladu nebo vyzvednout určité množství zboží z rezervy.
Pokladna
U právnických osob jsme nabídli provést další blokujte s podrobnostmi a integrujte je s DaData, abyste získali všechna data podle INN nebo názvu, čímž zjednodušíte život uživatele.
Klient b2b má podle smlouvy také dodatečnou lhůtu, díky které může provést objednávku bez platby. Proto jsme navrhli zobrazit widget, který by uživatele informoval o aktuálním limitu.
Můj účet
Kancelář jednotlivce má standardní sadu funkcí – historii objednávek, vrácení atd. Kancelář právnické osoby jsme implementovali ve formátu multifunkčního palubního panelu, který vám umožňuje spravovat všechny interní funkce obchodní partner.
V kanceláři právnické osoby byla také samostatně zpracována funkce rezervy, která vyhrazuje vybranou skupinu zboží na určité období.
Další funkcí osobního účtu právnické osoby je schopnost generovat ceník podle zadaných parametrů.
Uživatel vytvoří šablonu, pomocí které může dále požadovat ceník, který potřebuje pro konkrétní datum.
Další návrh?
Po dokončení fáze návrhu jsme začali vyvíjet responzivní design. Tady jsou principy, které jsme sledovali:
– Nenechte se přitahovat k vizuálním rozhodnutím fáze návrhu a vizuál zcela přehodnoťte a udržujte logiku rozhraní.
– Nejprve mobilní a vysoká úroveň vývoje všech adaptivních verzí, kde je každá verze pro své zařízení zvlášť a pečlivě zpracována, s přihlédnutím ke specifikům každého zařízení.
– EGLO je rakouská společnost s výrazným evropským přístupem k designu a brandingu, proto je design internetového obchodu vytvořen ve stylu evropského minimalismu.
– Návrh internetového obchodu by měl být pokračováním designu samotného produktu.
– Posílení a rozvoj promyšlené použitelnosti ve fázi návrhu prostřednictvím designu a mikroanimací.
Co se stalo?
Existuje několik způsobů, jak zobrazit výsledky:
Videoprezentace návrhu projektu (lepší zobrazení na celou obrazovku):
Zobrazit odeslání projektu s popisem na webových stránkách studia
Online obchod EGLO
Shrnutí
Při navrhování je důležité vzít v úvahu nejen to, jaké stránky je třeba vytvořit, ale také v jakém kontextu a kým budou použity. Na příkladu jsme si ukázali, že stejná sekce může plnit zcela odlišné funkce pro různé zástupce cílové skupiny.
Přemýšlení o umístění značky a prezentaci zboží na webu by mělo být již ve fázi návrhu. Je mnohem snazší přijít, odsouhlasit a distribuovat prvek do potřebných sekcí ve fázi návrhu než ve fázi návrhu, kdy již byla dohodnuta celá struktura.
