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.uivanessa.com 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 M 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 M. 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 M 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 M 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.

EUNO

Landing page & parcours de précommande

Projet de conception d’une expérience de précommande ludique et rassurante autour de l’apprentissage pour enfants.
Voir le site en direct
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, j'ai réalisé la landing page de précommande de Euno, un robot compagnon fictif. L'enjeu de ce projet UI était de créer une interface captivante et rassurante pour présenter ce produit intelligent, bienveillant et évolutif qui accompagne les enfants de la naissance à l’adolescence, tout en optimisant le tunnel de conversion pour les parents.

OBJECTIFS

de conception du projet

image pinceau (identité visuelle)
UI
Créer un univers visuel rassurant, aligné sur le robot.
image panier
UX
Garantir une navigation fluide et intuitive.
image commande
Contenu
Structurer et hiérarchiser les textes fournis.
image gâteau
Conversion
Placer des CTA stratégiques pour la précommande.

CIBLE UTILISATEUR

profils des utilisateurs cibles

Les parents,mais deux profils se dessinent :
image représentant un évènement

Les parents
"Sécurité & Éducation"

  • recherchent bienveillance, sécurite des données et pédagogie
  • Besoin de réassurance
Visuel doux et témoignages
image représentant une boussole

Les parents
"Tech & Innovation"

  • attirés. par le côté intelligent et évolutif du robot
  • recherchent les caractéristiques techniques
Interface fluide et simplicité de précommande

PROBLÉMATIQUES UX

comprendre le besoin utilisateur

Comment concevoir une interface rassurante et engageante pour inciter les parents à précommander le robot Euno ?
Comment hiérarchiser et épurer les textes sans surcharger l'utilisateur ?
Comment traduire graphiquement la bienveillance et la technologie du robot ?
Comment concevoir des CTA visibles et rassurants pour inciter à la précommande ?

SOLUTIONS

améliorations apportées

Structure claire
(UX)
image de l'horloge
Organisation des textes en blocs progressifs, aérés et déclinés en listes déroulantes pour simplifier la lecture rapide.
Identité
rassurante (UI)
image représentant la hiérarchie
Charte graphique déclinée des couleurs du robot, avec des formes arrondies et douces évoquant la technologie et l'enfance
Optimisation
de la conversion
image représentant une bonne ambiance
Placement stratégique de CTA visibles et intégration de blocs de réassurance pour déclencher la précommande

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
  • Personnalisation via HTML / CSS

OUTILS UTILISÉS

Figma
WordPress
HTML
CSS

PROCESSUS DE CONCEPTION

approche ux/ui du projet

01

Recherche & benchmark

Analyse d'éléments et de sites déjà existants.

Produits tech & objets connectés

flèche
Observation : Anayse et décodage des codes visuels.
flèche
Tendances : Analyse des usages et codes de cet univers.
Innovation : Valorisation du positionnement novateur du robot.
capture d'écran du site besties bakery

Recherche de UI patterns

Benchmark : Analyse de landing pages de précommande sur Dribbble et Behance.
Composants : Conception d'éléments modernes, fluides et efficaces.
capture d'écran du site La Maryse

Boutiques & Éducation Jeunesse

Recherche : Exploration des codes graphiques rassurants pour les parents.
DA : Utilisation de typographies rondes et de teintes douces.
Iconographie : Sélection de visuels simples et bienveillants.

02

Wireframes (Figma)

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

DESKTOP / Page de précommande & FAQ
Wireframe du catalogue des produits en desktop
MOBILE / Page de précommande & FAQ
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

Design final responsive

Conception de l’interface en haute fidélité adaptée au mobile et au desktop.

05

Intégration WordPress

Création du site sous Elementor en respectant fidèlement les maquettes UI.

USER FLOW

un chemin utilisateur simplifié

Accueil
Précommande
Clique sur le CTA
Message de confirmation
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

L’intention de design était de concevoir une interface oscillant entre un univers technologique innovant et une approche humaine, douce et rassurante. À travers une information rigoureusement structurée avec une hiérarchie visuelle forte, l'architecture a été pensée pour instaurer un climat de confiance, propice à la conversion.

PALETTE DE COUELURS

#F5EBE0
Background
#EBCCA6
Hover
#CFA06D
Primary / CTA/ Footer
#020101
Text
Une palette orangée et chaleureuse pour créer un climat de confiance avec les parents, tout en s'harmonisant avec l'univers visuel du robot.

TYPOGRAPHIE

Coolvetica

Typographie sans-serif utilisée pour les titres (H1, H2 ,H3).
Elle apporte un caractère fort, contemporain et percutant aux titres.

Aa Bb Cc

OUTFIT

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

Aa Bb Cc

HIÉRARCHIE UI

DESKTOP
H1 3rem
Titre principal de la page
H2 2.25rem
Titre de section
H3 1.75rem
Sous-section
Body 1rem / Regular
Texte courant pour les paragraphes…
CTA / Button 1rem
Bouton principal
MOBILE
H1 2.25rem
Titre principal de la page
H2 1.75rem
Titre de section
H3 1.5rem
Sous-section
Body 0.875rem / Regular
Texte courant pour les paragraphes…
CTA / Button 1rem
Bouton principal

COMPOSANTS UI

