Tikamoon

Une refonte conceptuelle immersive et optimisation UX UI de la page mobile “Salon” d’un site e-commerce.
Case study
E-commerce
UX UI Design
Mobile
Navigation
Outils
Logo FigmaLogo NotionLogo SEMRUSHLogo chat gpt
Année - Timeline
2025 - 1 semaine (Design Sprint)
Maquettes case study conceptuel tikamoon
Case study maquettes conceptuelles e-commerce
L'immersion pour engager la conversion

Understand

Contexte

Tikamoon est une entreprise qui vend des meubles en bois massif, singuliers et durables principalement via son site internet. Pour chaque pièce de la maison, une page est dédiée pour retrouver les catégories de meubles qu'on retrouve dans la pièce ainsi que d'autres catégories secondaires afin de donner à l'utilisateur tous les éléments nécessaires pour l'accompagner dans sa recherche et ses choix. J'ai choisi de me concentrer sur cette page essentielle qui regroupe beaucoup d'informations surtout au format mobile.

Visuels de la version originale

Un screenshot du haut de la page meuble du salon de tikamoon en version mobile.
Quand le user arrive  sur la page “Salon” version mobile
Un screenshot de la section les plus plébiscités de la page meuble du salon de tikamoon en version mobile.
Quand le user scroll la page, section “Les plus plebiscités”
Un screenshot du bas de la page meuble du salon de tikamoon avec les icônes des partenaires en version mobile.
Footer section “Partenaires" et “Newsletter”

Problème

Habituellement, la data est largement utilisée pour identifier des problématiques. Pour ce case study, je me suis basée sur ma propre expérience, mes observations et des interviews avec des utilisateurs tests, de nombreux pain points et erreurs ux sur la version mobile de la page "pièce salon" ont été identifiés. En voici quelques-uns :
Première impression non impactante
Pas de CTA au-dessus de la ligne de flottaison de la version mobile (Long texte, le user doit scroller pour comprendre ce qu'il peut faire)
Manque de hiérarchie visuelle
Titres manquants, boutons de formes, angles et couleurs différentes (difficile de distinguer les actions principales) et logos partenaires présentés dans des formats incohérents.
Page sans rôle stratégique dans le parcours utilisateur
Sans accès clair aux catégories secondaires ni immersion forte, elle peine à engager l’utilisateur, entraînant un taux de rebond élevé et une conversion réduite.
Accessibilité compromise
Utilisation de couleurs extrêmes (noir pur et blanc pur), de gris trop clair sur fond blanc pour des sous-titres et une quantité excessive de texte qui nuisent à la lisibilité et à l'harmonie visuelle.
Une navigation peu intuitive
Difficulté à accéder aux contenus secondaires (inspiration, guide d'achat) et une hiérarchie floue entre les boutons (formes et couleurs variées) rendant la navigation confuse.
Manque de cohérence avec l'image d'intemporalité et de prestige
L'interface ne reflète pas l'image de luxe et de durabilité (promesse de meubles pouvant durer 100 ans) que véhiculent Tikamoon.
Comment améliorer l’expérience de la page 'Meubles' de Tikamoon pour renforcer l’immersion, fluidifier la navigation et booster l’engagement et la conversion ?

Ideate

Brainstorming et Sketching

J'ai commencé par un brainstorming sur papier en regroupant les idées autour des différents problèmes identifiés sur la page « Meubles » et j'ai ensuite dessiné pour illustrer les solutions pour adresser ces problématiques.

Analyse concurrentielle

Parallèlement, j'ai mené une série d'audits concurrentiels pour étudier comment la navigation entre catégories principales et catégories secondaires était implémentée par les concurrents et dans divers domaines de l'e-commerce.

Dans de nombreux cas, il n'existait pas de page dédiée aux catégories  comme les pages "pièces" de chez Tikamoon. En effet, la plupart du temps le user accède directement à une liste de produits filtrages.

Un impact UX et business

Face à ces analyses et réfléxions, j'en suis venue à penser que, pour donner du sens à cette page, il était impératif de créer une expérience immersive. L'objectif : plonger l’utilisateur dans l’ambiance d’une pièce tout en lui donnant immédiatement accès aux catégories secondaires pour l’orienter efficacement et lui offrir des actions claires et immédiates.
Au-delà de l’expérience utilisateur, cette refonte visait aussi à optimiser les performances business de la page. Une immersion plus forte et une navigation plus intuitive devaient permettre de réduire le taux de rebond, d’augmenter les interactions avec les produits et, in fine, d’améliorer la conversion.
Une photo de wireframes low-fid en version papier avec crayon de papier montrant 3 écrans de propositions de solutions.
Mes wireframes low-fidelity avec l'émergence de plusieurs idées cherchant à intégrer l'immersion dans le design tout en permettant à l'utilisateur de naviguer via les catégories secondaires rapidement.

Valider et itérer

Après cette phase, j'ai réduit mes idées aux deux propositions les plus prometteuses, focalisées sur l'optimisation de l'expérience mobile et répondant le plus à la problématique :

Approche 1 :
immersive et vivante

L'objectif était de susciter une émotion chez l'utilisateur en le plongeant littéralement dans l'ambiance de la pièce, tout en affichant dès le départ les catégories secondaires afin de lui proposer des actions claires et immédiates. Le reste de la page avait pour but de mettre en avant les catégories secondaires comme un magazine virtuel.

Approche 2 :
simplicité et clarté

En positionnant la catégorie principale sous forme de carrousel pour permettre une indication claire des sous-catégories. Les catégories sont présentées via un visuel et un sous-titres pour indiquer au user les types de catégories rapidement.

Résultat final

J’ai réalisé un prototype cliquable en basse fidélité pour valider les choix de navigation et d’organisation, puis mené des tests d’usabilité auprès de proches sur la page « Meubles ».
Ces tests ont confirmé l’intérêt d’une barre de navigation sticky, positionnée « à hauteur de pouce » pour maximiser l’impact émotionnel de la vidéo immersive tout en assurant un accès rapide aux catégories. Le breadcrumb, également sticky, renforce la compréhension sur toutes les pages « pièce ».
L’amélioration de l’immersion a donné plus de sens à ces pages, incitant les utilisateurs à explorer davantage. Ce choix stratégique, validé par les tests, favorise l’engagement et optimise la conversion. Après plusieurs itérations, j’ai intégré ces ajustements dans Figma pour aboutir à une expérience hybride alliant immersion et fluidité.

Du concept initial à la version finale

Chaque ajustement a été guidé par les retours utilisateurs : amélioration de la navigation, immersion renforcée et parcours plus fluide. Découvrez comment ces évolutions ont transformé l’expérience.

Conclusion

Refonte UX de la navigation mobile : un équilibre entre identité de marque et performance

Ce projet m’a permis d’explorer le design UX/UI dans l’e-commerce, où marketing et identité de marque sont clés.Travailler sur mobile m’a poussée à optimiser l’espace et à repenser la hiérarchie de l’information pour une expérience plus fluide. En m’appuyant sur le framework du Design Sprint, j’ai pu avancer rapidement, structurer les itérations et tester efficacement mes solutions. De l’audit aux tests d’usabilité, j’ai mobilisé mes compétences en stratégie, design et marketing digital.Ce case study illustre ma capacité à concevoir des solutions alliant analyse, créativité et impact.
Haut de la page
Icon-arrown-up
Projet suivant

Contact