← Retour

Cinéarena – Application de critiques de films

Application mobile de critique et de gestion de listes de films pour la communauté cinéphile.

Projet scolaire
UX Design
UI Design

Résumé

Ce projet a été réalisé durant mon Bachelor dans le cadre d’un cours de design UX/UI. En équipe, notre objectif était de concevoir une application qui réponde à une problématique. Nous avons choisi de concevoir une application mobile qui permet de faciliter le partage de critiques de films et de gérer des listes de films.

Rôle & tâches

UX/UI Design

Contexte

  • Projet scolaire de Bachelor 3

Durée & statut

Hiver 2021 (2 mois)

Équipe

Slim Zagrouba
Lyes Manaa
Thomas Lalbat
Etienne Gil (moi)

Idée de départ

Lors du cours du cours d’UX/UI Design que nous avons eu durant notre 3ème année de Bachelor, nous devions réaliser une application mobile qui réponde à une problématique définie. Mon équipe et moi avons choisi de concevoir une application en rapport avec le cinéma et d’adresser la problématique suivante.

Une application mobile pour partager son opinion

Cinéarena est un réseau social qui permet aux spectateurs de noter des films et de partager leurs avis.

Mockup de l'écran d'ouverture de l'applicatio Cinéarena.
Page d'accueil de l'application qui présente les films recommandés à l'utilisateur

Recommandations de films selon les critiques de la communauté

L’application dispose d’un catalogue de films mis en avant par la communauté par catégories.

  • Suggestion de films selon les préférences de goût et plateforme de l’utilisateur
  • Classements de films par catégories selon la note attribué par la communauté

Un espace réservé pour les critiques

Chaque film dispose d’un espace réservé aux critiques rédigés par la communauté qui inclut :

  • Des tags pour filtrer à la volée des termes récurrents dans les avis
  • Le titre et le contenu de la critique rédigé par l’auteur
  • Une note pouvant aller de 1 à 5 ✩ (par incrément de .5)
  • Visibilité sur le pseudonyme de l’auteur, son nombre de critiques et son nombre d’abonnés
Section critiques composée de plusieurs critiques notée sur 5 étoiles sur la page du film Black Widow
Collection de plusieurs films créés par l'utilisateur

Un moyen de sauvegarder et d'organiser des collections de films personnelles

Les collections permettent à l’utilisateur de sauvegarder plusieurs films dans une liste.

  • Collection créé par l’utilisateur pour organiser plusieurs films selon ses préférences
  • Publier une liste sur son profil pour la rendre visible au public

Portefeuille de critiques de chaque utilisateur

  • Profil mettant en avant les critiques et les collections publiées par l’utilisateur
  • Statistiques de son engagement dans la communauté (nombre de j’aimes collectés, commentaires publiées)
Profil de l'utilisateur avec ses statistiques et ses dernières collections créées

Processus de conception

Tout au long de ce projet nous avons utilisé la méthodologie du Double Diamant que nous avons adapté pour répondre aux exigences de ce projet. Plusieurs prérequis étaient attendus à différentes étapes du projets (storyboard, wireframes...) pour notation.

1. Découvrir

- Étude de marché
- Interviews utilisateurs
- Analyse compétitive (benchmark)

2. Définir

- Espace de la problématique
- Storyboard
- Persona

3. Concevoir

- Idéation
- Wireframes
- Wireflow

4. Livrer

- Guide stylistique
- Prototypage
- Mockups
- Présentation

Recherches initiales

Planification de nos recherches

La première étape consistait à explorer l’industrie du cinéma et progressivement le rapport à la critique de film avant de définir notre problématique. Autour de 3 activités, nous avons principalement étudié :

- la critique cinématographique (lecture, écriture, avis) dans son ensemble et les comportements liés- la façon dont les utilisateurs organisent les films et les séries qu’ils ont vu au cours de leur vie

Icône de livre ouvert.

Étude de marché

Comprendre l’industrie du cinéma et les principaux acteurs

Icône d'utilisateurs.

Entretien utilisateur

Interroger sur les comportements individuels

Icône de loupe.

Analyse compétitive

Identifier des patterns d’applications existants

Étude de marché

Les chiffres clés de l’industrie du cinéma

​Nous avons conduit une brève étude du marché pour visualiser le poids et l’importance du cinéma chez les français. Ces chiffres nous ont permis d’évaluer l’étendue de l’industrie du cinéma et de cadrer notre projet sur les films uniquement.

213,2 millions

