Refonte d'une application mobile

Squadeasy

Contexte

Squadeasy est une startup qui propose une application mobile de QVT gamifiée, afin d'améliorer l'engagement des collaborateurs en entreprise via des activités sportives, et de baisser le bilan carbone, via de la mobilité douce.

Afin de mieux comprendre les besoins des utilisateurs finaux, il convient de mieux les connaître et de définir leurs personas ainsi que leurs expériences maps.

Organisation

Squadeasy est composée de plusieurs équipes (Sales, CSM/Support, Market, Tech, Produit, et Design).

Le pôle Design est rattaché au pôle Produit. Le pôle Design est alors dépendant stratégiquement du pôle Produit.

Pôle Produit
Pôle Design
Pôle Tech
Pôle CSM/Support
Pôle Market
Pôle Sales

Contrainte à lever

Les équipes Produit et Design sont les plus récentes à être construites. De ce fait, la maturité UX & Product est en phase d'éveil au sein de l'entreprise.

Construire une culture UX research est primordiale afin de faciliter la mise en place des méthodes UX et de rendre opérationnel la Discovery au sein de l'entreprise.

Ainsi, j'avais pris le temps de faire découvrir aux stakeholders l'importance de mieux connaître les utilisateurs, et d’intégrer les utilisateurs finaux, en plus des clients dans la conception des nouvelles fonctionnalités.

Rôle dans le projet

Rôle en Discovery

Explorer les besoins et les frustrations de nos utilisateurs, et identifier les différents profils types afin de mieux comprendre et mieux connaître nos utilisateurs finaux.

Rôle en Delivery

Mise à jour de l’identité graphique. Concevoir les wireframes et les maquettes HD. Prototyper et mener des tests utilisateurs auprès de nos utilisateurs finaux afin d’optimiser les parcours.

Afin de mener à bien ma mission, j'étais en collaboration étroite avec Inès O. UX/UI designer, et Benoît K. Product Manager.

Problème à résoudre

Comment proposer une meilleure expérience utilisateur adaptées selon leurs différentes besoins sportives, sociales et en mobilité ?
Ancienne version de l'application.

Étape du projet

Discovery

  • Présentation du besoin afin de faire découvrir nos utilisateurs aux parties prenantes
  • Phase de recrutement des utilisateurs
  • Recueil et restitution des besoins utilisateurs
  • Atelier d'idéation afin de définir les personae et les experience maps
  • Présentation aux parties prenantes des livrables

Delivery

  • Définition des futures fonctionnalités selon les différents personae et experiences maps
  • Réalisation en maquette et prototypage des futures nouvelles fonctionnalités
  • Test du parcours avec Maze via notre panel d'utilisateurs
  • Amélioration des parcours par itération
    Définition des US
  • Présentation des futures fonctionnalités à l'équipe Tech en Sprint Planning

1 - UX Research

Présentation des bénéfices de l'UX Research

Ma première démarche est de réaliser une présentation de l'UX Research, ses bénéfices, son impact possible pour l'amélioration de l'application, et des exemples d'entreprises ayant une approche user centric.

Recrutement des utilisateurs finaux

Puisque l'équipe CSM est en contact réguliers avec nos clients, j'ai convenu un rendez-vous avec l'équipe sur le sujet de recrutement des utilisateurs, afin d'avoir les moyens de me constituer un panel d'utilisateurs.

Pour cela, les CSM m'ont fourni les contacts des entreprises clientes qui seraient potentiellement intéressées par ma mission.

Cet étape m'a permis de recueillir le consentement des utilisateurs finaux, acceptant de fournir leurs mails afin de convenir avec eux les rendez-vous d'entretiens. Suite à cela, j'ai pu avoir une liste d'utilisateurs finaux ayant des profils d'utilisation très diverse (peu actif à très actif).

Rédaction des guides d'entretiens

Deux guides d'entretiens exploratoires ont été rédigé : Pour les utilisateurs de l'application mobile, pour les participants n'utilisant pas l'application.

Il s'agit également de connaître leurs besoins et leurs frustrations qu'ils rencontrent sur l'application, et également pour celles et ceux qui n'utilisent pas l'application quelles sont les raisons de leurs non-utilisations.

Les guides d'entretien sont construites en quatre thèmes :

  • Socio-démographique (présentation court du participant)
  • Bien-être et activités en entreprise
  • Mobilité & télétravail en entreprise
  • Utilisation de l'application
Exemple du guide d'entretien exploratoire.

Sessions d'interviews

Les sessions d'interviews ont été réalisées soit en distanciel ou en présentiel selon les préférences des participants. Une dizaine d'interviews a été réalisée, constituant une base de verbatims suffisantes afin de concevoir les personas et les experience maps.

Recueil et retranscription des verbatims

Les notes et les enregistrements sont étudiés afin de classer les verbatims selon les critères de questions et de participants.

Tableau de recueil des verbatims.

2 - Idéation

Ateliers d'idéation

Avec ma collègue UX designer et mon collègue PM, je présente le tableau de recueil des verbatims, et nous réalisons ensemble un atelier afin de concevoir les personae, et un second atelier pour concevoir les experience maps. Nous en établissons trois type de personae.

Atelier d'idéation afin de définir les personae.

Les personae

Les personae sont accessibles sur notre espace de travail Figma, afin de maximiser leur visibilité aux différents stakeholders, et leur prise en compte par les équipes tech, CSM et Market.

