EasyCinema — site de billetterie de cinéma (projet d’études)
Le produit : EasyCinema est une billetterie web et mobile pour un cinéma en Géorgie. EasyCinema veut offrir aux spectateurs un moyen simple de trouver un film et de réserver leurs billets. Le produit s’adresse à celles et ceux qui ne veulent pas perdre de temps à faire la queue, en particulier aux personnes qui recherchent des formats de projection spécifiques.
Problème
Les étudiants et les actifs très occupés manquent de temps pour faire la queue au guichet du cinéma.
Certains ont du mal à se faire comprendre au guichet, car ils ne parlent pas la langue locale. En parallèle, les applications et sites locaux sont mal traduits.
Objectif
Concevoir une plateforme de billetterie multi-appareils, simple et conviviale, qui aide les spectateurs à trouver les films à l’affiche et à réserver leurs billets.
Mon rôle
UX designer chargée de concevoir la solution web et mobile pour un cinéma
Responsabilités
Recherche utilisateur, entretiens, wireframes papier et numériques, prototypage basse et haute fidélité, tests d’utilisabilité, prise en compte de l’accessibilité et itérations sur le design.
Recherche utilisateur : synthèse
J’ai mené des entretiens et créé des empathy maps pour mieux comprendre les futurs utilisateurs de l’application web et mobile.
Le groupe d’utilisateurs principal a confirmé l’hypothèse : il s’agit d’adultes qui veulent gagner du temps en achetant leur billet à l’avance, sans faire la queue.
La recherche a montré qu’au‑delà du manque de temps, les utilisateurs rencontrent d’autres difficultés lorsqu’ils essaient de réserver un billet. Des obstacles comme le choix limité de langues de traduction, le manque d’informations ou la barrière de la langue dégradent l’expérience utilisateur.
Recherche utilisateur : points de friction
Persona : Amir
Énoncé du problème :
Amir est un expatrié en activité qui a besoin d’une application pour trouver, dans un cinéma proche, un film en anglais avec sous‑titres incrustés et réserver un billet, car il a du mal à comprendre la langue locale et l’anglais parlé trop vite, et il ne veut pas perdre de temps à faire la queue
Parcours utilisateur
Le parcours utilisateur représente le point de vue de l’un des personas : un expatrié en activité qui souhaite voir une avant-première, mais que la barrière de la langue et ses difficultés auditives freinent.
Plan du site
La difficulté à naviguer sur le site était l’un des principaux points de friction des utilisateurs ; je me suis donc appuyée sur ce constat pour construire le plan du site.
Mon objectif était de prendre des décisions d’architecture de l’information réfléchies pour améliorer la navigation dans son ensemble. La structure retenue visait la simplicité et la clarté.
Wireframes papier
Esquisser plusieurs itérations de chaque écran sur papier m’a permis de m’assurer que les éléments retenus pour les wireframes numériques répondaient bien aux points de friction des utilisateurs. Pour l’écran d’accueil, j’ai donné la priorité à un parcours de commande rapide et simple afin de faire gagner du temps aux utilisateurs.
Wireframes numériques : déclinaisons par taille d’écran
Tout au long de la phase de conception initiale, j’ai veillé à fonder les écrans sur les retours et les enseignements de la recherche utilisateur.
Un filtrage simple des films était un besoin clé à couvrir dans le design, tout comme la compatibilité de l’application avec les technologies d’assistance.
Prototype basse fidélité
À partir de l’ensemble des wireframes numériques, j’ai créé un prototype basse fidélité. Le parcours principal que j’ai relié consistait à trouver un film en anglais sous‑titré pour le lendemain et à réserver un billet. Lien vers le prototype
Test d’utilisabilité : résultats
- Type d’étude
- Test d’utilisabilité non modéré
- Lieu
- Géorgie, à distance
- Participants
- 5 participants
- Durée
- 20 minutes
J’ai mené deux séries de tests d’utilisabilité. Les résultats du premier ont guidé le passage des wireframes aux maquettes. Le second, réalisé sur un prototype haute fidélité, a montré quels aspects des maquettes devaient être affinés.
-
Résultats de la 1re série
-
Les utilisateurs ont besoin d’une étape de confirmation
-
Les utilisateurs ne remarquaient pas le filtre, trop discret
-
Les utilisateurs veulent voir les prix
-
-
Résultats de la 2e série
-
L’affichage en liste a été préféré à l’affichage en mosaïque
-
Les utilisateurs souhaitaient pouvoir choisir le format 2D
-
Les utilisateurs veulent un mode invité
-
Maquettes
Les premières versions permettaient de voir les horaires des séances ; après les tests d’utilisabilité, j’ai ajouté la possibilité de voir le prix du billet. J’ai également revu l’affichage du bouton de filtre pour le rendre plus visible
Le test d’utilisabilité a révélé que les utilisateurs voulaient davantage d’informations récapitulatives. Pour lever leur frustration pendant la commande, j’ai ajouté un écran « Confirmation de commande ». Un rappel a aussi été ajouté à l’écran de sélection des places pour confirmer le choix précédent.
Pour simplifier encore la commande, j’ai ajouté la possibilité de continuer en mode invité
L’étude a montré que les utilisateurs cherchent des genres ou des formats de films précis et veulent choisir les cinémas à proximité ; j’ai donc prévu un moyen rapide de les trouver
Maquettes : différentes tailles d’écran
Maquettes : taille d’écran d’origine
Prototype haute fidélité
Le prototype haute fidélité final propose des parcours plus clairs pour trouver un film, réserver un billet et finaliser la commande. Il répond aussi au besoin des utilisateurs d’un filtrage simple et d’un affichage des prix.
Lien vers le prototype de l’application Prototype web
Accessibilité
Accès garanti aux personnes malvoyantes grâce à des textes alternatifs sur les images pour les lecteurs d’écran.
Utilisation d’icônes pour faciliter la navigation et de polices bien contrastées.
Éviter les éléments désactivés et proposer plutôt un retour du système
Enseignements
Impact :
L’application donne aux utilisateurs le sentiment qu’EasyCinema pense vraiment à leurs besoins.
Un retour d’un pair :
« J’ai besoin de ce produit dans ma vie. En tant qu’expatrié, j’ai du mal à trouver des films qui me sont accessibles »
Ce que j’ai appris :
En concevant l’application EasyCinema, j’ai compris que les premières idées ne sont que le début du processus. Les tests d’utilisabilité et les retours de mes pairs ont nourri chaque itération du design. Les insights des utilisateurs ont fait de ce travail une véritable co‑création.
Prochaines étapes
Mener une nouvelle série de tests d’utilisabilité pour vérifier que les points de friction des utilisateurs ont bien été résolus.
Poursuivre la recherche utilisateur pour identifier de nouveaux besoins.
Évaluer des fonctionnalités supplémentaires répondant aux besoins des utilisateurs et créer des fonctionnalités phares pour l’application.