BOUTONS
primaire
.
secondaire
NORMAL
Bouton
Bouton
DÉSACTIVÉ
bouton principal désactivé
primaire
secondaire
DÉSACTIVÉ
primaire
bouton primaire désactivé
secondaire
bouton secondaire désactivé
Le bouton principal plein (#CFA06D) capte immédiatemet l'attention pour guider l'utilisateur vers l'action prioritaire, tandis que le bouton secondaire en contour (outline) propose un choix alternatif sans surcharger la page. Leurs coins arrondis apportent de la douceur, renforcent le côté chaleureux du site et améliorent l'affordance tactile sur mobile.
MENU DÉROULANT (DROP DOWN)
image d'une carte produit
Liste déroulante des caractéristiques du Robot Euno : intégrée pour regrouper un contenu technique dense, elle structure l'information, évite le surchargement visuel de la page et permet à l'utilisateur de consulter les détails à son rythme.
FORMULAIRES
Conception d’un formulaire épuré intégrant des champs de saisie espacés, des menus déroulants, une case à cocher de consentement RGPD.

L’organisation claire des éléments et l’utilisation d’étiquettes explicites réduisent la charge cognitive.

Le parcours s'achève sur un bouton d'envoi, garantissant une interaction fluide, conforme et rassurante jusqu'à la validation.
image du formulaire
NAVIGATION
image de la barre de navigationheader du site version mobile
Conception d'une navigation simplifiée et affirmée pour capter l'attention et guider l'utilisateur. L'architecture repose sur un menu textuel aligné à droite, composé de lettres en capitales dans une teinte orange vive et au style gras pour un impact visuel fort. La lisibilité maximale et le positionnement intuitif des éléments réduisent la charge cognitive, garantissant un repérage fluide au sein de l'interface.

MAQUETTES UI

mockups

Cette section présente les maquettes finales du site EUNO 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 met immédiatement en valeur le robot dès l’en-tête, soutenu par un call-to-action stratégique pour inciter à l'action. L’alternance des formats de présentation apporte du rythme visuel et maintient l’engagement de l'utilisateur tout au long de la page. Cette hiérarchisation dynamique des contenus capte l'attention, facilite la découverte du produit et guide naturellement vers la conversion.

PAGE PRÉCOMMANDE /  FAQ

page produit mobile
page produit desktop
Une disposition en deux colonnes pour rassurer et inciter à l'action sur un même écran. À gauche, la FAQ répond directement aux questions fréquentes. À droite, le formulaire de commande permet d'acheter sans attendre. En plaçant la réassurance juste à côté de la commande, on lève les hésitations et on simplifie le passage à l'acte.

PAGE CONTACT

page panier mobile
page panier desktop
Une disposition en deux colonnes sur desktop pour proposer deux modes de contact complémentaires. À gauche, un formulaire permet d'envoyer un message rapide. À droite, l'e-mail et les coordonnées offrent un accès direct. Cette double entrée simplifie la prise de contact en s'adaptant aux préférences de l'utilisateur.

DÉFIS RENCONTRÉS

contraintes techniques et ux

Le principal défi a été d’organiser et de structurer l’ensemble des contenus textes et visuels fournis, afin de maintenir l’engagement de l’utilisateur tout au long de sa navigation. Il a fallu composer une identité visuelle équilibrée avec une typographie et des couleurs adaptées à l'univers de l'enfance et de l'éducation, tout en affirmant le côté moderne et technologique du produit.

Un autre enjeu de taille a été d'élaborer une interface claire et rassurante pour les parents. L'objectif était de rendre les informations immédiatement intelligibles et de concevoir des points de contact visuels forts pour inciter naturellement à l'achat.

Structuration dynamique des contenus
Identité visuelle éducation & tech
Design rassurant pour les parents
Incitation naturelle à l'achat

RÉSULTATS/IMPACT

expérience optimisée et validée

Une landing page fonctionnelle, responsive et optimisée pour la commande du robot éducatif Euno.
icon temps

Navigation fluide et intuitive

Structure épurée
icon validé

Parcours d'achat sans friction

CTA bien visibles
icon parcours simplifié

Interface rassurante

Couleurs et mise en page adaptées
icon responsive

100% responsive

Mobile et desktop

AMÉLIORATIONS

points à revoir

Optimisation de la newsletter : Remplacer le formulaire de newsletter natif par une intégration Mailchimp pour automatiser la gestion des contacts.
Accessibilité et contrastes UI : Ajuster le fond du bouton principal (CTA) avec une teinte plus sombre pour garantir un contraste optimal et la lisibilité du texte blanc.
Micro-interactions et états de survol : Définir des états hover plus marqués (fond clair par défaut, plus foncé au survol) pour renforcer le feedback visuel au clic.
Validation terrain (Tests UX) : Conduire des tests utilisateurs pour identifier les points de friction restants et affiner le parcours de conversion.
Adaptation tablette : Déclinaison des grilles et des composants interactifs pour les écrans intermédiaires.
Wireframeshaute fidélité : Proposer un rendu visuel proche du prototype final pour simuler l'expérience utilisateur réelle.

CONCLUSION

Ceprojet démontre ma capacité à concevoir une landing page ciblée, de la réflexion UX jusqu'au parcours de conversion.

CE QUE J’AI APPRIS

Ceprojet m’a permis de renforcer mes compétences en structuration de contenu et en conception d'interfaces orientées conversion, tout en créant une identité visuelle cohérente.
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

EUNO

Landing page & parcours de précommande

Projet de conception d’une expérience de précommande ludique et rassurante autour de l’apprentissage pour enfants.
L’étude de cas détaillée de ce projet est en cours de rédaction et sera disponible très bientôt.
Mentions légales
This is some text inside of a div block.
Button Text