Durée
Side project 2025
Rôle
PrD Solo
Équipe
Projet personnel
Focus
UI Design, Architecture,
Micro-interactions
Overview
OverTrade est un projet personnel conçu pour démontrer mes compétences craft sur une app mobile d'investissement.
Basé sur mon expérience utilisateur, j'ai designé un parcours complet de l'onboarding à l'achat d'actions : clarté de l'information, fluidité des interactions, cohérence visuelle.
Objectif : prouver ma capacité à créer une interface moderne et engageante sur un sujet complexe.
1 - Context & Challenge
Le constat : interfaces surchargées, parcours complexes, informations financières peu lisibles. La complexité perçue du domaine financier se traduit souvent par une expérience intimidante.
Mon défi : concevoir une app d'investissement où l'achat d'actions est aussi simple qu'un achat e-commerce, sans sacrifier la profondeur d'information.
Les principes de design :
Clarté de l’information
Hierarchie visuelle forte
Données accessible en
un coup d’oeil
Fluidité des interactions
Actions rapides accessibles
Parcours optimisés
App
moderne
Design system cohérent
Interface épurée et
confiante
2 - Approach & Design process
N'étant pas une commande client, j'ai adopté une approche basée sur mon expérience personnelle d'apps financières (Revolut, Trade Republic, eToro).
Mon processus en 3 phases :
1. Analyse de l'existant
Audit de mes usages : trop de clics, actions peu visibles, hiérarchie confuse.
2. Architecture de l'information
Structure en 4 sections (Home, Portfolio, Explore, Settings) suivant les conventions du marché.
3. UI Design & Micro-interactions
Identité moderne (vert accent, espaces blancs, typographie claire) + détails soignés.
3 principes directeurs :
1. Hiérarchie visuelle claire
L'info prioritaire (soldes, variations, prix) visible en un coup d'œil.
2. Actions rapides accessibles
Les actions critiques (Deposit, Withdraw, Buy, Sell) à portée de main.
3. Cohérence et répétition
Patterns répétés : cards stocks, variations vert/rouge, graphiques minimalistes.
3 - User journey
Parcours utilisateur en 5 étapes clés :
Onboard → Connexion multi-options (Google, Email, Apple)
Homepage → Vue d'ensemble finances + actions rapides
Explore → Découverte via thèmes et tendances
Portfolio → Suivi investissements + métriques
Detail Stock → Analyse complète avant achat
Onboard
Login
Homepage
Vue finance
Explore
Découvrir
Stocks
Portfolio
Suivi
Invests
Detail
Analyser
Stock
Trade
Acheter
4 - Design et solution
Principe : rendre l'investissement accessible sans simplifier l'information.
Une app d'investissement doit inspirer confiance tout en restant engageante. Équilibre entre sérieux et modernité, densité et lisibilité.
4 piliers :
Clarté visuelle : hiérarchie forte, espaces blancs généreux, typographie lisible
Actions rapides : CTA accessibles, parcours courts, feedback immédiats
Cohérence : patterns répétés, conventions respectées, prévisibilité
Détails soigés : micro-interactions, états visuels, variations +/-
L'objectif : permettre à l'utilisateur de prendre des décisions d'investissement éclairées rapidement, sans friction ni confusion.
A - Onboarding experience
Histoire en 4 temps : splash screen impactant (vert signature) → 2 écrans product tour avec storytelling photo (plante + pièces = croissance) → connexion multi-options.
Résultat : en 15 secondes, l'utilisateur comprend la promesse et peut commencer. Pas de friction, pas de tutorial forcé.
L'onboarding crée une progression narrative : identité forte (splash) → promesse claire (dashboard) → croissance progressive (companion) → action immédiate (login).
B - Homepage
Le hub central : l'écran vers lequel l'utilisateur revient pour vérifier ses finances, agir rapidement, ou découvrir des stocks.
Défi : concentrer l'info pertinente sans surcharge visuelle. Actions critiques immédiatement accessibles
Solution : hiérarchie visuelle claire → gros chiffres pour les soldes, boutons contrastés, cards légères.
Screen 1 : Homepage principale
La homepage concentre l'essentiel :
soldes, actions rapides, découverte.
La hiérarchie guide naturellement l'œil vers les priorités. Les CTA sont différenciés par contraste : vert = déposer (positif), gris = retirer.
Screen 2 : Popular Stock
Depuis la homepage, accès à la liste complète des stocks populaires.
Chaque card affiche l'essentiel : logo reconnaissable, nom, ticker, prix, variation. Les flèches vert/rouge permettent de scanner rapidement les performances.
Screen 3 : Stock Notifications
Les notifications agrègent les news importantes par catégorie : market news, watchlist, dividendes.
Chaque news affiche les variations des stocks concernés directement dans la card. L'utilisateur reste informé sans quitter l'app.
C - Explore/Discovery - Découvrir les opportunités
Navigation flexible : thèmes de marché (Fintech, AI & Robotics, Cloud...), stocks trending, top movers.
L'utilisateur peut filtrer, chercher, explorer de manière non-linéaire. Les chips sont interactives et distinctes. Les mini-graphiques donnent un aperçu sans surcharger.
Screen 1 : Discover explore avec thèmes
L'écran Discover propose plusieurs chemins d'exploration.
Les thèmes de marché sont accessibles via des chips interactives. Les sections 'Trending' et 'Top movers' mettent en avant les opportunités du moment avec des indicateurs visuels clairs.
Screen 2 : État de recherche active
Lorsque l'utilisateur active la recherche, le focus est immédiat.
Les suggestions 'Trending today' restent visibles pour guider la découverte. L'état actif est visuellement clair.
D - Portfolio
Le tableau de bord financier : suivi investissements, performances, accès rapide aux positions.
Défi : présenter des données denses (valeurs, variations, graphiques) de manière digeste et actionnable.
La solution : plusieurs niveaux de densité selon le contexte (overview → balance → grid), graphiques minimalistes, actions directes.
Screen 1 : Portfolio Preview
La vue Portfolio affiche l'essentiel :
balance totale, buying power, accès rapide aux actions.
Les investissements personnels sont mis en avant dans des cards claires. Le mix 'My portfolio' + 'Popular stock' encourage la découverte.
Screen 2 : My Balance
La vue My Balance offre une visualisation graphique
de l'évolution du portfolio sur la semaine.
Le bar chart est minimaliste, en vert, avec des labels clairs. La 'Top watchlist' permet de suivre les stocks en surveillance.
Screen 3 : Vue grille complète
La vue grille affiche tous les investissements en format card.
Le layout 2 colonnes optimise l'espace tout en restant lisible. Chaque card est interactive et mène au détail du stock.
Screen 3 : Stock detail depuis portfolio
Le détail stock met l'accent sur la valeur actuelle et l'évolution.
Le graphique ligne est interactif avec tooltip. Les CTA 'Sell now' et 'Buy again' sont contextués à la position détenue.
E - Stock detail
L'écran de décision : analyse en profondeur avant d'acheter ou vendre.
L'info doit être exhaustive sans être écrasante : prix temps réel, graphique interactif, key stats, détails entreprise, earnings, analysis, news.
Le design guide la lecture de haut en bas, du général (prix) au spécifique (analyses).
Le CTA 'Trade now' reste sticky en bas.
Screens : Stock detail
La page détail stock offre une vue complète pour analyser avant d'investir.
prix → graphique → stats → company → earnings → analysis → news.
La structure est identique pour tous les stocks (Apple, Netflix...) seul le contenu change, créant une prévisibilité rassurante.
💡Note craft :
La répétition exacte de la structure (même layout, mêmes sections, même hiérarchie) pour tous les stocks démontre la cohérence du design system. L'utilisateur n'a pas à réapprendre l'interface à chaque stock analysé.
5 - Learnings
Le storytelling visuel crée l'engagement dès les premiers instants
Les 4 écrans d'onboarding avec métaphores photographiques ne sont pas que décoratifs. Ils construisent une narration qui positionne l'app et crée une connexion émotionnelle avant même la première interaction. C'est un parti pris assumé qui différencie OverTrade.
Designer sans contraintes réelles développe la créativité
Travailler sur un projet personnel sans contraintes business ou techniques m'a permis d'explorer des solutions purement centrées sur l'UX. Cette liberté m'a poussé à affiner ma vision du craft et à expérimenter des choix visuels forts.
L'importance de la cohérence dans les patterns
Sur une app à fort contenu informationnel, la répétition de patterns (cards stocks, variations, graphiques) crée une prévisibilité rassurante. L'utilisateur comprend rapidement comment naviguer et peut se concentrer sur ses décisions d'investissement.
Les micro-détails font la différence
Les variations +/- en vert/rouge, les états actifs/inactifs des chips, la hiérarchie typographique, l'espacement généreux, ces détails ne sautent pas aux yeux, mais leur cohérence crée une perception de qualité et de professionnalisme. C'est dans ces micro-décisions que se construit la crédibilité d'une app financière.
Personal project
OverTrade - Mobile App d'Investissement
Craft show : concevoir une expérience d'investissement fluide et accessible
