Aller au contenu principal
Projets

Refonte UX2026

SaaS Restau

Refonte UX / UI de la partie back-office et des parcours de réservation et de click & collect.

TerminéMené pendant mon stage chez Nash Digital
Contexte
Projet confié pendant mon stage chez Nash Digital
Rôle
UX / UI Designer
Durée
TODO : préciser la durée
Outils
Figma
Le back-office refait, sur un ordinateur portable : le tableau de bord d'un restaurant, avec ses chiffres clés et ses graphiques de chiffre d'affaires. Projet UX/UI d'Anakin Ponton.

Le problème

Le site d'un restaurant permettait deux choses : réserver une table pour venir sur place, et commander en click & collect pour passer récupérer son repas. Les deux fonctionnaient, mais l'expérience avait besoin d'être remise en ordre.

Le projet avait deux faces. Côté client, rendre les parcours de réservation et de commande clairs et faciles à suivre. Côté restaurant, refaire le back-office où l'équipe reçoit et traite ces réservations et ces commandes.

TODO : décris ce qui n'allait pas avant — ce qui bloquait les clients, ou ce qui compliquait le travail de l'équipe.

Partie 1Côté client

Réserver une table, commander à emporter

Deux parcours partagent le même site : réserver pour venir manger sur place, ou commander pour passer récupérer. Deux intentions différentes, qui ne demandent pas les mêmes informations.

J'ai repris ces deux pages, en desktop et en mobile. L'accueil du site, lui, n'a pas changé.

Choisissez un parcours : ses écrans se suivent, chacun en desktop et en mobile. Sur desktop, glissez la poignée pour comparer avec l'ancienne version.

Réservation : versions desktop et mobile.

Les infos de la réservation

Avant : l'ancienne fenêtre de réservation, avec un champ date et un menu d'heures à côté de la liste des horaires du restaurant.
Après : la page de réservation en desktop, avec un indicateur en quatre étapes, puis le nombre de personnes, la date, l'heure et l'emplacement souhaité.
Desktop · glissez pour voir l'avant
La page de réservation en mobile : nombre de personnes, date, heure et emplacement, les uns sous les autres.
Mobile

Les coordonnées

Deuxième étape de la réservation en desktop : nom, prénom, adresse e-mail et téléphone.
Desktop
La même étape en mobile : nom, prénom, adresse e-mail et téléphone.
Mobile

Partie 2Côté back-office

Le back-office du restaurant

Le back-office s'adresse au gérant d'un ou de plusieurs restaurants. Il y suit son stock en direct, les réservations de table et les commandes click & collect, et les revenus de son ou ses restaurants, par semaine ou par mois.

Toutes les données importantes pour la gestion passent par lui. Si elles sont mal renseignées, difficiles à trouver ou noyées au milieu d'informations inutiles, le tableau de bord ne sert plus à rien.

  1. TODO : décrire la partie réservation du tableau de bord.
    La partie réservation
    TODO : décrire la partie click & collect du tableau de bord.
    La partie click & collect

    Le tableau de bord

    Le travail a commencé par un tri des informations. La première version en affichait énormément, dont une bonne partie n'était pas utile à première vue : un bloc de bienvenue, la liste des dernières personnes connectées…

    Le tableau de bord se divise désormais en deux parties, réservation et click & collect, pour ne pas mélanger les informations de ces deux services.

    On y trouve la date avec les services du soir et les horaires du restaurant, ses revenus, et les chiffres clés comme le nombre de réservations ou de tables réservées. Surtout, les réservations et le stock en direct sont visibles dès l'arrivée, sans avoir à faire défiler la page.

    Le résultat : un espace moins chargé, qui montre les données les plus importantes dès l'ouverture du back-office.

  2. TODO : décrire la page des horaires.

    Les horaires

    La page où le restaurant règle ses horaires.

    Ils sont désormais organisés selon le moment de la journée, le midi ou le soir.

    La page reprend la mise en page du tableau de bord : les horaires des réservations d'un côté, ceux du click & collect de l'autre.

  3. TODO : décrire la page des produits.

    Les produits

    La page des produits du restaurant.

    Les produits y sont désormais présentés comme pour les clients qui commandent en click & collect : rangés par catégorie, sous forme de carrousel.

    En plus, le stock s'affiche en direct, pour que le gérant sache tout de suite s'il doit réapprovisionner tel ou tel produit.

  4. TODO : décrire la page des utilisateurs.

    Les utilisateurs

    On y retrouve les différentes personnes qui ont accès au restaurant et y sont liées, comme les serveurs ou les cuisiniers.

    Chaque fiche propose des raccourcis : le numéro de la personne, son e-mail ou sa messagerie, ou encore sa fiche de paie.

Décisions clés

Les choix structurants du projet, et ce qui les justifie.

  1. Remettre de l'ordre avant de redessiner

    Pourquoi

    • La demande portait d'abord sur l'organisation des parcours, pas seulement sur leur apparence.
    • TODO : explique comment tu t'y es pris — inventaire des écrans, ordre des étapes, ce que tu as regroupé ou retiré.

  2. Refaire les deux faces du même service

    Pourquoi

    • Chaque réservation et chaque commande passée côté client arrive dans le back-office : les deux côtés ont été repensés ensemble.
    • TODO : explique ce que ça a changé de travailler les deux en même temps.

Ce que j'en retiens

  • TODO : deux ou trois choses que tu retiens. Concevoir pour deux publics à la fois — les clients et l'équipe du restaurant — est un bon angle.

Envie d'en discuter, ou de voir les fichiers de travail ? Je cherche une alternance de 2 ans à Nantes.

Me contacter