SECTEUR :
RETAIL E-COMMERCE
CAS D'ÉTUDE :
AOKI - MARCOREL
ANNÉE :
2020
RÔLE :
UX/UI DESIGNER
Contexte & problématique
Case study dans le cadre de ma formation certifiante chez Marcorel.
Projet : refonte UX/UI du site de pâtisseries japonaises AOKI Paris.
Problématiques : site fonctionnel mais avec une énorme dette UX, non conforme RGPD, non accessible et non responsive. Le graphisme global est vieillissant et le brand system est incohérent, absence de UI kit / library.
Objectifs
Concevoir un site e-commerce responsive et conforme à la fois fluide, cohérent et impactant pour augmenter le trafic et la conversion.
Livrables
Audit de l'existant, cadrage du projet, benchmark concurrentiel.
Wireframes, maquettes, prototypes pour la refonte de chaque page en Desktop / mobile.
Solutions proposées pour assurer la mise aux normes en matière d'accessibilité, de RGPD et de responsive design.
Présentation aux stakeholders de mon process de design thinking, choix et arbitrages.
Documentation Figma claire, hierarchisée et accessible.
Analyse, audit et benchmark :
Design process & challenges
Discovery
Recherche utilisateur, analyse des besoins.
Audit site et code HTML/CSS et du brand system et éléments UI existants.
Benchmark graphique et iconographique sectorielle.
Brainstorming, mapping du parcours utilisateur sur Miro / Figjam.
Design et UI library
Travail en mobile first pour intégrer toutes les contraintes.
Création de l'UI kit, des styles typographiques et des composants sur Figma.
Enrichissement du branding et de la charte graphique picto, illustration, vidéos.
Travail sur le tone of voice pour renforcer la singularité du savoir-faire franco-japonais du chef Sadaharu Aoki.
Conception des wireframes et prototypes interactifs sur Figma.
UI kit :
Maquette et itération prototype :
Home page avant / après :
Resultats & takeaways
→ Certification de web graphic designer obtenue.
Mon travail de refonte UX/UI apporte les améliorations suivantes :
Site responsive, accessible et conforme RGPD/cookies.
Simplification de l’ergonomie et clarification de la nav.
Hiérarchisation de l'information (H1, H2) et application principes de l'atomic design.
Modernisation de la charte graphique, UI kit créé pour assurer la cohérence des composants.
Intégration d'une iconographie plus singulière et authentique.
Branding : tone of voice différenciant, texte enrichi pour améliorer le SEO et valoriser les USP.
Optimisation des balises alt SEO.
Outils utilisés :
Figma : Wireframe, maquette, protoype.
Figjam : Userflow.
Miro : idéation, UX writting et persona.
Procreate : Illustration pictos.
Adobe Premiere Pro : exploration Motion design.
Adobe Photoshop : export assets optimisés.
Zeplin : export maquette avec specs, CSS, assets pour hand-off design-dev.
Témoignage
Caroline est une product designer avec qui c'est un vrai plaisir de collaborer. Rigoureuse, attentive aux détails, elle allie une vraie connaissance des utilisateurs à une sensibilité visuelle affûtée, nourrie par une solide expertise en brand.
