UX et UI Design d'une application mobile

Détails du projet

Méthodes utilisées :

- Lean UX
- Userflow
- Wireframe (lo-fi)
- Prototyping
- Atomic design

Outils utilisés :


- Figma
- Bravostudio

Matchlab est un tout nouveau service et une entreprise sur le marché des rencontres. Ce nouveau service est centré sur les personnes et n'utilise pas d'algorithmes ou de notes de désirabilité. Il s'agit uniquement de la personnalité des gens, leurs souhaits, objectifs de vie, etc.

Pour chaque nouveau client, uniquement les célibataires, un membre de l'équipe Matchlab procéde à un entretien vidéo en ligne avec le client pour le rencontrer, le découvrir et finalement, établir son profil. Tout est digitalisé dans une base de données sécurisée et après cela, l'équipe essaie de trouver une bonne combinaison dans la base des célibataires.

Le service pourrait rester tel quel mais l'équipe Matchlab veut offrir plus aux clients et pouvoir garder facilement le contact avec eux. C'est là qu'est née l'idée de fournir une application mobile aux clients. L'application mobile Matchlab doit être un outil permettant aux célibataires de communiquer avec leur conseiller ou avec leurs matchs via une zone de messagerie sécurisée : la confidentialité des célibataires est primordiale !

L'équipe Matchlab attendait de moi de :

1. Guider l'équipe pour définir le périmètre de la première version de l'application
2. Concevoir un prototype numérique du Minimum Viable Product (MVP)
3. Fournir un cahier de tous les éléments UI nécessaires et des règles de design

Lean UX

Pour ce projet partant de zéro, nous devons nous assurer très rapidement que nous allons dans la bonne direction pour nos utilisateurs finaux, sans avoir encore d'accès direct à ces derniers car c'est un projet complètement nouveau. C'est pourquoi j'ai choisi d'appliquer le Lean UX basé sur des hypothèses et des cycles de Réflexion / Création / Vérification.

Phase "Think"

J'ai organisé des ateliers de co-création pour faire des suppositions basées sur les études réalisées par l'entreprise, les utilisateurs cibles, les résultat du premier PoC... Avec ces suppositions, nous avons déduit des hypothèses et des métriques pour les vérifier et finalement, nous avons réussi à définir le périmètre du MVP. Parallèlement à ces ateliers, j'ai organisé un atelier de design studio pour obtenir une vision commune et partagée du flux utilisateur dans l'application mobile.

Phase "Make"

Pendant cette deuxième phase, j'ai produit en wireframes le flux utilisateur obtenu lors de l'atelier de design studio. Avec Figma, j'ai pu transformer les wireframes en un prototype cliquable prêt pour les tests.

Wireframes lo-fi

Phase "Check"

Conjointement avec le porteur de projet, nous avons demandé à des personnes au hasard de tester notre prototype Figma. Ces utilisateurs ont pu commenter chaque écran du flux utilisateur pour donner autant de détails que possible.

Wireframes commentés par des testeurs

Finalement, avec ces apprentissages, l'équipe a créé une nouvelle version du prototype, mais cette fois avec les premiers éléments de l'UI finale et connectée à des outils pour mettre cette version entre les mains des utilisateurs finaux.

Prototype

Après ces itérations sur bases de wireframes, un premier design à été produit avec le graphiste de mon client, en focalisant sur l'onboarding utilisateur lors du premier lancement de l'application.

Règles de design et d'interface

Pour aider les développeurs frontend et mobile, j'ai créé un cahier de design (que l'on pourrait qualifier de "mini design system"), contenant toutes les règles UI : polices, icônes à utiliser, couleurs (primaires, secondaires et d'accent), système de grille, et certains composants de base comme les boutons, images, avatars ou champs de formulaire.

Design system simplifié

Résultats pour le client

À la fin de la mission, le client dispose du matériel pour commencer la phase d'implémentation avec les développeurs : règles UI générales (couleurs, polices, icônes), composants UI, et wireframes haute-fidélité prêts à l'emploi pour les développeurs. Le client a également une bonne idée de la façon dont la première version de l'application sera accueillie par les utilisateurs finaux, grâce à la méthode Lean UX et à la phase de test sur le terrain.

Résultats personels

Ce projet était très stimulant car tout devait être conçu, les éléments UI, le flux utilisateur, les fonctionnalités et les wireframes... J'ai également découvert à travers ce projet l'approche Lean UX et je l'ai trouvée efficace dans ce contexte : être agile, itérer rapidement et apprendre des tests pour la prochaine itération.

Autres réalisations

Projets

Product management

Développement de service ou de produit existants

"Les cordons bleus" est une entreprise de cours de cuisine. Forte de son succès, cette société m'a contacté afin de développer ses services à partir des retours utilisés récoltés depuis le lancement.

Détail complet du projet

Project Item Card Bg Image
Audit UX

Amélioration d'un site de réservation en ligne

"Pyrénées Ariégeoises" est un site internet dédié à la région éponyme. Ce portail rassemble de nombreuses informations diverses et variées : activités, restaurants, logements...Ce client m'a contacté pour intervenir sur l'espace de réservation en ligne qui ne convertit pas suffisamment à ce jour.

Détail complet du projet

Project Item Card Bg Image