PARABELLUM COMBAT CLUB

[01] DESIGN SYSTEM AVANCé

LE PARABellum, club de mma nantais

COMMENT Redéfinir l'image d'un site vieillissant ? Comment attirer de nouveaux utilisateurs vers une association qu'il ne connaissent pas forcément ? C'est la question que nous nous sommes posés. Individuellement, nous avons choisi une association qui nous tient à cœur, le parabellum combat club pour moi, et identifier les points de frictions sur le site, afin de le retravailler et pouvoir attirer un public nouveau.

01. UN LOGO Dépassé

LE LOGO du club, représentant un bélier, était assez ancien, trop complexe pour bien se le remémorer, des couleurs qui ne seront pas en cohérence avec la nouvelle direction artistique,... J'ai opté pour un logo plus simple, unicolore, toujours représentant un bélier, mais plus actuel.

02. des couleurs pas assez marquantes

LEs couleurs étaient également un peu anciennes. Les deux couleurs utilisées, le jaune/or et le bordeaux, sont plutôt en adéquation avec un club de combat, mais ne sont pas assez complémentaires pour pouvoir réellement être marquant. J'ai tout de même décidé de garder l'or, couleur assez populaire pour les clubs de combat, mais en changeant le bordeaux pour du violet, couleur complémentaire du jaune.

03. un changement de typographie

La typographie était plutôt correcte, mais pour que le design system et la direction artistique du site soit plus cohérente, j'ai opté pour de nouvelles typos. La montserrat très classique, mais qui fait le travail en tant que typo de lecture, et la ADLAM Display, difficile d'utilisation, donc a ajouter avec parcimonie.

04. des informations éparpillées

Le site existant n’est visuellement pas très recherché, et comporte de nombreuses pages qui ne sont pas pertinentes ( ex.: la page contact quasiment vide ). Le site, en terme de design system, n’est pas très riche non plus : pas de hiérarchie de boutons ( seulement des liens et boutons tertiaires ), quasiment pas de pictogrammes, pas de mode sombre. il est temps de rectifier cela.

[02] navigation laborieuse

Après avoir étudié le site en profondeur, deux types de constat différents me sont venus en tête : l'identité du site était à retravailler, mais également la navigation, qui peut être assez confuse.

Certaines pages étaient vides, des informations manquaient, d'autres avaient à l'inverse un surplus d'informations. La page contact était un assez bon exemple de ce phénomène : une page vide, avec juste deux informations de contact : une adresse mail et une adresse. Pourquoi ne pas rajouter les réseaux sociaux ? Pourquoi ne pas mettre de numéro de téléphone ? Pourquoi ne pas faire de cette page un footer ?

[03] CONCULSION

Arborescence et wireframes

pour faire au mieux, un parcours d'arborescence a été pensé, suivi de wireframes pour visualiser réellement quelles seraient les étapes par lesquelles l'utilisateur va passer. Adieux les pages inutiles ou complexes, les informations ont été regrouper, pour faciliter l'usage, d'autres ont été ajouter, pour apporter des connaissances sur le club ou le sport. tout ça dans une navigation plus fluide, naturelle et simplifiée.

Ce projet, réalisé en sortie de stage, m'a permis de comprendre la navigation qu'à un nouvel utilisateur lorsqu'il arrive sur un site. Les points clés à mettre en valeur. Ce que le site montre et ce qu'il doit montrer. les éléments qui peuvent encombrer visuellement l'usager. Comment passer d'un point a à un point b sans que ça soit pénible. redéfinir une image qui se voulait vieillisante.

[ HOMEPAGE ]

[ PROJET Précédent ]

[ PROJET SUIVANT ]

seb.porthault@gmail.com
+33 7-67-72-81-36