Contexte et objectifs
Dans le cadre de ma formation Webdesigner Concepteur UX-UI de Activmedia, j’ai réalisé comme projet personnel de certification un site internet de A à Z, design et intégration, ainsi que la communication à 360°.
Le client fictif est Train’eat, une start-up dans le domaine du sport et de la nutrition, spécialisé dans la vente de box comprenant programmes sportifs, plans alimentaires, compléments et accessoires.
Dans la peau d’un webdesigner freelance, j’ai réalisé ce projet avec approche globale en cascade.
Après avoir défini avec mon client le périmètre du projet, grâce à une grille de questionnement et au cahier des charges, j’ai estimé le coût dans un devis, et planifié les tâches à effectuer.
Outils utilisés : Google sheet, Google doc, ChatGPT
Marché et cible
Audit concurrentiel
J’ai effectué un audit concurrentiel et une analyse SWOT de deux sites concurrents. Leurs forces me permettent d’identifier des opportunités UX, et leurs faiblesses de mettre en place des contre-mesures.
La cible
J’ai fait ensuite une analyse du marché et une desk research sur le web et les réseaux afin d’extraire des données sur les utilisateurs et de dresser le portrait de mes deux utilisateurs type (personas).
Cliquez pour agrandir
J’ai poursuivi avec la rédaction d’un User journey map pour me mettre dans une posture d’empathie vis à vis des utilisateurs, et extraire des opportunités UX à partir des points de douleurs qu’ils pourraient rencontrer.
Outils utilisés : Google sheet, Google doc, Figjam, Google, ChatGPT
Identité visuelle
Comme il ne s’agit pas d’une refonte mais d’un projet « from scratch », j’ai été chargé de créer l’identité visuelle de l’entreprise.
J’ai d’abord réuni sur un moodboard une palette de couleurs de base, des indications typographiques, et des images inspirantes.
J’ai ensuite créé le logo de l’entreprise, sur papier puis sur Illustrator.
Outils utilisés : Canva, Photoshop, Unsplash, Freepik Illustrator, Adobe color
UX/UI
Architecture de l'information
J’ai organisé le contenu du site et la navigation grâce à un sitemap.
Wireframe
Direction Figma ensuite, pour le wireframe. J’ai utilisé des composants UI prêts à l’emploi pour définir le zoning des pages types du site.
Design system et maquette
Toujours sur Figma, je suis ensuite passé à la partie UI, avec d’abord ma page « design system » :
- Charte graphique : logo, palette de couleurs, réglages typographiques
- Composants UI : header, footer, formulaire, boutons avec variants
J’ai ensuite crée une maquette haute fidélité :
- Design des pages types : Accueil, Contact, À propos, Article
- Responsive design, Mobile first
Outils utilisés : Figma, Adobe Colors, Typescale, Google fonts, Unsplash, Freepik
Prototype & test
La maquette a ensuite évolué vers un prototype interactif, avec des liens entre les pages, des interactions de survol, et des animations diverses.
Des tests informels ont été réalisés par moi-même et quelques proches.
S’en est suivi un court processus itératif de tests et de modifications sur la maquette/prototype.
Intégration
Je suis finalement passé sur WordPress pour intégrer le site réel.
J’ai paramétré le CMS, les pages, les menus, articles, et j’ai construit la partie vitrine du site, en m’assurant qu’il est toujours « responsive ». J’ai utilisé le html/css et un peu de Javascript pour pousser plus loin la personnalisation et mettre en place certaines fonctionnalités.
J’ai installé et paramétré le plugin Woocommerce pour construire la partie E-commerce du site, avec la boutique, les produits et le tunnel de vente.
Site final
Bilan
📝 La partie UX a été limitée par l’absence d’une recherche utilisateur approfondie et de tests réels. De plus la gestion « Waterfall » imposée par la formation n’est pas la plus adaptée à un vrai processus itératif.
👍 Néanmoins, ce projet était très formateur. Je suis particulièrement satisfait d’avoir pu créer un site avec un design cohérent, une navigation fluide, et une charte graphique engageante.
👁️ Pour découvrir le site final intégré sur WordPress, cliquez sur le bouton ci-dessous.
Génial Shop