Cum echipa de proiectare UX a lui Zivame a permis descoperirea produselor pe mai multe căi

Publicat: 2016-12-24

Acesta este primul dintr-o serie de bloguri pentru invitați în cinci părți, realizată de Udit Khandelwal, director UX la Zivame.

Dacă utilizatorii nu o găsesc, funcția nu există! – Human Factors International (HFI)

Am auzit pentru prima dată acest citat într-o sesiune de instruire la HFI în 2012 și veți găsi întotdeauna că rezonează cu modul meu de a aborda UX.

Descoperirea produselor este unul dintre cele mai importante aspecte ale oricărei afaceri de retail, iar dacă utilizatorii nu găsesc produsele pe care le oferiți, acestea nu există. Pentru a permite explorarea perfectă a produselor la Zivame, am dezvoltat o strategie de descoperire multidirecțională pe platformele noastre. În această serie de 5 articole, voi aborda pârghiile folosite pentru prezentarea colecțiilor, descoperirea de produse și comunicarea ofertei la Zivame.

Acesta este primul articol din această serie și aici voi acoperi în principal articole de la Ice Breakers din lista de pârghii de mai jos:

Cuprins

În această serie:

Spărgătoare de gheață *
  • Carduri de aterizare pe pagina de pornire
  • Pagina de pornire Hero Carusel
  • Colecții prezentate
  • Categoria Masthead
  • Incorporarea aplicației
  • FitCode
La cerere
  • Magazin eterogen-Nav
  • Shop-Nav Imagine recomandată
  • Banner de ofertă
  • Explora
  • Butoane lipicioase în Shop-Nav
  • Cumpărați după experiență
Recomandări
  • Contextual mai mult ca acesta
  • Bestsellerurile noastre
  • S-ar putea sa-ti placa si
  • Recomandare Perfect Fit
  • LookBook
Ținere de mână
  • T&C ofertei paginii de destinație
  • Oferte bazate pe reguli pe:
    • Pagina de categorie
    • Pagina de produs
    • Cart
    • Verifică
Notificări
  • Aplicația mobilă Push
  • Web Push
  • Notificări universale
  • Email de marketing
  • Subsolul e-mailurilor de tranzacție
  • SMS de marketing
Cârlige de conținut
  • Carduri de infuzie de conținut pentru paginile de destinație
  • Pagini de conținut și colecții de pe blog
  • Infuzie de produse pe paginile de conținut
Intruziv și disperat
  • Ferestre pop-up condiționate
  • Mesaje în aplicație
* Acoperit în acest articol

Fiecare dintre acestea servește un scop foarte specific în călătoria utilizatorului și sunt utilizate în consecință. Să le aruncăm o privire, unul câte unul – în timp ce vorbim despre provocările din fiecare caz și despre ce am făcut pentru a le depăși. Voi vorbi și despre valorile de business, oriunde este cazul.

Carduri de aterizare pe pagina de pornire

Provocare

  • 45% din traficul web de pe Zivame este format din utilizatori pentru prima dată
  • 40% din traficul direct și organic ajunge pe pagina de pornire a lui Zivame
  • Majoritatea utilizatorilor de mai sus au foarte puțină idee despre amploarea produselor pe care le oferim

Soluţie

A nu avea un meniu orizontal deschis și a merge cu o navigare cu hamburger pe mobil a fost o abordare foarte bine gândită și testată de utilizatori pe care am început să o urmăm cu noua noastră stivă.

A venit cu costul de a nu fi direct cu privire la ofertele noastre.

Prin urmare, a devenit critic pentru noi să comunicăm la fel, chiar în primul rând. Cardurile prezentate mai jos servesc exact acestui scop.

Ceea ce este interesant este că această abordare a fost mai întâi conceptualizată pentru desktop și apoi adaptată pentru mobil, așa cum se arată mai jos. În versiunea desktop,

cărțile ocupă partea de sus a imobilului la prima pliază, în timp ce în mobil, ele sunt chiar sub bannerul eroului din cauza constrângerii de spațiu vertical.

