MENTIONS LÉGALES

1. Édition du site

En vertu de l'article 6 de la loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique, il est précisé aux utilisateurs du site internet www.uxvanessa.fr l'identité des différents intervenants dans le cadre de sa réalisation et de son suivi :

2. Hébergement

Le site est hébergé par la société Webflow, Inc., dont le siège social est situé au :398 11th Street, 2nd Floor, San Francisco, CA 94103, États-Unis.

3. Propriété intellectuelle et contrefaçons

Vanessa Mahendran est propriétaire des droits de propriété intellectuelle ou détient les droits d’usage sur tous les éléments accessibles sur le site internet, notamment les textes, images, graphismes, logos, vidéos, architecture, icônes et sons.Toute reproduction, représentation, modification, publication, adaptation de tout ou partie des éléments du site, quel que soit le moyen ou le procédé utilisé, est interdite, sauf autorisation écrite préalable de Vanessa Mahendran.Toute exploitation non autorisée du site ou de l’un quelconque des éléments qu’il contient sera considérée comme constitutive d’une contrefaçon et poursuivie conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.

4. Limitations de responsabilité

Vanessa Mahendran ne pourra être tenu pour responsable des dommages directs et indirects causés au matériel de l’utilisateur, lors de l’accès au site.Vanessa Mahendran décline toute responsabilité quant à l’utilisation qui pourrait être faite des informations et contenus présents sur le site.

5. Gestion des données personnelles

Conformément aux dispositions de la loi 78-17 du 6 janvier 1978 modifiée, l’utilisateur du site dispose d’un droit d’accès, de modification et de suppression des informations collectées.Les données éventuellement collectées via un formulaire de contact (nom, email) sont uniquement destinées à la gestion des correspondances professionnelles et à la prise de contact. Elles ne sont en aucun cas cédées ou vendues à des tiers. Aucun tracker ou cookie publicitaire tiers n'est utilisé sur ce site.

SWEET BY NESS

Site e-commerce de gâteaux artisanaux

Projet de conception d’une expérience e-commerce fluide et rassurante autour de la pâtisserie artisanale.
Voir le site en direct
capture de la page d'accueil desktop du site sweet by ness

CONTEXTE

du projet

Dans le cadre de ma formation en UI Design, j’ai conçu un site e-commerce de pâtisserie artisanale. L’objectif était de créer une expérience de commande simple, intuitive et rassurante, tout en valorisant l’univers gourmand de la marque.

OBJECTIFS

de conception du projet

image panier
Expérience fluide et intuitive
centré sur l’utilisateur
image commande
Réduire les frictions
dans le parcours de commande
image gâteau
Mettre en valeur les produits
pour déclencher l’achat
image pinceau (identité visuelle)
Créer une identité visuelle
chaleureuse et rassurante

CIBLE UTILISATEUR

profils des utilisateurs cibles

image représentant un évènement

Particuliers événements

  • Mariages
  • Fêtes
  • Anniversaires
Commande simple et personnalisée
image représentant un gâteau

Amateurs artisanaux

  • Produits faits maison
  • Qualité artisanale
  • Sens du détail
Confiance dans le produit
image représentant une boussole

Peu à l’aise digital

  • Peu habitués en ligne
  • Besoin d’accompagnement
  • Simplicité recherchée
Parcours guidé et rassurant

PROBLÉMATIQUES UX

comprendre le besoin utilisateur

Comment améliorer l’expérience d’achat en ligne afin de favoriser la conversion ?
Comment rassurer lors d’un achat en ligne ?
Comment donner envie d’acheter ?
Comment réduire les frictions du parcours ?

SOLUTIONS

améliorations apportées

PARCOURS SIMPLIFIÉ
image de l'horloge
Réduction des étapes pour une commande plus rapide.
HIÉRARCHIE VISUELLE
CLAIRE
image représentant la hiérarchie
Une hiérarchie visuelle claire et des call-to-action stratégiques pour guider l'utilisateur tout au long du parcours.
UNIVERS VISUEL
ENGAGEANT
image représentant une bonne ambiance
Le design repose sur une ambiance chaleureuse et gourmande afin de renforcer la confiance et l’envie d’achat.
EXPÉRIENCE FLUIDE
image représentant la fluidité
Le processus de commande a été optimisé pour mettre en avant les informations essentielles dès les premières étapes.

RÔLES ET OUTILS UTILISÉS

rôle et outils du projet

RÔLE : UI/UX Designer & intégration web

MISSIONS

  • Recherche concurrentielle et benchmark
  • Conception des wireframes
  • Création de prototypes interactifs
  • Réalisation du design UI final
  • Intégration du site sur WordPress avec WooCommerce
  • Personnalisation via HTML / CSS

OUTILS UTILISÉS

Figma
WordPress
HTML
CSS
WooCommerce

PROCESSUS DE CONCEPTION

approche ux/ui du projet

01

Recherche & benchmark

