SITE MOBILE

LE GODET BAR RESTAURANT

UX Design, UI Design, Marketing Digital

Deux entrepreneurs souhaitent investir dans un bar / restaurant bistronomique situé à Paris.
Ils ont trouvé un local dans le 17ème arrondissement et sont enthousiastes à l’idée de proposer des tapas revisités et des dégustations d’oenologie.

Logo photoshop
Logo XD
Adobe_Premiere_Pro_CC_icon.svg
AdobeIllustrator-LogoPNG1

Le besoin

Imaginer une nouvelle expérience client en tirant parti des nouvelles technologies.

Mockup réservation ateliers LeGodet
Montage vignobles projetés sur un mur de pierre
Considération n°1
PARIS

La multitude d’offres de restauration sur Paris renforce une concurrence déjà sévère.

Considération n°2
L'ESPACE

L’établissement se répartit sur trois niveaux disponibles de 30m2 chacun, à optimiser.

Considération n°3
FOODTECH

La volonté des investisseurs est de s’inspirer de l’émergence de la Foodtech pour démultiplier l’expérience utilisateur.

Considération n°4
post-covid

La fermeture des bar-restaurants durant la période Covid a profondément modifier les habitudes de consommation.

Méthode utilisée : 6 Etapes

Design process

  • Picto recherche

    1. Découverte

    Réaliser l'étude de marché, identifier la concurrence, enquêter sur la cible

  • Picto identité

    2. Définition & Analyse

    Définir les personas, leurs objectifs et frustrations

  • Picto ampoule

    3.Ideation

    Imaginer la nouvelle expérience utilisateur et les principales fonctionnalités de la solution

  • Picto UX UI

    4. Design

    Concevoir les wireframes des principaux parcours utilisateurs, puis réaliser le prototype

  • Picto navigation mobile

    5. Tests

    Soumettre l'interface aux utilisateurs et recueillir leurs retours pour ajuster le prototype

  • Picto haut parleur pour communication digitale

    6. Communication digitale

    Etablir la plateforme de marque et le plan de communication du nouveau bar-restaurant

1ère etape : LA découverte

Collecte des données clés sur l'évolution du marché de la restauration

#1

Définition de la FoodTech

La FoodTech est l’ensemble des entrepreneurs et des startups du domaine alimentaire (de la production au consommateur final) qui innovent sur les produits, la distribution, le marché ou le modèle économique.

Source : digitalfoodlab

Le marché de la restauration repart à la hausse
Liste des tendances de la restauration
#2

Evolution du marché

Après avoir traversé une crise « Covid » qui a entraîné la fermeture de nombreux bars et restaurants, le secteur est en pleine expansion. Le progrès de la Tech a permis de s’adapter aux restrictions sanitaires et de s’intéresser à une nourriture plus saine et plus responsable.

#3

Habitudes alimentaires

Des pauses fractionnées, une consommation plus saine et des modes de commandes différents ont poussés les restaurateurs à adapter leurs offres pour maintenir leur clientèle.

nouveaux modes de consommation
alimentation saine et responsable

L’étude du marché a permis de collecter les données quant aux opportunités du secteur de la restauration et aux nouvelles habitudes de consommation plébiscités par les clients.

 

#4

Benchmark concurrentiel

3 établissements concurrents ont été identifiés sur la base de leurs prestations, leur localisation et leur réputation. 

Une grille de critères évaluant la présence digitale, les performances techniques, l’e-réputation et l’ergonomie web a été remplie afin d’élaborer un benchmark digital.

Restaurant concurrent LeGodet 1
Restaurant concurrent LeGodet 2
Restaurant concurrent LeGodet 3
Profil des consommateurs de FoodTech
Mode de consommation dans la restauration
Modes de commandes
#5

Enquête cible

L’enquête utilisateur a été réalisée sous forme d’un sondage de 18 questions pour 73 réponses obtenues.

Ci-dessous les statistiques résultantes du sondage effectué auprès de la cible:

Sondage atelier d'oenologie pour le site mobile LeGodet

Près de 60%

seraient intéressés par une dégustation de vins.

Réponses aux questions ouvertes :
Priorité
Freins
Ce que les clients retiennent
  • 22% les avis ou notes
  • 45% évoquent la qualité des produits