Cărți de intrare în pagina de pornire și Carusel de eroi
Pagina principală Hero – Mobil

Când am conceptualizat acest lucru, directorii noștri l-au imaginat după cum urmează:

Nimeni care își petrece 8 secunde pe pagina mea de pornire nu ar trebui să plece fără să știe că Zivame vinde lenjerie, îmbrăcăminte și îmbrăcăminte activă. – Shaleen, COO Zivame

… și cred că am făcut o treabă bună în realizarea aceluiași lucru prin design. Poziționarea cardurilor le face de neratat, iar titlurile împreună cu link-urile stabilesc așteptări clare cu privire la categoriile individuale și anume, Lenjerie, Îmbrăcăminte și Îmbrăcăminte. În plus, a patra carte permite suficientă flexibilitate pentru a pune meta-articole care merită un loc în prima pliare.
PS Această componentă este în curs de dezvoltare în timp ce scriu această postare și va fi lansată în curând!

(Citiți și: Modelarea experienței utilizatorului la Zivame: un studiu de caz privind managementul produsului)

Efort

Este greu de imaginat care 4 lucruri vor intra în fiecare card, pentru că fiecare parte interesată din companie caută bunuri imobiliare de calitate pentru proprietatea sa!
În timp ce datele par să fie o cale de evadare ușoară, în care puteți pur și simplu să păstrați cele mai solicitate lucruri pe partea de sus, afacerea ar putea avea o direcție conflictuală . De exemplu, Apparel în sine contribuie la doar 8% din veniturile Zivame de astăzi, dar ocupă 25% din topul imobiliar.

O colaborare interfuncțională cu o moderație suficientă din partea directorilor companiei ar trebui să vă ofere răspunsul corect. După cum spune managerul meu de produs:

Trebuie să fii disproporționat de amabil cu anumite entități pentru a asigura creșterea lor disproporționată. – Vishrut Shukla, Sr. PM – Zivame

Pagina de pornire Hero Carusel

Provocare

  • Acesta este următorul imobil principal, iar proprietatea este vizuală. Trebuie să reprezinte marca și trebuie urmat un limbaj strict de design vizual.

Soluţie

Sincer, acesta a fost unul ușor de proiectat, dar unul greu de executat. Știam că urmăm un limbaj de design mare-îndrăzneț-frumos și, prin urmare, a fost o decizie ușoară ca bannerul să ocupe 100% din lățimea ecranului și 100% din înălțimea rămasă a ecranului. Dar asta ne-a lăsat cu 2 probleme de rezolvat:

  • Pe anumite dimensiuni de ecran, bannerul ar fi decupat deoarece urma să folosim algoritmul de „acoperire”.
  • Când bannerul se întinde până la marginea de jos a ecranului, utilizatorii s-ar putea face iluzia că pagina se termină acolo și că nu există nimic dincolo de asta.

Pentru a rezolva problema decupării, am definit zonele sigure și am testat-o ​​în mai multe rezoluții. După câteva lovituri și încercări, am reușit să-l reținem.
Am plasat un chevron în partea de jos a bannerului pentru a oferi un indiciu vizual utilizatorilor că există mai mult dincolo de banner. Pentru a-l păstra curat, am decis să facem săgeata de navigare unidirecțională, dar am dat și indicații pentru prezentarea de diapozitive punând o navigare bazată pe puncte.

O cantitate mare de colaborare interfuncțională a fost realizată pentru a crea bannerul potrivit, cu mesajul potrivit și a-l combina cu bannerele din pagina de categorii, ținând cont de călătoria utilizatorului. Secțiunea de mai sus afișează un exemplu de captură de ecran, iar mai jos este modul în care am definit zona sigură:

Zona sigură pentru bannerul eroului de pe pagina de pornire

Colecții prezentate

