mat'chat

créer des maquettes d'un site web responsive

Il s’agit de concevoir un restaurant fictif, en développant son identité visuelle ainsi que des maquettes interactives de son site web en format responsive. L’expérience utilisateur doit être optimisée à la fois pour les clients habitués, qui doivent accéder rapidement aux informations, et pour les nouveaux visiteurs, en mettant en avant les produits sans les désorienter.

Où la trace a-t-elle été réalisée

Ce projet a été réalisé dans le cadre de notre formation en BUT MMI dans le cadre d’une ressource.

Quand la trace a-t-elle été réalisée ?

Le projet s’est déroulé au cours de ma deuxième année au second semestre.

Qui a travaillé sur le projet ?

Ce travail été un projet de groupe. Notre équipe était composée de quatre étudiants en deuxième année de BUT MMI.

Pourquoi cette trace présente-t-elle un intérêt ?

Cette trace est intéressante car elle permet de documenter et d’analyser le processus de création, de l’identité graphique jusqu’à l’optimisation de l’expérience utilisateur. Elle offre une vision concrète du projet, mettant en évidence les choix stratégiques et visuels effectués pour répondre aux besoins des différents utilisateurs. De plus, elle sert de référence pour évaluer la cohérence et l’efficacité de l’interface et de la navigation.

projets réalisés

Identité graphique

Parcours client

Iconographie

Maquette interactive

Identité graphique

Pour donner une identité forte et cohérente à notre restaurant fictif, nous avons conçu un univers visuel qui reflète son concept unique : un lieu spécialisé dans les boissons et desserts à base de matcha.

charte graphique

Ensemble, nous avons choisi le nom Mat’Chat, un jeu de mots combinant « matcha » et « chat », qui évoque à la fois notre produit phare et une touche ludique et chaleureuse. Cet esprit est renforcé par notre mascotte, un petit chat kawaii, inspiré de l’esthétique japonaise, qui incarne la douceur et l’authenticité du concept.

L’identité graphique repose sur des couleurs naturelles et apaisantes, en accord avec l’univers du thé matcha, ainsi qu’un design épuré et accueillant. L’ensemble vise à créer une expérience visuelle cohérente et immersive, attirant aussi bien les amateurs de matcha que les curieux en quête de découvertes gourmandes.

Compétences exprimer

AC23.02 – Définir une iconographie (illustrations, photographies, vidéos)

Parcours client

Analyse des Parcours Client

Nous avons analysé les différents profils d’utilisateurs afin de comprendre leurs attentes et besoins. Deux types de parcours ont été identifiés :

Les clients habituels, qui recherchent un accès rapide aux informations essentielles (menu, commande, horaires).

Les nouveaux clients, qui découvrent l’univers de Mat’Chat et doivent être guidés dans leur exploration des produits.

Ces parcours ont été définis à partir de retours d’expérience et de tests utilisateurs, permettant d’identifier les points de fluidité et d’éventuelles améliorations.

Analyse des Parcours Client

Nous avons réalisé une cartographie détaillée des expériences utilisateur en mettant en avant :

Les points de contact : interactions clés entre l’utilisateur et le site (page d’accueil, menu, processus de commande…).
Les points de friction : obstacles potentiels à la navigation (temps de chargement, clarté des informations, parcours trop complexe).
Les points de satisfaction : éléments appréciés par les utilisateurs (design attractif, facilité d’accès aux produits, fluidité de navigation).
Carte d’empathie : nous avons modélisé les ressentis des utilisateurs en nous plaçant dans leur perspective, ce qui nous a permis d’affiner l’expérience et de proposer des solutions adaptées à leurs attentes.

Grâce à cette analyse, nous avons pu optimiser le parcours client, en veillant à une navigation intuitive et en améliorant l’ergonomie du site pour une expérience fluide et agréable.

Compétences comprendre

AC21.04 – Identifier et décrire les parcours client à partir d’enquêtes de terrain
AC21.05 – Cartographier les expériences utilisateur : points de contact, points de fristion et de satisfaction, carte d’empathie

Iconographie

Mise en valeur des produits

Pour sublimer les produits de Mat’Chat, nous avons adopté une approche visuelle épurée et harmonieuse, en accord avec notre charte graphique. L’objectif est de mettre en avant chaque boisson et dessert de manière attrayante tout en conservant une identité forte et reconnaissable.

Nous avons structuré la présentation des produits en trois éléments :

Un cercle coloré en arrière-plan, issu de la charte graphique, qui permet de créer un contraste doux et d’attirer l’attention sur le produit.
Le contenant (verre, tasse, bol…) en PNG, pour donner une impression de transparence et mettre en avant la texture et la couleur du liquide.
Le produit en PNG, soigneusement détouré, afin de valoriser ses détails et son aspect gourmand.

Cette mise en scène permet de créer une cohérence visuelle sur l’ensemble des supports tout en rendant chaque produit immédiatement reconnaissable et appétissant.

Design system

Les icônes utilisées sont doux, arrondis et minimalistes, afin d’évoquer la simplicité et l’élégance du matcha tout en restant accessibles et engageantes.

Compétences exprimer

AC23.02 – Définir une iconographie (illustrations, photographies, vidéos)

Maquette interactive

50

Pages designées

10

Catégories

+ de 70

Chemins

Création des Maquettes Interactives

Dans le cadre du développement du site Mat’Chat, nous avons réalisé des maquettes interactives afin de visualiser et tester l’expérience utilisateur avant la phase de développement.

Ces maquettes ont été conçues en respectant les principes du design responsive. Elles permettent de simuler la navigation et d’anticiper le parcours des utilisateurs, en tenant compte des besoins des clients habituels (accès rapide aux informations) et des nouveaux visiteurs (découverte intuitive des produits).

Grâce à l’interactivité, nous avons pu tester et ajuster :

L’ergonomie et la fluidité du parcours utilisateur
La mise en avant des produits et de l’identité visuelle
Les interactions clés (boutons, menus, animations…)

Ces maquettes nous ont permis d’obtenir des retours concrets sur l’expérience proposée et d’affiner le design pour offrir une interface intuitive, attrayante et efficace.

Compétences concevoir