Comment j’ai transformé un MVP en 1 heure : Retour d’expérience et bonnes pratiques

Dans le monde des projets digitaux, on tombe souvent sur des idées qui ont un énorme potentiel, mais qui manquent de structure ou d’organisation. C’est exactement ce qui m’est arrivé récemment quand j’ai découvert un side-project sur LinkedIn. Le produit était intéressant, mais l’expérience utilisateur (UX) et l’interface utilisateur (UI) étaient loin d’être optimales.

C’est à ce moment-là que je me suis lancé un défi personnel : reprendre l’UX design et l’UI de ce MVP et améliorer la structure globale… en 1 heure chrono. Un exercice à la fois stimulant et révélateur !

Dans cet article, je vais vous expliquer comment j’ai procédé, quels ont été les obstacles et surtout, les résultats obtenus. Vous y trouverez également des conseils pour structurer rapidement un projet tout en respectant les contraintes de temps.

Pour ce projet, nous allons utiliser plusieurs outils et bibliothèques afin de faciliter notre travail.

Prérequis :

• Figma : pour concevoir et gérer l’interface utilisateur de l’application.
• Canva : pour créer les autocollants (stickers) de l’application.
• Next UI Figma : pour utiliser le système de design de Next UI.

Quelques précisions importantes :

Lorsque l’on se lance dans un projet, qu’il soit personnel ou professionnel, il est essentiel de ne pas tout réinventer. À moins de vouloir créer une bibliothèque ou un package spécifique, il est fortement recommandé d’utiliser des bibliothèques, des frameworks et des systèmes de design existants. Cela permet de gagner un temps précieux et d’éviter bien des frustrations.

Commencez par le design :

Si vous n’êtes pas à l’aise avec des outils comme Figma, commencez par réaliser des maquettes simples sur papier. Cela vous permettra de visualiser votre projet et de vous familiariser avec les différents éléments de l’interface. C’est également une excellente façon de stimuler votre créativité et de vous donner envie d’approfondir vos connaissances en design.

---

L’analyse initiale : Identifier les points bloquants

Tout projet commence par une phase d’analyse, et celle-ci n’a pas fait exception. En seulement quelques minutes, j’ai repéré les principaux problèmes qui freinaient l’utilisateur :

1. Manque de fluidité : Le parcours utilisateur était peu intuitif et manquait de clarté. Chaque étape semblait un peu chaotique, sans réelle cohérence.
2. Incohérence visuelle : Le design n’était pas harmonieux. Les couleurs, les polices et les icônes semblaient déconnectés les uns des autres, perturbant l’expérience globale.
3. Navigation complexe : Les utilisateurs devaient trop réfléchir pour savoir où cliquer ou comment interagir avec l’interface. Un mauvais point pour l’expérience utilisateur.

Voici la base du projet de Wassim Salmi.

La méthodologie : Simplifier et structurer en 1 heure

Une fois les problèmes identifiés, il était temps de passer à l’action. Et avec seulement 1 heure à ma disposition, la stratégie devait être claire et précise. Voici comment j’ai découpé ce temps :

1. Simplifier le processus d’inscription

Première étape clé : faciliter l’accès au produit. L’inscription doit être rapide et sans friction. J’ai donc simplifié le formulaire d’inscription en réduisant les champs obligatoires et en clarifiant les instructions. L’objectif ? Que l’utilisateur puisse s’inscrire en moins de deux minutes.

2. Clarifier les appels à l’action (CTA)

Les appels à l’action sont essentiels pour guider l’utilisateur dans sa navigation. Dans ce MVP, les CTA manquaient d’impact et de visibilité. J’ai donc revu leur emplacement, leur couleur, et leur texte pour qu’ils soient clairs, directs, et engageants.

3. Harmoniser le design

Un design cohérent aide l’utilisateur à se sentir à l’aise et en confiance. J’ai uniformisé les couleurs et les typographies pour créer une harmonie visuelle.
Le résultat ? Un produit qui je pense est plus agréable à utiliser et esthétiquement plaisant.

Nous avons repensé l’écran de connexion de l’application. Nous avons restructuré le titre, le texte et les champs de saisie pour une meilleure lisibilité. Le bouton ‘S’inscrire‘ a été mis en avant pour encourager la création de nouveaux comptes.

Comme de nombreuses applications, nous proposons une authentification simple via les comptes Google, Facebook et Apple. L’interface est conçue avec des formes arrondies et des espacements généreux pour une expérience utilisateur agréable.

Nous avons également veillé à maintenir une cohérence visuelle en utilisant les codes couleurs définis dans la charte graphique.

Nous allons nous concentrer sur la configuration initiale de l’utilisateur lors de sa première connexion.

Structure et composants :

Nous conserverons la structure existante et apporterons les modifications suivantes :

• Saisie des informations :
  • Choix multiples : Nous utiliserons des boutons radio pour les choix tels que le genre ou le type de pratique sportive, offrant ainsi une expérience utilisateur plus intuitive.
  • Valeurs numériques : Nous mettrons en place des curseurs à cran pour les valeurs de poids et de taille, permettant une sélection plus visuelle et précise. Des champs numériques pourront être ajoutés au-dessus des curseurs pour une saisie directe si nécessaire.
• Navigation :
  • Progression : Les boutons de navigation seront stylisés selon les règles de notre charte graphique. Le bouton « Suivant » sera mis en évidence avec la couleur primaire pour inciter l’utilisateur à poursuivre la configuration.
  • Retour : Le bouton « Précédent » sera affiché avec un contour (border only) pour indiquer qu’il est secondaire par rapport au bouton « Suivant ».

