Jak udělat úspěšný redesign webu s 20 miliony uživatelů: případová studie M.Video a zpětná vazba UX

Více než 85% přepracování digitálních produktů selže – základní metriky klesají a zákazníci jsou negativní. V tomto článku vám řekneme, jak se M.Videu podařilo dostat do 15% těch šťastných a zlepšit výkon stránek.

O společnosti

Maloobchodní společnost M.Video je jednou z největších značek v oblasti prodeje elektroniky a domácích spotřebičů v Rusku s pohodlnou online platformou včetně mobilní aplikace a webové stránky.

Geografie přítomnosti značky pokrývá více než 250 měst a má více než 500 obchodů v různých regionech Ruska. Stránku mvideo.ru měsíčně navštíví zhruba 20 milionů unikátních uživatelů.

Problém

Podle Andrey Pchelintsev , Chief Product Officer ve společnosti M.Video , předpoklady pro redesign webu mvideo.ru se připravují již dlouhou dobu. Hlavními jsou suboptimální metriky, zastaralý design, vážné překážky v Customer Journey a nedostatek zaměření na mobilní zařízení jako první. Kromě toho společnost plánovala přechod na technicky nový web.

Na projektu se podílelo několik desítek lidí z různých oborů: produktoví manažeři, UX výzkumníci, vývojáři, analytici, testeři a další.

Jak správně předělat – 6 zásad

Zvenku se může zdát, že změna designu je snadný úkol. To ale platí pouze pro malé výrobky. Redesign obrovského webu jako mvideo.ru je vážná výzva. Jedná se o desítky různých typů stránek, nespočet propojených prvků a přísné požadavky na UI/UX.

Nejdůležitější věcí pro redesign je podle Andreyho takzvaná vize , strategický základ pro zahájení akce. Vzniká díky analýze aktuálních metrik, problémových oblastí, zpětné vazby od uživatelů, konkurentů.

V případě mvideo.ru se vize zrodila na základě prezentace 250 analytických stránek. Podrobně popsal, kde by měl být každý konkrétní prvek, proč je vyhledávání tak důležité atd.

Speciálně pro tento článek si Andrey připravil 6 bodů, které vám pomohou utvořit správnou vizi redesignu:

  • Musíte se dívat na svět s otevřenýma očima. Absorbujte, že existuje celá řada zajímavých a nových, vyplejte „slupku“. Je možné vytvořit velmi fantasmagorický design, ale nebude to to, co vaše publikum chtělo.
  • Ujistěte se, že máte bod B … Mnoho lidí se snaží dokončit práci, aniž by věděli, kam chtějí jít. Pokud nedojde k porozumění, je tu šance, že nikam neodejdete. Pokud se obraz bodu B nevytvoří, je lepší provést fázi analýzy a diagnostiky podrobněji, abyste cítili bolesti a problémy produktu. A na jejich základě vybudujte nějaký druh vize.
  • Nesnažte se pochopit nesmírnost . Můžete se zkusit podívat o 10 let dopředu, to je také přístup. Ale přesto je produktová práce charakterizována skutečností, že existuje provozní účinnost a postupnost. Proto, chtě nechtě, musíte iterativně pochopit, co můžete udělat v první fázi, v dosažení bodu B, C atd. Měli byste to zkusit rozdělit na nějaké bloky.
  • Naučte se pracovat s prioritami . Například máte špatnou konverzi košíku, protože vaše platební brána nefunguje. Nemusíte být vizionář, abyste si uvědomili, že ve spodní části trychtýře čelí nejcennější zákazníci problémům. Musíme tedy začít s nimi. Když váš nákupní košík nefunguje, není třeba vymýšlet něco kosmického, nějaký druh online streamů.
  • Stavíme technicky složité produkty a nemůžeme navrhnout vizi, aniž bychom zohlednili technická součást … Musíme porozumět zásobníku, jeho vlastnostem, dostupnosti personálu, schopnosti přilákat ty nejlepší talenty, systematicky si představovat, jak bude vaše vize postupně implementována, zda na to existují zdroje. Můžete získat skvělou vizi, ale balíček je příliš drahý. V důsledku toho to nikdy nebude realizováno.
  • Lidé neustále halucinují … Vše je třeba ověřit na základě metrik a výzkumu. Pokud neexistuje žádný potvrzený základ, na jehož základě jsou vyvozeny nějaké závěry, nejedná se o nic jiného než o halucinaci. Produkt zde by proto měl mít hlavní nástroje pro metriky svých produktů/konkurentů a výzkum.