Analyse de sites de pâtisserie et d’e-commerce existants.

capture d'écran du site Jo and Nana Cakes

Site A : Jo and Nana Cakes

flèche
Univers visuel : Palette de couleurs douce et cohérente.
flèche
Conversion : Fiches produits détaillées et rassurantes.
Navigation : Menu hamburger peu intuitif.
Hiérarchie : Absence de header structuré.
capture d'écran du site besties bakery

Site B : Besties Bakery

Identité : Univers "girly" fort et mémorisable.
E-commerce : Fiches produits bien optimisées.
Clarté : Structure de la Home peu intuitive.
Hiérarchie : Absence de header structuré.
capture d'écran du site La Maryse

Site C : La maryse

Rassurance : FAQ et témoignages bien mis en avant.
Structure : Catégorisation des produits claire.
UI : Animations trop présentes (distraction).
Accessibilité : Menu difficile à identifier.

02

Wireframes (Figma)

Structuration des contenus et des CTA en version desktop et mobile.

DESKTOP / Catalogue des produits
Wireframe du catalogue des produits en desktop
MOBILE / Catalogue des produits
wireframe mobile du catégorie des produits

03

Prototypage interactif

La transformation des wireframes en prototype interactif permet de simuler l'expérience réelle. On peut y voir les flux de navigation, les transitions et les interactions, permettant ainsi une vision fidèle du produit fini avant son développement.

Accéder au prototypeAccéder au prototype

04

Tests utilisateurs

Évaluation des parcours et identification des points de friction.

05

Itérations UX/UI

Optimisation de l’interface suite aux retours utilisateurs.

06

Design final responsive

Conception de l’interface en haute fidélité adaptée à tous les écrans.

07

Intégration WordPress & WooCommerce

Développement du site et configuration de la boutique en ligne.

USER FLOW

un chemin utilisateur simplifié

Accueil
Produit
Fiche produit
Panier
Commande
Le parcours utilisateur a été conçu pour être simple, fluide et orienté conversion, de la découverte du produit jusqu’à l’achat.

CHOIX UI / DESIGN SYSTEM

l’identité visuelle

INTENTION DE DESIGN

Le design de Sweet by Ness a été pensé pour créer une expérience chaleureuse, gourmande et rassurante.
L’objectif était de refléter l’univers artisanal de la pâtisserie tout en garantissant une navigation simple et intuitive.

PALETTE DE COUELURS

#F6ECEC
Background
#E4D1D1
Surface
#D09494
Primary / CTA
#D6B5B4
Footer
#838383
Text
Des tons pastels pour incarner l'univers gourmand et artisanal de Sweet by Ness, tout en offrant une interface douce et agréable à parcourir.

TYPOGRAPHIE

PLAYFAIR DISPLAY

Typographie serif utilisée pour les titres (H1, H2).
 Elle apporte une dimension élégante et premium à l’interface..

Aa Bb Cc

OUTFIT

Typographie sans-serif utilisée pour les éléments fonctionnels : corps de texte, boutons, inputs et labels.
 Elle offre une excellente lisibilité et un rendu moderne, minimaliste et équilibré.

Aa Bb Cc

Playlist

Typographie script utilisée avec parcimonie pour les titres d’accroche (H1/H2). J’ai choisi Playlist pour apporter une touche élégante, expressive et distinctive à l’identité visuelle.

Aa Bb Cc

HIÉRARCHIE UI

DESKTOP
H1 2.5rem / Medium
TITRE PRINCIPAL DE LA PAGE
H2 1.75rem / Semi-bold ou Bold
Titre de section
H3 1.5rem / Bold
Sous-section
Body 1rem / Regular
Texte courant pour les paragraphes…
CTA / Button 1rem / Bold
Bouton principal
MOBILE
H1 1.75rem / Semi-bold
TITRE PRINCIPAL DE LA PAGE
H2 1.5rem / Semi-bold ou Bold
Titre de section
H3 1.375rem / Bold
Sous-section
Body 1rem / Regular
Texte courant pour les paragraphes…
CTA / Button 1rem / Bold
Bouton principal

COMPOSANTS UI

BOUTONS
primaire
.
secondaire
NORMAL
COMMANDER
AJOUTER AU PANIER
DÉSACTIVÉ
bouton principal désactivébouton secondaire désactivé
primaire
secondaire
DÉSACTIVÉ
primaire
bouton primaire désactivé
secondaire
bouton secondaire désactivé
Conception d'un système hybride pour segmenter les types d'actions : l'usage de formes rectangulaires assoit la rigueur des actions primaires, tandis que les formes arrondies identifient les options secondaires. L'utilisation de couleurs à fort contraste  pour encourager l’action.
CARTE PRODUIT
image d'une carte produit
Conception d’une carte produit minimaliste visant à clarifier la lecture et faciliter la prise de décision.

La hiérarchie visuelle met en avant une image produit dominante, suivie du titre et du prix, centrés pour une compréhension rapide.

