Publicis Drugstore
Refonte de site e-commerce • UX UI Design
En bref
Publicis Drugstore est une boutique située sur les Champs Elysées. Le concept d’un drugstore comprend généralement un restaurant, une pharmacie et une boutique vendant tabac, journaux et articles cadeaux. Une particularité du drugstore est qu’il reste ouvert jusqu’à tard dans la nuit : 2H du matin.
Mon rôle
Pour Publicis Drugstore, j’ai travaillé en équipe avec les développeurs pour moderniser le site ecommerce actuel, tout en gardant l’identité de marque déjà existante. Nous avons dû retravailler la mise en place des éléments présents sur le site pour le rendre plus ergonomique et faciliter le parcours client.
Conditions de travail
Travail en équipe avec des développeurs • 1 semaine de travail • Travail sur Figma
Demande du client
Publicis Drugstore souhaitait dans un premier temps actualiser leur site actuel en le passant sur la nouvelle version de Prestashop. Dans un deuxième temps, ils désiraient optimiser le parcours utilisateurs en améliorant le design du site actuel, tout en gardant les éléments actuels de la charte graphique (couleurs, typographie, pictogrammes…).
Problème
La conception de l’ancien site de Publicis Drugstore n’était pas forcément pensée e-commerce. En effet, plusieurs petits détails ne facilitaient pas les utilisateurs durant leur parcours sur le site. De plus, même si le site était responsive, il n’était pas du tout optimisé pour une utilisation sur mobile.
Solution
Nous avons analysé les différents parcours que pourraient être amenés à faire les utilisateurs. Suite à cela, nous avons réalisé une maquette site en prenant bien en compte la version mobile, pour rendre le parcours utilisateurs fluide et agréable.
Site avant refonte
Avant la refonte graphique du site Publicis Drugstore, ce dernier était bien mais pas forcément très ergonomique et bien pensé. Par exemple sur les fiches produit, l’utilisateur n’avait pas la possibilité de choisir le nombre d’articles qu’il souhaitait commander. Il devait se rendre dans la partie « panier » pour définir le nombre de produits désirés. De plus, la version mobile n’était pas conçue pour faire vivre une bonne expérience aux utilisateurs.
Design System
Le Design System peut être comparé à une bibliothèque de composants, visuels, codes… propres à une marque. Cette bibliothèque peut évoluer dans le temps et permet aux designers et aux développeurs de connaître les codes de la marque. Il peut se révéler extrêmement utile, notamment pour garantir la cohérence des différents supports digitaux.
Maquette desktop
Avant d’entamer la réalisation du site e-commerce, j’ai réalisé une maquette à soumettre à l’équipe Publicis Drugstore pour qu’ils valident le potentiel rendu du site internet. Sur cette nouvelle maquette, la volonté première était de mettre en avant les produits. Ainsi, sur la fiche produit, l’ancienne version laisse place à un scroll d’images du produit. La page produit, anciennement sur quatre colonnes dont une dédiée aux filtres, a été passée sur trois colonnes pleines et les filtres passés au dessus avec un menu s’ouvrant sur la gauche pour définir en détails les filtres.
Maquette mobile
La partie site mobile était le point principal du projet. Avant refonte, le site n’était pas pensé mobile, ce qui engendre des pertes conséquentes pour un site e-commerce. En effet, si le site n’est pas pratique aux yeux d’un utilisateur et par conséquent un potentiel client, il aura tendance à changer de site et acheter chez la concurrence.
Mise en situation
Pour aider l’équipe de Publicis Drugstore à se projeter, j’ai réalisé des mises en situation à l’aide de mockups. Grâce à cette étape finale, le client peut avoir une idée plus concrète du résultat.
