UX/UI Design

    Rôle
    UX / UI
    Périmètre
    Boutique en ligne
    Plateforme
    Web responsive
    Localisation
    Hambourg
    Engagement
    Client project
    By
    Bigad Elsherif, founder of Appstruct
    Gavroche macarons website
    01

    Aperçu du projet

    Gavroche Macarons a été fondée en 2020 par le pâtissier français Anh-Nam Le Thanh. Ancien talent manager né à Paris et vivant à Hambourg, il s'est reconverti en cuisinier. Passionné, il voulait apporter l'excellence française à la scène gastronomique dynamique de la belle ville hanséatique.

    Gavroche macarons
    02

    Notre rôle

    Nous avons décidé d'intégrer une boutique en ligne pour des commandes personnalisées de macarons, en click & collect uniquement. L'objectif : offrir aux clients de Gavroche, actuels et potentiels, un moyen de commander des quantités et variantes personnalisées de macarons — un espace où passer clairement leur demande, indépendamment des disponibilités du moment et avec peu de place à l'incompréhension.

    03

    Processus de design

    Nous avons utilisé le modèle de Design Thinking de D.B.studio proposé par le Hasso Plattner Institute of Design de Stanford (la « d.school »). Les étapes de ce processus sont :

    • 01Empathiser
    • 02Définir
    • 03Idéer
    • 04Prototyper
    • 05Tester
    Gavroche product listing, desktop
    Tous les produits — catégories, recherche et la gamme complète
    04

    Analyse SWOT

    Nous voulions vraiment mieux comprendre Gavroche en tant qu'entreprise à l'aide d'une analyse SWOT, pour identifier ses forces et opportunités.

    Forces

    • Produits 100 % faits main
    • Ingrédients frais et naturels
    • Méthodes françaises traditionnelles
    • Fabrication locale à Hambourg

    Faiblesses

    • Capacité de production limitée
    • Aucune présence en ligne existante
    • Contraintes de disponibilité

    Opportunités

    • Système de commande en ligne
    • Options de personnalisation
    • Coffrets cadeaux pour occasions spéciales

    Menaces

    • Concurrence des marques établies
    • Fluctuations saisonnières de la demande
    • Sensibilité au prix premium
    05

    Analyse concurrentielle

    À partir du SWOT, nous avons identifié les concurrents et cherché ce qui les différencie de Gavroche. Nous en avons retenu trois : das Süsse, IQ, Zucker Monstache.

    06

    Persona

    Juliette

    Juliette a 34 ans, elle est event manager à plein temps chez Belle Etage GmbH à Hambourg. Elle habite le quartier chic de Blankenese et adore satisfaire sa gourmandise avec un macaron.

    Objectifs

    • Trouver des macarons français frais et de qualité
    • Impressionner ses amis avec des cadeaux élégants
    • Gagner du temps grâce à la commande en ligne

    Besoins

    • Contact direct avec le vendeur
    • Informations produit claires
    • Produits authentiques et de qualité
    • Possibilité de personnaliser les commandes

    Frustrations

    • Occupée au travail, elle ne peut pas se rendre au marché
    • Pas de boutique en ligne pour obtenir des macarons frais
    • Elle a peu de temps pour appeler et veut un rythme plus rapide
    Gavroche storefront on mobile
    La même boutique sur mobile
    07

    Plan du site

    Nous avons d'abord posé le sitemap original du site puis créé un nouveau sitemap pour identifier les améliorations. Peu de changements — il fallait surtout créer une entrée « boutique en ligne » sur la page d'accueil.

    08

    Wireframes basse fidélité

    Fort·es de toutes ces informations, nous avons chacun·e produit une version basse fidélité de la page d'accueil et de la page catégorie. Notre vision étant très claire, nos propositions se sont retrouvées très similaires. La seule différence portait sur la façon de designer les catégories et d'en ajouter une supplémentaire.

    09

    Wireframes haute fidélité & prototype

    Nous avons combiné tous les éléments présentés au fil du processus pour créer ce que nous estimons être un site web chaleureux, fonctionnel, ludique et accessible.

    Gavroche cart and checkout
    Commande — récapitulatif, paiement, confirmation