Objectifs :

• Guidage utilisateur : Faciliter la progression de l’utilisateur dans le processus de configuration en proposant des interactions claires et intuitives.
• Cohérence visuelle : Assurer une cohérence esthétique avec le reste de l’application en respectant les règles de notre charte graphique.

Cette première phase se concentre sur la structure des composants et ne prend pas en compte les aspects liés à l’expérience utilisateur tels que les parcours utilisateur ou les tests d’utilisabilité. Ces éléments seront abordés dans une étape ultérieure. »

Nous allons maintenant nous concentrer sur la section « Programme ».

• Visuel :
  • Titre : Nous mettrons en valeur le titre en utilisant une couleur contrastée et une typographie plus importante pour attirer l’attention.
  • Sous-titre : Un paragraphe introductif sera ajouté pour présenter de manière concise le contenu de cette section.
  • Cards et carrousel : Nous reprendrons le concept des cards et du carrousel, tout en apportant des améliorations esthétiques subtiles. Par exemple, nous pourrons ajuster les bordures, les ombres ou les espaces entre les éléments.
  • Stickers : Nous intégrerons les stickers créés avec Canva pour apporter une touche visuelle plus dynamique et personnalisée. Nous les positionnerons de manière stratégique entre les cards pour créer un rythme visuel intéressant.

• Interactions :
  • Boutons : Un bouton sera ajouté à gauche du carrousel pour permettre à l’utilisateur de naviguer facilement entre les différentes slides.
  • Effets : Nous ajouterons un effet de survol (hover) sur les cards pour mettre en évidence celle qui est sélectionnée.

Cohérence visuelle :

Nous veillerons à maintenir une cohérence visuelle en utilisant les mêmes couleurs, les mêmes typographies et les mêmes éléments graphiques que dans le reste de l’interface.

Objectifs :

• Clarté: Rendre la section « Programme » plus attrayante et facile à comprendre.
• Aisance de navigation: Permettre à l’utilisateur de parcourir le programme de manière fluide et intuitive.
• Cohérence: Assurer une expérience utilisateur cohérente et agréable. »

Améliorations apportées :

• Clarté: Les phrases sont plus directes et concises.
• Précision: Les termes techniques sont utilisés de manière appropriée (par exemple, « typographie », « hover »).
• Cohérence: Le texte est plus homogène et respecte les règles de grammaire.
• Structure: Les idées sont organisées de manière logique et hiérarchisée.
• Objectifs: Les objectifs de cette phase sont clairement définis.

Améliorations apportées :

• Clarté: Les phrases sont plus directes et concises.
• Précision: Les termes techniques sont utilisés de manière appropriée (par exemple, « boutons radio », « curseurs à cran »).
• Cohérence: Le texte est plus homogène et respecte les règles de grammaire.
• Structure: Les idées sont organisées de manière logique et hiérarchisée.
• Objectifs: Les objectifs de cette phase sont clairement définis.

Suggestions supplémentaires :

Personnalisation: Tu peux évoquer la possibilité de proposer des options de personnalisation supplémentaires à l’utilisateur (par exemple, choix d’un thème).

Plus de détails techniques: Si tu souhaites donner plus d’informations sur la mise en œuvre technique, tu peux préciser les bibliothèques ou les frameworks utilisés.

Accessibilité: Tu peux mentionner les aspects d’accessibilité qui seront pris en compte (par exemple, choix des couleurs, contraste, taille des éléments).

Les résultats : Un MVP transformé

Après cette heure de travail, le MVP avait déjà bien changé. Voici les principaux résultats obtenus :

• Une expérience utilisateur simplifiée : Les utilisateurs peuvent désormais s’inscrire et naviguer de manière fluide, sans se perdre dans des interfaces complexes.
• Un design épuré et cohérent : Chaque élément visuel suit une logique, ce qui permet à l’utilisateur de se concentrer sur l’essentiel. (les stickers sont créé sous Canva pour plus de rapidité)
• Une navigation plus intuitive : Les boutons sont clairement visibles, les étapes du parcours sont logiques, et l’utilisateur sait toujours ce qu’il doit faire ensuite.

Pourquoi ce défi ?

Vous vous demandez peut-être pourquoi je me suis lancé dans ce défi ? Après tout, je ne suis pas freelance et je ne cherche pas à reprendre des projets digitaux. Cependant, en tant que chef de projet, j’ai toujours aimé structurer et organiser des projets, même quand ils ne sont pas directement liés à mon travail. Pour moi, il s’agit avant tout de défis personnels qui permettent d’aiguiser mes compétences et de voir jusqu’où je peux aller en un temps limité.

Parfois, il suffit d’un regard extérieur et de quelques ajustements pour transformer un projet. Ce genre d’exercice est extrêmement enrichissant, et je pense que tout chef de projet devrait, de temps en temps, se lancer des défis similaires pour maintenir ses compétences à jour.

Conclusion : Structurer un projet en peu de temps, c’est possible

Cette expérience m’a rappelé qu’il n’y a pas toujours besoin de passer des jours entiers à peaufiner un projet pour obtenir des résultats. Avec une analyse rapide et des actions ciblées, on peut améliorer significativement un produit en peu de temps.

Si vous travaillez sur un projet qui semble stagner, je vous encourage à prendre du recul, à identifier les problèmes principaux, et à vous donner un temps limité pour y remédier. Vous serez surpris de ce que vous pouvez accomplir !

Et vous, avez-vous déjà relevé ce genre de défis dans vos projets ? Comment abordez-vous ce type de situations ?