Tous les projets
Conception du site vitrine d'un bar à chat, pensé pour donner envie de venir, faire découvrir les chats résidents et faciliter leur adoption.
Projet réalisé en trio dans le cadre de ma formation, avec pour principe de centraliser les compétences de chacune.
CONTEXTE
Chat'alors est un bar à chat fictif. L'enjeu du projet était double : construire une identité visuelle capable de porter l'univers convivial et ludique du lieu, et concevoir une expérience permettant aux visiteurs de découvrir facilement les chats résidents, jusqu'à l'adoption.
Pour centraliser nos compétences respectives, je me suis chargée de la charte graphique (en trinôme sur la direction artistique), des wireframes et de l'UX writing.
PROBLÈME
Un bar à chat repose sur un concept qui doit se comprendre immédiatement : on vient à la fois pour un moment convivial et pour rencontrer des chats en vue d'une adoption. Deux difficultés à résoudre :
-
Faire comprendre le concept en quelques secondes, sans que le visiteur ait à chercher où trouver l'information (chats à adopter ? réservation de table ? les deux ?),
-
Valoriser les chats résidents de façon à donner envie de les rencontrer, tout en gardant une identité chaleureuse et non "institutionnelle" : l'enjeu n'était pas de faire un site de refuge, mais un site de bar à chat.
PROCESS
-
Veille de sites "fantaisie" : En équipe, nous avons étudié des références de sites au ton ludique et décalé pour nourrir la direction artistique, avant de construire une charte graphique dédiée (couleurs, typographies, éléments graphiques) reflétant une identité ludique et chaleureuse,
-
Définition des actions prioritaires du visiteur : J'ai identifié les trois intentions principales à couvrir dès l'arrivée sur le site : découvrir les chats, adopter, réserver une table,
-
Conception des wireframes : J'ai construit les parcours en gardant ces actions visibles dès le hero-header, pour que la compréhension du concept soit immédiate,
-
Réalisation d’un design system : Afin de garantir une cohérence sur toute l’interface surtout en travaillant en équipe, nous avons conçu un design system (couleurs, typographies, cards, boutons, icônes...),
-
UX writing : J'ai rédigé les contenus avec un ton en cohérence avec la charte graphique, pour que le vocabulaire employé porte, lui aussi, l'univers convivial du bar,
-
Déclinaison sur plusieurs pages, notamment une page "Résidents" et une page "À propos" présentant l'équipe, pour garder une expérience cohérente sur l'ensemble du site.
design system du site vitrine Chat'alors
SOLUTION
Un hero-header orienté action : deux boutons visibles dès l'arrivée : découvrir le concept, réserver une table permettent d'identifier immédiatement ce que propose le bar, sans avoir à faire défiler la page pour comprendre le concept.
Une page "Résidents" dédiée à la mise en avant des chats du bar, pensée pour donner envie de les rencontrer et faciliter le passage vers l'adoption.
Une page "À propos" présentant l'équipe, pour ancrer la dimension humaine et conviviale du lieu.
Une charte graphique et un ton d'écriture cohérents sur l'ensemble du parcours : la direction artistique (ludique, chaleureuse) et l'UX writing se répondent, pour que l'expérience reste homogène d'une page à l'autre.
RÉSULTATS & APPRENTISSAGES
Ce projet en équipe m'a permis de travailler la répartition des compétences : en me concentrant sur l'UX design et l'UX writing, j'ai dû articuler mon travail avec la direction artistique définie collectivement, tout en gardant une vision cohérente du parcours global. J'en retiens l'importance de traduire une identité de marque non seulement dans le visuel, mais aussi dans les mots, un site "ludique et chaleureux" doit se ressentir autant dans ses wireframes et ses call-to-action que dans sa charte graphique.
hero-header du site vitrine