O metrikách vám řekneme samostatně, protože cílem jakéhokoli redesignu je jeden způsob nebo jiný, je zlepšit určité ukazatele.

Jaké metriky byly důležité pro přepracování v M.Video

M.Video používá metriky zdraví produktů – toto je podrobná pyramida: první – metriky pořadí, druhého, třetího, čtvrtého řádu.

Na přepracování byly použitelné pouze částečně, protože existuje mnoho příkazů – ne všechny oblasti ovlivněné změnami se týkají určitých metrik. Několik metrik se však stalo důležitými KPI:

  • Online prodej . Tato metrika se stala základní.
  • Převod z výběrového řízení … Další metrika, na kterou se v první řadě spoléhalo. Přechody ze seznamu do košíku a z karty produktu do košíku byly důležité.
  • Průměrný účet . Sledovali jsme, jak moc se to změnilo.
  • Rychlost načítání stránek . Jeho zvýšení se stalo jedním z hlavních cílů redesignu. V elektronickém obchodování rychlost načítání přímo ovlivňuje klíčové metriky. Podle průzkumu Amazonu například každých 100 ms stahování snižuje prodeje o 1%. Google má podobná data – každých 500 ms sníží objem provozu o 20%. M.Video má interní výzkum potvrzující tyto závislosti.

  • Věrnostní metriky – NPS, CSI . Kromě ekonomických metrik byly pro M.Video důležité také metriky loajality – NPS a CSI. K měření CSI byl použit widget Feedback UX.

Protože nám widget poskytuje kvantitativní i kvalitativní data, umožňuje nám přijímat informace dynamicky. Protože dostáváme stovky tisíc odpovědí, všechny statistické „odlehlé hodnoty“ jsou vyhlazeny, takže data jsou poměrně reprezentativní.

Andrey Pchelintsev Chief Product Officer ve společnosti M.Video

Společnost nyní měří CSI v každé fázi cesty zákazníka:

Všechno je hodně o rychlosti. Měli jsme špatné vydání, po kterém upadlo, a okamžitě jsme to viděli v metrikách zpětné vazby. Okamžitě spadli. Jak jsme to opravovali a poté vylepšovali s každou iterací, tato metrika rostla. Když se podíváte na výsledky redesignu podle těchto metrik, pak jsme se rozrostli o 15–25% v závislosti na stránce. To je hodně vzhledem k tomu, že opět získáme stovky tisíc komentářů a hodnocení od uživatelů. Je docela obtížné zvýšit tento ukazatel dokonce o 5%.

Andrey Pchelintsev, hlavní produktový ředitel společnosti M.Video

Vaše vize byla vytvořena, analytika byla dokončena. Nyní musíte vizi nejen vizualizovat, ale také ji „prodat“ interně – klientům ve výzkumu a kolegům. A to je podle Andreyho téměř nejvíce matoucí úkol.

Reklama na vc.ru Zakázat reklamy

Proč je redesign umění argumentace

Proces redesignu ve velké společnosti zahrnuje mnoho zúčastněných stran. Protože důraz na elektronický obchod je online, nejsou to jen kolegové kolem vás, ale také lidé ve správní radě. Jsou také do určité míry zodpovědní za produkt, který vyrobíte: před zákazníky a investory.

Z tohoto důvodu je jednou z hlavních obtíží redesignu zdlouhavý schvalovací proces :

Stává se mnohem více závislý na argumentech než na subjektivitě. Musíte mít konkrétní argumenty, proč například takto by měla být implementována hlavní stránka. Nejen proto, že to designér tak viděl, tak jsme to chtěli. Ne, toto jsou měření související s výzkumem UX, jsou to metriky, prototypy.

Andrey Pchelintsev produktový ředitel M.Video

Při redesignu musíte vzít v úvahu spoustu věcí, které se na první pohled nezdály samozřejmé. Jako příklad uvádí Andrey práci se značkami … Pokud se v důsledku redesignu některé značky přesunou dolů do zápatí webu, kolegové, kteří s nimi pracují, zcela přesunou zaměření a priority. Možná nebudou moci splnit své KPI pro prodej míst atd.

