Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail
Disponible pour vos projets
Contactez-moi par mail

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.


publicisdrugstore.com

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.

agathe-verasdonck-accueil-projet-publicis-drugstore-63fa4525ec224925542648.png

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.

agathe-verasdonck-publicis-drugstore-avant-refonte-63fa459e77bdd907351323.png

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.

agathe-verasdonck-design-system-publicis-drugstore-63fa45d7f2185195987083.png

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.

agathe-verasdonck-maquette-publicis-drugstore-63fa45fb2ed0c565531975.png

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.

agathe-verasdonck-maquette-mobile-publicis-drugstore-63fa461ab248a575613853.png

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.

agathe-verasdonck-version-mobile-publicis-drugstore-63fa46432fbfd149966235.png
agathe-verasdonck-version-desktop-publicis-drugstore-63fa466090628721882300.png