Projet Tickie - Mockup des différents écrans

Tickie : billets d’événements sportifs en NFT (MVP)

Tickie, start-up dans la billetterie de matchs sportifs au format NFT, a fait appel à mes services pour concevoir le MVP de leur flux d’achat de billets.

Découvrez

🎬 Démo du prototype

Outils utilisés
  • Figma / Figjam

  • Trello

  • Canva

L’équipe
  • Damien (Webdev/UI)

  • Moi (UX/UI)

Mon rôle
  • Recherche utilisateur

  • Ideation

  • Tests utilisateurs

  • Sketchs & wireframe

  • Microcopie

  • Prototype hi-fi

Timeline
  • En tout : 13 jours

  • Phase de recherche : 6 jours

  • Design & tests : 7 jours

Logo de Tickie
contexte

Des billets au format NFT : pourquoi ?​

Pour Tickie, le format NFT des billets est un avantage compétitif. Il permet en effet de :
  • Sécuriser les billets en éliminant le risque de fraude lors de l’achat / vente en seconde main

  • Valoriser les billets en les rendant unique et « collector« . En fonction de l’événement, ceux-ci peuvent même prendre de la valeur dans le temps. 

  • Fidéliser l’acheteur du ticket en lui attribuant des avantages exclusifs (goodies, événements spéciaux, etc.)

Exploration

🧑‍💻 Recherche Utilisateur​

Synthèse de la recherche sous forme de diagramme d'affinités

Résultats de la recherche

  • Principal soucis : la sécurité. Les utilisateurs veulent éviter le risque de fraude.
  • Lien émotionnel avec le ticket : peu important sauf s’il est matériel (papier).
  • Pain point : le manque de clarté et de fluidité sur les plateformes d’achat habituelles
  • Peu de confiance dans le format NFT (vu comme trop spéculatif)

User persona

User persona : Pierre, notre supporter occasionnel
Pierre, notre supporter occasionnel

Problem statement

“Un supporter occasionnel a besoin d'acheter le bon billet dans la bonne quantité pour un événement sportif, grâce à une plateforme rapide, fluide et certifiée avant que les places ne soient épuisées. Car même si les plateformes de revente offrent une seconde chance, elles n'offrent pas une sécurité suffisante contre la fraude.”

Notre problem statement en image
Notre problem statement en image
Ideation

💡 Brainstorming & concept tests

Méthodes de brainstomring
  • Crazy-8
  • Benchmarking des apps de musique
Méthode de concept testing
  • 5 Interviews utilisateur à l’appui des sketchs

Recherche d'événements

L’offre d’événements sportifs revêt une certaine complexité : 

  • Différents sports
  • Différents types d’événements
  • Différents types de lieux

Comment donner à l’utilisateur un accès simple à la complexité de cette offre ?

Pour moi, une contrainte similaire s’applique aux applications de musique (Spotify, Deezer,…).
A l’instar de ces applications, une solution consiste à proposer :

  • Des suggestions multidimensionnelles en temps-réel
  • Des pages de résultats de recherche structurées en catégories
Image des résultats de recherche sur Deezer
La catégorisation multi-dimensionnelle des résultats de recherche permet de simplifier une offre complexe.
Sketching de l'organisation des événements en catégories
Sketching des catégories dans les résultats de recherche

Sécurisation des billets

La phase de recherche nous a appris que la sécurité était le principal soucis des utilisateurs.

Comment transmettre aux utilisateurs le sentiment que leurs billets sont uniques et sécurisés ?

Réponse (en partie) : en leur montrant une animation de « fabrication » de leur billet.
A la manière d’une forge ou d’une presse, le billet est « confectionné à la main » par l’application.

Cette idée m’est venue lors d’une session de brainstorming en Crazy-8.

 

Image d'une forge
Sketchs - Animation de la création des billets
Sketchs de la "création" des tickets. Une façon de donner un sentiment de sécurité.

Concept tests

Prototypage

📐 Wireframes & tests d'utilisabilité

Wireframes

La sélection du placement est une fonctionnalité importante :
  • C’est une étape importante du flux d’achat,
  • C’est un challenge qui nous a été remonté lors des concepts tests.
La solution nous a été inspiré de notre benchmark de la concurrence. Vous la voyez ici animée dans le wireframe.
Wireframe - Animation du système de sélection du placement
Système de sélection du placement