Les trois personae résumés en card.

Présentation de nos livrables UX

Nous organisons une présentation de notre travail aux stakeholders (personas et experience maps).

Utilisation de nos personae dans nos conceptions des nouvelles features

Notre board Jira est ouvert aux différentes équipes, et permet de ventiler les sujets, de la recherche à la conception des nouvelles features. Chaque card a un persona libellé, afin de savoir à qui s'adresse la future fonctionnalité. Nos personae sont également accessible sur notre espace de travail Figma, afin de maximiser leur visibilité, et leur prise en compte par les équipes tech, CSM et Market.

Les entretiens utilisateurs réalisées en amont, nous ont également permis d'explorer et d'identifier de nouveaux insights, générant de nouvelles idées de fonctionnalités.

La recherche et la conception des nouvelles fonctionnalités sont réalisées en sprint de deux semaines. Elles sont structurées par la roadmap produit, afin de rester en cohérence avec la vision produit, suivant son évolution.

Redéfinition du parcours utilisateur

L'ancienne version de l'application propose trois activités directement sur la Home. Le défi pour la nouvelle version est de proposé un nombre important d'activités. Ces activités sont structurées en :

- Activités sportives
- Activités en mobilité
- Activités sociales

Afin de restructurer le parcours utilisateur, je réalise un user flow de la version actuelle. Il s'agit de restructurer en profondeur le parcours utilisateur de l'application, en redistribuant les activités dans de nouvelles branches de parcours.

User flow & Hiérarchisation de l'informations

Je réalise un atelier d'idéation sur FigJam avec mon équipe afin de définir un parcours utilisateur, en prenant en compte les nouvelles fonctionnalités étant prévu dans la roadmap. Le résultat est un nouveau user flow qui nous aidera par la suite à la réalisation des wireframes.

Les différentes fonctionnalités sont ensuite triées et estimées en valeur via un atelier de Buy The Feature avec une personne chaque partie prenante, y compris avec un utilisateur final.

Zoom sur une partie de l'userflow.

3 - Wireframes et maquettage

Construction des wireframes

Avant de faire la refonte visuelle de l’application mobile. Les interfaces sont redessinées en wireframes, afin d’avoir une mise à plat des fonctionnalités et de leurs zoning. Il s’agit de mieux se concentrer sur la définition des différentes fonctionnalités, par leurs structures et par leurs hiérarchisations.

Zoom sur une partie de du wireframe.

Maquettage

Pour la refonte graphique de l’application, nous avons choisi d’être dans une version proche du dark mode, pour être en adéquation avec les valeurs de l’entreprise : Réduire le taux de carbone des collaborateurs. Améliorer la santé des collaborateurs via les activités sportives.

Zoom sur une partie des maquettes UI.

Accessibilité

Afin de s'assurer d'un bon contraste avec le texte et le fond, j'utilise le plugin Stark Accessibility.

Exemple des résultats en accessibilité du plugin Stark.

Design System

Le design system permet d’organiser les composants en atomic design selon leurs critères. Grâce aux variants, les collaborateurs peuvent changer rapidement un composant dans les maquettes, tout en gardant la même cohérence en UI design.

Screen sur une partie du Design System.

Spécifications fonctionnelles / techniques & GUI

Afin que les développeurs puissent avoir toutes les informations concernant les spécificités des maquettes, les spécifications fonctionnelles et techniques sont directement accessibles sur page Figma avec les maquettes.

Zoom sur une maquette annotée en spécifications graphiques et fonctionnelles.

Principales fonctionnalités

L'application est structurée via la Home, le Tracker, le Social, le Chat, et le Profil de l'utilisateur. Sa fonctionnalité phare est le tracker, permettant de tracker les déplacement de l’utilisateur selon les différentes activités possible à faire. Que ce soit en activités physiques, ou en mobilités.

4 - Prototype & Test utilisateur

Test utilisateurs Quantitatif et Qualitatif

Les fonctionnalités importantes sont maquettées et prototypées sur Figma. S'en suit les phases de test utilisateurs.

Phase de test utilisateur qualitatif afin de vérifier si la nouvelle fonctionnalité répond aux besoins des utilisateurs.

Phase de test utilisateur quantitatif sur Maze afin d'optimiser le parcours des futures nouvelles fonctionnalités auprès d'un large panel d'utilisateurs, au moins 30 participants minimum afin d'avoir un recueil de données suffisamment élevé.

L'optimisation des parcours utilisateurs se fait par itération en Test & Learn.

Sprint Planning & User Stories

Une fois les prototypes suffisamment optimisés, les US sont rédigés par notre Product Manager. Les futures fonctionnalités sont présentés à l'équipe Tech en Sprint Planning, afin d'estimer leurs développements.

Conclusion

Ce projet m'a permis de me challenger sur les moyens de recrutement des utilisateurs finaux, dont leurs accès est limités par l'intermédiaire de clients ayant peu de connaissances sur les enjeux d'expérience utilisateur.

J’ai pris aussi plaisir à concevoir de A à Z une nouvelle UI et identité visuelle d’une application mobile.

Également, j’ai beaucoup apprécié à travailler avec l’équipe Tech, dans nos échanges sur la définition et la spécifications des nouvelles fonctionnalités.

Mes projets

Quelques projets réalisés avec ☀️

Picto Fleche vers le haut