Aperçu

Une agence m'a demandé d'intervenir pour créer une application "from scratch". La direction souhaitait que le résultat puisse satisfaire une grande majorité de particuliers.

CLIENT
Une agence web à Versailles

AUDIENCE DE L'APPLICATION
Professionnels utilisant leur véhicule pour travailler

PROJET
Créer une application mobile via la démarche du Design thinking

MON RÔLE
UX Design, UI Design

Brief

Problème

Réfléchir, en un minimum de temps, à une idée d'application pouvant aider des individus dans leur quotidien, donc simple à utiliser.
L'erreur est souvent de commencer trop vite par le design, de négliger l'utilisateur final et toute la série d'étapes préalables parce que l'on est convaincu de la "bonne idée".

Challenge

Concevoir le design d'une application originale avec l'utilisateur au centre des préoccupations. Autrement dit, se servir de la démarche du design thinking en accéléré.

Exploration

Idéation / Définition

Un atelier d'idéation a mis rapidement à jour le besoin de diminuer le stress au volant lors de déplacements professionnels récurrents.

L'environnement (automobile) éliminait donc : méditation, sophrologie ou relaxation qui atténuent l'attention, de plus il obligeait une interaction vocale.

Exemple de statistiques préalables à la conception d'une application mobile, via l'UX design

Parcours utilisateur

Ultérieurement, le persona défini suite à la définition de la problèmatique a permis de construire un parcours utilisateur sur l'application.

Exemple d'un user-journey préalable à la conception d'une application mobile, via l'UX design

Conception

User flow

Grâce au user journey, le diagramme d'analyse fonctionnelle a ensuite permis de définir les écrans-types du service. Il a mis en évidence les différents chemins et les boucles dans l'application.

Exemple d'un flowchart préalable à la conception d'une application mobile, via l'UX design

Wireframes basse-fidélité

Les écrans principaux définifs ont alors été dessinés en wireframes, en commençant par le zoning. C'est ainsi que l'information des écrans a pu être architecturée : hiérarchisée, rendu visibile et lisible.

C'est aussi à ce moment que j'ai décidé où placer les informations secondaires.

Dans un 2nd temps, ces croquis ont été scannés pour y ajouter des interactions, sur InVision.

Tests d'usabilité

Avant de présenter ce travail aux parties prenantes, les prototypes basse-fidélité ont été testés. Sur l'outil plusieurs personnes ont ainsi pu laisser des commentaires bien utiles à la validation ou correction des écrans.

Formalisation

Prototypes haute-fidélité

Une fois que le parcours utilisateur, proposé par l'application, paraissait satisfaisant, et que les fonctionnalités étaient bien comprises et utiles, le design des écrans pouvait démarrer.

Chose faite en ligne avec Figma, sur la base d'un écran mobile de taille moyenne (Samsung S7 / IPhone 11).

Exemple de prototypes d'une application mobile, via l'UX design

Tests utilisateurs

Pour s'assurer de la bonne prise en main de l'application, une 2ème phase de tests a été soumise à des utilisateurs correspondants au persona.

Les retours ont permis une dernière amélioration avant d'envoyer les designs pour développement.

Planches d'assets graphiques

Quant aux ressources d'UI design, elles furent basées sur le Material Design de Google.

Grille de construction, caractéristiques des polices et des couleurs et éléments interactifs ont été regroupés dans plusieurs de composants graphiques, pour définir tous ces éléments ainsi qu'aider au futur développement de l'application.

Extrait 1 d'assets graphiques pour le développement d'une application mobile Extrait 2 d'assets graphiques pour le développement d'une application mobile Extrait 3 d'assets graphiques pour le développement d'une application mobile Extrait 4 d'assets graphiques pour le développement d'une application mobile Extrait 5 d'assets graphiques pour le développement d'une application mobile Extrait 6 d'assets graphiques pour le développement d'une application mobile Extrait 7 d'assets graphiques pour le développement d'une application mobile Extrait 8 d'assets graphiques pour le développement d'une application mobile

Cahier de conception

Le travail accompli fut alors récapitulé dans un cahier de conception destiné en totalité au client, en partie aux développeurs.

Grille de construction, caractéristiques des polices et des couleurs et éléments interactifs ont été regroupés dans plusieurs de composants graphiques, pour définir tous ces éléments ainsi qu'aider au futur développement de l'application.

Exemple d'un cahier de conception pour le développement d'une application mobile, via l'UX design

Vous aimez et avez un projet en tête ?

N'hésitez pas ! Appelez au 09.67.39.38.16 ou

Ecrivez-moi