Tests d’utilisabilité

  • cliquer sur une partie du stade pour sélectionner sa catégorie, n’est pas pratique.
  • Pour 3 utilisateurs sur 3, un bouton vraiment défini serait préférable pour sélectionner une catégorie de place.
UI Design

🎨 Look & feel

Un style nous est proposé par le client

Ecran de prototype transmise par le client pour nous donner une idée de style
Ecran hi-fi transmis par le client pour nous proposer un style
Nous l’avons soumis aux utilisateurs du concept test :

Le texte ne fait pas « sport ».

Cela me fait plus penser à un réseau social qu’à une billetterie.

Ca fait assez « mou », pas très dynamique.

Nous avons donc décidé de reprendre le style à zéro.

 

Look & feel

3 valeurs que doit dégager l'interface

Sport

Dynamisme

Confiance

Moodboard

Notre moodboard pour l'interface de Tickie

Typographie

Inspiration : style de typographie utilisé par le journal « L’équipe »

Couleurs

Nous avons opté pour une couleur primaire bleue.

Objectif : donner un maximum de place aux espaces blancs pour renforcer la lisibilité dans un contexte d’informations nombreuses.

Microcopie

Donner de l’importance aux contenus textuels dés la phase de mid-fi, a permis d’améliorer le wording au fil des itérations en étant guidé par les tests d’utilisabilité.

« Crypto-billets » plutôt que « billets NFT »

Lors des interviews utilisateur, nous avons noté que ceux-ci avaient une confiance limitée dans la technologie NFT. Bien que Tickie en ait fait son principal « argument innovation », nous devions éviter de mentionner directement cette technologie dans l’interface.

Nous avons donc choisi de parler de « Crypto-billet » plutôt que de « billets NFT ».

Les billets sont appelés "crypto-billets"

Clarifier une expression inhabituelle

Il nous a semblé important d’informer explicitement les utilisateurs de la sécurité et des avantages que les crypto-billets leur apporte.

Pour cela, nous avons inclus une modale d’explication derrière un lien « info », partout ou l’expression « crypto-billet » était employée.

Prototypage & tests

🪄 Prototype et tests de desirabilité​

Prototype hi-fi

La réalisation du prototype hi-fi a été l’occasion d’appliquer notre compréhension du besoin utilisateur :

  • En rendant la sélection des catégories de place plus utilisable (retour fait dans les tests d’utilisabilité)
  • En créant l’animation de « fabrication des billets »

Sélection de place plus utilisable

  • Fonctionnalité intégrée à la page de l’événement plutôt que dans une modale,
  • Sélection de la catégorie par un bouton plutôt qu’une zone de la carte du stade.
Vidéo montrant la sélection de catégorie de placement sur le prototype hi-fi
Nouvelle fonctionnalité de sélection de catégorie de place

Traduire la sécurité des billets

  • En phase de recherche, les utilisateurs ont majoritairement soulevé le souci de la sécurité des billets.
  • La solution imaginée lors de la phase d’idéation est ici enfin réalisée : une animation de « construction de billet ».
Vidéo de l'animation montrant la création des billets par l'application
Animation de la "fabrication" des billets dans le prototype hi-fi

Tests de désirabilité

Valeurs retournées par les utilisateurs :

Engageant

Direct

Attractif

Amical

Invitant

Image du résultat des tests de Microsoft Reaction Cards
Résultat des tests avec les Reaction Cards Microsoft

Lors des tests de désirabilité, les utilisateurs ont rapporté d’autres qualificatifs.

Les résultats de ces tests ont été particulièrement gratifiants, les fonctionnalités les plus appréciées étant :

  • la sélection de catégorie de place
  • l’animation de « fabrication des billets ».
Image des autres réactions des utilisateurs
Autres réactions rapportées lors du test de désirabilité
épilogue

🏆 Projet récompensé

Présentation devant un jury

Avec l’autorisation de Tickie, nous avons présenté ce projet dans le cadre du concours UX/UI Design Ironhack.

Outre une démonstration du prototype Figma, nous avons présenté les différentes étapes de notre travail ainsi que les méthodes utilisées.

Cette présentation, soutenue en Anglais devant un jury composé d’experts du design, nous a permis de décrocher la 3ème place du podium (sur 13 compétiteurs).

Un prix d’honneur nous a alors été décerné.

Image du prix d'honneur qui nous a été décerné