Provocare

  • Bannerele sunt bune pentru a atrage atenția, dar pentru a genera interesul utilizatorilor și pentru a-i face pe utilizatori să dea clic cu așteptările potrivite, trebuie să le spunem puțin mai multe despre colecție. Cu toate acestea, imobilele sunt limitate și există multă concurență între diferite colecții.
  • Designul anterior al paginii de pornire a lui Zivame pentru mobil obișnuia să prezinte un acordeon de colecții în care fiecare colecție avea o gamă de 10 produse urmate de un buton „Vezi mai multe” după derularea până la ultima miniatură. Analiza datelor a arătat că peste 40% utilizatori care au interacționat cu acordeonul au dat clic pe vezi mai mult. Acest lucru întărește punctul menționat mai sus. Cu toate acestea, nu am vrut să folosim acordeonul, deoarece nu era vizual și textul greu.
    Pagina de pornire veche – mobil

  • Încărcarea în avans a prea multor imagini de produs are un impact negativ asupra performanței paginii. Pentru fiecare secundă suplimentară din timpul de încărcare a paginii, conversia scade cu 7%.

Soluţie

Cu prețul unui clic suplimentar, afișați USP-urile, precum și o prezentare a fiecărei colecții. Pe lângă un colaj de produse, am scos la suprafață 3 informații esențiale:

  1. Numele colecției
  2. Descriere
  3. Atributele semnăturii

Acest lucru nu numai că a invocat interesul pentru colecție, ci și ghidează utilizatorul într-o călătorie de descoperire a produsului cu o așteptare stabilită. Colajul produsului poate fi optimizat din punct de vedere tehnic pentru a fi returnat ca o singură imagine de colaj, mai degrabă decât mai multe imagini de produs. Din nou, această versiune a fost parțial implementată pe site-ul actual, iar restul este implementat în timp ce scriu acest articol.

Bannere pentru colecția paginii de pornire (*în curs)

Vizitează Zivame

Categoria Masthead

Provocare

  • Paginile de categorii sunt pagini de destinație principale pentru traficul plătit. De asemenea, oricine face clic pe oricare dintre colecțiile/bannerele de ofertă din cadrul site-ului, aterizează pe o pagină de categorie. Prin urmare, devine esențial să se îmbină călătoria utilizatorului aici și să mențină contextul.
  • Cu cât categoria este mai largă, cu atât mai dificil este pentru utilizatori să aleagă. Prin urmare, pentru anumite cazuri, este posibil să dorim să restrângem călătoria utilizatorului la o subcategorie mai specifică și, ulterior, la anumite produse.
  • Anumite categorii sunt foarte speciale sau noi, iar utilizatorii trebuie să fie informați despre USP-urile chiar în momentul în care ajung pe pagină.

Soluţie

Capul de catarg este format din 4 componente principale. Am venit cu o abordare în care componentele configurabile ar avea grijă de cazurile de utilizare menționate mai sus: pur și simplu introducerea unui banner în masthead și bazându-ne pe bannere creative, cumpărături după, bara de instrumente de filtrare/sortare și oferirea de comunicare pentru a face restul.
Voi vorbi despre bannere aici și voi acoperi mai târziu „cumpărați de” și oferte. Am conceput 3 variante sau șabloane pentru categoria bannere:

  1. Banner unic
  2. Carusel
  3. Bannere împărțite

Bannerele unice funcționează perfect pentru categorii restrânse și vorbesc despre USP-urile lor. Caruselurile și bannerele Split, pe de altă parte, sunt o modalitate excelentă de a oferi mai multe bannere într-un imobil limitat și sunt folosite pentru a conduce la subcategorii.
Când promovează oricare dintre aceste pagini, echipele de marketing digital și creative se asigură că reclamele de marketing vorbesc aceeași limbă și folosesc imagini similare pentru a îmbina călătoria utilizatorului.

Banner de categorie – Single
Banner de categorie – Split
Banner de categorie – Carusel

