Design d’expérience d’une nouvelle fonctionnalité sur une application mobile
Sujet
Challenge
Schlouk Map possède une fonction de recherche de bars à proximité, nous avons décidé de développer la recherche d’événements également.
Schlouk Map, c’est quoi ?
Définition de la cible
Les utilisateurs de Schlouk Map sont à 78% des jeunes, dont la moyenne d’âge est assez concentré entre 25 et 35 ans. Ils sont comme la plupart des jeunes : actifs, souhaitent avoir le maximum d’informations possible, et ce, rapidement.
Pour approfondir les besoins de ces futurs utilisateurs, nous avons élaboré une interview quantitative afin d’obtenir le plus de freins et motivations possibles pour répondre au mieux à leurs attentes. Voici ce qu’il en est sorti :
53% n’ont pas toutes les informations sur l’événement.
Le prix est le facteur le plus important à avoir pour participer à un événement
Un événement avec trop de monde ou situé trop loin du domicile serait le frein de beaucoup d’utilisateurs
« Trouver l’événement parfait à proximité en moins de 2 minutes en fonction de vos préférences et vos envies. »
Avant de concevoir et designer un parcours, le but est de réaliser une étude du marché existant. Les concurrents se plaçant dans l’organisation et la promotion d’événements ont été Lylo, Boiler Room, et bien d’autres. Tant pour l’aspect UI que le parcours de l’utilisateur : allant de la recherche à la réservation de la place.
La fonctionnalité : Évènement
Elle se décompose en 3 étapes :
- La géolocalisation des événements à proximité (format map ou liste)
- Le filtre de préférences avec les catégories des événements (budgets, durée, soirées à thèmes)
- La réservation de la place avec la possibilité d’inviter des ami(e)s
Géolocalisation
Préférences
Réservation
Wireframing
A/B Testing
Afin de concentrer nos efforts et notre temps, nous avons réalisé un A/B Testing de la phase de sketching avec 2 parcours assez similaires mais présentant 2 types d’affichages différent de l’événement :
Le parcours A : affiche l’événement en plein écran (il n’a pas été apprécié par la plupart des utilisateurs)
Le parcours B : affiche l’événement en format vignette avant de l’afficher en plein écran, permettant de ne pas sortir de la Map.
Mid-Fi
Le Mid-Fi est la création d’un prototype en nuance de gris les écrans sur des outils de conception graphique (Figma pour notre part)
Design System
Dans le but de suivre la charte graphique et le travail déjà effectué par Schlouk Map, nous avons réalisé un design system (bibliothèque d’éléments graphique : typographies, boutons, couleurs, icônes, etc…) de l’application.
Atomic Design
Le concept d’Atomic design a été créé par le webdesigner Brad Frost. L’idée principale est d’organiser chacun des éléments de l’interface pour concevoir des interfaces belles et fonctionnelles dans tous les environnements.
Voici un exemple avec la page « Map » qui présente une vignette cliqué :
Cliquez sur les écrans pour essayer le prototype final
Nous avons décidé de procéder à une phase de test utilisateur, à distance, contraint par la crise sanitaire du Covid-19. Les tests ont été réalisés en visio-conférence et en partage d’écran.
Tests utilisateurs
Nous avons pu récolter des premiers avis, en moyenne les utilisateurs ont mis 3 à 4 minutes pour effectuer le parcours. Plusieurs retours ont été faits, notamment sur les interactions peu compréhensive (sur le sketching) et un manque de clarté sur certains boutons (sur le Mid-Fi)
Axes d'améliorations
- Ajouter des filtres de fonctionnalités
- Le jaune fait mal aux yeux
- La possibilité de choisir le jour de l’événement
- Les boutons de retour sont mal placés
Suggestions
- Avoir un bouton permettant de créer un événement
- Pouvoir payer directement sur l’application
Verbatims
Merci !
Un grand remerciement également à mon co-équipier Tristan Chartier pour m’avoir accompagné durant ce semi-marathon (15 jours) très intensif.
Merci à vous d’avoir lu mon article jusqu’à la fin, en espérant qu’il vous ait plu.