L’icône de favoris, discrète et grisée par défaut, introduit une interaction légère sans perturber l’équilibre visuel de la carte.
FORMULAIRES
Conception d’un formulaire structuré avec des champs espacés afin de réduire la charge cognitive et faciliter la lecture.

L’utilisation de menus déroulants simplifiés et d’étiquettes explicites permet une configuration rapide et intuitive du produit.

L’espacement entre les éléments
limite les erreurs de saisie et améliore le confort d’interaction, garantissant un parcours fluide jusqu’à l’ajout au panier.
image du formulaire
NAVIGATION
image de la barre de navigationheader du site version mobile
Conception d'une barre de navigation épurée pour réduire la charge cognitive et faciliter l'orientation.

L'architecture de l'information est simplifiée avec un menu textuel clair à gauche et un groupe d'icônes fonctionnelles à droite (recherche, profil, panier).

L'indicateur numérique sur le panier permet un feedback immédiat, guidant l'utilisateur vers la finalisation de son achat sans distraction

MAQUETTES UI

mockups

Cette section présente les maquettes finales du site Sweet by Ness en version mobile et desktop, traduisant les choix UX en une interface cohérente, lisible et orientée expérience utilisateur et conversion.

HOMEPAGE

homepage mobile
homepage desktop
La homepage a été conçue pour capter l’attention dès l’arrivée grâce à un hero visuel immersif. La hiérarchie des contenus guide naturellement l’utilisateur vers les produits, avec des call-to-action visibles favorisant l’exploration et l’entrée dans le parcours d’achat.

PAGE PRODUIT

page produit mobile
page produit desktop
La fiche produit valorise les visuels des gâteaux et présente les informations essentielles de manière structurée. L’objectif est de rassurer l’utilisateur et de faciliter sa décision d’achat, tout en conservant une navigation fluide sur mobile comme sur desktop.

PAGE PANIER

page panier mobile
page panier desktop
Le panier a été conçu pour offrir une lecture rapide et claire des produits sélectionnés. L’interface limite les distractions et met en avant les éléments essentiels pour encourager la finalisation de la commande.

DÉFIS RENCONTRÉS

contraintes techniques et ux

Le principal défi a été la prise en main de WooCommerce et l’adaptation de la plateforme afin qu’elle corresponde fidèlement au design réalisé sur Figma. Des ajustements en HTML/CSS ont été nécessaires pour personnaliser certains composants (fiches produits, boutons, parcours de commande).

Un autre enjeu de taille a été de maintenir un équilibre parfait entre les contraintes techniques du CMS et mes choix de design, tout en assurant une expérience fluide et responsive.
Intégration et personnalisation de WooCommerce
Adaptation du design Figma aux contraintes techniques
Cohérence UI entre les différents composants
Gestion du parcours de commande

TESTS UTILISATEURS

points d’amélioration

Des tests ont été réalisés afin de valider la compréhension du parcours d’achat et l’intuitivité de l’interface. Chaque utilisateur a réussi à finaliser une commande en 1 à 3 minutes. Bien que les parcours empruntés aient été différents, tous ont atteint le même objectif, ce qui confirme une navigation globalement intuitive et fluide.
Manque de clarté sur certaines étapes du paiement
Besoin de simplification du tunnel de commande
Compréhension à améliorer pour les utilisateurs moins à l’aise avec le digital
Ces retours ont permis d’ajuster la structure des pages et de renforcer la lisibilité des informations clés.

RÉSULTATS/IMPACT

expérience optimisée et validée

Un site e-commerce fonctionnel, responsive et centré sur l’expérience utilisateur.
icon temps

< de 3 minutes

Finalisation d’un achat
icon validé

Navigation intuitive

Validée par les tests utilisateurs
icon parcours simplifié

Parcours simplifié

Moins d’étapes, moins de friction
icon responsive

100% responsive

Mobile, tablette et desktop

TESTS UTILISATEURS

Les tests ont permis de valider la compréhension du parcours et la fluidité de l’expérience.
Parcours d’achat compris rapidement
Navigation fluide malgré des chemins différents
Objectif atteint par l’ensemble des utilisateurs
Améliorations intégrées suite aux retours

IMPACT

Le design permet de structurer l’information et de mieux valoriser les produits.
Lisibilité améliorée
Hiérarchie visuelle claire
Expérience plus engageante

CONCLUSION

Ce projet démontre ma capacité à concevoir une expérience e-commerce complète, de la réflexion UX jusqu’à l’intégration.

CE QUE J’AI APPRIS

Ce projet m’a permis de renforcer mes compétences en UX
e-commerce et en intégration WordPress, notamment sur la personnalisation de WooCommerce.
Ce projet m’a permis de renforcer mes compétences en UX e-commerce et en intégration WordPress, notamment sur la personnalisation de WooCommerce.
Mentions légales
This is some text inside of a div block.
Button Text