UX / UI : outillage automobile
Ce projet concerne la création d'un nouveau site pour une marque d'outillage automobile.
L'objectif ? Donner un coup de neuf à la marque avec un design plus élégant et ré-orienter le site auprès des clients professionnels. Les contraintes du projet étaient les suivantes :
1) Les visiteurs doivent se rendre compte immédiatement de la diversité des produits proposés - l'essentiel du catalogue doit être présenté dès l'accueil.
2) Les visiteurs professionnels doivent être orientés dès la homepage vers une section du site dédiée.
3) Épurer le design global du site pour un rendu plus élégant
Mon rôle sur ce projet : prototypage du site, réalisation des maquettes, direction artistique, design graphique.
Premier prototype d'arborescence
Dès le prototypage du site, nous essayons de répondre aux contraintes par ces moyens : Tout d'abord, présenter toutes les gammes. Pour cela, nous reprenons la mise en page du catalogue papier, et la transformons en 6 grands blocs avec liens. Cela permet de conserver une cohérence avec le catalogue que les clients ont l'habitude de consulter, mais aussi d'apporter une touche d'originalité à sa version web.
Pour répondre à la seconde contrainte, le CTA "Espace distributeur" est mis en évidence (seul bouton rouge de la page) et visible dès le header pour permettre de ré-orienter immédiatement les pros vers l'espace dédié. Enfin, la homepage est épuré et ne conserve que le minimum pour la navigation. Le catalogue est ajouté sur une bannière pour signifier le côté "terrain" de la marque.
Maquette de la Homepage
Maquette réalisée à partir de Photoshop / Adobe XD. Nous avons opté pour un traitement particulier des photos. Obscurcies par un voile et combinées avec des polices de caractère très fines (qui servent à la naviguer dans les catégories), ces blocs donnent une touche d’élégance épurée au site. On peut remarquer que la bande rouge du logo Autobest a été utilisée comme un guide de lecture sur ces blocs.
Maquette de la page A propos
Des pictogrammes sur-mesure ont été crée pour parler des services. Le tiret rouge du logo de la marque a été adapté sur des photos noir et blanc pour vanter tous les avantages de la marque.
