Maquette Bibo e-commerce

Argumentaire

Bibo le poto est la maquette UX/UI d'une page produit e-commerce, réalisée dans le cadre d'un exercice de WebDesign dont la consigne était de concevoir, sous Figma, la fiche produit d'une marque entièrement inventée, en travaillant l'UX, l'UI et l'UX writing. J'ai choisi un robot-compagnon domestique comme produit, et posé un parti pris fort qui irrigue toute l'interface comme toute l'écriture : ne jamais traiter Bibo comme un produit qu'on achète, mais comme un compagnon qu'on adopte.

J'ai mené ce projet seul au semestre 3. La consigne imposait d'organiser les éléments de part et d'autre de la ligne de flottaison et de convaincre, rassurer, renseigner et émouvoir l'utilisateur, en partant du principe qu'un visiteur qui a une question ou une peur n'achète pas. C'est cette logique de levée des freins qui a guidé chacune de mes décisions.
Côté UI, j'ai posé une direction artistique chaleureuse et rassurante : palette crème, pêche et corail, cartes aux angles très arrondis, ombres douces, beaucoup de respiration. Ce registre visuel « domestique » sert l'intention, puisqu'on présente un objet qui entre dans le foyer et non un gadget technologique froid. La cohérence est assurée par un système de composants réutilisés section après section, et la hiérarchie visuelle structure la lecture sans surcharge. Au-dessus de la ligne de flottaison, je place l'essentiel pour convaincre et émouvoir (promesse produit, visuel, prix, appel à l'action) ; en dessous, je déroule la réassurance et la projection dans l'usage. J'ai aussi soigné les états souvent négligés, comme l'écran de panier vide qui relance l'utilisateur au lieu d'être un cul-de-sac, et chaque action déclenche un retour visuel immédiat pour récompenser le geste. Le tunnel de commande est découpé en trois étapes lisibles, avec une barre de progression vers la livraison offerte qui transforme une contrainte en petit jeu et réduit l'abandon.

Côté UX writing, j'ai construit une voix de marque entièrement cohérente autour de la métaphore de l'adoption. Le call-to-action principal n'est jamais « Acheter » mais « Adopter Bibo ». L'étape de livraison se formule du point de vue du robot (« Où Bibo doit-il aller ? »), le paiement devient « Sécurisez l'adoption », les avis clients s'intitulent « Ils l'ont adopté », et le configurateur invite à nommer son robot pour créer le lien avant même la commande. Le ton est complice et déculpabilisant : la FAQ devient « Questions (Pas bêtes) », la section caractéristiques « Sous le capot », la personnalisation « Pimper mon Poto », et des micro-engagements de marque (« Livraison Poto™ », « Garantie Poto », « Fait avec ?? en France », « 1% reversé à la planète ») installent à la fois la proximité et la confiance. L'ensemble suit une vraie scénarisation, jusqu'à une séquence « 24h dans votre nouvelle vie » qui projette l'utilisateur dans l'usage. Conformément à la consigne, le travail s'est concentré sur les textes structurants, à savoir les titres, sous-titres et libellés de boutons, plutôt que sur les micro-textes de remplissage.

Ce travail a été noté 18/20, l'évaluation portant précisément sur l'UX, l'UI et l'UX writing. Mes points forts sont la cohérence de bout en bout entre l'intention, l'interface et le discours, ainsi qu'un ton éditorial assumé qui différencie nettement la marque. Mes axes d'amélioration : l'accessibilité (contrastes, lisibilité des textes secondaires, navigation au clavier) mériterait une vérification plus rigoureuse, et le ton très ludique gagnerait à être validé auprès d'utilisateurs réels pour confirmer qu'il rassure autant qu'il amuse, notamment à l'étape sensible du paiement. Si c'était à refaire, je rédigerais un mini-guide de voix de marque (lexique, do/don't) avant de concevoir les écrans, et je testerais le tunnel de commande auprès de quelques utilisateurs pour appuyer mes choix sur des retours concrets plutôt que sur ma seule intuition.