top of page
Élément graphique
Logo SunConnect

Optimiser ses ventes avec une application mobile

Application à destination des commerciaux de SunConnect, l’installateur de panneaux photovoltaïques qui accompagne ses clients vers l’indépendance énergétique.

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

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

Process ux ui design

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 ?

Élément graphique
Persona

Samantha Odin

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.

Guillemets

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

Âge

42 ans

Localisation

Lyon, France

Situation maritale

Mariée

Situation professionnelle

Commerciale

Photo d'une jeune femme souriante

Motivations

+  Trouver du sens à son métier en respectant 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

+  Devoir réaliser les démarches au bureau après la visite client avec des outil numérique trop complexe

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
É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.

Aperçu des wireframes réalisés pour ce projet

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
Élément graphique
Photo d'une jeune femme souriante, utilisant son smartphone en extérieur
Main tenant un smartphone affichant un écran de l'application SunConnect
bg-color.jpg

Un projet d'application mobile ?

Échangeons, ça n’engage à rien.

bottom of page