Egalement évoqués : le service, le cadre, la proximité, la propreté ou l’ambiance

  • 37% les tarifs
  • 16% la distance
  • 16% le temps d’attente
  • 56% la qualité de la nourriture
  • 37% l’accueil et le service
  • 16% la décoration

Egalement évoqués: les options vegan, la créativité, l’authenticité, la propreté ou l’ambiance

2ème etape : DEFINITION & ANALYSE

Personas, Empathy map

#1

Personas

Le résultat des enquêtes et du sondage de la cible a permis de dresser le portrait de 4 personas.

Persona du site mobile LeGodet
persona LeGodet
persona suite LeGodet
#2

Carte d'empathie

La carte d’empathie permet de modéliser les pensées, émotions et comportements  des personas.

Empathy map du use case en UX Design sur la FoodTech
#3

Les Insights

L'offre
Trois critères pour s’aligner sur les concurrents :
  • Une restauration et des espaces adaptés aux différents moments de la journée
  • Réservation ou commande via différents canaux
  • A consommer sur place,  à emporter ou en livraison
  • Des valeurs communes

    Les engagements doivent transparaître dans la solution et être communiqués largement pour faire écho aux valeurs de la clientèle.

    Les fontionnalités

    Les principales actions de réservation et de commandes doivent pouvoir être faites de façon simple et clairement proposées dès la page d’accueil du site.

    Pour choisir un restaurant, je privilégie la qualité des produits et la décoration du lieu.

    La visibilité

    Le référencement sur Google, les sites annuaire et guides spécialisés, est une priorité, ainsi qu’une alimentation active du contenu sur les réseaux sociaux.

    L'impact émotionnel

    L’authenticité de la bistronomie et la modernité du digital doivent cohabiter en harmonie dans le décor, l’offre et sur les supports digitaux.

    Une expérience réussie est une expérience originale par le cadre mais pour se démarquer, proposer la personnalisation est un complément compétitif.

    Je n’irai pas dans ce restaurant s’il n’y a pas d’options vegan proposées autres que frites ou salade verte.

    La carte

    Elle doit être soignée graphiquement et présenter une hiérarchie des informations intuitives.

    3ème étape: IDEATION

    La solution

    REFORMULATION DU BESOIN

    Comment s’adapter aux nouveaux comportements de consommation post-covid pour faire découvrir les produits du Godet aux futurs clients?

    La solution digitale

    un site mobile qui couvre tout le parcours client de la prise de commande au paiement en ligne

    Les +

    Pas seulement pour les repas à emporter ou en livraison, mais aussi sur place

    Les innovations
    • l’ultra-personnalisation de tapas en ligne par étape
    • la dégustation à la machine à vin interactive
    • les ateliers d’oenologie immersifs multi-sensoriels (video mapping, audio, dégustation, brises, etc…)
    #1

    Sitemap

    Arborescence du site mobile basée sur les fonctionnalités principales :

    • prise de commande
    • réservation d’un atelier de dégustation
    • privatisation d’un espace
    Sitemap du site mobile
    Parcours utilisateurs : personnalisation de tapas
    #2

    Parcours utilisateur clé

    Commander des tapas personnalisées sur place

    4ème étape: LE DESIGN

    UI / UX Design

    #1

    Wireframes

    La page d’accueil

    Wireframe page d'accueil
    #2

    Wireframe parcours

    Réservation d’un atelier de dégustation de vin

    Filtre atelier
    trouver son atelier de dégustation

    Sélection possible du type de vin, de la formule, du niveau du participant et de la période souhaitée

    Card atelier
    Choisir son atelier de dégustation

    Card avec la date, les horaires, la description, l’option de partage, l’option de mise en favori, le nombre de places restantes, le tarif, la note et les avis

    Fiche atelier
    En savoir plus sur l'atelier

    Sélection de la quantité, calendrier des prochaines disponibilités, langue, allergènes, avis client, suggestion d’organisation d’évènement

    Wireframe - Atelier vin - Liste
    Wireframe - Atelier vin -Résultats
    Wireframe - Atelier vin
    Wireframe - Atelier vin - pop up réservation
    Wireframe - Atelier vin - connexion
    Wireframe - Atelier vin - panier d'achat
    Wireframe - Atelier vin - moyen de paiement
    Wireframe - Atelier vin - confirmation de paiement
    #3

    Moodboard

    Réservation d’un atelier de dégustation de vin

    Moodboard du site mobile LeGodet
    Charte graphique Le Godet : couleurs
    Charte graphique Le Godet : polices
    Charte graphique Le Godet : picto
    #4

    La charte graphique

    Réservation d’un atelier de dégustation de vin

    Logo

    Il reprend le nom de l’établissement avec :

    • Une police manuscrite sur « Le » en partie supérieure pour rappeler les étiquettes de vin de château sur les bouteilles.
    • Une police en gras sur « Godet » en partie inférieure pour détonner et apporter une touche de modernité.
    • Un verre en hommage au godet avec un contenu en mouvement pour le caractère surnaturel de l’immersion.

    Typographie

    La police utilisée sur le site est « Avenir » qui est sans empattement pour rester sur une visibilité facile et moderne.

    Elle se décline en une dizaine de styles/graisses différentes ce qui permet de hiérarchiser les informations facilement avec une police unique en jouant sur les fontes.

    Couleurs

    Les couleurs reprennent les valeurs du restaurant:

    • l’orange pour la chaleur humaine, la convivialité et la couleur des aliments
    • Le vert pour la nature, les produits frais et l’environnement

    La matière ardoise rappelle l’authentique ardoise du menu écrit à la craie des bistros.

    #5

    Identité graphique

    Mockup pour saisir l’ambiance générale du futur restaurant

    Accessoire marquée pour l'identité graphique
    Moodboard du site mobile LeGodet
    #6

    Page d'accueil du site mobile

    Détail des sections de la page

    explications sur la page accueil LeGodet
    Maquette de la page d'accueil avec UI Design
    explications sur la page accueil LeGodet
    Explication des sections de la page daccueil LeGodet

    Réservation d'un atelier de dégustation de vins

    Parcours utilisateur

    Mockup vidéo atelier de vin
    Lire la vidéo sur Mockup vidéo atelier de vin

    Commande de tapas personnalisées

    Parcours utilisateur

    Mockup vidéo personnalisation de tapas
    Lire la vidéo sur Mockup vidéo personnalisation de tapas

    5ème étape: TESTS UTILISATEURS

    Feedbacks & Ajustements

    #1

    Les utilisateurs

    5 utilisateurs parmi les sondés ont accepté de tester l’interface.

    Avatar1 d'illustration pour tests utilisateurs
    Avatar2 d'illustration pour tests utilisateurs
    Avatar3 d'illustration pour tests utilisateurs
    Avatar4 d'illustration pour tests utilisateurs
    Avatar5 d'illustration pour tests utilisateurs
    n°1

    réserver un atelier d’oenologie

    n°2

    commander des tapas personnalisées

    n°3

    faire une demande de privatisation

    #2

    Les missions

    Les trois principales fonctionnalités ont été testées au travers de ces missions confiées aux testeurs.

    #3

    Ajustements

    Les retours utilisateurs ont donnée lieu à plusieurs modifications.

    Couleurs

    Révision du choix des couleurs de la charte graphique pour être en phase avec les valeurs des lieux

    Page d'accueil bordeaux pour LeGodet
    Page d'accueil orange pour LeGodet
    UX writing

    Reformulation de textes qui invitent l’utilisateur à utiliser la personnalisation de son plat

    Extrait de l'ancien UX writing de LeGodet
    Extrait de l'UX writing de LeGodet
    Call-To-Action

    Des libellés de bouton plus engageant pour la navigation dans les étapes de la personnalisation

    Mise à jour de l'UX writing du CTA de l'appli LeGodet
    Blog

    Une meilleure isolation visuelle des articles de blogs (ils se mêlaient à l’offre des ateliers, créant de la confusion pour les utilisateurs)

    Blog LeGodet - avant modification
    Blog LeGodet - après modification

    6ème etape: Le plan de Communication

    Charte éditoriale, Planning éditorial, Réseaux sociaux, Newsletters & Landing page

    #1

    La plateforme de marque

    Définition de la mission, de la vision et des valeurs

    Plateforme de marque du projet LeGodet
    #2

    Stratégie webmarketing

    Communiquer via les réseaux sociaux et fidéliser via la newsletter.

    #4

    La charte éditoriale

    Un contenu adapté à la cible

    Charte éditoriale
    Calendrier éditorial
    #3

    Le calendrier éditorial

    Un contenu différent selon l’objectif et le support

    Pour en savoir plus, n’hésitez pas à me contacter.