Aperçu du projet
Après avoir travaillé pour la Compagnie des archers d’Egly, j’ai voulu faire une refonte du site en oubliant les contraintes imposées par le client.
Contexte
Lorsque j’ai travaillé pour la Compagnie des archers d’Egly, le contexte était assez particulier. En effet, dans cette association sportive les membres du bureau se réunissent pour prendre les décisions. Cependant, certains restent sur leurs positions et refusent le moindre changement, ce qui peut compliquer grandement certains projets.
« Faire une refonte de l’identité visuelle de la Compagnie des archers d’Egly, tout comme leur site, afin de rendre l’association plus moderne et plus accessible.
Quand était-ce ?
Octobre 2022
Mon rôle
concepteur d’expérience ; UX/UI Designer ; graphiste
Les défis du projet
- modernisation de la Compagnie des archers d’Egly
- passage du site en dark mode
Mes solutions
- réaliser une nouvelle identité de marque
- création d’une nouvelle charte graphique
- création d’un nouveau logo
- refonte du site
- proposition d’une nouvelle page d’accueil conservant éléments essentiels
Responsabilité de conception
- lister les idées des membres
- modifier la charte graphique pour qu’elle corresponde au light comme au dark mode
- concevoir plusieurs logo correspondant aux besoins
- créer une maquette de la page d’accueil du site
Mon approche
Comprendre
Etape 1
- liste des demandes de membres de la Compagnie
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherche de modèles
- créations de logos
Décider
Etape 4
- choix d’un logo
- maquette de la page d’accueil
Comprendre
Etape 1
- liste des demandes de membres de la Compagnie
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherche de modèles
- créations de logos
Décider
Etape 4
- choix d’un logo
- maquette de la page d’accueil
Etape 1 : Comprendre
Objectif
Comprendre les besoins des utilisateurs, leurs désirs et idées.
Au cours de la phase de recherche, j’ai demandé à différents membres ce qu’ils souhaitaient voir pour leur association. J’ai alors noté leurs différentes remarques et idées pour comprendre ce qu’ils attendaient ainsi que les visuels qu’ils préféraient.
Les défis du projet
Comme j’ai conçu leur site actuel, j’avais déjà réalisé un benchmark des différents sites de club et compagnies d’archerie dans leur région. C’est un milieu que je connais déjà bien donc que je comprends aisément.
Le défi principal est que ces clubs et compagnies sont régies par des membres plus anciens généralement et cela se ressent dans certains choix. Ainsi, il est courant de trouver des sites datés, peu fonctionnels, avec un trop plein d’informations. Ces éléments se comprennent par le fait que c’est aussi un sport qui demande beaucoup de rigueur, de calme, de concentration, de temps et de moyens…
La moyenne d’âge des archers dans les différents clubs et compagnies en Ile-de-France est de 60 ans. En effet, peu de jeunes s’inscrivent chaque année à ce sport par manque d’informations sur son accessibilité. Par ailleurs, la plupart des jeunes sont inscrits à des activités dans leur propre ville uniquement, et il n’est pas possible de concevoir un club de tir à l’arc par ville.
Pour les visuels, les archers de la Compagnie d’Egly sont très centrés sur les traditions. Leur logo a été conçu par les premiers membres de la Compagnie et pour eux, il est inconcevable de le modifier. Malheureusement, leur logo n’est pas réutilisable facilement sur tous les formats car bien souvent trop haut, trop complet, incompréhensible en petit format…
Etape 2 : Définir
Objectif
Définir ce qui dérange les utilisateurs pour pouvoir améliorer leur expérience au quotidien.
Afin de mieux définir ce qui va constituer ce projet de refonte, il faut lister ce qui a été réalisé précédemment selon les attentes de la majorité et ce qui a été ignoré. Une fois la liste effectuée, refaire tout ce qui a été abandonné précédemment.
La définition des besoins
Pour redéfinir les besoins qui avaient été mis en avant lors de mes sessions de travail avec cette association, j’ai repris mes diverses notes. J’ai eu la chance d’assister à plusieurs entraînements des différents licenciés de la Compagnie, qu’ils fassent partie ou non des membres du bureau. Lors des phases de tir, on ressent toute la concentration de chacun, mais lors de la récupération des flèches, on retrouve des membres joyeux et pour certains, très bavards ! Ce qui est une aubaine pour obtenir des informations !
Voici les différentes requêtes que j’ai pu obtenir des différents membres à l’époque et on distingue aisément les 2 camps s’affrontant :
- création d’un site qui contient toutes les informations sur le tir à l’arc et ses traditions
- copier ce qui se fait ailleurs car plus simple de s’y retrouver
- garder les couleurs vertes de la Compagnie
- conserver le logo actuel (datant de 1997)
- tout partager avec les visiteurs
- avoir un site qui propose aux visiteurs uniquement les principales informations et un formulaire de contact
- proposer les cours et leçons sur l’archerie aux membres uniquement
- avoir un site qui fonctionne en dark mode
- moderniser le logo en conservant ses principales caractéristiques
- pouvoir s’inscrire aux concours en ligne et savoir qui s’est inscrit
Les besoins pour la refonte
Puisque la colonne de gauche est celle qui avait été validée à l’époque, je me suis penchée davantage sur celle de droite. L’inscription aux concours directement en ligne depuis le site est une des fonctionnalités que nous avons réussi à instaurer par le passé. En effet, ils se servaient auparavant d’un classeur que le membre responsable des inscriptions apportait avec lui à chaque entraînement. Ce carnet d’inscriptions n’était donc pas disponible tout le temps et il fallait obligatoirement être présent aux mêmes sessions que cet autre membre. Pour simplifier l’accès aux concours, la possibilité de s’inscrire depuis la partie uniquement accessible aux membres d’Egly avait été validée.
Ainsi, les besoins restants sur lesquels vont se porter la refonte pour Egly sont :
- le logo
- les couleurs utilisées
- réduire le nombre d’onglets en conservant les contenus et en les redistribuant aux utilisateurs inscrits
Etape 3 : Diverger
Objectif
Rechercher des modèles de logo, créer des logos…
Lors de l’étape de divergence, j’ai fait des recherches sur divers logo de sport. Ces recherches de modèles m’ont permis de tracer plusieurs idées pour obtenir un logo plus moderne.
Premières recherches
Pour me faire une meilleure idée de ce que l’on peut retrouver dans des logos de sport, j’ai recherché ceux qui peuvent s’apparenter à ce qu’Egly a déjà. En effet, il faut que je reste proche de ce qui est existant pour que les utilisateurs puissent se reconnaître à travers un nouveau logo. Je me suis donc intéressée aux logos sous forme de blasons. Bien souvent ils sont utilisés pour les sports d’équipe. Contrairement à ce que l’on peut penser, l’archerie aussi en est un !
Premières idées
Après avoir trouvé bon nombre de logos sous forme de blason, aussi bien dans le sport que dans le luxe, j’ai pu remarquer qu’ils ne sont que la forme complète utilisée. En effet, la plupart ont également des logos secondaires reprenant juste certains éléments tels que le nom, les formes, les animaux… J’ai remis sous forme de liste les différents éléments présents dans le logo actuel et ai réalisé plusieurs essais de logo avec ces différents éléments.
- un loup
- des éléments d’archerie (flèches, cible…)
Etape 4 : Décider
Objectif
Décider quelles idées sont celles à suivre selon les besoins des utilisateurs, lesquelles sont les plus simples à comprendre et suivre.
Pour cette étape de décision, il faut peser le pour et le contre de chaque idée envisagée précédemment. Certaines peuvent être un bon début, d’autres trop complexes ou redondantes par exemples. Cette phase est décisive pour la bonne continuation de la suite du projet.
La charte graphique
Pour décider de ce qui conviendrait le mieux pour la Compagnie, j’ai décidé de modifier la palette de couleurs qu’ils avaient. Pour cela j’ai décidé de rester sur les teintes vertes, en dégradant le vert le plus utilisé par Egly. Ainsi je pouvais obtenir diverses nuances de ce même vert, allant d’un blanc vert à son opposé afin d’éviter le blanc et le noir pur. En effet, ces couleurs sont connues pour fatiguer plus rapidement les yeux alors qu’en les teintant légèrement elles se fondent plus facilement avec le reste.
Pour les fonts, j’ai également choisi de modifier celles utilisées. En effet, même si je conserve la font Georgia car déjà utilisée sur les maillots des membres, je remplace la seconde. La font Montserrat, bien que facilement lisible par tous, est trop proche de celle utilisée pour les titres dans le site. J’ai donc choisi de la remplacer par une font plus ronde qui permet un meilleur contraste, Outfit.
Le logo
Après avoir dessiné différents éléments du logo, il fallait mettre les meilleurs dans un blason. Cette étape supplémentaire permet de voir le rendu avec les couleurs mais aussi de voir quel assemblage peut fonctionner au mieux. Pour le choix de la tête du loup, j’ai préféré celle plus complète, fermée, car plus claire que celle tribale et surtout plus moderne.
Il fallait ensuite déterminer quel blason correspondait le plus aux diverses attentes. Le logo actuel peut poser problème car trop en hauteur. Il n’apparait pas en entier dans l’icône de la page web par exemple. Pour éviter cela, il faut donc un logo plus carré. Pour ne pas oublier qu’il s’agit d’archers, les flèches doivent être très présentes. Ces différents éléments de réflexion ont permis de choisir le logo final :
Le site
Maintenant que l’identité visuelle est redéfinie, il faut redéfinir le site. Pour cela, je suis repartie des liens primaires du menu actuel :
- Accueil
- La Compagnie
- Traditions et évènements
- Leçons de tir
- Adhésion
- Espace adhérents
- Autour du tir à l’arc
- Contact
On peut noter que le nombre de lien est bien trop imposant pour les visiteurs. Selon les écrans le menu n’est pas visible directement et les utilisateurs doivent passer par l’icône de menu pour commencer à voir l’intérieur du site. Pour simplifier la navigation, j’ai redéfini les liens comme suivant :
- La Compagnie
- Adhésion
- Espace adhérents
- Autour du tir à l’arc
- Contact
La page d’accueil est toujours accessible en cliquant sur le logo comme c’est déjà le cas actuellement.
Pour les pages secondaires, elles ont été redistribuées dans des endroits plus stratégiques. Ainsi, les traditions et évènements seront accessibles depuis La Compagnie puisqu’ils la concernent directement. Les leçons de tir quant à elles pourraient être accessibles depuis l’espace adhérents, principalement pour les nouveaux membres.
Une fois ces éléments de menu rendu plus clairs et lisibles, j’ai choisi de placer le logo au centre du menu. Positionné ainsi il donne l’impression d’ouvrir la page avec ses flèches. En reprenant les couleurs de la nouvelle identité j’ai pu proposer une version sombre ainsi qu’une version claire. Toutes deux permettent une meilleure séparation des contenus pour faciliter la lecture.