d’entrées en salle en France métropolitaine en 2019
Source : vie-publique.fr

39,2 ans

âge moyen du français se rendant au cinéma
Source : cbnews.fr

1 448,70 M€

de recettes pour l’industrie du cinéma en 20XX
Source : vie-publique.fr

Entretiens utilisateurs

Ce qui motive à lire et rédiger une critique

En début de projet, nous avons conduit 3 entretiens utilisateurs semi-structurés auprès de camarades et un étudiant de l’école.

À partir d’un questionnaire préparé sous forme d’entonnoir, nous avons abordé l'intérêt pour le cinéma, le rapport à la critique, les motivations pour lire et rédiger une critique ainsi que la façon dont l'intéressé gère les films qu’il.elle a vu ou aimerait voir.

Insights

Certains utilisateurs préfèrent lire les critiques après avoir vu le film

Les émotions produites lors d’un film jouent un rôle important sur l’avis que se fait le spectateur

Partager une critique est une façon d’extérioriser sa pensée et d’exprimer son point de vue

Les avis sont nuancés à partir d’une multitude d’éléments qui le constitue. Il n’est jamais dichotomique

Certains utilisateurs donnent plus de crédits aux notes de la plateforme de diffusion

Les émotions produites lors d’un film jouent un rôle important sur l’avis que se fait le spectateur

Partager une critique est une façon d’extérioriser sa pensée et d’exprimer son point de vue

Les avis sont nuancés à partir d’une multitude d’éléments qui le constitue. Il n’est jamais dichotomique

Analyse compétitive

Ils l’ont déjà créé et ça fonctionne

Suite à nos recherches, nous découvert plusieurs applications qui se spécialisent dans les critique de films et de séries. Nous avons réalisé une analyse compétitive en testant les applications et leur parcours pour noter et rédiger une critique de film. Parmi les applications que nous avons testé il y a SensCritique, Metacritic, IMDb et IGN.

Persona

L'archetype de notre utilisateur

À la suite de nos recherches, nous avons créé un persona représentatif de notre cible en listant des motivations et frustrations.

Illustration d'un homme avec un col roulé souriant.
Remi Lacoure
Professeur agrégé d'histoire
29 ans | Paris, FR

Remi est professeur d’histoire dans un lycée de la région parisienne. Durant son temps libre, il se rend régulièrement au cinéma pour regarder des films. Il s’intéressent surtout au films qui s’inspirent de fait historiques et de fiction pour lui donner des idées pour ses cours.

Motivations
  • Avoir des recommandations de films de spectateurs avisées pour les classes où il donne cours au lycée
  • Partager ses connaissances historiques et développer davantage son esprit critique
  • Obtenir différents points de vues après avoir regardé un film
Frustrations
  • Peiner à se souvenir des vieux films qu’il a regardé
  • Lire des critiques peu détaillés et trop subjectives
Storyboard

Une histoire autour de Cinéarena ?

Pour mettre en situation notre application, nous construit une petite histoire autour de l’utilisation de notre application dans un contexte favorable à son utilisation, ici à la sortie du cinéma après avoir regardé un film.

Croquis d'une personne qui sort de la salle 9 d'un cinéma.

Étape 1 : Sortie du cinéma

Rémi sort de la salle 9 de son cinéma préféré où il vient de voir un film qui lui a été recommandé par un ami.

Croquis d'une personne vue de face en très d'écouter d'autres personnes parler à côté d'une affiche de film.

Étape 2 : L’avis des spectateurs

En traversant le cinéma, il entend un groupe d’amis échanger leurs avis sur le film qu’il vient de regarder.

Croquis d'une personne vue de profil se dirigeant vers son véhicule avec des clés dans les mains.

Étape 3 : Sur le parking

Il se dirige alors vers son véhicule. Un court instant où il se retrouve seul dans ses pensées sur le parking.

Croquis de deux personnes en train d'exprimer leur idée vue de profil face à un véhicule.

Étape 4 : Échange corsé

Face à son véhicule, une spectatrice de sa salle le reconnaît et l’aborde. Ils échangent quelques mots sur leur film.

Croquis d'une vue d'épaule de quelqu'un tenant un téléphone de la main gauche.

Étape 5 : Une critique sur Cinéarena

Au vu des avis qui divergent, la spectatrice prend son smartphone et ouvre Cinéarena pour noter le film qu’elle vient de voir.

Croquis d'une personne vue de face dans son canapé en train d'utiliser son téléphone portable.

Étape 6 : Avis partagé

