PRODUCT DESIGNER
PORTFOLIO / 2025
DISPONIBLE POUR UN
STAGE EN 2025
CONTACT@VICTORIANIABA.FR
(+33) 7 66 33 67 31
RESPIRE: Application de méditation
- DESIGN SYSTEM
- PROTOTYPAGE DE L’INTERFACE UTILISATEUR
- DESIGN D’INTERFACE UTILISATEUR (UI)
- FIGMA (LOGICIEL)
Présentation
Respire est une application de méditation pensée pour aider les gens à mieux gérer leur stress, se recentrer, et retrouver un certain équilibre mental au quotidien.
Elle propose des séances guidées et des exercices de respiration ou de relaxation, adaptés selon les besoins et les moments de la journée.
Client
Respire Studio
Année
2025
Contexte
J’ai imaginé ce projet dans l’idée de concevoir un produit complet autour duquel je pourrais construire un Design System solide.
C’était l’occasion pour moi de travailler à la fois sur l’aspect visuel, la logique de composants réutilisables, la cohérence de l’interface, et toute la structure nécessaire à une application qui pourrait évoluer dans le temps.
Problématique
Comment créer une interface à la fois claire, cohérente et flexible, dans un univers calme et apaisant comme celui de la méditation ?
L’enjeu était aussi de rendre le design facilement maintenable et réutilisable si plusieurs designers ou développeurs devaient s’en servir plus tard.
Rôle et mission
J’ai défini l’univers visuel de l’application et structuré un design system dans Figma, en créant des composants modulaires, un user flow clair, ainsi que des guidelines et specifications pour accompagner un éventuel handoff développeur.
Mon rôle a été d’assurer à la fois la cohérence graphique et la scalabilité du produit.
Résultat
Le projet m’a permis de poser les bases d’un Design System clair, modulaire et réutilisable, avec une vraie réflexion produit derrière.
L’interface est sobre et fluide, et tous les composants ont été pensés pour pouvoir évoluer facilement.
Ce projet m’a aussi permis de me challenger sur l’organisation, la rigueur, et la clarté dans la façon de transmettre mes intentions à d’autres membres d’une équipe.
Moodboard
Ce moodboard m’a servi de point de départ pour définir l’univers visuel de Respire.
Je voulais créer une ambiance à la fois calme, épurée et accessible, qui invite naturellement à ralentir, respirer et se recentrer.
identité visuelle
Pour l’identité visuelle de l’application, j’ai choisi la typographie SF Pro, reconnue pour sa lisibilité et sa flexibilité. Elle prend en charge un large éventail de tailles et de styles, ce qui permet d’avoir une lecture fluide et confortable sur l’ensemble des interfaces.
La couleur principale utilisée est un vert profond (#566422), appliqué aux éléments interactifs clés tels que les boutons d’action, afin d’assurer une hiérarchie visuelle tout en ayant un bon contraste sur fonds clairs.
UI kit
Un UI kit complet a été créé pour centraliser tous les éléments d’interface : boutons, icônes, composants interactifs, avec une réflexion sur la modularité et la réutilisabilité.
Ce travail assure la cohérence graphique et facilite la maintenance ou l’évolution future de l’application.
Persona
Pour guider la conception de l’interface, j’ai défini un persona principal, représentant un utilisateur type de l’application : une personne stressée par un rythme de vie soutenu, recherchant des outils simples pour se recentrer au quotidien.
Ce persona (Sophie Lemaire) m’a permis de garder en tête les besoins concrets des utilisateurs, comme la simplicité d’accès, la clarté des parcours et une ambiance visuelle apaisante.
Il a été central pour imaginer des flux et des contenus adaptés aux attentes réelles des utilisateurs de ce type d’application.
User flow
J’ai conçu un user flow structuré, qui décrit pas à pas le cheminement d’un utilisateur dans l’application Respire, depuis l’écran d’atterissage jusqu’aux différentes fonctionnalités clés (séances guidées, exercices de respiration, suivi quotidien…).
Ce travail m’a permis de clarifier les parcours, d’identifier les points d’entrée et de sortie, et de m’assurer que l’expérience soit fluide et intuitive pour les utilisateurs, quel que soit leur niveau de familiarité avec la méditation.
Sitemap
En parallèle, j’ai élaboré un sitemap clair, qui cartographie l’architecture générale de l’application : hiérarchie des pages, sections et sous-sections.
Le sitemap a permis de visualiser la structure globale de l’application et de vérifier que la navigation était simple.
Spécifications visuelles pour le handoff
Afin de faciliter la phase de développement, j’ai produit des spécifications visuelles détaillées directement dans Figma, grâce à un outil permettant de générer automatiquement des annotations précises sur les écrans.
Ces spécifications indiquent la typographie, les espacements, les couleurs, les tailles et les styles appliqués à chaque élément de l’interface, sous forme de repères clairs et lisibles.
L’objectif était de fournir aux développeurs une documentation prête à l’emploi, garantissant une mise en œuvre fidèle au design tout en optimisant la communication et le travail d’équipe.
