Retour
Retour
Application

Représentation des femmes

& Films d'animation

RôLE

DA, UX & UI Designeuse, Illustratrice

client·e

Crédit

Context

Projet de Mémoire — Master Multimédia

ANNÉe

2020

Cette application fictive a été créée dans le contexte de mon mémoire de fin d'étude portant sur la représentation des femmes au sein des films d'animation.
Cette recherche porte sur la capacité des films d'animation à représenter et influencer la condition des femmes dans une époque et société donnée. Elle s'intéresse tout particulièrement à l'impact normatif de ses productions sur l'éducation genrée des enfants.
L'application Brave est un outil gain de temps qui permet la recherche et la découverte de nouvelles productions d'animation. Elle propose également des films adaptés à chacun·e, la personnalisation étant une considération majeure pour cette application.
Brave est aussi un outil éducatif, car elle permet la visualisation vulgarisée du Test de Brave, un test basé sur trois grands critères de notation, dont le but est de déterminer si une production d’animation véhicule une image positive ou négative de la femme.

Brave : outil gain de temps & outil éducatif

Pages principales de Brave

Les pages principales de la WebApp, accessibles via la barre de navigation, sont : la home (qui recense l'entièreté des films d'animation de la plateforme), les favoris et la page profil.

Onboarding : Loader, Sing up, log in & walkthrough

L'inscription suivie de la personnalisation du profil est réalisée en étapes et écrans différents pour rendre plus agréable leur consultation.

Le walkthrough présente les différentes fonctionnalités de l'application et le principe du Test de Brave.

Une phase de personnalisation de la home est proposée à l'utilisateur·rice suite à son inscription et ponctuellement à l'ouverture de l'application. Cette étape est gamifiée par la présence d'un choix au swipe.

Différentes méthodes
de recherche de films

Filtres & recherche

Un menu sticky latéral permet de rechercher un film ou de filtrer la home et la page favoris.

Les filtres sont basés sur les critères du Test de Brave (présenté dans l'onboarding et dans le profil).

Ce système de filtre permet une expérience éducative visuelle informant l'utilisateur·rice du peu de production représentant de manière positive les personnages féminins.

Système de tri

La homepage et la page favoris permettent également de trier les films selon des critères de recherches fréquemment utilisés (studio d'animation, présence de chansons...).

Film de substitution

Si l'utilisateur·rice consulte le descriptif d'un film qui ne valide par un ou plusieurs critères du Test de Brave, il ou elle peut cliquer sur ce dit critère pour obtenir une liste de films validant le critère sélectionné.

User Experience

Réflexion UX : Arborescence, Userflow, personnas, cas d'usage...

La réflexion UX a été centrale pour ce projet qui présente des cibles aux usages et âges variés.

Ci-après vous est présenté un échantillon de ma démarche de création UX.

Userflow

Wireflow

Direction artistique
& Design system

Branding

Le logo de Brave représente un poing levé, un signe de protestation et de résistance qui illustre la démarche d'émancipation de la WebApp. Il renvoie également à l’affiche "We Can Do It!", qui représente le mouvement d’indépendance des femmes dans l’inconscient collectif.

Le logo est illustré à la main de manière naïve pour rappeler le domaine de l'enfance, mais aussi celui du film d'animation.

Outline & Filled

Responssive & Utilisation

Mascotte & Wording

Brave possède une mascotte, qui n’est ni-nommée, ni-genrée. Il s’agit d’un personnage androgyne dessiné avec un style schématique suivant l’identité visuelle de Brave.

Le wording associé à ce personnage ainsi que sa gestuelle se veulent ludiques et distrayants dans le but de créer une réponse émotionnelle positive envers la WebApp.

Icônes, pictogrammes
& CTA

L’interface de Brave est sobre et porte une attention particulière aux illustrations et pictogrammes utilisés (principalement ceux symbolisant les critères du Test de Brave).

Icônes et pictogrammes

CTA principaux & secondaires

Typographies & couleurs

Les couleurs de cette marque sont majoritairement choisies dans une gamme sombre pour renvoyer au domaine du cinéma, et du film.

#212738

Couleur principale

#FFFFFF

Couleur principale

#2A3248

Couleur secondaire

#8798B1

Couleur secondaire

#2A3248

Couleur secondaire

#8798B1

Couleur secondaire

#F49D89

Couleur secondaire

— Projet Suivant — Projet Suivant — Projet Suivant

— Projet Suivant — Projet Suivant — Projet Suivant

Heading

Heading