Sport360° Application pour les fans de sports
Enea de Toledo École Webstart Formation UX/UI design - promotion 2019/2020
Sommaire Brief & Méthodologie Appréhension des besoins et visualisation des objectifs
Benchmark & Audit Analyse ergonomique et fonctionnelle des concurrents
01
02
Étude documentaire
03
04
Hypothèses
Synthèse d’articles et d’études
Pistes de réflexion à valider ou infirmer
Sommaire Questionnaire Analyse des réponses au questionnaire
Atelier d’idéation Description et analyse des ateliers d’idéation menés
05
06
Cibles & Personas
07
08
Flow charts
Élaboration des profils types d’utilisateurs de l’application
Élaboration de l’architecture de l’application
Sommaire Wireframe Réalisation de maquettes basse fidélité
Moodboard & Design System Inspirations et lignes directrices
09 11
10
Tests utilisateurs
12
Maquette & Prototypage
Passation et analyse des tests utilisateurs menés sur wireframe
Réalisation des maquettes haute fidélité
01 Brief & Méthodologie Besoins - Problématique - Concept - Méthodologie
Le choix du sujet
Les millennials, ou “génération Y”, sont toutes les personnes âgées aujourd’hui de 18 à 35 ans. Ils sont très connectés, ont peu de temps et souhaitent pouvoir consulter rapidement du contenu “quand ils veulent et où ils veulent”. Le mobile s’est imposé comme leur device favori. Dans leur rapport au monde du sport, les millennials soulèvent de nouvelles problématiques. Le simple direct à la télévision ne suffit plus. Il faut de nouveaux médias (vidéos, podcasts), de nouveaux sports couverts (esport, futsal), du direct amélioré (replay instantané, anecdotes inédites) et la possibilité d’être supporter et de le montrer 24h/7j (commentaires, réseaux, bars, stades). Or, aujourd’hui, les applications sportives ont du mal à couvrir toutes les demandes de cette génération et beaucoup de fans de sports se retrouvent à jongler entre plusieurs applications. Étant moi-même fan de multi-sports et n’ayant trouvé aucune application qui centralise tout ce que je recherche, j’ai voulu proposer une application qui tente de résoudre certaines de ces problématiques.
Problématique
Comment adapter les applications pour fans de sport aux pratiques et exigences des millenials ?
Besoins
Personnaliser les notifications et le contenu Connaître les chaînes de retransmission d’évènements sportifs Faciliter l’accès au stade et aux bars de supporters (réservation et rappel) Avoir accès à de nouveaux médias et moyens d’information plus rapides
Objectifs de l’application Centraliser
● ● ●
Suivre l’actualité sportive via de nouveaux médias Réserver une table dans un bar Acheter ses billets pour un évènement sportif
Personnaliser
● ● ● ●
Paramétrer ses notifications Paramétrer son contenu Ajouter des sportif.ve.s et équipes favoris Proposer des quizz et sondages sur ses favoris
Planifier
● ●
Enregistrer un rappel pour une billetterie ou un match Connaître les chaînes de retransmission à l’avance
Méthodologie 1. Exploration ● ● ● ● ● ●
Brief & Méthodologie Étude documentaire Benchmark & Audit Hypothèses Questionnaire Cibles et persona
2. Idéation ● ● ●
Icebreaker Planning Poker Design Studio
3. Conception ● ● ● ●
Flowcharts Wireframes Prototype Design system
4. Test utilisateur ● ● ● ●
Guide d’entretien Test utilisateur Analyse tests Itération
5. Prototypage ● ● ● ●
Moodboard Maquette Prototype Design system
Après le prototypage on recommence la phase de test
02 Étude documentaire Analyse et synthèse des articles et études
Définition & Présentation
Il existe deux types de recherches : la primaire et la secondaire. Dans le cadre de ce projet j’ai principalement réalisé de la recherche secondaire, c’est-à-dire, une “revue de l’existant”. La phase de recherche permet de collecter des informations, de prendre en compte l’existant et de contextualiser le projet. Grâce aux données recueillies, il est possible de mieux cerner la problématique et de formuler des hypothèses en conséquence. Cette phase est primordiale pour concevoir une bonne expérience utilisateur. Pour ce projet, j’ai été chercher les données dans des études, articles, livres blancs ou blogs.
Lien vers les documents
Les millennials et le sport en chiffre 1/3 Live TV
Médias sportifs
Réseaux sociaux
50%
42%
65%
Suivent le sport à la télévision
Consultent un ou plusieurs médias sportifs
Source : Étude Kantaar “Only Sports & Passions”, 2018
Suivent au moins un compte lié au sport (+ 24% par rapport au reste de la population)
Les millennials et le sport en chiffre 2/3 Suivi des rencontres
Bars
Évènement sportif
58%
68%
36%
Utilisent une appli quand ils sont au stade ou qu’ils visionnent une compétition (motivations sociales ou recherche d’informations)
Source : Étude Kantaar “Only Sports & Passions”, 2018
Aiment regarder une compétition en direct dans un bar
Se rendent à des évènements sportifs. Et 76% iraient plus au stade si les tickets étaient moins chers
Les millennials et le sport en chiffre 3/3 Enrichir le direct
Intérêt féminin
Retransmission sport féminin
30%
46%
20%
Souhaitent avoir de nouveaux contenus à disposition : replays instantanés, analyses de spécialistes et infos exclusives des coulisses
Intérêt grandissant des femmes pour le sport
Source : Rapport du CSA “Sport et télévision, contributions croisées”, 2017
Du volume horaire de diffusion de retransmission sportives (+ 6% en 2 ans)
“Live action is central to the fan experience, but it is limited. The 24/7 fan is looking for ways to get their fix during down-time and to follow sports throughout the year, even off-seasons”. - Matthew Bali
Le “24/7 fan”
37%
83%
Super connecté
Intérêt off-saison
Veulent une expérience enrichie : informations inédites en temps réel, commenter les évènements sportifs en direct et off-direct, avoir de la VR.
Des millennials sont intéressés par du contenu hors saison (analyses, vie des athlètes, moments clés, quizz…)
03 Benchmark & Audit Analyse ergonomique et fonctionnelle
Définition & Présentation
Le benchmark permet de prendre connaissance des solutions existantes. C’est un audit des produits concurrents. L’objectif est d’identifier les points forts et faibles de chaques produit et in fine de se démarquer des concurrents. Pour ce projet, j’ai réalisé un benchmark ergonomique et fonctionnel. Pour chaque concurrent, j’ai analysé un nombre de fonctionnalités données et étudié si les lois d’ergonomie étaient respectées.
Lien vers le tableau du benchmark
Les concurrents analysés
RMC sport
L’équipe
Flash résultats
Allomatch
Football à la télé
Programme TV sports
Il y a des points forts et faibles chez l’ensemble des concurrents en terme d’ergonomie. Concernant les fonctionnalités, aucun ne concentre l’ensemble des fonctionnalités et aucun ne permet d’acheter un billet ou de personnaliser totalement le contenu de l’application. En image, je vais vous présenter par thème les points forts et faibles principaux des applications.
Audit fonctionnalité : 13 sur 24 Audit ergonomique : 29 sur 44
Audit fonctionnalité : 07 sur 24 Audit ergonomique : 29 sur 44
Audit fonctionnalité : 16 sur 24 Audit ergonomique : 36 sur 44
Audit fonctionnalité : 09 sur 24 Audit ergonomique : 27 sur 44
Audit fonctionnalité : 15 sur 24 Audit ergonomique : 34 sur 44
Audit fonctionnalité : 07 sur 24 Audit ergonomique : 28 sur 44
Surtitrage des éléments rouge et vert
Accessibilité
Légende des icônes Augmenter la taille du texte
Trop de majuscules (lisibilité) Flash resultats
RMC sport L’équipe
Demande confirmation et explique l’action en cours
Feedback et UX writing
Explique pourquoi l’écran est vide et comment le remplir
Onboarding visite guidée pour expliquer les fonctionnalités de l’application Flash resultats
Flash resultats
Flash resultats
Densité d’informations et d’éléments Beaucoup d’éléments graphiques qui alourdissent l’interface et noient l’information
Liste interminable et trop similaire d’éléments
Loi de Hyck-hymann et nombre magique de Miller : difficulté de faire un choix vu le nombre d’éléments Programme TV sports
RMC sport Football à la télé
Contrôle de l’utilisateur et gestion des erreurs Pour lire l’article, l’utilisateur sort du parcours et est redirigé sans message sur un autre site
Doit entrer au moins 3 caractères dans la barre de recherche, problème pour les équipes comme l’OM
Un “interdit moins de 18” est présent sur beaucoup de page sans aucune explication
Football à la télé
Flash resultats
Football à la télé
Conventions
L’absence de nav barre et la navigation se fait par les boutons en haut (difficile à atteindre)
Absence d’une barre de recherche
Football à la télé RMC sport
Personnalisation
Choisir sa home page
Personnaliser ses alertes par sport ou évènement
Flash resultats
Mettre un ou plusieurs favoris
L’équipe
RMC sport
Ajouter un rappel à son calendrier
Autres fonctionnalités Attribuer une couleur par sport
Tweet et replay quasi instantané Programme TV sport
Flash resultats
RMC sport
Indiquer les chaînes de retransmission
Autres fonctionnalités Indiquer les bars pour regarder du sport autour de soi
Statistiques en temps réel Programme TV sport
Allomatch
L’équipe
04 Hypothèses Pistes de réflexion à valider ou infirmer
Définition & Présentation
À partir des suppositions, issues de la phase de recherche, il faut désormais formuler des hypothèses. Une hypothèse c’est ce qu’on suppose être vrai. Toute hypothèse devra être validée ou invalidée. De cette manière, on est certain d’enlever une grande part de subjectivité et de s’appuyer à la place sur des preuves tangibles.
Les hypothèses 1/3
01
02
Je pense que les fans de sport liront davantage les notifications et le contenu s’ils sont personnalisables
Je pense que les fans de sport souhaitent être libres d’activer ou non, à tout moment, leurs notifications
03 Je pense que les fans de sport manquent, malgré eux, des évènements sportifs et qu’avoir des rappels pourraient les aider
Les hypothèses 2/3
04
05
06
Je pense que les fans de sport regardent du sport à la TV mais qu’il est difficile pour eux de trouver des informations sur la retransmission de l’évènement (chaîne not)
Je pense que les fans de sport ont besoin des horaires de rediffusion quand ils manquent le direct
Je pense que les fans de sport s’intéressent de plus en plus au sport féminin mais qu’ils ne trouvent pas assez d’informations et d’actualités dessus
Les hypothèses 3/3
07
08
Je pense que les fans de sports aimeraient aller plus au stade et que des rappels pour l’achat des billets ou des promos pourraient y contribuer
Je pense que les fans de sport qui aiment voir les matchs dans des bars n’ont pas de bars attitrés et qu’une proposition de bars par géolocalisation serait utile
09 Je pense que les fans de sport veulent de l’innovation dans les médias utilisés et que des notifications vocales seraient une bonne alternative aux textuelles
05 Questionnaire Analyse des réponses
Définition & Présentation
Le questionnaire permet de recueillir des données, informations et besoins de futurs utilisateurs potentiels. Ces données, qualitatives et quantitatives, permettent ensuite de valider ou non des hypothèses et de constituer le plus fidèlement possible des personas.
Lien vers le questionnaire
Données des répondants Nombre de réponses 29 hommes 18 femmes
Pratique du sport Des répondants pratiquent un ou plusieurs sports
47
87,3%
80,9%
33
Part de millennials Des répondants ont entre 18 et 34 ans
Domiciliation Des répondants habitent en Ile-de-France
Les notifications Non : manque de temps et trop nombreuses et polluantes
Lecture des notifications
Absolument nécessaire : décider quand je veux des notifications
Activer/désactiver les notifications
Généralement l’ensemble des notifications ne sont pas lues car jugées trop nombreuses et polluantes (52,2%). Pour les utilisateurs il est donc absolument nécessaire de pouvoir les activer/désactiver quand ils le souhaitent (87%) et de les personnaliser (82,6%) pour n’avoir que du contenu qui les intéresse.
Essentiel : n’être informé que sur les sujets de mon choix
Personnaliser ses notifications
Les retransmissions Présence à améliorer : informations et retransmissions
Sport féminin
Rediffusion : cherche les horaires TV : regarde les évènements sportifs via les chaînes TV
Médias visionnage direct
Site internet : informations éparpillées mais privilégie le web
Si manque le direct
Majoritairement, les fans de sport regardent les évènements sportifs à la télévision (63,6%). S’ils loupent un direct, contrairement à notre hypothèse, ils ne cherchent pas à voir une rediffusion (7,1%), mais préfèrent lire un résumé du match (57,2%). Quant aux informations sur les retransmissions, les sources sont variées et disparates même si les sites internet prédominent (42,9%). Les informations sur le sport féminin sont considérées comme cachées (21,4%), peu présentes (42,9) voire totalement absentes (21,4%) et cela est dommage.
Informations retransmissions
La billetterie Ne connaît pas la date d’ouverture : n’arrive jamais à acheter des places
Oublie la date d’ouverture : connait la date mais oublie souvent avec le temps
Achats de billets - ouverture billetterie
Très utile
Potentiellement utile
Rappel ouverture et redirection pour l’achat de billets
Les fans de sport ont du mal à acheter des billets pour des évènements sportifs car ils oublient (38,2%) ou ne connaissent pas (14,7%) la date d’ouverture de la billetterie. Or, c’est surtout à l’ouverture que les billets sont vendus et il n’est pas rare de les manquer si on n’est pas assez réactif (32,4%). Ainsi, l’idée d’avoir un rappel et un lien direct vers les billetteries est jugée comme très utile (35,3%) ou potentiellement utile (55,9%).
Bars Oui régulièrement: aime rencontrer d’autres supporters
Oui parfois: se rend au bar entre amis Internet : cherche aléatoirement
Non: préfère le canapé
Fréquence visionnage dans un bars
Connaissance de la programmation des bars
Les millennials fans de sport aiment bien se rendre dans les bars pour voir un évènement sportif entre supporters (17%) ou amis (57,5%). Ils changent régulièrement de bars et trouvent les informations sur les bars et leur programme sur internet en tapant des mots clés aléatoirement sur un moteur de recherche (54,3%). Il n’y a pas de méthode particulière de recherche. Seuls 11,4% d’entre eux utilisent déjà une application qui recensent les bars de supporters.
Suggestions de fonctionnalités Ajouter un évènement sportif à mon agenda
Indiquer la chaîne TV et l’heure à côté de chaque évènement sportif 01
Calendrier des évènements sportifs à venir
04
02
Indiquer les bars de supporters proches et leur programmation
03
Espace dédié au sport féminin
Choisir les sports qu’on veut suivre et ranger le contenu par sport
06 Cibles & Personas Détermination des utilisateurs cibles
Définition & Présentation
Lorsqu’on parle de personas, il s’agit d’archétypes d’utilisateurs cible. C’est un préalable essentiel à la conception de l’interface afin de rester focus sur les besoins de ces utilisateurs et leur offrir la meilleure expérience possible. Grâce aux personas il est plus facile de trancher pour des solutions adaptées et en mesure de répondre aux attentes des utilisateurs cible. Les personas sont construits à partir des données recueillies lors de la phase de recherche et grâce au questionnaire. Il existe deux types de personas : primaire et secondaire Dans ce projet, j’ai également dessiné les trois cibles du produit : coeur de cible (utilisateur acquis), cible principale (utilisateur potentiel car intéressé par le sujet), cible secondaire (recommande l’application ou intérêt modéré) .
Les cibles ● ● ● ● ● ●
Possède 1 ou plusieurs applications de sport Consulte les médias sportifs plus de 3h/sem Pratique lui-même un sport Ultra connecté et amateur de réseaux sociaux Suit plusieurs sports et va au stade/bar Âgé.e entre 20 et 28 ans
Coeur de cible
Cible principale
Cible secondaire ● ●
● ● ● ● ●
Possède 1 application de sport sans notification et/ou suit l’actualité sportive aléatoirement via internet ou les réseaux Regarde les grands évènements sportifs (not. dans les bars) Assez connecté Aime surtout le football Âgé.e entre 25 et 34 ans
● ● ●
Intérêt pour les nouveaux sports (esport, sports extrêmes, futsal) Youtubeurs, blogueurs, journaliste ou produ milieu : contenu exclusif, bons plans, conseils entretien physique Regarde les évènements sportifs et est incollable sur un sport en particulier Ultra connecté et amateur de réseaux sociaux Âgé.e entre 20 et 45 ans
Exigeant
Passionné
Joyeux
Persona primaire
Curieux
Biographie Alexandre est passionné de football depuis qu’il est petit. Il a joué en club et maintenant il joue dans l’ équipe de sa fac. Très connecté il regarde et écoute les actualités sportives tous les jours via des applis, vidéos, podcasts ou posts sur les réseaux sociaux. Rien ne lui échappe (surtout sur son équipe préférée, le PSG). Il essaye d’aller un maximum au stade pour voir jouer son équipe ou l’équipe de France, mais à défaut, il va au bar avec ses potes pour voir les grandes affiches. Son péché mignon : chambrer ses potes dès que son équipe gagne.
Besoins
Frustrations
Actualités sportives en temps réel
Devoir cumuler plusieurs applications pour avoir toutes les infos
Réserver un bar pour voir un match entre potes
Ne pas pouvoir personnaliser son application Ne pas aller assez souvent au stade (peu de billets et très cher)
Personnaliser le contenu de son application et mettre des favoris Choper des bons plans pour des billets
Étudiant célibataire de 22 ans qui vit en colocation à Paris.
Aisance technologique “Le sport je vis 24h/7j : avant, pendant et après les matches”
Aisance mobile et ordinateur Ne jamais rater un match de son équipe préférée
Alexandre Muhire
Aisance réseaux sociaux Applications de sport :
4 heures/sem en moyenne
Motivée
Extravertie
Passionnée
Persona secondaire
Sportive
Biographie Mia, le sport elle l’aime (rugby et biathlon) et le pratique (tous les lundis soirs, entraînement de football, même s’il pleut)! C’est en traînant avec un groupe de mecs au collège qu’elle est tombée dedans. Si elle ne se considère pas comme une véritable passionnée, elle est incollable sur plusieurs sports et adore débriefer au dej avec ses collègues sur les derniers matches. Ce qu’elle préfère : les grands évènements sportifs (coupe du monde, finale) car c’est un bon prétexte pour aller au bar avec ses potes et boire quelques bières dans une bonne ambiance. Connectée mais sans plus, elle suit l’actualité sportive via l’appli “l’Équipe”… un peu vieillotte mais ça fait le taff.
Besoins
Frustrations
Actualités sportives sur des sports moins médiatiques et sur le sport féminin
Devoir farfouiller pour trouver du contenu sur des sports moins médiatiques (biathlon, boxe)
Personnaliser les notifications et le contenu de l’application
Devoir justifier sa passion Devoir zapper pour trouver les chaînes de retransmission
Trouver les meilleurs bars de supporters proche de chez elle Trouver des billets pour des matches de rugby
Mia Lapierre
Juriste NTIC de 28 ans qui vit en couple dans un studio à Paris
Aisance technologique “Le sport c’est pas réservé qu’aux mecs !”
Aisance mobile et ordinateur Aisance réseaux sociaux
Gérer son “emploi du temps sportif” Applications de sport :
2 heures/sem en moyenne
07 Atelier d’idéation Design thinking
Définition & Présentation
La phase d’idéation permet d’explorer de nombreuses pistes avec les utilisateurs. Concrètement, au moyen d’ateliers, très souvent collaboratifs, on transforme les données brutes des utilisateurs en de multiples idées ou solutions de conception. Chaque type d’atelier permet de répondre à un besoin : générer des idées, prioriser, partager sa vision etc... Pour ce projet, j’ai opté pour un atelier de priorisation et un design studio qui permet de générer rapidement et dans un temps imparti des solutions de conception sous forme de croquis.
Lien vers les photos de l’atelier d’idéation
Les ateliers en chiffre
● ● ● ●
Participants
Durée
Outils
4
2h30
2
Kevin, 31 ans, responsable de salle Pénélope, 27 ans, DPO Thomas, 23 ans, étudiant en droit Estelle, 25 ans, cheffe de projet digital
● ● ●
Icebreaker Planning Poker Design studio
● ● ●
Miro Papier & Crayons Templates smartphone
Icebreaker : “Fais moi la passe” 15 min Inspiration : l’image de joueurs de foot qui se font des passes jusqu’à atteindre leur attaquant. Quand il y a but, le commentateur dit souvent : “belle action collective”. Pourquoi ? Je voulais mettre en avant l’aspect collaboratif, l’intelligence collective et l’intérêt de partager une vision commune.
Description et déroulé : chaque participant devra à tour de rôle compléter le dessin commencé par son voisin. Le premier participant doit dessiner une forme (jaune) Le deuxième doit dessiner un objectif figuratif à partir de la forme (rose) Le troisième doit planter le décor, le contexte (bleu) Le quatrième doit ajouter une action (violet) Le cinquième doit décrire l’ensemble avec un mot (terrain de foot)
Planning poker 60 min Pourquoi ? Cet atelier permet entre autre de prioriser des idées ou fonctionnalités d’un produit. Après le questionnaire j’avais identifié quelques pages très denses (contenu et fonctionnalités) et j’ai voulu prioriser et classer ces différents éléments afin de coller au plus près des besoins des utilisateurs. Le but de l’atelier est d’estimer chaque élément à l’aide de carte de valeur, tout en recherchant le consensus au sein du groupe.
Description et déroulé : chaque participant a reçu des “cartes post-it” comportant une valeur comprise entre 0 et 100 (+ un infini). Au cours de l’atelier, 3 thèmes devaient être abordés : la page bar, la page billetterie et la page agenda. Pour chacun de ces thèmes il fallait estimer les éléments le composant à l’aide des cartes. Pour chaque élément, tous les participants, doivent choisir une valeur et ne la montrer aux autres qu’au “go” du facilitateur. Une fois les valeurs visibles, les personnes ayant les valeurs les plus faibles et les plus élevées s’expriment et justifient leur choix. Une discussion peut ensuite avoir lieu entre tous les participants et le facilitateur. En cas de consensus immédiat, le facilitateur relève les valeurs attribuées par chacun et calcule le montant total de l’élément. Plus le montant est élevé, plus l’élément est considéré comme important. Et ainsi de suite. En l’absence de consensus, un deuxième tour pourra être organisé.
Synthèse finale du planning poker
Planning poker 60 min
Résultats et impression : l’un des participants n’étant pas ma cible primaire, j’ai mis à sa disposition les personas que j’avais préalablement crées afin qu’il affute ses réponses en se mettant dans la peau du persona. Les discussions entre les participants ayant les valeurs les plus basses ou élevées ont été très enrichissantes et lorsque les écarts étaient importants des problèmes plus profonds ont été soulevés. Cela m’a fait réfléchir quant à la faisabilité d’une ou deux fonctionnalités (nombre de places disponibles dans le bar, sélection des bars en fonction de son équipe préférée).
Au départ 3 thèmes devaient être abordés, mais après discussion avec les participants, je me suis rendue compte que la fonctionnalité agenda n’avait pas réellement lieu d’être et que le simple fait d’enregistrer des rappels dans l’agenda du téléphone serait suffisant. D’autant plus que la création d’un agenda interne à l’application et non communiquant avec le téléphone n’aurait pas d’utilité pour ma cible. Quant au résultat final, il n’y a pas eu de surprise particulière, mais cela m’a grandement aidée dans l’organisation de mes pages et parcours.
Design studio 60 min Pourquoi ? Cet atelier collaboratif permet de poser sur papier, lors de très courts cycles d’itération, des solutions de conception. On alterne à chaque fois sketch, phase de critique et priorisation. Chaque solution est proposée sous forme de croquis. Après le planning poker, je voulais voir les solutions de conception imaginées par les participants et comment ils allaient intégrer visuellement les éléments précédemment priorisés. Description et déroulé : j’ai repris les trois thèmes du planning poker (bar, billetterie, calendrier) pour le design studio afin de voir en application la priorisation des éléments. Partie 1 : chaque participant reçoit 3 templates de smartphone. Il a 2 minutes par écran (soit 6 minutes en tout) pour réaliser un premier croquis. Partie 2 : mis en binôme les participants doivent échanger entre eux sur leurs croquis. 1 minute pour pour présenter ses écrans et 2 minutes pour écouter les retours du binôme (et inversement) Partie 3 : chaque participant reçoit 3 nouveaux templates de smartphone. Il a à nouveau 2 minutes pour designer et réitérer sur chacun des 3 écrans. Partie 4 : chaque participant présente au groupe ses écrans et des retours sont faits. Partie 5 : le groupe doit créer ensemble 3 écrans finaux en s’inspirant des éléments des écrans fait individuellement.
Design Studio 60 min
Résultats et impression : les participants, eux-mêmes très connectés, ont parfaitement réussi à faire des croquis d’écrans. Aidés par l’atelier précédent, ils ont tenté au maximum de hiérarchiser les éléments. Parmi les éléments qui sortaient du lot et qui ont été gardés pour la version finale : Mettre les CTA en haut et en mode bouton sticky Mettre un timer lorsque la billetterie n’est pas ouverte Afficher les éléments importants de la page bar sous forme de boutons en haut avec la description Pouvoir filtrer l’affichage du calendrier par sport NB : il y a 4 écrans car l’écran billetterie a été divisé en deux, d’une part la liste avec les évènements et d’autre part, l’écran d’un évènement en particulier.
08 User flow & Flowcharts Parcours
Définition & Présentation Les flowcharts permettent d’avoir une vue d’ensemble compréhensible des parcours du produit. Un flowchart est donc composé de plusieurs user flow. Un user flow représente une série d’étapes qu’un utilisateur suit pour atteindre un objectif en particulier. Pour ce projet j’ai choisi de mettre l’accent sur 3 user flows en particulier (qui seront testés) : - Onboarding - Réserver un bar pour voir un match - Programmer un rappel pour l’ouverture de la billetterie NB: De nombreux autres parcours sont possibles dans l’appli et sont visibles depuis le flow chart et feront également l’objet de maquettes.
Lien vers les parcours
Légende
Page
Interactions
Choix
Onboarding
Réserver un bar pour voir un match 1/2
Réserver un bar pour voir un match 2/2
Programmer un rappel pour la billetterie
Flowchart
09 Wireframes Maquettes basse fidélité
Définition & Présentation Le maquettage permet de donner une forme tangible aux idées et hypothèses issues des phases de recherche et d’idéation. La phase de maquettage commence généralement par des sketching, puis vient les wireframes, et petit à petit on affine la solution grâce aux tests utilisateurs et phases d’itération. Le niveau de réalisme évolue au fur et à mesure. Il vaut mieux itérer sur maquette car cela est moins coûteux que l’itération en phase de développement. Pour ce projet, j’ai donc réalisé un certain nombre de wireframes. Les wireframes mis en avant ci-après sont ceux des trois parcours réalisés durant les tests utilisateurs.
Lien vers les wireframes et le prototype
Onboarding
Bars
Billetterie
Ensemble des wireframes de l’application Lien Invision du wireframe : https://colombe815887.invisionapp.com/public/share/RB19LO69 K3 Lien Google drive : https://drive.google.com/file/d/1f4W1TFNKm8lyXOmPVN7vK2O7 NICE0i2h/view?usp=sharing Lien vers la vidéo du prototype : https://drive.google.com/file/d/1GNl5kmOjdZUzNjlf915agZyv3-il Jakk/view?usp=sharing
10 Tests utilisateurs Tests de 3 parcours de l’application et itération
Définition & Présentation
Les tests utilisateurs nous permettent d’observer les utilisateurs lorsqu’ils interagissent avec l’interface (comportement, verbatims, réactions, réalisation de tâches). Une fois les tests passés, on extrait des variables communes d’améliorations qui serviront à formuler des recommandations pour améliorer encore l’expérience utilisateur dans une version ultérieure. Grâce à ces tests, on identifie plus facilement les points forts et faibles de l’application. Pour ce projet, j’ai choisi de réaliser des tests utilisateurs auprès de ma cible, sur wireframes afin de tester les parcours et l’ergonomie de l’application. Certains ont été réalisés en physique, d’autres à distance.
Lien vers les documents
Les tests utilisateurs en chiffre
Participants
Durée
Parcours
5
40min
3
Le profil des participants
Didier, 22 ans étudiant ingénieur Coeur de cible
Karim, 30 ans Développeur Coeur de cible
Aurélie, 34 ans Étudiante webdesign Cible principale
Antoine, 28 ans Étudiant UX designer Cible principale
Laszlo, 25 ans Juriste droit public Coeur de cible
Profil ● ● ● ● ● ●
Utilisateur 1
Sports : football et handball Bars : oui souvent - change régulièrement - aime l’ambiance Stade : oui un peu pour l’équipe de France ou l’OM Application sport : oui plusieurs Autre : Youtube, podcast, afterfoot Assiduité : tous les jours
Verbatims
+
“Cool d’avoir la barre, ça montre que ca va vite” (Onboarding)
+
“Sport féminin top car normalement ce sont des résultats qu’il faut aller chercher” (Onboarding)
+
“Top les rappels, c’est simple ça va vite” (Billetterie)
-
“J’ai pas l’impression de trouver, tu vois si on est bébête” (Bar)
Envies : -
Chaîne de retransmission même pays étranger Replay instantané d’action Une appli très simple d’utilisation pour pouvoir faire autre chose en même temps
Problèmes : -
Améliorer le visuel de l’étape 1 du onboarding N’arrive pas à sortir des filtres côté billetterie Perturbé par le tag de l’équipe supportée Contre-affordance : le match dans la programmation du bar Compléter le wording de la popup de feedback du rappel
Profil ● ● ● ● ● ●
Sports : football et MMA Bars : oui parfois pour les gros matches- choix en fonction de la distance Stade : non (mais irait si vivait aux USA) Application sport : oui plusieurs Autre : Youtube, afterfoot, site web, paris sportifs Assiduité : tous les jours
Utilisateur 2
Verbatims
+
“On donne du temps mais c’est pour en gagner ensuite” (Onboarding)
+
“Parcours simple et fluide” (Onboarding)
+
“C’est très bien” (Bar)
-
“Faut rendre cliquable les filtres” (Bar)
Envie de fonctionnalités : -
Appli qui regroupe tous les sports que j’aime (européens et USA) Avoir la cote des paris sportifs
Problèmes : -
Contre-affordance : ensemble de la carte “favoris” dans l’onboarding (seul le coeur est cliquable) N’arrive pas à sortir des filtres côté billetterie Contre-affordance : le match dans la programmation du bar
Profil ● ● ● ● ● ●
Sports : football, rugby, tennis Bars : oui pour les gros matches - change de bar Stade : très rarement Application sport : oui une seule Autre : réseaux sociaux, afterfoot, podcast Assiduité : pas tous les jours, “picore des infos”
Verbatims
+
“Assez clair rapide, très bien, texte ok y’en a pas trop” (Onboarding)
+
“Ça c’est nickel” (Icône page du bar)
-
Utilisateur 3
“Ahh la je peux pas mettre là… ahh je peux en cocher plusieurs” (Billetterie) “Je suppose que c’est un bar pro PSG” (Bar)
Envie de fonctionnalités : -
Pouvoir réserver une table dans un bar pour voir un match et avoir la programmation du bar (+géolocation) Pouvoir personnaliser son appli Avoir des infos synthétiques Résumé vidéo Partenariat podcast
Problèmes : -
Visuel pas très sexy pour l’étape 1 de l’onboarding Contre-affordance : ensemble de la carte “favoris” dans l’onboarding (seul le coeur est cliquable) Contre-affordance : le match dans la programmation du bar + n’avait pas vu le CTA réserver) Pas assez d’explications sur le feedback rappel Pensait trouver les rappels dans le menu Changer la forme des checkbox (pour du carré car multi choix)
Profil ● ● ● ● ● ●
Sports : football, sports d’hiver Bars : oui souvent et pour les gros matches - plusieurs bars fétiches Stade : non mais “aimerait trop y aller” pour l’ambiance, la communauté Application sport : non Autre : google, ses potes Assiduité : pas tous les jours, seulement les gros matchs
Utilisateur 4
Verbatims
+
“C’était très clair, et très affordant le oui/non” (Onboarding)
+
“Ça me rassure” (les popups de feedback)
+
“Formulaire très simple”, “bien foutu” (Bar et billetterie)
-
“J’imagine que je dois cliquer sur bar, peut-être” (Bar)
Envie de fonctionnalités : -
Appli qui propose des facilement des places pour le stade (+ bons plans) Programmation des bars de supporters
Problèmes : -
Changer la forme des checkbox (carré car multi choix) Contre-affordance : ensemble de la carte “favoris” dans l’onboarding (seul le coeur est cliquable) N’a pas vu la cloche pour le rappel dans la billetterie Pas assez d’explication sur le feedback rappel Texte trop petit
Profil ● ● ● ● ● ●
Utilisateur 5
Sports : rugby, boxe thaï Bars : oui pour les gros matches - toujours même bar (rugby) Stade : oui toutes les 2 semaines (abonnement) Application sport : oui plusieurs Autre : Youtube, internet, média thaïlandais Assiduité : tous les jours
Verbatims
+
“Trop cool, j’aime bcp le fait de personnaliser, et les options, chaque choix m’intéressait” “Bonus pour le sport féminin” (Onboarding)
+
“J’aime bien le formulaire d’inscription” (Bar)
-
“J’aurai voulu cliquer sur le match” (Bar)
-
“Billetterie j’y suis allée sans y croire” (Billetterie)
Envie de fonctionnalités : -
Historique du club, palmarès Fiche des joueurs Avoir la programmation des bars
Problèmes : -
Contre-affordance : le match dans la programmation du bar Pas assez d’explication sur le feedback rappel Pour mettre un rappel voulait passer par le calendrier ou le menu burger (ajouter l’option “ajouter un rappel”).
En grand format : https://drive.google.com/file/d/1B-DlCVwi5L38GiLpjmIL-ab 2ncmIOG9H/view?usp=sharing
Onboarding
Bars
Billetterie
Parcours idéaux
Variables communes et itérations 01
02
03
Améliorer le visuel de l’ étape 1 de l’onboarding
Rendre cliquable le background pour sortir des filtres
Rendre cliquable les matches dans la programmation du bar
04
05
06
Retravailler le wording de la popup feedback rappel
Enlever le tag de l’équipe en cause ou supportée
Rendre cliquable l’ensemble des cartes et pas que le coeur (Onboarding - favoris)
Problème 1 Problème : l’aspect visuel pas très moderne et engageant de l’étape 1 de l’onboarding. Nombre d’utilisateurs impactés : 2 sur 5 Solution : changer l’énumération de sports par des cartes et la possibilité de rechercher son sport préféré via une barre de recherche
Avant
Après
“J’attends du visuel à la place du formulaire pour choisir mon sport, je voudrais un truc plus moderne et jeune en mode swipe à la Netflix”
Problème 2 Problème : les utilisateurs n’arrivaient pas à sortir des filtres Nombre d’utilisateurs impactés : 2 sur 5 Solution : rendre cliquable la partie grise et remonter le bouton “appliquer les filtres”.
“Je sais pas comment sortir”
Avant
Après
Problème 3
Problème : la contre-affordance du match dans la programmation. Nombre d’utilisateurs impactés : 4 sur 5 Solution : ajouter un bouton pour réserver à côté de chaque match.
“J’aurai voulu cliquer sur le match” Avant
Après
Problème 4
Problème : le manque d’informations dans la popup feedback. Nombre d’utilisateurs impactés : 4 sur 5 Solution : ajouter une phrase pour expliquer où la personne peut retrouver l’ensemble de ses rappels dans l’application
“Jte propose de mettre aussi que je peux le retrouver dans mes rappels” Avant
Après
Problème 5 Problème : la non compréhension du tag “équipe”. Nombre d’utilisateurs impactés : 2 sur 5 Solution : supprimer le tag “équipe” et ne garder que le tag du sport majoritairement diffusé dans le bar
“J’ai pas l’impression de trouver “Je suppose que c’est un bar pro PSG Avant
Après
Problème 6
Problème : les nombreux clics des utilisateurs au milieu de la carte avant de cliquer sur le coeur (loi de fitts) Nombre d’utilisateurs impactés : 3 sur 5 Solution : rendre cliquable l’ensemble de la carte
Avant
Après
SUS 91,5 / 100
11 Moodboard & design system Inspirations - guidelines - atomic design
Définition & Présentation
Pour tout projet, il faut donner une identité immédiatement reconnaissable. Chaque choix de typographies, couleurs, images est fait dans l’intérêt de créer cette identité. Avant de se lancer dans la réalisation des maquettes haute fidélité, j’ai créé un moodboard afin de concentrer en un même endroit l’ensemble de mes inspirations. Quant au design system et aux symbols, ils facilitent notre travail sur maquette et simplifient également nos échanges avec les développeurs (convention de nommage, harmonie des éléments) .
Lien vers les documents
Moodboard
Dans l’univers du sport on retrouve une large palette de couleurs. Ce sont des couleurs vives et dynamiques. Le sport c’est la passion, une explosion de sens et d’ émotions.
Moodboard
Des formes arrondies, du blanc avec des touches de couleurs pour un style confiant et cosy.
Les couleurs
Principale
Prince #631AEC
Secondaires Pelouse #007E3B
Ocre #C34E39
Moutarde #E79E00
Texte ou additionnelles
Bleu vif #266EED
Canard #E27EA1
Point clé : Encre #373737
Neige #FFFFFF
Lagune #37DFE4
-
Le violet : couleur vive, dynamique, déjà utilisée dans le sport 1 couleur par sport
aA Avenir
La typographie Complète : plusieurs graisses Rassurante et harmonieuse : de la rondeur dans certaines lettres Sensible et humaine : un côté neutre qui permet à tout le monde de s’identifier. Lisibilité : lettres assez espacées
H1 - Avenir bold - 30pt
Texte bouton - Avenir bold - 18pt
H2 - Avenir bold - 20pt
Texte paragraphe - Avenir book - 14pt
H3 - Avenir bold - 16pt
Texte légende - Avenir book - 12pt
Espaces et bordures
Ombres et radius
Iconographie
Illustrations
Atoms - boutons
Atoms
Molecules
Organismes 1/2
Organismes 2/2
12 Maquette UI & Prototypage Maquettes définitives - itération
Définition & Présentation Le prototypage et la maquette haute fidélité constituent le niveau le plus élevé en terme de réalisme. La charte graphique est appliquée et le niveau de détails est conséquent. On se rapproche du produit final. Grâce au prototypage, les maquettes sont dynamiques et interactives. Dans le cadre de ce projet, après les tests utilisateurs et l’itération qui en a découlé, j’ai débuté la construction de ma maquette haute définition et son prototypage. Je n’ai pas pu réaliser de seconde itération, mais bien évidemment, cette dernière devra être menée avant de passer en phase de développement.
Lien vers les maquettes et le prototype
Écrans principaux
Onboarding
Bars
Billetterie
Ensemble des maquettes de l’application
Lien Invision vers les maquettes : https://invis.io/JUY0YMF9M4N Lien vers Google drive : https://drive.google.com/drive/folders/1xxRLvU9g-srD9th5CrW 3QQgKD78hxWfc?usp=sharing Lien vers la vidéo prototype : https://drive.google.com/file/d/1Jldr5LhaU0LM7nIvatblVU8h 21_Jnqgx/view?usp=sharing
Et après ? 1/2
Dans les versions ultérieures,, de nouvelles fonctionnalités plus poussées pourraient être implémentées.
Renforcer l’aspect réseau social ● ● ● ●
Ajouter une messagerie interne Voir et créer des stories live Le partage de photos Pouvoir switcher entre le fil d’actualités sportives et les posts de la communauté
Réalité augmentée ● ●
Slow-motion replay d’actions Choisir l’angle de la caméra pour le replay
Et après ? 2/2
Fournir de l’actualité sur des sports moins connus ●
Ajouter constamment de nouvelles rubriques avec des sports moins connus (futsal, krav maga, boxe thai, football américain, cricket…)
E-billet et QRcode ● ●
Pouvoir acheter des billets (bons plans not.) sur l’application Avoir un QR code qui sert de preuve pour la réservation d’un bar
Merci !