Acum, la fel ca bannerul eroului paginii de pornire, aceste bannere ocupă 100% din lățimea disponibilă, totuși, înălțimea este constantă. Prin urmare, în unele cazuri (sau rezoluții) ajungem să decupăm bannerul din dreapta. Așadar, la fel ca pagina de pornire, am definit zone sigure și echipa de creație a fost rugată să urmeze același lucru în timp ce proiecta aceste bannere.
Mai jos este un exemplu despre cum am definit același lucru pentru un banner divizat:

Definiția zonei sigure pentru bannerul divizat în categorii

Avertisment

Acesta nu este un design mai întâi pe mobil și, în urma unei degradări grațioase, pe telefoane mobile ne întoarcem la un banner simplu sau la un carusel cu glisare activată. Nu există un banner divizat pentru telefoane mobile.

Incorporarea aplicației

Provocare

  • Vrei să le spui atât de multe utilizatorilor, dar a depăși 4 cărți în timpul integrării este o exagerare. Spațiul este limitat, funcțiile sunt enorme, utilizatorii nu au timp să citească și, cu toate acestea, trebuie să faceți aplicația să se lipească.
  • Nu știi cine navighează : un novice sau un expert, un explorator sau un navigator; și trebuie să proiectați o experiență de îmbarcare potrivită pentru toți

Soluţie

În loc să ne gândim la ceea ce vrem să spunem utilizatorului, am început să gândim invers → Ce ar dori utilizatorii să învețe? Cu o cercetare rapidă a jojei, am putut să ne dăm seama că utilizatorii căutau în principal răspunsuri la următoarele întrebări:

  1. Despre ce este vorba?
  2. Ce pot face aici?
  3. Cum să începeți?
  4. Eu cu ce ma aleg? Cum mă ajută?

Deci problema a fost pur și simplu redusă la 4 ecrane care ar putea răspunde la aceste întrebări. Prin urmare, ne-am redus la zero pe următoarele 4 ecrane:

Despre ce e vorba?
Cum mă ajută?
Ce pot face aici?
Cum să începeți?
Ultimul ecran este proiectat inteligent pentru a promova FitCode , dar utilizatorii sunt liberi să îl ignore și să continue cumpărăturile.

Avertismente

Există câteva erori, pe care acum le corectăm și aș dori să vă avertizez despre:

  1. Fereastra pop-up cu permisiunea de notificare se afișează chiar pe ecranul de înscriere. Acest lucru este foarte iritant pentru utilizator și este posibil să obținem o conversie minimă aici. Ce ar trebui făcut în schimb – permisiunea de notificare ar trebui să fie căutată după apariția unui anumit eveniment (să zicem autentificare, sau succesul comenzii, sau accesarea conținutului etc.).
  2. Mesajele de implicare web (ferestre pop-up de marketing) apar uneori în timpul integrării. Din nou, este o experiență foarte proastă, iar utilizatorii sunt cel mai probabil să nu fie receptivi la niciun mesaj de marketing în timpul integrării. Trebuie să avem grijă să nu fie afișate ferestre pop-up pe ecranele de îmbarcare.

FitCode

Provocare

  • Multe femei preferă să cumpere dintr-un magazin fizic decât să cumpere online. Unul dintre cele mai comune motive pentru aceasta este că nu sunt siguri dacă un anumit produs le va potrivi. Nu pot încerca online.
  • Femeile diferite au forme corporale diferite și nu există un singur produs care să se potrivească tuturor când vine vorba de lenjerie intimă. Prin urmare, prezentarea acestora cu produsul care se potrivește formei și preferințelor lor corporale este crucială.
  • Dacă le oferiți un formular pentru a le completa măsurătorile și preferințele, pierderile sunt mari. Prin urmare, orice soluție pe care o găsim, trebuie să fie eficientă.

Soluţie

Echipa de design vestimentar de la Zivame, împreună cu managerii de produs, au efectuat cercetări ample și au dedus că tipurile de corp ale femeilor pot fi descrise cu exactitate prin gruparea lor în 11 tipuri de profiluri.

