💎 UX Design – Mon secret pour concevoir efficacement une homepage

Juin 10, 2020
Catégorie(s) Design

Screenshot 2020-06-09 at 18.52.08

Hello 👋🏻 Je suis Steven Demeillez, consultant Produit chez Wivoo et fondateur de Blvck Studio. Je te partage sur ce blog mes expériences produit, design et entrepreunariales. Tu peux aussi me suivre sur MediumInstragram ou Facebook.

 

Concevoir efficacement une homepage

 

En plein confinement, j’ai créé pour le compte de Blvck Studio ce site internet : Capber Couverture. Rapidement, je recense les méthodes et les offres de mon client, j’identifie les personas cible et je décide de mener un atelier UX Design « Besoins, Usages, Freins » afin d’optimiser le contenu des pages du site internet. La création des maquettes vient bien après. Cette technique est facilement applicable sous différents contextes et moyens. Peu importe que vous ayez un panel users, que vous soyez seul, que ce soit du B2B… Cela s’applique à plusieurs contextes.

Comment suis-je arrivée à ce résultat ?

Un amateur irait straight to the point et il maquettera selon son humeur du jour. 1 chance sur 100 d’avoir un résultat optimal. Il faut se poser les bonnes questions et se remettre en cause avec une phase d’empathie. C’est toujours mieux si vous pouvez vous baser sur une communauté de users, mais ça marche très bien en le faisant vous même. Voici la différence entre une homepage conçue au feeling et une homepage conçue de manière structurée :

 

 

Identifier & définir le ou les persona(s) 

La première chose à faire est d’identifier et de définir un persona. Pour cela, j’ai récupéré des connaissances auprès de l’artisan pour qui j’ai crée le site. Je savais donc quelle était la cible du site et chaque action effectuée allait répondre au besoin de ce persona. En l’occurence, le site s’adresse au « chef de famille » qui prend la décision de choisir un artisan pour ses travaux de maison, propriétaire de sa résidence principale et le foyer est aisé en terme de revenus.

Screenshot 2020-06-10 at 16.32.11

 

 

 

Démarrage de l’atelier UX : l’empathie

Poser sur un mur une post-it avec un résumé du persona. Ciblez également le besoin principal : un mélange du besoin user et de l’activité de l’entreprise. Mon persona a acheté sa résidence principale et il avait besoin de refaire la toiture, le bien immobilier ayant 30 ans. Maintenant, mettez-vous en condition pour avoir un mindset positif, divergent et serein. En 10 min, mettez-vous à la place de votre persona et notez sur des post-it tout ce qui vous passe par la tête à la question suivante : je dois refaire ma toiture, comment je procède ?

 

Identifier les usages 

Chaque post-it contient des mots clés des actions que votre persona va faire de l’émergence de son besoin jusqu’à la sélection de l’artisan qui va effectuer la prestation. Selon le contexte, vous pouvez faire l’exercice en groupe, utiliser des données utilisateurs (Analytics), exploiter des études statistique (Google 😉) ou vous appuyer sur un UX Researcher, mais même seul vous allez balayer 80% des usages voire plus. Prendre le temps de s’arrêter, de prendre du recul et de creuser les usages est déjà une bonne direction. Ne freinez pas vos pensées avec des contraintes techniques, organisationnelles, contextuelles… laissez libre cours à vos pensées. De plus, certaines idées peuvent paraitre « bateau » mais ce n’est pas le cas, il est important de revenir aux choses basiques pour ne rien rater. Une fois que vous avez un pêle-mêle d’usages, classez-les dans un ordre chronologique d’exécution. En l’occurence, j’ai obtenu ce résultat :

  • Recherche d’un artisan pro près de chez moi 
  • Bouche à oreille / Recherche sur Google / Recherche sur des sites spécialisés (Pages jaunes, Star of Service…) 
  • Sélection de 2/3 artisans intéressants 
  • Prise de contact pour devis et disponibilités
  • Choix d’un artisan
  • Réservation d’un créneau

Screenshot 2020-06-10 at 16.58.40

 

 

Remonter les freins 

Ensuite, sous chaque process « d’usage », vous allez identifier les freins, les doutes, les craintes que le persona peut avoir. Cette étape est importante puisqu’elle permet d’avoir des éléments concrets desquels votre produit, votre page ou votre site va tenter d’être rassurant. Evidemment, il faut que votre offre soit de qualité. Si ce n’est pas le cas, vous avez des pistes d’optimisation pour votre produit. Il peut y avoir un ou plusieurs freins pour chaque étape. Voici le résultat obtenu :

 

  • [Usage : Trouver un artisan pro] Peur de l’arnaque : malfaçon, artisan malveillant…
  • [Usage : Sélection d’artisansPeur de payer trop cher : sur-facturation, arnaque…
  • [Usage : Sélection d’artisans] Peur d’avoir des galèresle projet se passe mal, un imprévu arrive, délais d’exécution supplémentaire…
  • [Usage : Sélection d’artisans] Peur de la mauvaise qualité (main d’oeuvre et produits) : le toit d’une maison est ce qui protège la famille…

Screenshot 2020-06-10 at 17.41.47

 

Apporter des valeurs 

Enfin, pour chaque frein, lâchez-vous pour penser à tous les blocs de contenu, toutes les offres ou tous les avantages que votre produit doit apporter. Voici mon résultat :

Les valeurs qui répondent à la peur de l’arnaque :

  • Réassurance : professionnel, depuis 2004, travail méthodique
  • Qualité UX / UI du site (visuels, textes, ergonomie, rendu graphique, parcours…)
  • Avis clients (de vrais avis c’est toujours mieux)
  • Vidéo de présentation de l’artisan (interview face caméra)

Les valeurs qui répondent à la peur de payer trop cher :

  • Explication du prix juste : la qualité à un prix mais un prix élevé n’est pas synonyme de qualité
  • Solutions de paiement
  • Modalités de paiement 

Les valeurs qui répondent à la peur d’avoir des galères :

  • Explication du process step by step
  • Explication des méthodes de travail

Les valeurs qui répondent à la peur de la mauvaise qualité :

  • Focus sur les produits et l’équipe
  • Choix des produits de qualité

Screenshot 2020-06-10 at 17.55.52

 

 

Résultat final  

Une fois que vous avez vos valeurs, vous pouvez les placer sur votre wireframe par ordre d’importance. En partant de simples post-it, on peut nettement améliorer la conception d’une page, en plaçant au mieux l’utilisateur au centre des réflexions. Finalement, j’ai fait quelques petits changements au moment de produire la page car je l’ai jugé plus pertinent (j’ai mis les avis clients plus haut). L’objectif principal de la page est de rediriger sur la page contact et de lever les doutes du prospect sur ses principales craintes.

Le résultat ici !

Resultat final