Projet PowerOFF
PowerOFFLogiciel - UX/UI Design

PowerOFF

Site en ligne
Rôle
  • Designer D'interface
Durée
  • 1 semaine
Coéquipiers
  • Thomas P. (Développeur)
Outils
  • Figma
  • .NET Framework
  • GitHub

À propos du projet

PowerOFF est un utilitaire léger et open source qui permet aux utilisateurs de programmer facilement un arrêt automatique sous Windows. Avec une interface épurée et sans distractions inutiles, PowerOFF se concentre sur une seule tâche, et la réalise parfaitement.

J’ai abordé PowerOFF en cherchant à transformer une action technique et peu intuitive en une interface simple et immédiatement compréhensible.

Aperçu

Le problème

De nombreux utilisateurs ont besoin de programmer l'arrêt de leur PC, mais les solutions existantes sont souvent trop complexes, encombrées de publicités ou difficiles à configurer. Il était nécessaire de disposer d'une application simple, légère et intuitive pour automatiser cette tâche sans distraction.

Le défi

Créer une application minimaliste et rapide qui permette aux utilisateurs de programmer l'arrêt de leur ordinateur en quelques clics, tout en restant très légère pour le système et dépourvue de fonctionnalités inutiles. L'objectif était d'allier simplicité, efficacité et fluidité de l'expérience utilisateur.

Chronologie

Research
Analyse des utilisateurs
Design
Brainstorming (Concepts explorés), Wireframes basse fidélité, Visual Design
Prototype
Haute fidélité

Research

Analyse des utilisateurs

User Analisys Applications too complex Unnecessary features slowing things down Ads and distractions Patterns in user actions Moments of hesitation and flow Habits that reveal true priorities Clean and clear interface Focus on what really matters Smooth and enjoyable experience Inspiring UX trends Areas for improvement identified Friction points immediately visible Simplicity above all Quick to understand and use Efficiency in every click Insights Needs Opportunities Behavior Frustrations

Design

Brainstorming (Concepts explorés)

Objectif

Explorer plusieurs orientations visuelles pour PowerOFF, en gardant la simplicité au centre.

Concept 1 — Priorité au temps

Concentrons-nous sur la fonctionnalité principale : la planification.

  • Interface centrée sur le temps
  • Design clair et fonctionnel
  • Navigation rapide

    • (Couleurs : bleu clair, gris neutre)

Concept 2 — Contrôle minimal

Mettre l'accent sur la simplicité et la concentration.

  • Seuls les éléments essentiels
  • Beaucoup d'espace blanc
  • Aucune distraction visuelle

    • (Couleurs : blanc, gris clair, accents bleus)

Concept 3 — Carte moderne

Créez une expérience élégante et contemporaine.

  • Disposition sous forme de cartes
  • Typographie en gras
  • Contraste élevé et lisibilité

    • (Couleurs : gris foncé, turquoise, noir)

Wireframes basse fidélité

Screen 1
Screen 2
Screen 3

Design Visuel

PowerOFF Screenshot 1 PowerOFF Screenshot 2 PowerOFF Screenshot 3

Ce projet m’a permis d’explorer une UI ultra-minimaliste où chaque décision vise à réduire l’effort mental et rendre l’utilitaire évident à utiliser.

Projet Revive
ReviveApplication mobile - UX/UI Design

Revive

Voir le prototype
Rôle
  • Directeur Artistique — UX/UI Designer & Design system
  • Branding & création du logo
  • Illustrations & écoconception
Durée
  • 1 semaine
Coéquipiers
  • Projet individuel
Outils
  • Figma
  • Illustrator
  • Photoshop

À propos du projet

Revive est une application mobile dédiée à l’achat de smartphones reconditionnés, pensée pour rendre la consommation responsable accessible et désirable.

J’ai voulu rendre l’achat de produits reconditionnés aussi simple, fiable et désirable que celui du neuf, en donnant enfin aux utilisateurs la transparence et la confiance qu’ils n’ont jamais eues sur ce marché.

Aperçu

Le problème

Le marché du reconditionné manque de clarté : difficile de connaître l’origine d’un appareil, les réparations effectuées ou la fiabilité d’un atelier. Résultat : une forte hésitation avant l’achat.

Le défi

Créer une app mobile qui inspire confiance grâce à une présentation simple, écologique et transparente de l’information. Objectif : réduire les frictions, améliorer la lisibilité, et fluidifier le passage à l’achat.

Chronologie

Research
Analyse marché du reconditionné, Analyse utilisateurs, Problème & opportunités
Concept, Branding & Final UI
Brainstorming (Concepts explorés), Architecture & flows, Identité visuelle (Color System, Logo), Text Styles, UI Kit, Écrans clés haute-fidélité
Prototype
Prototype complet, Tests utilisateurs, Itérations finales