Club aceste profiluri, împreună cu măsurătorile și preferințele, și ar trebui să puteți oferi recomandări de produse potrivite utilizatorilor. Numim acest FitCode, care este derivat prin adresarea utilizatorilor un set de întrebări (FitCode Quiz).
O versiune a acestuia a fost concepută, testată de utilizator, implementată și lansată în aplicații. În timp ce utilizatorii primeau conceptul și răspundeau la chestionar, au existat 2 probleme flagrante:

  • Număr mare de abandonuri
  • Unii oameni au crezut că imaginile pe care le-am folosit pentru a reprezenta profilurile sunt înfiorătoare.

Ne-am gândit că testul a fost conceput într-un mod în care puneam utilizatorilor întrebările dificile mai întâi, iar această abordare trebuia schimbată. Trebuia să-i facem pe utilizatori să investească punându-le mai întâi întrebările mai ușoare, apoi pe cele mai dificile. De asemenea, ne-am schimbat creațiile și le-am făcut mai abstracte. Nu mai erau înfricoșători. Aruncă o privire la ecranele de mai jos:

Pornire rapidă FitCode
FitCode Pasul 3 – Măsurați-vă
FitCode Pasul 4 – Descrieți specificul
Rezultate și recomandări FitCode
Găsește-ți potrivirea perfectă

Sper că ați găsit acest articol informativ și perspicace.

Studiați online cursuri de management de produs de la cele mai bune universități din lume. Câștigă programe de master, Executive PGP sau Advanced Certificate pentru a-ți accelera cariera.

Program recomandat pentru tine: Programul de certificare Design Thinking de la Duke CE

Ce se înțelege prin descoperire de produse pe mai multe căi?

Descoperirea produsului se referă la felul în care un client, care a ajuns pentru prima dată la un punct de contact cu clientul - învață, înțelege și reține informații despre produsul pe care firma îl oferă, suficient pentru a se asigura că își va aminti imediat de marca data viitoare când va au o cerință de repetare. Scopul tuturor managerilor de produs ar trebui să fie să se asigure că acest lucru se întâmplă în primele 8 secunde ale experienței clientului la diferitele puncte de contact ale companiei cu clienții. În cazul în care firma oferă mai mult de un produs, scopul este ca acest lucru să se întâmple pentru toți. Acesta este, în principiu, despre ce este vorba despre descoperirea de produse pe mai multe căi.

Există cursuri specifice managementului de produs pentru firmele de comerț electronic?

Nu, nu există cursuri specifice managementului de produse pentru comerțul electronic. Câteva firme mai puțin scrupuloase ar putea pretinde acest lucru, dar ar fi înțelept să-și verifice acreditările înainte de a intra. Programele bune pentru managementul produselor nu sunt atât de specifice, deoarece ar fi un dezavantaj pentru studenți. Scopul de a permite cuiva să devină un bun manager de produs este de a se asigura că are abilitățile și cunoștințele necesare pentru a face o treabă bună independent de alegerea industriei, ceea ce i-ar permite, la rândul său, să comute între industrii în etapele ulterioare ale carierei.

Cum devin manager de produs fără un MBA?

Pentru a fi un bun manager de produs, care poate rezolva cel mai dificil dintre interviuri, abilitățile de bază ale domeniului de care aveți nevoie sunt o înțelegere corectă a tehnologiei produsului, cunoștințe excelente de design de produs și proiectarea călătoriilor clienților și abilități de management al afacerii. Astfel, ar putea fi descurajantă pentru o persoană care are suficiente abilități tehnice și experiență de lucru, dar nu înțelege managementul afacerii, cum ar fi planificarea financiară, bugetarea, managementul proiectelor, marketingul, strategia și așa mai departe. Cel mai bun mod de a le dezvolta ar implica într-adevăr urmarea unui MBA. Cu toate acestea, datorită cererii managerilor de produs calificați, se poate intra în aceste roluri și urmând cursuri cu jumătate de normă în managementul produselor.