UX UI DESIGN - Sport 360

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 !