Research

Analyse marché du reconditionné

Contexte

Le marché du reconditionné est en pleine croissance, mais souffre d’un manque de transparence.

Les utilisateurs n’ont pas accès à l’origine des appareils, aux réparations effectuées ni aux ateliers certifiés.

Constats clés

Fiches produit très variables selon les vendeurs

Aucune traçabilité standardisée

Comparaison des offres difficile

Enjeux du secteur

Renforcer la confiance

Simplifier la compréhension de l’état réel

Valoriser les ateliers certifiés

Conclusion

Le marché mise sur le prix, mais ce que les utilisateurs recherchent réellement, c’est la confiance et la transparence.

Analyse des utilisateurs

Insights

Besoin de transparence totale avant l’achat

Importance du score écologique si présenté clairement

Méfiance envers les ateliers inconnus

Motifs observés

Difficile de comparer deux appareils reconditionnés

Informations essentielles dispersées

Hésitation provoquée par l’incertitude sur la qualité

Fonctionnalités attendues

Filtrage : état, prix, CO₂, distance atelier

Historique complet de l’appareil

Garanties visibles et compréhensibles

Opportunités

Créer une interface calme et écologique

Mettre les ateliers certifiés au premier plan

Rendre la traçabilité pédagogique et simple

Contraintes / objections

Éviter la surcharge d’informations techniques

Assurer une performance optimale

Simplifier sans perdre en précision

Problème & opportunités

Problème principal

Le manque de transparence crée un doute constant, freine l’achat et rend l’expérience moins fluide. Les utilisateurs veulent consommer responsable, mais uniquement si la fiabilité est démontrée.

Opportunités

  • Remettre la transparence au centre du parcours
  • Afficher clairement la traçabilité et l’impact CO₂
  • Simplifier la comparaison entre produits
  • Moderniser l’expérience reconditionnée
  • Créer une identité visuelle écologique et rassurante

Design

Brainstorming (Concepts explorés)

🎯 Objectif

Explorer différentes manières de rendre l’achat reconditionné plus lisible, plus écologique et plus rassurant, sans complexifier l’expérience mobile.

Concept 1 — Transparence radicale

Afficher l’historique complet du produit.

  • Traçabilité lisible
  • Ateliers certifiés
  • Garantie visuelle
Concept 2 — Écoconception

Interface calme, moderne et écologique.

  • Palette naturelle
  • Éléments respirants
  • Impact CO₂ mis en avant
Concept 3 — Filtres intelligents

Simplifier la comparaison.

  • CO₂, état, distance
  • Classements clairs
  • Mode carte / liste
Résultat

Le concept final combine : transparence + écoconception + filtres intelligents.

Architecture & flows

L’architecture mobile a été pensée pour réduire les frictions et mettre en avant l’information essentielle.

Flow complet :
Onboarding → Localisation → Marketplace → Fiche produit → Configuration → Checkout → Confirmation

Image userflow

Identité visuelle (Color System, Logo)

L’identité Revive repose sur une palette écologique, un logo inspiré de la circularité et des surfaces calmes.

Color System
Color Palette

Palette naturelle & moderne.

  • Forest Green — confiance
  • Mint Green — accessibilité
  • Bright Green — actions
  • Deep Black — contraste
  • Organic White — lisibilité
Logo
Logo Revive

Symbole de circularité & continuité.

  • Formes douces
  • Mouvement & cycle
  • Éco-responsabilité

Text Styles

Revive utilise Segoe UI Variable pour garantir une lisibilité optimale et une cohérence native sur toutes les plateformes. Les styles sont organisés autour d’une hiérarchie claire.

Titres
H1 — Titre page
Titre de page
32 / 40 — Segoe UI Variable — Bold Display
H2 — Section
Titre de section
24 / 32 — Segoe UI Variable — Regular Small
H3 — Sous-section
Sous-section
20 / 28 — Segoe UI Variable — 500
Corps & Aides
Texte normal
Le texte principal utilisé dans l’interface.
16 / 24 — Regular
Légendes / Aides
Texte de légende ou informations secondaires.
12 / 16 — Weight 300
Badge
Nouveau
12 / 16 — Weight 500
Inputs & UI Components
Label champ (formulaire)
Label du champ
14 / 20 — Weight 500
Input Value
Valeur saisie
16 / 24 — Regular
Placeholder
Placeholder
16 / 24 — Weight 300
Bouton CTA
Appeler l’action
16 / 24 — Weight 700

UI Kit

Tous les composants ont été construits pour garantir une cohérence visuelle et une utilisation intuitive sur mobile.

