Comment faire le prototype d’une application ? Quelles sont les étapes préalables au maquettage ? Je vais ici tenter de répondre à ces questions à travers l’exemple d’une maquette d’application que j’ai réalisée pour Artipro.
Le brief
Le contexte
Il faut savoir que le chantier de rénovation préféré des français est la peinture de leur pièce principale. Pourtant, un chantier de peinture est semé de difficultés et de nombreuses questions se posent :
- Faire intervenir un tiers (artisan, jobber, ami) ou le faire soi-même ?
- Que repeindre précisément ? Quelles pièces ? Pour chaque pièce : murs, plafond, fenêtres, portes, radiateurs ?
- Quelle peinture choisir : couleur ? qualité ?
- Quel budget y consacrer ?
L’étape de l’analyse du chantier s’avère essentielle, puisqu’elle permet de définir le travail qui sera à réaliser et son prix. Les artisans peintres y dédient un temps important (parfois une heure sur place et presque autant hors clientèle, sans garantie que le devis ne soit accepté) : prise de contact avec le client, vérification de l’état des murs et prise de mesures.
Pain point / irritant client
En dépit de cet investissement en temps, l’étape de l’analyse du chantier est souvent source d’erreurs ayant un impact important sur le prix.
Problématique
La problématique est donc la suivante : quel outil proposer aux peintres pour rendre plus efficace l’étape de l’analyse du chantier ? Comment articuler cet outil avec les autres fonctionnalités dont aurait besoin le peintre : calendrier, devis, facturation, paiement… ? Comment inclure le client dans la création de devis, dans toute les configurations ?
1. Trouver des données sur le marché
Première étape : récolter quelques données sur le marché en question. En l’occurrence, combien d’entreprises sont présentes sur ce marché ? De quelle taille sont-elles ? Où sont-elles situées ? Combien de professionnels travaillent dans le secteur ? Quel est le chiffre d’affaire moyen des entreprises de ce secteur ?
2. Imaginer des personae
Les personae sont des personnages fictifs qui représentent la cible, des « modèles » d’utilisateurs, bref des utilisateurs types. Ils permettent de :
- Se pencher véritablement sur le besoin des utilisateurs
- Recenser les besoins réels et précis des utilisateurs
- Eviter un fourre-tout de fonctionnalités
- Comprendre, humaniser la cible et créer de l’empathie envers les utilisateurs
- Avoir un outil de communication simple, clair et explicite
- Avoir un référent commun
- Prioriser les efforts de développement
Comment les créer ? Il faut se poser les bonnes questions :
- Comment mon utilisateur est-il arrivé sur mon site ?
- Où est-il ? Est-il sur tablette ? Sur mobile ? Sur son écran d’ordinateur ? Au bureau ?
- D’où vient-il ? Un mot clef dans Google ? Du display ? Un site tiers ?
- Quelle(s) tâche(s) va effectuer le persona sur mon site ?
- Pourquoi est-il là ?
- Quels sont ses points d’entrée et de sortie ?
- Par quelles pages va-t-il passer ?
- Qui est-il ? Il faut lui attribuer un visage, un prénom, un âge, un statut, définir son comportement online et sa personnalité.
- Il faut aussi imaginer ce qui peut freiner le persona dans son achat.
Voici un exemple de persona pour l’application Artipro :
Exemple de persona pour Artipro
3. Créer sa User / Customer Journey
Ce document est basé sur des touch points, des points de contact. Il a pour objectifs de trouver plus d’informations sur l’utilisateur, de savoir quand le toucher et d’identifier les points de conversions. Toujours pour le persona de Fabrice, voici sa customer journey :
Exemple de Customer Journey
4. Réaliser un benchmark UX
L’étape suivante consiste à réaliser un benchmark des outils qui permettent actuellement de répondre à nos problématiques. L’idée est de surtout d’analyser comment leurs interfaces sont construites pour en tirer les points forts et s’en inspirer.
5. Créer l’interface
La création d’une interface se découpe en trois étapes, dont la dernière est… la création du prototype de l’application. Eh oui, enfin !
- le zoning : technique de maquettage basse fidélité qui permet d’organiser le contenu d’une page web en la divisant en différentes zones. Vous pouvez tout à fait faire cette étape au crayon, sur une feuille papier.
- le wireframe : technique utilisée pour créer des versions moyenne fidélité d’un livrable. Au début, on peut aussi utiliser un crayon et un papier et donner un peu plus de détails que pour le zoning. Au fur et à mesure, on va pouvoir commencer à représenter l’interface sur ordinateur, via un logiciel comme Balsamiq.
- le prototypage : technique de maquettage qui représente votre interface avec une haute fidélité. Pour créer le prototype d’une application, on peut utiliser des logiciels comme Sketch (mon préféré), Figma (très pratique parce qu’en ligne et donc collaboratif) ou encore Invision (que je n’ai jamais testé mais qui est une référence dans le domaine).
Résultat final
Pour toute demande concernant ce projet, envoyez-moi un message via mon formulaire de contact !