Boulangerie Bernhard
Refonte du site web d'une boulangerie alsacienne.
- Projet fictif de licence
- UX/UI Design
- 2023
Brief
Vous êtes contacté par une TPE/PME alsacienne, elle vous demande de réaliser un site web pour présenter son activité.
Les enjeux d'une refonte
- Mettre en valeur la qualité des produits, le savoir-faire
- Toucher un nouveau public + large, étendre la renommée
- Créer une réelle image de marque cohérente
Le logo
Intégrer le nouveau logo de la boulangerie en reprenant ses couleurs et typographies.
Moodboard
Wireframes
Les 4 pages principales
Accueil
Nos produits
Page produit
Notre histoire
+
Regroupement des 2 pages de l'ancien site pour une seule et unique page "Notre histoire"
UI Design
Page d'accueil
La nouveauté principale du site est mise en avant (click&collect) dans une section qui aura vocation à changer au grè des nouveautés.
Le header non droit invite l’utilisateur à scroller et commencer la navigation.
Menu de la semaine
La deuxième section de la page d’accueil intègre le menu de la semaine que propose la boulangerie comme plat du jour.
Il permet d’être consulté rapidement puis ajouté au panier en deux clics.
Une sélection des produits les plus populaires sont mis en avant sur la page d’accueil.
Ici aussi cette section sera modifiable au fil des nouveautés.
Nos produits phares
Notre histoire
La page regroupe deux sections qui reprennent deux pages distinctes de l’ancien site : Une histoire de famille et Des locaux, des pros.
Axée sur le storytelling autour du savoir-faire ancestral et familiale d’une part, la page présente aussi les différents points de vente, les tournées, ou encore les employés.
...et si on passait commande ?
Les différents produits disponibles en click&collect sont regroupés par catégories sur la page Nos produits.
La page de produit présente les différentes caractéristiques, composition et conservation. Il est possible de personnaliser et de choisir le nombre de personnes avant l’ajout au panier.
Le panier peut être complété par une section « Les clients aiment aussi ».
Pour finir, le choix du paiement et de l’heure de retrait de la commande.
Design system
Typographies
Couleurs
Les 3 couleurs du logo sont reprises comme couleurs principales sur l’intégralité du site, avec des associations contrastées.
#260000
#E94F33
#EEDCB4
Prototype
Pour finir, retrouvez le prototype interactif du site réalisé sur Figma. (appuyer sur R pour le recommencer)