UI Kit
Composants inclus
  • Boutons (primaires, secondaires)
  • Inputs & selects
  • Cards produit
  • Chips & filtres
  • Tabs navigation
  • Snackbars & statuts
  • Éléments checkout

Écrans clés haute-fidélité

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8 Image 9 Image 10 Image 11 Image 12 Image 13 Image 14 Image 15 Image 16 Image 17 Image 18 Image 19 Image 20 Image 21

Design Visuel

Revive Screenshot 2 Revive Screenshot 3 Revive Screenshot 4 Revive Screenshot 7

Avec Revive, l’économie circulaire devient une expérience accessible, claire et engageante — une manière plus responsable de consommer la technologie, sans compromis sur la qualité ou la simplicité.

Projet Ovact
OvactAI ChatBot - Product & Brand Design

Ovact

Site en ligne
Rôle
  • Directeur Artistique — Product Designer — UX/UI
Durée
  • 3 mois
Coéquipiers
  • Thomas P. (Développeur), Psychologues
Outils
  • Figma
  • Discord (Gestion de projet)
  • Python (analyse IA)

À propos du projet

Ovact est une plateforme utilisant l’IA pour analyser et visualiser l’évolution émotionnelle de patients suivis en santé mentale. Mon rôle : structurer la recherche utilisateur, concevoir un dashboard simple et clinique, et créer un Design System cohérent pour accélérer le développement.

Sur Ovact, j’ai cherché à transformer un signal émotionnel complexe en une interface fiable, claire et interprétable par les professionnels.

Aperçu

Le problème

Les professionnels de santé mentale disposent d’informations émotionnelles dispersées (notes, discussions, questionnaires). Difficile d’avoir une vue globale, d’identifier les ruptures d’humeur et de comparer les sessions entre elles.

Le défi

Créer un dashboard capable de traduire l’analyse IA en visualisations accessibles, compréhensibles et utiles en contexte clinique, sans surcharge cognitive.

Chronologie

Research
Analyse utilisateurs, Parcours actuel, Problèmes / pain points
Design
Brainstorming (Concepts explorés), Wireframes avancés, Design system / UI kit, Design Visuel
Prototype
Tests utilisateurs, Interface finale / dashboard

Research

Analyse des utilisateurs

Insights

Difficulté à synthétiser les séances

Besoin de repères visuels fiables

Importance des signaux faibles

Motifs observés

    Notes dispersées dans plusieurs outils

    Aucun historique structuré

    Peu de support commun entre séances

Fonctionnalités attendues

    Timeline émotionnelle

    Vue synthétique d’évolution

    Alertes en cas de rupture émotionnelle

Opportunités

    Centraliser toutes les données

    Compare facilement les semaines

    Lecture clinique simplifiée

Contraintes / Objections

    L’IA doit rester interprétable

    Interface neutre et non alarmiste

    Éviter toute surcharge visuelle

Parcours actuel

Comment ça se passe aujourd’hui

Les professionnels suivent leurs patients à partir de notes prises pendant les séances, de documents dispersés ou de comptes rendus stockés à différents endroits. Les informations émotionnelles sont textuelles, non structurées et difficiles à comparer.

Le suivi repose sur la mémoire du thérapeute, sans véritable vue d’ensemble permettant d’identifier clairement les évolutions ou ruptures émotionnelles.

Pain points

  • Pas de vue globale sur l’évolution émotionnelle
  • Difficile de comparer les séances entre elles
  • Perte de temps à reconstituer l’historique
  • Signaux faibles ou ruptures peu visibles
  • Interprétation subjective ou incomplète

Design

Brainstorming (Concepts explorés)

Objectif

Explorer plusieurs façons de représenter l’évolution émotionnelle afin d’identifier l’approche la plus adaptée aux professionnels de santé. L’enjeu principal : trouver un équilibre entre précision, sobriété et lisibilité clinique.

Concept 1 — Courbes multi-émotions

Mettre l’accent sur une lecture analytique complète de toutes les émotions au fil du temps.

  • Vision détaillée des variations émotionnelles
  • Lecture précise pour les cas complexes
  • Permet d'observer plusieurs courbes simultanément

    • (Couleurs : bleu froid, rose neutre, gris analytique)

Concept 2 — Timeline simplifiée

Simplifier la lecture en offrant une vue chronologique directe et accessible en séance.

  • Lecture instantanée
  • Charge cognitive minimale
  • Idéal pour un usage clinique rapide

    • (Couleurs : gris clair, vert doux, bleu calme)

Concept 3 — Indicateur global + détails

Présenter une synthèse émotionnelle claire, puis permettre d’accéder au détail en un geste.

  • Très accessible au premier regard
  • Vue détaillée disponible en approfondissement
  • Représentation épurée

    • (Couleurs : gris foncé, turquoise, jaune doux)

Résultat

