top of page
Élément graphique
Logo SunConnect

Lancement de l’application mobile BtoB à destination des commerciaux de SunConnect.

 

L’installateur de panneaux photovoltaïques qui accompagne ses clients vers l’indépendance énergétique.

UX UI Design de l’application mobile à destination des commerciaux de l’installateur de panneaux photovoltaïque français.

Pour la création de cet outil mobile à destination des commerciaux qui n’ont aucunes connaissances techniques en matière d’installation de panneaux photovoltaïques, une première phase d’UX Design a été réalisée afin de bien cerner les utilisateurs avant d’imaginer les différents wireframes. 

Après quelques tests utilisateurs et un retravail du prototype, l’UI Design a pu être réalisée en développant un côté sérieux et rassurant tout sans tomber dans un style “administratif”.

Etape 1
Persona

Etape 2
User Flow

Etape 3
Wireframes

Etape 4
UI Design

Etape 5
Prototype

Etape 6
Design System

Problématique

Comment les commerciaux SunConnect peuvent réaliser une estimation et un devis auprès leurs clients malgré leur manque de connaissances techniques sur le sujet de l’installation des panneaux photovoltaïques ?

Process ux ui design

3 smartphones qui affichent différents écrans de l'application SunConnect
Élément graphique

Samantha est mariée et a 2 enfants. Après ses études de commerce à Lyon, elle est devenue commerciale dans diverses entreprises. C’est après la naissance de son premier enfant que Samantha pense de plus en plus à l’avenir de notre planète mais aussi à donner plus de sens à son travail. 

Elle rejoint donc l’équipe de SunConnect en tant qu’experte commerciale en 2017.  Samantha est de nature sociable, dynamique et très investie dans son travail. Elle n’hésite pas à accompagner ses jeunes collègues lorsqu’ils en ont besoin.

Photo d'une jeune femme souriante
Guillemets

Je suis fière de jouer un rôle dans cette transition vers un avenir plus propre et plus responsable.

Motivations

+  Trouver du sens à son métier

+  Respecter l’environnement

+  Accompagner au mieux ses clients en fonction de leur besoin et vers leur indépendance énergétique

Frustrations

+  Non indépendante auprès de ses clients par manque de connaissances techniques

+  Outil numérique trop complexe

+  Devoir réaliser les démarches au bureau après la visite client

Objectifs

+  Accompagner et conseiller ses clients en toute autonomie

+  Gagner du temps sur les démarches administratives pour se consacrer à ses clients

Personnalité :
Pas particulièrement à l'aise avec la technologie mais elle se débrouille. Elle est relativement impulsive
Elle est très sociable et assez sûre d'elle.
Devices utilisés : Mobile

Persona

Samantha Odin

Âge

42 ans

Localisation

Lyon, France

Situation maritale

Mariée

Situation pro.

Commerciale

Élément graphique
Aperçu du user flow réalisé pour ce projet

User flow

Le User Flow (flux d’utilisateurs) est la représentation graphique des chemins qu’il est possible d’emprunter lorsque l’utilisateur navigue sur l’application.

Cette représentation s’étend du point d’entrée (page de connexion) jusqu’à l’action finale . Dans le cas de SunConnect, il s’agit de faire signer le contrat d’installation au client.

 

Traditionnellement, chaque point de contact est représenté par un noeud et chaque noeud possède une forme propre indiquant son rôle dans le processus. Un losange indique une condition qui est nécessairement suivi d’un « Oui » et d’un « Non ». Un rectangle décrit une action.

 

Détailler ces embranchements me permet d’analyser et d’optimiser l’expérience utilisateur pour, in fine, améliorer l’application.
 

Légende du user flow :
les losange orange représentent une condition, les rectangles arrondis représentent une action
Photo d'un panneau photovoltaïque

Wireframes

Dans les dictionnaires, wireframe est souvent traduit par « maquette fonctionnelle ». C’est le squelette de la future interface de l’application mobile. En soit, il s’agit d’une maquette au graphisme simplifié. 

 

Un bon Wireframe aide à visualiser l’agencement de la page, l’architecture de l’information, les parcours utilisateurs, et 
les fonctionnalités essentielles. 

 

L’objectif est de valider les concepts, en termes d’interface et d’expérience utilisateur, avant de transmettre le projet aux développeurs.

UI Design

Nom de la typo : Lato
Style de la typo : Bold et Regular
Couleurs utilisées, noir, bleu gris sombre, gris clair et blanc. Ainsi que le jaune et du rose / orange et le dégradé entre ces deux dernières couleurs.
Aperçu des écrans finaux réalisés pour ce projet
Photo d'une jeune femme souriante, utilisant son smartphone en extérieur
Main tenant un smartphone affichant un écran de l'application SunConnect
Élément graphique
Aperçu des wireframes réalisés pour ce projet
bottom of page