Une fois rentré à la maison, Rémi prend son téléphone et rédige une critique qui obtiendra plusieurs j’aimes les jours qui suivent.

Maquettage papier (wireframes)

De l'idée à la solution

Pour partager nos idées et déterminer notre solution, nous avons réalisé un atelier de maquettage pour concevoir les principaux écrans de l’application. Les écrans suivants présentent l’onboarding, le film, le profil et les idées pour le moteur de recherche.

Dessin de maquettes de plusieurs écrans de l'application.

Maquettage fonctionnel (wireframes)

À partir des idées que nous avons validé à l’étape précédente, nous avons tenté de matérialiser chaque parcours liés à une fonctionnalité. Elles sont représentées ici par catégorie qui contiennent plusieurs flux pour chaque tâche.

Design 1 : Point d’entrée de l'application

Le premier parcours constitue le point d’entrée de l’application à savoir l’inscription. Décliné en plusieurs écrans, ce parcours permet de collecter des données sur les goûts et les plateformes au(x)quelle(s) l’utilisateur est abonné pour proposer de meilleures suggestions de films.

Design 2 : Critique de films

La critique est constitué de plusieurs parcours qui sont la publication et la lecture de critique. Dans le premier flux qui est la publication d’une critique, celui-ci est décliné en 3 écrans. Le premier écran représente le point d’entrée qui est le film que l’on souhaite noter et s’en suivent les écrans pour évaluer, rédiger sa critique et un écran qui confirme que la tâche a été exécuté avec succès.

Le second flux représente la lecture d’une critique. Pour ouvrir une critique, il faut se rendre dans l’espace dédiée aux critiques sur la page du film et appuyer sur le contenu de la critique pour en lire son contenu. Il existe aussi d'autres moyens d'accéder à une critique comme depuis le profil d'un utilisateur.

Design 3 : Collections de films

Les collections sont une façon d’enregistrer des films dans des listes. Le premier flux permet de visualiser la façon dont il est possible de créer une nouvelle collection. Une fois que la collection est créé, il faut ajouter des films depuis la page d’un film où l’on peut choisir dans quelle collection on souhaite l’enregistrer. Le dernier flux montre comment gérer une collection.

Wireflow

Définir la logique de l'application

Le wireflow suivant schématise les interactions et les flux dans l’application. Il permet de vérifier que chaque parcours dispose d’un point d’entrée et d’une sortie.

Image schématisant les interaction possible dans l'application.

Guide de style

Avant de commencer des maquettes de haute fidélité,  nous avons défini l’identité graphique grâce à une planche d'ambiance (moodboard) que nous avons créé en équipe afin de cerner l’intention graphique de l’application.

Le logo de l'application représente une arène combiné à une pellicule de film qui est une façon d’exprimer la confrontation des avis et des idées. Nous avons réutilisé le rouge comme couleur principale en référence au tapis rouge des cérémonies de récompenses.

Image de la palette de couleurs et les typographies de l'application Cinéarena.Image des boutons et du logo de l'application Cinéarena

Prototypage

Une fois l’identité visuelle et le guide style créé, nous avons prototypé l’application pour en faire la démonstration lors de notre soutenance de fin de projet. Vous pouvez testez le prototype en cliquant sur le bouton ci-dessous :

Image du prototype de l'application dans le logiciel Adobe Xd.

Axes d'amélioration

Ce projet a été présenté lors d’une soutenance à la fin de notre cours où nous avons eu l’occasion de collecter plusieurs retours de pairs et du professeur.

Icône d'un microscope de laboratoire.

Faire tester l'application

Faire tester l'app aurpès d'un échantillon d'utilisateurs permettrait de vérifié que les utiliateurs réussissent à atteindre leurs objectifs tout en identifiant les principaux problèmes d’utilisabilité.

Icône d'un panneau avec des écritures.

Améliorer la hiérarchie de l'information

La fonction de notation des films se situe au milieu de l'écran lié au film. Son positionnement pourrait poser des problèmes de découvrabilité de la fonctionnalité.

Apprentissages

Après avoir terminé ce projet, nous avons eu l'occasion de faire un bilan sur ce que ce projet nous a permis d’apprendre et ce que nous aurions aimé améliorer dans le futur.

1. Découvrir et appliquer la méthodologie du Double Diamant
2. Penser puis concevoir l’expérience d’une application mobile de bout en bout
3. Travailler en équipe et trouver la valeur de chacun

Fin

Merci pour votre intérêt !

← Retour aux projets