La Timeline simplifiée a obtenu la meilleure compréhension immédiate lors des tests. Les professionnels ont préféré compléter cette vue par une analyse détaillée secondaire pour approfondir les variations émotionnelles.

Analyse des utilisateurs

J’ai directement exploré des wireframes avancés afin de valider rapidement l’ergonomie, la hiérarchie de l’information et les comportements interactifs. Ces écrans couvrent les scénarios clés : messagerie, inscription, gestion d’erreur et bascule clair / sombre.

L’objectif était d’obtenir une vision concrète de l’expérience utilisateur avant la phase UI finale, tout en garantissant lisibilité, accessibilité et neutralité émotionnelle.

Wireframe chat sombre Wireframe chat clair Wireframe chat expand sombre Wireframe chat expand clair Wireframe chat fill sombre Wireframe chat fill clair Wireframe inscription base clair wireframe inscription base sombre Wireframe inscription erreur clair Wireframe inscription validé clair
Ce que cela m’a permis de tester
  • Mode clair / sombre : importance d’un contraste stable et d’une hiérarchie identique dans les deux thèmes.
  • États du code de confirmation : exploration des statuts neutres, corrects, incorrects et incomplets de manière non anxiogène.
  • Comportement du chat : tests de lisibilité des bulles selon longueur du message, alignement, espacement et rythme visuel.
  • Guidage utilisateur : les écrans d’inscription montrent que les étapes doivent être claires, progressives et rassurantes.
  • Préparation du Design System : ces wireframes ont permis de stabiliser la logique visuelle avant la création des composants UI.

Design system & UI kit

Le Design System a été construit autour des composants essentiels du produit : boutons, champs de saisie, gestion des codes de confirmation et bulles de conversation. Chaque élément a été décliné en mode clair et sombre afin de garantir une lisibilité cohérente dans tous les contextes d’usage.

L’objectif était de définir une base stable permettant d’assurer la cohérence visuelle, la neutralité émotionnelle et la simplicité d’utilisation, tout en facilitant l’itération future sur le produit.

Composants
Ce que cela m’a permis de définir
  • Composants essentiels : boutons, champs de saisie, zones de texte, bulles de message et champs de code.
  • États clairs des interactions : normal, actif, focus, erreur, succès.
  • Neutralité émotionnelle : éviter les couleurs anxiogènes pour un produit lié à la santé mentale.
  • Mode clair et sombre : ajustement des contrastes pour garantir une lecture stable et accessible.
  • Fondations pour l’évolution du produit : ces composants serviront de base pour l’ensemble du futur dashboard.

Design Visuel

Ovact Screenshot 1 Ovact Screenshot 1 Ovact Screenshot 1

Avec ces fondations, Ovac­t dispose désormais d’un langage visuel cohérent prêt à accueillir les prochaines fonctionnalités du produit.

Projet Kerat
KeratPublicité - Design Graphique

Kerat

Retro-modern haircare brand blending 1960s nostalgia with contemporary design, featuring nourishing cream shampoo in reusable pop-art inspired packaging.

  • Art Direction
  • Logo Design
  • Branding
  • Packaging Innovation
  • Marketing
  • Pop Art Inspiration
Kerat Screenshot 1 Kerat Screenshot 2 Kerat Screenshot 3 Kerat Screenshot 4
Projet Fondation Chistian Poncet
Fondation Chistian PoncetLanding Page - UX/UI & Brand Design

Fondation Chistian Poncet

Nonprofit foundation dedicated to advancing research and support for early-onset Alzheimer's, raising awareness and funding to improve diagnosis, care, and hope for affected families.

  • Art Direction
  • UX Research
  • UI Design
  • Interaction Design
  • Logo Design
  • Branding
Visit the website
Projet Slowtravel
SlowtravelSite web de conciergerie de voyage - UX/UI & Brand Design

Slowtravel

Premium travel concierge service crafting bespoke journeys with private advisors, local partnerships, and curated slow-travel experiences for authentic, unforgettable adventures.

  • Art Direction
  • Luxury Travel Design
  • Experience Personalization
  • UX/UI Design for Hospitality
  • Brand Strategy
Projet Enfants du monde
Enfants du mondeApplication mobile - UX/UI & Brand Design

Enfants du monde

Humanitarian platform connecting donors to life-changing projects for vulnerable communities, offering transparent impact tracking and personalized stories to drive global support.

  • Art Direction
  • UX Research
  • UI Design
  • Interaction Design
  • Storytelling
enfant Screenshot 1 enfant Screenshot 2 enfant Screenshot 3 enfant Screenshot 4 enfant Screenshot 5 enfant Screenshot 6
© BRACAVAL 2025

On discute ?

Laissez-moi votre message et je vous répondrai au plus vite.