Du concept au prototype
refonte de site
Echantillon des étapes de conception
étude préalable
Concernant la refonte du site français Dr Martens, j’ai choisi d’étudier les variantes d’un pays à l’autre afin de voir de quelle manière le site est adapté à chaque culture. Le site français est plutôt clair et assez axé sur la vente des chaussures : on voit les produits sur fond blanc. La version coréenne est très différente et m’a beaucoup inspirée.
Pour cette refonte j’ai choisi de ne pas m’inspirer de sites de vente de chaussures ou de vêtements car ils ne correspondent pas à l’identité de cette marque forte. Il existe quelques exceptions : j’ai relevé plusieurs marques qui ont une image forte : Art, Converse, Nevermind, Kickers, John Cox, Underground.
Chez Dr Martens il ne s’agit pas simplement d’identité mais aussi d’histoire, de tradition, d’artisanat et de savoir-faire. Il s’agit de la culture britannique et de l’impact que cette marque a eu sur plusieurs générations.
C’est la force de Dr Martens que j’ai voulu redonner à son site.
J’ai choisi de mettre en avant l’histoire de la marque et de rappeler qu’il existe encore des usines en Angleterre même s’il y a également des usines en Asie.
J’ai également souhaité mettre en avant les égéries de la marque qui sont actuellement peut visibles et inciter les internautes à partager leurs stories liées à Dr Martens sur le site.
L’audit
J’ai procédé à un rapide audit UI et UX sans considérer les questions de référencement, de duplicate content, de hiérarchie des balises, etc. Par contre j’ai relevé des problèmes de chargement : le temps de chargement est parfois trop long sur certaines pages sur mobile et le site ne s’affiche pas du tout.
J’ai étudié le site sur différents device et relevé les dysfonctionnements : des mélanges de français et d’anglais, des filtres qui ne fonctionnent pas (ex. : on choisit de voir les chaussures femmes à talons, on obtient les chaussures avec talonnette et les talons ne s’affichent pas).
Certains menus sont adaptés à d’autres cultures : le tri des chaussures enfants pour l’école correspond aux écoles dans lesquelles on porte des uniformes et donc des chaussures foncées.
Cette étude m’a permis de concevoir la structure du site et de prévoir un site mobile first.
La cible
J’ai étudié la cible : quels sont les acheteurs des produits ?
J’ai relevé une cible mineure mais à ne pas négliger : les professionnels, car ce sont en premier lieu des chaussures de sécurité, il m’a semblé essentiel de cibler ce public en faisant apparaitre un menu spécifique plus visible que sur le site actuel de Dr Martens.
Les cibles les plus visibles sont les musiciens, les jeunes, les personnes en marge de la mode et en même temps les fashion victims qui veulent pimper leur style avec un côté rock’n roll.
La valeur ajoutée de cette cible pour Dr Martens c’est sa visibilité.
J’ai consulté les interactions sur les réseaux sociaux : la communauté des fans de Dr Martens est très dense, variée et partage beaucoup, notamment sur Instagram. J’ai choisi d’en appeler à cette communauté pour enrichir le site grâce au partage de photos et aussi d’augmenter le trafic et l’interactivité grâce à eux, ce qui permet également de remercier ces fans pour leur activité et pourquoi pas d’en faire des ambassadeurs et de les remercier par des concours, goodies etc.
J’ai consulté de nombreux sites de groupes de musique afin de m’en inspirer.
La typographie
J’ai conservé la typographie sobre du site pour le contenu. Pour les menus et liens j’ai ajouté une police qui imite les pochoirs sur les murs nommée Uptown qui est épaisse et permet d’accentuer certains textes.
Les couleurs
J’ai conçu le design du site sur la base des codes couleur de la marque : jaune, noir et le signe + que l’on retrouve sous la semelle des chaussures.
Les graphismes et icones
J’ai conçu plusieurs graphismes qui jalonnent le site : un sac de la marque pour représenter le panier d’achat, des empreintes de pas jaunes, un lacet qui tire le menu, etc.
Prototype&test
Premier proto & tests
Cette vidéo est celle du premier prototype mobile. Il a évolué depuis : la page d’accueil et la page catégorie ont été épurés, le menu visuellement clarifié. Il reste encore de nombreuses étapes avant la finalisation.
Autres projets
