Comment l'équipe de conception UX de Zivame a activé la découverte de produits multivoies

Ceci est le premier d'une série de blogs invités en cinq parties par Udit Khandelwal, directeur UX chez Zivame.

Si les utilisateurs ne la trouvent pas, la fonctionnalité n'existe pas ! – Facteurs Humains International (HFI)

J'ai entendu cette citation pour la première fois lors d'une session de formation chez HFI en 2012, et vous la trouverez toujours en résonance avec ma façon d'aborder l'UX.

La découverte de produits est l'un des aspects les plus importants de toute entreprise de vente au détail, et si les utilisateurs ne trouvent pas les produits que vous proposez, ils n'existent pas. Pour permettre une exploration transparente des produits chez Zivame, nous avons développé une stratégie de découverte multidirectionnelle sur nos plateformes. Dans cette série de 5 articles, j'aborderai les leviers utilisés pour la mise en avant des collections, la découverte des produits et la communication de l'offre chez Zivame.

Ceci est le premier article de cette série, et ici je couvrirai principalement les éléments sous Ice Breakers de la liste des leviers donnée ci-dessous :

Chacun d'entre eux sert un objectif très spécifique dans le parcours de l'utilisateur et est utilisé en conséquence. Examinons-les, un par un, tout en parlant des défis dans chaque cas et de ce que nous avons fait pour les surmonter. Je parlerai également des mesures commerciales, le cas échéant.

Cartes d'atterrissage de la page d'accueil

Défi

• 45 % du trafic Web sur Zivame est composé de nouveaux utilisateurs

• 40 % du trafic direct et organique atterrit sur la page d'accueil de Zivame

• La plupart des utilisateurs ci-dessus ont très peu d'idées sur l'étendue des produits que nous proposons

Solution

Ne pas avoir de menu horizontal ouvert et opter pour une navigation hamburger axée sur le mobile était une approche très bien pensée et testée par les utilisateurs que nous avons commencé à suivre avec notre nouvelle pile.

Cela a eu pour prix de ne pas être franc sur nos offres.

Par conséquent, il est devenu essentiel pour nous de communiquer la même chose, dès le premier pli. Les cartes présentées ci-dessous servent exactement cet objectif.

Ce qui est intéressant, c'est que cette approche a d'abord été conceptualisée pour le bureau, puis adaptée pour le mobile, comme indiqué ci-dessous. Dans la version de bureau,

les cartes occupent la première place sur le premier pli, alors que dans le mobile, elles se trouvent juste en dessous de la bannière du héros en raison de la contrainte d'espace vertical.

Lorsque nous avons conceptualisé cela, nos dirigeants l'ont envisagé comme suit :

Personne qui passe 8 secondes sur ma page d'accueil ne devrait partir sans savoir que Zivame vend de la lingerie, des vêtements et des vêtements de sport. – Shaleen, COO Zivame

…et je pense que nous avons fait du bon travail pour atteindre le même objectif via le design. Le positionnement des cartes les rend incontournables et les titres ainsi que les liens établissent des attentes claires concernant les catégories individuelles, c'est-à-dire la lingerie, les vêtements de sport et les vêtements. De plus, la quatrième carte offre suffisamment de flexibilité pour mettre des méta-éléments qui méritent un siège sur le premier pli.
PS Ce composant est en cours de développement au moment où j'écris cet article, et sera bientôt disponible !

