C’est un projet que j’ai réalisé dans le cadre du parcours diplômant d’OpenClassrooms. J’ai réalisé les maquettes d’un site web de festival de musique. Les genres musicaux du festival sont l’électro et la pop. J’ai pour cela adopté la posture d’UX Designer pour livrer, à la fin, des maquettes hautes fidélités. Ce projet est à visée pédagogique et n’a pas servi dans le cadre d’un vrai festival.

Ce projet m’a apporté une consolidation de mes compétences d’UX Designer :

• Faire des personas
• Faire une analyse de la concurrence
• Faire une charte graphique
• Créer des maquettes graphiques (sur Adobe XD)
• Présenter oralement le projet

Questionnaire

J’ai créé un questionnaire pour une dizaine de personnes afin de mieux connaître les comportements et opinions des futurs utilisateurs du site internet. Voici les enseignements que j’en ai tiré :

• Les personnes interrogées vont d’une à plusieurs fois par an en festival.
• Elles utilisent Facebook comme principal support pour avoir des informations.
• Elles passent moins de 30 minutes à préparer leur sortie.
• C’est une phase qui leur procure une excitation à l’idée d’assister à un concert.
• Elles ont besoin des pages de billetterie, d’infos pratiques et de programmation en priorité.
• La totalité des sondés utilise leur smartphone lors du concert.
• Ils l’utilisent pour se repérer sur la carte et voir la programmation.
• L’émotion de joie et le sentiment de bonheur sont ce qui décrie le mieux leur ressenti pendant un concert.
• Les personnes ne se connectent pas au site après la date du festival mais regardent des replays sur les réseaux sociaux.

Grâce à ces informations, j’ai pu créer des personas.

Création de personas

J’ai créé 5 personas :

• Léa, une première expérience de festival
• Émilio, un père de deux enfants
• Nicolas, un festivalier aguerri
• Un groupe d’amis
• Perrine et Tatiana, un jeune couple

Impact Mapping

A partir de chaque persona, nous avons établis des problématiques personnelles qui se traduisent en fonctionnalité ou en service que le festival peut apporter. C’est l’impact mapping.

Analyse de la concurrence

J’ai fait un benchmark des sites suivants : le festival des Vieilles Charrues, les Eurockéennes, le Hellfest et les Solidays.

Grâce à ce benchmark, j’ai identifié les bonnes pratiques et les écueils à éviter lors des prochaines étapes pour créer un site léger et pratique.

Les points positifs de ces sites sont le responsive, la charte graphique de ces sites qui correspondent à l’univers musical du festival et la fonctionnalité de running order (qui donne des informations sur les groupes de musique).

Le point négatif récurrent sur ces sites sont les lenteurs de chargements de pages.

Pour appliquer les enseignements de ce benchmark, j’ai limité le poids et le nombre d’image sur les pages car elle ralentisse l’utilisateur dans son parcours sur mobile. J’ai appliquer cette règle dans ma charte graphique.

Charte graphique

Le vert fluo (#00FF01) est utilisé pour symboliser l’électro, ainsi que pour signifier un bouton appuyé ou un bouton important.
Le rose (#FB9EE5) est utilisé pour symboliser la pop, et signifier un texte de titre ou un bouton non- appuyé.

Ces deux couleurs se déclinent en deux couleurs secondaires.
Le blanc est utilisé comme couleur de fond et le noir comme couleur du texte.

J’ai choisi la police Minecraft qui une police reprenant le style du « pixel art ». Ce style a été choisi car elle est liée à la musique électro qui, tout comme elle, est née avec les débuts de l’informatique. Elle est aussi liée à la culture populaire. On pense notamment à Super Mario Bros sur NES et d’autres jeux vidéos tel que le contemporain … Minecraft. Cette police mise donc sur un code graphique identifiable et qui transcende les générations.

J’ai stylisé le nom du festival pour le logotype. Ainsi on retrouve la couleur verte fluo sur la lettre « K » d’ « ELEKTRO » en accord avec notre code couleur. L’élément « POP » est blanc sur un fond rose.
Au niveau de la typographie, nous avons utilisé Ziggy pour « ELEKTRO » et « FESTIVAL » et GoGo Hack pour le « pop ».

Maquettes graphiques

J’ai enfin réalisé une arborescence en fonction de tout le travail fait en amont. Pour chaque page de l’arborescence, j’ai réalisé une version wireframe dans un premier temps puis une version graphique, haute fidélité, dans un second temps.

A chaque étape, j’ai commencé par faire les wireframes mobiles. Cette méthode du mobile first, permet de penser le site web sur le medium le plus petit et ainsi nous forcer à penser l’usabilité dès le premier jour. Ainsi, l’espace d’écran est pensé de manière très économe et laisse la place qu’aux éléments essentielles au détriment des éléments superflus.

Voici les maquettes des pages principales :

• Accueil (wireframe, maquette)
• Billetterie : (wireframe, maquette)
• Programmation (wireframe, maquette) –
• Infos Pratiques (wireframe, maquette)

Pour aller plus loin