Obecně byly argumenty nejobtížnější změny týkající se umístění míst a toho, co bude v záhlaví webu. Každý chápe, že nejdůležitější informace by měly být nahoře, ale je toho příliš mnoho. Nebo například existuje výčepní lišta s 5 tlačítky. Máme je nechat v takovém množství, snížit na čtyři, nebo místo pátého udělat tlačítko „Více“ se spoustou všeho, co zde nebylo zahrnuto? Je třeba prozkoumat všechny možnosti, neustále s nimi pracovat a hádat se o výběr.

O čem bylo nejtěžší argumentovat během redesignu webu M.Video:

  • „V záhlaví v dolní části máme řádek. Na předchozím webu byl tento řádek jako adresář. Byly tam všechny sekce. Logika nové implementace je zcela odlišná. Toto je panel rychlých odkazů a zaměřuje se na věci, na kterých nejvíce záleží. Má rolování, zejména na mobilní verzi. Jeho poselstvím je poskytnout lidem rychlý a horký přístup k novým produktům. “

„Katalog se nyní zobrazuje samostatně.“ Toto bylo předmětem kontroverze. Na výzkumu jsme viděli, že lidé s tímto normálně pracují, vnímají. Při pilotování jsme byli přesvědčeni, že indikátor je normální. Jediné, co jsme na mobilní verzi viděli, bylo, že přechody z hlavní stránky do katalogu dramaticky poklesly. Museli jsme udělat tlačítko „Katalog“ vedle vyhledávání. Protože lidé prostřednictvím UX Feedback napsali, že to nemohli najít. “

Tímto způsobem „Můžete vytvořit koncept za 3 měsíce, ale pak jej„ prodat “uvnitř ještě několik měsíců. Ukažte, prokažte, možná udělejte obchodní inteligenci, abyste mohli začít hladce.

Podrobný příběh o vývoji je předmětem samostatného článku, tím se v tomto materiálu nebudeme zabývat. Zdůrazněme však, že to je samotné jádro veškeré práce, která se provádí. A všechny obchodní a technické metriky budou do značné míry záviset na tom, jak dobře je architektura naplánována a vývoj je proveden.

Pilot – jak testovat změny

Pilotování je další nejdůležitější částí redesign. V této fázi obdržíte potvrzení nebo vyvrácení vaší vize, konceptu. Je důležité nezapomenout na zálohu starého webu a na neustálá měření k vyhodnocení všeho nového:

Týmy často zapomínají měřit vše, co dělají. Myslím si, že je to chyba, která může být v budoucnu velmi nákladná. Myslím si, že vážnou zásluhou úspěšného redesignu webu M.Video je, že jsme se během celé cesty spoléhali na čísla a v případě potřeby jsme hloubili

Andrey Pchelintsev produktový ředitel M.Video

Jako součást pilotního projektu tým redesignu webu mvideo.ru využíval platformu UX Feedback k včasnému dozvědět se od uživatelů o chybách, překážkách a přáních. Kromě toho společnost měřila CSI v každé fázi cesty zákazníka.

Zpětná vazba UX Je to skvělý nástroj pro zpětnou vazbu uživatelů v reálném čase. Platforma umožňuje shromažďovat kvalitativní a kvantitativní zpětnou vazbu od uživatelů na stránce po stránce. Tato zpětná vazba je prostě neocenitelná – můžete nejen sledovat dynamiku změn v indikátorech jednotlivých stránek, ale také získat kompletní informace o problémech/úspěších zákazníků. Přidejte to všechno k tomu, že je to 24/7/365 v různých aspektech zákaznické zkušenosti, a chápete vážnou hodnotu produktu.

Pro nás jsou metriky, které shromažďujeme prostřednictvím zpětné vazby UX, zahrnuty v metrikách „zdraví produktu“ a jsou nedílnou součástí diskusí o produktových radách a čtvrtletních recenzí. Řekl bych, že tato platforma je jakýmsi „uživatelským impulzem“ webu, který velmi reaguje na sebemenší změny.

Andrey Pchelintsev, produktový ředitel M.Video