(Lire aussi : Façonner l'expérience utilisateur chez Zivame : une étude de cas sur la gestion des produits)

Effort

Difficile de savoir quelles sont les 4 choses qui figureront sur chaque carte, car chaque partie prenante de l'entreprise est à la recherche d'un bien immobilier de premier choix pour son bien !
Alors que les données semblent être une voie d'évacuation facile, où vous pouvez simplement conserver les éléments les plus demandés, l' entreprise peut avoir une direction contradictoire . Par exemple, l'habillement lui-même ne contribue qu'à 8 % des revenus de Zivame à ce jour, mais il occupe 25 % des principaux biens immobiliers.

Une collaboration interfonctionnelle avec une bonne dose de modération de la part des dirigeants de l'entreprise devrait vous donner la bonne réponse. Comme le dit mon chef de produit :

Il faut être démesurément gentil avec certaines entités pour assurer leur croissance démesurée. – Vishrut Shukla, Sr PM – Zivame

Carrousel des héros

Défi

• C'est le prochain premier immobilier et la propriété est visuelle. Il doit représenter la marque et un langage de conception visuelle strict doit être suivi.

Solution

Franchement, c'était facile à concevoir, mais difficile à exécuter. Nous savions que nous suivions le langage de conception big-bold-beautiful, et il était donc facile de décider que la bannière devait occuper 100 % de la largeur de l'écran et 100 % de la hauteur d'écran restante. Mais cela nous laissait 2 problèmes à résoudre :

• Sur certaines tailles d'écran, la bannière serait rognée car nous allions utiliser l'algorithme de "couverture".

• Lorsque la bannière s'étend jusqu'au bord inférieur de l'écran, les utilisateurs peuvent avoir l'illusion que la page se termine là et qu'il n'y a rien au-delà.

Afin de résoudre le problème de recadrage, nous avons défini les zones de sécurité et les avons testées sur plusieurs résolutions. Après quelques coups et essais, nous avons réussi à le clouer.
Nous avons placé un chevron au bas de la bannière pour indiquer visuellement aux utilisateurs qu'il y a plus au-delà de la bannière. Pour le garder propre, nous avons décidé de rendre la flèche de navigation unidirectionnelle, mais nous avons également donné des repères de diaporama en mettant une navigation basée sur des points.

Une forte collaboration interfonctionnelle a été nécessaire pour créer la bonne bannière, avec le bon message et l'assembler avec les bannières de la page de catégorie, en gardant à l'esprit le parcours de l'utilisateur. La section ci-dessus affiche un exemple de capture d'écran, et ci-dessous explique comment nous avons défini la zone de sécurité :

Collections en vedette

Défi

• Les bannières sont bonnes pour attirer l'attention, mais pour susciter l'intérêt des utilisateurs et les inciter à cliquer avec les bonnes attentes, nous devons leur en dire un peu plus sur la collection. Cependant, l'immobilier est limité et il y a beaucoup de concurrence entre les différentes collections.
• La conception antérieure de la page d'accueil de Zivame pour mobile arborait un accordéon de collections où chaque collection avait une gamme de 10 produits suivis d'un bouton "Voir plus" après avoir fait défiler jusqu'à la dernière vignette. L'analyse des données a révélé que plus de 40% des utilisateurs qui ont interagi avec l'accordéon ont cliqué sur voir plus. Cela renforce le point mentionné ci-dessus. Cependant, nous ne voulions pas utiliser l'accordéon car il n'était pas visuel et comportait beaucoup de texte.

  

• Charger trop d'images de produits à l'avance a un impact négatif sur les performances de la page. Pour chaque seconde supplémentaire de temps de chargement de la page, la conversion diminue de 7 %.

Solution

Au prix d'un clic supplémentaire, affichez les USP ainsi qu'un aperçu de chaque collection. Outre un collage de produits, nous avons simplement mis en évidence 3 informations essentielles :

1. Nom de la collecte
2. La description
3. Attributs de signature

Cela a non seulement suscité l'intérêt pour la collection, mais a également guidé l'utilisateur dans un voyage de découverte de produits avec une attente définie. Le collage de produits peut être techniquement optimisé pour être renvoyé sous la forme d'une seule image de collage plutôt que de plusieurs images de produits. Encore une fois, cette version a été partiellement déployée sur le site actuel, et le reste est en cours d'implémentation au moment où j'écris cet article.

Visitez Zivame

Titre de catégorie

Défi

• Les pages de catégorie sont les pages de destination principales pour le trafic payant. De plus, toute personne qui clique sur l'une des bannières de collections / offres du site atterrit sur une page de catégorie. Par conséquent, il devient crucial d'assembler ici le parcours de l'utilisateur et de maintenir le contexte.

• Plus la catégorie est large, plus il est difficile pour les utilisateurs de faire un choix. Par conséquent, dans certains cas, nous pourrions souhaiter restreindre le parcours utilisateur à une sous-catégorie plus spécifique , puis à des produits spécifiques.

• Certaines catégories sont très spéciales ou nouvelles et les utilisateurs doivent être informés des USP au moment même où ils arrivent sur la page.

Solution

La tête de mât se compose de 4 éléments principaux. Nous avons proposé une approche où les composants configurables prendraient en charge les cas d'utilisation mentionnés ci-dessus : il suffit de mettre une bannière dans le masthead et de s'appuyer sur les bannières créatives, de magasiner par, de filtrer/trier la barre d'outils et d'offrir une communication pour faire le reste.
Je parlerai des bannières ici, et je couvrirai plus tard "acheter par" et les offres. Nous avons conçu 3 variantes ou modèles pour les bannières de la catégorie :

1. Bannière unique
2. Carrousel
3. Bannières fractionnées

Les bannières uniques fonctionnent parfaitement pour les catégories étroites et parlent de leurs USP. Les carrousels et les bannières fractionnées, en revanche, sont un excellent moyen de fournir plusieurs bannières dans un espace limité et sont utilisés pour mener à des sous-catégories.
Lors de la promotion de l'une de ces pages, les équipes de marketing numérique et de création s'assurent que les créatifs marketing parlent le même langage et utilisent des images similaires pour assembler le parcours de l'utilisateur.

Maintenant, tout comme la bannière du héros de la page d'accueil, ces bannières occupent 100 % de la largeur disponible, cependant, la hauteur est constante. Par conséquent, dans certains cas (ou résolutions), nous finissons par recadrer la bannière à partir de la droite. Donc, tout comme la page d'accueil, nous avons défini des zones de sécurité et l'équipe créative a été invitée à suivre la même chose lors de la conception de ces bannières.
Vous trouverez ci-dessous un exemple de la façon dont nous avons défini la même chose pour une bannière fractionnée :

Caveat

Ce n'est pas une conception mobile d'abord et, après une dégradation gracieuse, sur les mobiles, nous retombons à une simple bannière ou à un carrousel à balayage. Il n'y a pas de bannière fractionnée pour les mobiles.

Intégration de l'application

Défi

• Vous voulez tellement en dire aux utilisateurs, mais aller au-delà de 4 cartes lors de l'intégration est exagéré. L'espace est limité, les fonctionnalités sont énormes, les utilisateurs n'ont pas le temps de lire et malgré tout cela, vous devez faire en sorte que l'application colle.

• Vous ne savez pas qui navigue : un novice ou un expert, un explorateur ou un navigateur ; et vous devez concevoir une expérience d'intégration adaptée à tous

Solution

Plutôt que de penser à ce que nous voulons dire à l'utilisateur, nous avons commencé à penser dans l'autre sens → Qu'est-ce que les utilisateurs voudraient apprendre ? Grâce à une recherche rapide sur la jauge, nous avons pu déterminer que les utilisateurs cherchaient principalement des réponses aux questions suivantes :

1. Ca parle de quoi?
2. Que puis-je faire ici ?
3. Comment commencer?
4. Qu'est-ce qu'il y a pour moi? Comment cela m'aide-t-il?

Le problème a donc été simplement réduit à 4 écrans pouvant répondre à ces questions. Nous nous sommes donc concentrés sur les 4 écrans suivants :

Le dernier écran est intelligemment conçu pour promouvoir le FitCode, mais les utilisateurs sont libres de l'ignorer et de continuer à magasiner.

Mises en garde

Il y a quelques problèmes, que nous corrigeons maintenant et dont je voudrais vous avertir :

1. La fenêtre contextuelle d'autorisation de notification s'affiche directement sur l'écran d'intégration. Ceci est très irritant pour l'utilisateur et nous obtenons probablement une conversion minimale ici. Que faut-il faire à la place - l'autorisation de notification doit être demandée après la survenance d'un certain événement (par exemple, connexion, réussite de la commande, accès au contenu, etc.).
2. Les messages d'engagement Web (popups marketing) s'affichent parfois lors de l'intégration. Encore une fois, c'est une très mauvaise expérience et les utilisateurs sont très susceptibles d'être non réceptifs aux messages marketing lors de l'intégration. Nous devons veiller à ce qu'aucune fenêtre contextuelle ne s'affiche sur les écrans d'intégration.

FitCode

Défi

• De nombreuses femmes préfèrent acheter dans un magasin physique plutôt qu'en ligne. L'une des raisons les plus courantes à cela est qu'ils ne savent pas si un produit particulier leur conviendra. Ils ne peuvent pas l'essayer en ligne.

• Différentes femmes ont différentes formes de corps et il n'y a pas de produit unique en matière de lingerie. Il est donc crucial de leur présenter le produit qui convient à leur morphologie et à leurs préférences.

• Si vous leur donnez un formulaire pour remplir leurs mesures et leurs préférences, les baisses sont élevées. Par conséquent, quelle que soit la solution que nous proposons, elle doit être efficace.

Solution

L'équipe de design de mode de Zivame, ainsi que les chefs de produit, ont mené des recherches approfondies et en ont déduit que les types de corps des femmes peuvent être décrits avec précision en les regroupant en 11 types de profils.

Associez ces profils, ainsi que les mesures et les préférences, et vous devriez être en mesure de fournir les bonnes recommandations de produits aux utilisateurs. Nous appelons ce FitCode, qui est dérivé en posant aux utilisateurs un ensemble de questions (FitCode Quiz).
Une version de ceci a été conçue, testée par les utilisateurs, implémentée et publiée sur les applications. Pendant que les utilisateurs comprenaient le concept et répondaient au quiz, il y avait 2 problèmes flagrants :

• Nombre élevé de décrochages
• Certaines personnes pensaient que les images que nous avions utilisées pour représenter les profils étaient effrayantes.

Nous avons pensé que le quiz était conçu de manière à poser d'abord les questions difficiles aux utilisateurs, et cette approche devait changer. Nous devions intéresser les utilisateurs en leur posant d'abord les questions les plus faciles, puis les plus difficiles. Nous avons également modifié nos créations et les avons rendues plus abstraites. Ils n'étaient plus effrayants. Jetez un œil aux écrans ci-dessous :

Trouvez votre ajustement parfait

J'espère que vous avez trouvé cet article informatif et perspicace.

Étudiez les cours de gestion de produits en ligne dans les meilleures universités du monde. Gagnez des programmes de maîtrise, Executive PGP ou Advanced Certificate pour accélérer votre carrière.

Programme en vedette pour vous : programme de certification Design Thinking de Duke CE

Qu'entend-on par découverte de produits multivoies ?

La découverte de produits fait référence à la manière dont un client, qui arrive pour la première fois à un point de contact client, apprend, comprend et retient des informations sur le produit proposé par l'entreprise, suffisamment pour s'assurer qu'il se souviendra immédiatement de la marque la prochaine fois qu'il avoir une exigence de répétition. L'objectif de tous les chefs de produit devrait être de veiller à ce que cela se produise dans les 8 premières secondes de l'expérience client aux différents points de contact client de l'entreprise. Dans le cas où l'entreprise propose plus d'un produit, l'objectif est de faire en sorte que cela se produise pour chacun d'eux. C'est essentiellement ce qu'est la découverte de produits multivoies.

Existe-t-il des cours spécifiques à la gestion des produits pour les entreprises de commerce électronique ?

Non, il n'y a pas de cours spécifiques à la gestion des produits pour le commerce électronique. Quelques entreprises moins scrupuleuses peuvent le prétendre, mais il serait sage de vérifier leurs références avant de se lancer. Les bons programmes de gestion de produits ne sont pas si spécifiques, car ce serait un désavantage pour les étudiants. L'objectif de permettre à quelqu'un de devenir un bon chef de produit est de s'assurer qu'il possède les compétences et les connaissances nécessaires pour faire un bon travail indépendamment du choix de l'industrie, ce qui lui permettrait à son tour de basculer entre les industries à des stades ultérieurs de leur carrière.

Comment devenir chef de produit sans MBA ?

Pour être un bon chef de produit capable de réussir les entretiens les plus difficiles, les compétences de base dont vous avez besoin sont une bonne compréhension de la technologie des produits, une excellente connaissance de la conception des produits et de la conception des parcours client, ainsi que des compétences en gestion d'entreprise. Ainsi, cela peut être intimidant pour une personne qui possède suffisamment de compétences techniques et d'expérience de travail, mais qui ne comprend pas la gestion d'entreprise telle que la planification financière, la budgétisation, la gestion de projet, le marketing, la stratégie, etc. La meilleure façon de les développer consisterait en effet à poursuivre un MBA. Cependant, grâce à la demande de chefs de produit qualifiés, on peut également accéder à ces rôles en suivant des cours à temps partiel en gestion de produit.