Projet
Reconnect
RECONNECT est un CRM conçu principalement pour le secteur de la vente au détail et créé par Doers. Son objectif est d’offrir une expérience unique au prospect suite à une visite dans un point de vente physique et de fidéliser le client.
Il est destiné aux clients qui ont de nombreux points de vente physiques tels que (Optic Duroc, Peugeot …)
- Entreprise : Doers
- Role : Ux/Ui Designer
- Année : 2019
- Tags : Ux/Ui design
Problématique
Garder le lien avec un prospect dont le 1er point de contact est une boutique physique.
L'objectif
- Designer un outil utilisable par des vendeurs d’industries différentes.
- Fournir un outil qui permet au vendeur de donner suite à une visite client en boutique
01- Recherche
Persona
À partir des résultats de mes recherches, j’ai identifié mon persona : Une Conseillère commerciale automobile (Hôte d’accueil). J’ai créé le profil de persona à partir des données collecter auprès des conseillers commerciales, vendeurs, le briffe que le chef de projet m’as donnée et d’autres recherches sur LinkedIn et Indeed jobs.
Service blueprint
Pour le parcours d’utilisateurs, j’ai mis en place le service blueprint qui est un outil qui mis en œuvre des parcours d’utilisateurs qui impliquent un service ou un produit et qui permet de résoudre des problèmes business/client complexes en utilisant des méthodes visuelles, orchestrées et itératives.
Diagramme
J’ai créé ce digramme pour lister les différentes interfaces/ parties dans le projet Reconnect, les relations entre eux et la liste des fonctionnalités dans chaque partie.
02- Design
Wireframe/UI
J’ai créé des wireframes pour les différentes interfaces de desktop, puis pour les autres écrans de tablettes et de mobiles. Enfin, j’ai créé l’interface utilisateur.
Design System - Atomic Design Methodology
Cette méthode issue du Modular Design a pour objectif d’optimiser la création de Design Systems centrée sur la conception de composants. Elle permet de construire des interfaces homogènes à travers des expériences évolutives et itératives avec un coût réduit sur l’ensemble des supports.
L’intérêt de cette méthode est qu’elle permet d’avoir une vue globale. Une conception évolutive & homogénéisée sur l’ensemble des supports exploités. Enfin, elle facilite la création d’un environnement de marque pour l’utilisateur à travers l’ensemble du dispositif digital.
Les atomes
Les atomes définissent la base de cette méthodologie. Seuls, ils sont abstraits mais assemblés, ils forment des molécules et composent toutes les interfaces : bouton, blocs de texte, etc. Par ailleurs, chaque atome est créé pour porter le concept d’image de marque à l’intérieur de la conception. Assemblés, ils forment des molécules.
Les molécules
Les molécules sont une alliance d’atomes et ont leurs propres propriétés. Elles sont les premiers éléments structurants de l’Atomic. Elles sont modifiables et réutilisables très facilement. Assemblées, elles forment des organismes.
Les organismes
C’est ici que la conception commence à prendre forme avec des parties distinctes de l’interface. Une même molécule peut profiter à plusieurs organismes. Par exemple : la molécule de fonction “Rechercher” du header de l’exemple ci-dessous, se retrouve aussi à l’intérieur d’une page contenant une recherche contextuelle.
Templates
Les templates résultent de nombreux groupes d’organismes entre eux. La conception commence à prendre sens, à raconter une expérience, le client peut commencer à se projeter sans difficultés.
Pages
Les pages sont la dernière étape de cette méthode. C’est ici que l’interface globale prend forme et permet de prendre du recul sur la conception globale.
Anatomie : Système de grille à 8pt
Le système de grille 8 points. Utilisez des espaces de 8 pixels pour dimensionner et espacer les éléments sur une page
La variété des tailles d’écran et des densités de pixels a continué d’augmenter, rendant le travail de génération d’actifs plus compliqué pour les concepteurs. L’utilisation d’un nombre pair tel que 8 pour les éléments de taille et d’espace rend la mise à l’échelle pour une grande variété d’appareils facile et cohérente.
Button State
Prototype
Sur ce prototype l’utilisateur est invitée à :
- Sélectionner deux modèles de voiture la MEGANE et la SCENIC
- Attacher une brochure de MEGANE
- Sélectionner un client (Monsieur Vermeg)
- Cliquez sur le bouton envoyer
Email (Reconnect)
Ce mail représente est un exemple de type de mail que le prospect peux recevoir de la part de commercial.
03- Impact
Reconnect chez Optic Duroc
Enquête téléphonique auprès de 200 personnes.
Reconnect chez Michel CLUIZEL
Laissés après un achat avec une note moyenne de 4,7
Après ouverture
Connexions web directes vers des pages d’achat