Příklad jednoho z postřehů, které se nám podařilo získat od uživatelů – o velkých odrážkách mezi bloky … Pokud byla plocha pracovní plochy malá, například 1360 x 1024, bylo na ní málo informací:

„Seznam měl pouze záhlaví a shora trčící bloky. Musel jsem v prohlížeči nastavit menší měřítko, abych viděl alespoň něco. Ve fázi testování to bylo nepohodlné a nebylo to zřejmé. Protože se nejprve podíváte na své obrazovky, testeři jim nevěnují pozornost.

Provedli jsme implementaci návrhu na základě aktuální distribuce klientů podle obrazovek/rozlišení, podle kupní síly a sledovaných trendů, krácených po měsících. Základem pro nás byly přirozeně obrazovky, které pro nás byly zajímavé z hlediska lepšího prodeje, lepšího zobrazení. Ale přesto existují malé obrazovky, je jich mnoho a všechno na nich bylo příliš velké. “

Průběžné výsledky

Během redesignu mvideo.ru prošel významnými změnami domovská stránka … Bylo tam hodně tahů a svitků. Společnost nekladla velký důraz na změnu rychlosti stahování, dokud jsme v ukázce neviděli problém. A když jsme se začali samostatně zabývat tím, jak všechny tyto tahy a svitky vložené do interaktivního díla, vyšlo najevo, že pokud se rychlost uživatelské interakce s těmito prvky na hlavní stránce urgentně nezlepší, celý redesign ztratí veškerý význam.

Jelikož je platforma stará, původním cílem bylo jednoduše překlenout propast na novém webu. Nebyl kladen důraz na zdokonalování mechaniky. Na maketách tyto problémy nebyly zřejmé. Ukazuje se však, že uživatel bude ve skutečnosti muset velmi dlouho čekat. Tyto bloky se „pohybovaly“ jako nějaký druh zmrzlé látky. Bylo to velmi neinteraktivní. Na ukázce to byla katastrofa.

Od té chvíle se metrika rychlost/výkon stala klíčem k této sekci.

Andrey Pchelintsev produktový ředitel M.Video

Zároveň se na rozdíl od většiny redesignů společnost rozhodla nedat uživatelům možnost „vrátit se“ ke staré verzi webu. Podle Andreyho byl jeho tým zpočátku přesvědčen, že navrhovaná řešení jsou pro klienty mnohem lepší než ta, která byla dříve. Výzkum potvrdil správnost jeho kolegů.

Kromě toho byla na mvideo.ru implementována řada technických změn, které klientovi poskytly lepší uživatelské prostředí. Nakonec, když se pilot rozvinul, společnost se podívala na zpětnou vazbu od uživatelů :

< p>Jakýkoli redesign je pro klienta bolest. Obvykle se mnoho uživatelů začne hněvat a požádat, aby vše vrátili tak, jak to bylo. Viděli jsme, že takových zpráv je velmi málo. Proto jsme čím dál tím odvážnější ve svých záměrech byli.

Andrey Pchelintsev Chief Product Officer ve společnosti M.Video

Podle výsledků pilota byl KPI týmu plochý, tj. Zhruba řečeno, mohl jít „na nulu“. Ukázalo se však, že metriky produktů jsou výrazně vyšší než na starém webu.

Společnost se proto rozhodla, že nenabídne návrat na starý web. V takovém případě by podle Andreyho M.Video opustil starý web a vylepšil rozhraní.

Pokud jde o průběžné výsledky redesignu, obchodní i technické metriky se pozitivně změnily. Rychlost načítání stránky se v průměru zvýšila o jeden a půlkrát a konverze webu po aktualizaci vzrostla o více než 10% .

Změnily se také kvantitativní ukazatele měřené prostřednictvím zpětné vazby UX. Ukázali růst o 10 až 30% a vzhledem k jejich citlivosti na jakékoli změny to společnost považuje za velký úspěch.

Podařilo se nám dokončit sadu úkolů před redesignem? Samozřejmě se nám to podařilo, jsme tým! Ale vážně, ano, všechno fungovalo, ale to je jen začátek. První viditelná část obrovské „ledovce“ změn, které jsou stále před námi

Andrey Pchelintsev Chief Product Officer ve společnosti M.Video

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.