Design web (UI), Ergonomie (UX)
France Parasols
Création des maquettes pour un site de e-commerce dans la vente de parasols de marchés
Contexte
France-Parasols est un site de e-commerce ayant pour activité la vente de parasols de marché. La société mère, France-Diffusion, souhaitait intégrer le marché des parasols forains en complément de son activité principale. L’entreprise a décidé de concevoir un site de e-commerce dédié uniquement à ce produit. Pour mener à bien ce projet, j’ai dû travailler en étroite collaboration avec les développeurs pour déterminer la faisabilité du design, mais aussi avec le service référencement et marketing pour proposer un site adapté à nos clients cibles.
Personas
La première étape a été de comprendre qui sont nos potentiels clients. Cette réflexion est essentielle pour la création des maquettes pour proposer une expérience utilisateur adaptée à notre cible. Pour cela, il a été déterminé des personas afin de pouvoir se référer aux utilisateurs du site.
Le design graphique
Le client souhaitait un design épuré, sophistiqué et professionnel, qui se démarque de ses concurrents. Les couleurs primaires du site sont celles du noir et blanc symbolisant l’élégance et reflétant un service de haute qualité. La première typographie sélectionnée est la police Josef Sans, sans empattement, pour les titres et les sous-titres pour la modernité. La seconde police est Playfair Display, une police avec empattement et arrondis pour rappeler la culture polynésienne.
Zoning et wireframes
Pour établir le squelette du site et réfléchir au parcours utilisateurs, j’ai réalisé le zoning puis les wireframes avant de se pencher sur l’aspect graphique de la plateforme web.
Le design graphique
Ayant pour cible des professionnels dont le métier est physique et dont la tranche d’âge est assez large, j’ai souhaité proposer un design apaisant, plaisant à naviguer et où l’information est facilement accessible. Le choix des typographies s’est porté sur le duo “Lato” et “Karla”, qui sont des polices rondes, légères et faciles à lire. Du côté des couleurs, j’ai avant tout vérifié que les couleurs que j’avais en tête répondent aux normes d’accessibilité. Pour cela, je me suis penchée sur les directives du Web Content Accessibility Guidelines (WCAG) pour les contrastes de couleur. Un fois mes tests effectués, cela m’a permis de déterminer quatre couleurs pour la conception du site.
Le site web
Afin de remplir mon objectif de proposer un site simple, avec une navigation agréable et un accès aux informations en un clin d’œil, j’ai fait attention à mettre en place de bonnes pratiques UX. En voici quelques exemples :
- Le menu de navigation est accessible au clic afin d’éviter toutes frustrations pour l’utilisateur. Pour les utilisateurs moins habiles avec la navigation, il est plus facile de naviguer sur un menu fonctionnant au clic. Pour proposer une navigation encore plus agréable, lors de l’ouverture du menu, une barre avec une flèche souligne la catégorie dans laquelle se trouve l’utilisateur.
- La stratégie de l’entreprise, voulait mettre en évidence l’accompagnement des clients dans le choix de leur produit avec la création d’un blog. Sur la page d’accueil, il était essentiel de concevoir une section dédiée au blog. Cette section a été pensée pour nos deux personas types : les commerçants débutants et les commerçants expérimentés. Ainsi, il est possible d’accéder au blog par 3 chemins : la card regroupant les articles de blog rédigés pour les novices des marchés, la card qui nous mène aux articles dédiés aux experts des marchés et enfin la possibilité de voir les derniers articles du blog et atterrir sur tous les articles publiés.
- La page article regorge d’informations, il était essentiel de faciliter et rendre agréable la navigation. Pour cela, j’ai conçu des pictogrammes pour les caractéristiques du produit pour faciliter la compréhension et permettre une meilleure lecture. Concernant la fiche technique, j’ai proposé un sous-menu avec toutes les thématiques présentes dans la fiche technique. Grâce à ce sous-menu, l’utilisateur n’aura pas besoin de défiler pour accéder au sujet qui l’intéresse et atterrit grâce à simple clic à la section souhaitée. Enfin, j’ai créé des tableaux pour les renseignements sur les tailles et les dimensions ainsi que pour la comparaison des deux types de pieds. Ces tableaux visent à améliorer la lisibilité de l’information.
- Quand l’utilisateur se connecte à son compte, il peut accéder à différentes fonctionnalités : accéder à ces informations personnelles, ses adresses, ses factures et ses commandes. Chaque card dispose d’un pictogramme pour illustrer la fonctionnalité, et ainsi améliorer la compréhension avec un visuel. Mais aussi un texte court expliquant ce que l’utilisateur pourra effectuer s’il clique sur une des cards. En procèdent de cette manière, j’ai souhaité rendre la navigation moins fastidieuse pour l’utilisateur.
Prêt à vous différencier et créer un site web qui vous ressemble ?
Échangeons gratuitement pendant 30 minutes pour aborder votre projet, vos objectifs et la façon dont nous pouvons collaborer pour vous créer un site unique !