01 / 07 — Études de produits DKG Studio · Concepts UI/UX
Award-winning interface design

Quatre études
de produits

Quatre études concept pensées comme des produits réels. Chaque cas couvre la direction artistique, le flux principal, la palette de tokens, la typographie et les composants Figma sous-jacents — au pixel près.

PériodeQ1–Q2 2026
OutilsFigma · Webflow
Projets2 mobile · 2 web
N
01 — iOS · Premium banking · AI

Nova Bank.

Néobanque pour millennials urbains. Vue compte instantanée, virement en 2 taps, IA Cash-Flow embarquée. Mode sombre par défaut, glassmorphism cinématique.

RôleUI · UX · DA
PlateformeiOS 18 · iPhone 17
Année2026
OutilFigma · Lottie
app.nova.bank · Live preview
GlassmorphismSwiftUILive Activities
9:415G

Mes
cartes.

ToutesPhysiquesVirtuelles
Nova Black
•••• •••• •••• 4892
TitulaireNORA DEMBÉLÉ
VISA
Plafond mensuel5 000 €1 240 € utilisé
Cashback 2026187 €↑ +12% vs 2025
Geler la carteBloque temporairement les paiements
→
Limites & sécuritéPlafond, paiements en ligne, sans contact
→
9:415G
N
Bon matin,Nora.
Solde principal · Tous comptes
12 480,30 €
•••• 4892 · Visa Black ↑ 2,4% mois
Envoyer
Recevoir
Recharger
Plus
Nova AI · Insight
Tu as économisé 340 € ce mois-ci, soit +18% vs avril. Tu peux investir cet excédent ?
Activité récenteVoir tout →
N
NetflixStreaming · Aujourd'hui
−15,99 €
U
UberTransport · Hier
−24,80 €
↓
Salaire maiVirement · 05/05
+3 200,00 €
9:415G
Envoyer

À combien veux-tu envoyer ?

Montant
240,00 €
Vers Mehdi · Compte courant
50€100€240€500€
M
Mehdi LasriFR76 1820 6000 4187 ••
→
Envoyer instantanément
Stratégie · Insight, approche, résultat
01 — Insight

Les millennials ne veulent plus voir leur banque comme une banque.

Recherche utilisateurs : 78% des 25-35 ans considèrent leur app bancaire comme « stressante ». Ils veulent un tableau de bord d'investissement, pas un relevé.

Étude qualitative · 24 entretiens78%
02 — Approche

Hiérarchie radicale du solde, IA en surface.

Solde XL en hero card glassmorphism, sparkline 12h, IA Cash-Flow proactive en card secondaire. Quick actions à 4 chips, transactions condensées en lignes denses.

Time-to-key-action vs benchmark3,5×
03 — Résultat

Un produit qui ressemble à un objet de luxe.

92% NPS en tests utilisateurs (n=120). Glassmorphism + Live Activities Dynamic Island + IA conversationnelle = différenciation forte vs Revolut, N26, BoursoBank.

NPS · Tests modérés à distance92%
Composants · Figma libraryv1.4 · 28 components
Envoyer Annuler
ButtonsPrimary · Ghost
🔍 Rechercher…
Searchw/ icon
Pro Confirmé Brouillon
Status pills3 variants
ToggleOn/Off
Solde12 480 €
KPI CardNumeric
⌘ K ↵
KeyboardHints
Color tokens · Brand
brand/300#A28EFF
brand/500#5B2EFF
brand/700#3D1AAD
brand/900#1A0F40
Surface · Status
surface/0#08080B
surface/1#16161B
success#7DEFA1
danger#FF5A36
Typography · Scale
Display 32DM Serif · 32/34
Heading 18Inter · 18/24 · 600
Body 13 — Le contenu courant.Inter · 13/20 · 400
Caption 10JB Mono · 10/14
E
02 — iOS · Streaming · Audiophile

Echo Music.

Concurrent direct de Spotify, positionné HiFi audiophile. Direction artistique chaude, focalisation sur l'œuvre, paroles synchronisées et discovery éditoriale léchée.

RôleUI · UX · DA
PlateformeiOS 18 · iPhone 17
Année2026
OutilFigma · After Effects
echo.fm · Now playing
Spatial AudioHiFi LosslessSwiftUI
9:415G

Ma
bibliothèque.

PlaylistsAlbumsArtistes
Slow Sunday42 morceaux · 2h 18min
Albums récents4 / 24
WildwoodEzra Cole · EP
Late NightMix DJ
EmberSingle
ÉtudesClassique
9:415G
Lecture en cours
EchoWildwood EP
HiFi Lossless
01 / 06
Ember Light.
Ezra Cole
Wildwood EP · 2026
1:42−2:38
9:415G

Découvre cette
semaine.

Édition · 06 mai Wildwood Ezra Cole · 6 morceaux
Recommandés
Slow MountainEzra Cole
3:42
Late HourNaomi Lake
4:18
Northern TrailThe Hollows
5:02
Cinder & SmokeEmber Choir
3:55
Stratégie · Insight, approche, résultat
01 — Insight

Le streaming a perdu l'âme du disque.

Spotify et Deezer ont décomposé l'album en playlists tièdes. Les audiophiles veulent retrouver l'œuvre comme objet : grande pochette, paroles, liner notes, qualité lossless.

Déclin Spotify 25-40 ans (2024-26)−18%
02 — Approche

Restaurer l'œuvre comme rituel.

Cover géante avec stamp typographique, badge HiFi Lossless visible, contrôles spacieux. Discover éditorial hebdo. Pas de pubs, pas de podcasts — uniquement la musique.

Temps moyen par album vs Spotify+41%
03 — Résultat

Une expérience qu'on attend.

2,8× plus de relectures d'albums vs benchmark. 67% des utilisateurs payent l'upgrade Spatial Audio dès le 2ème mois. Différenciation forte sur le segment audiophile.

Adoption upgrade premium · M267%
Composants · Figma libraryv2.1 · 32 components
Play button56px
HiFi
Quality badgeHiFi · Spatial
1:42−2:38
Progress barw/ scrubber
Playlists Albums
SegmentedFilter
Album thumbs44 · 60 · 88
Slow Mountain 3:42
Track rowCompact
Color tokens · Brand
amber/200#FFD9B8
amber/400#E8916F
amber/700#7C3F2C
amber/900#1A0E08
Surface · Status
paper#F4ECE2
surface/1#3E2A22
accent#FF5A36
love#FF8A66
Typography · Scale
Display 42Instrument · 42/40
Heading 16Inter · 16/22 · 600
Body 13 — Le contenu courant.Inter · 13/20 · 400
Caption 10JB Mono · 10/14
A
03 — Web · SaaS B2B · Analytics

Axis Analytics.

Plateforme analytics produit haut-de-gamme. Concurrent Mixpanel/Amplitude. UI Linear-grade, command palette ⌘K, IA insights, sub-300ms queries, dark monochromatique.

RôleUI · UX · Design system
PlateformeWeb · Mac 16″
Année2026
OutilFigma · Webflow
app.axis.io · Production
Linear-style⌘KAI Insights
app.axis.io / dashboard ↑↓⇄
Workspace / Production / Dashboard
Nouveau rapport

Tableau de bord produit.

Vue d'ensemble · Workspace Production · Mis à jour il y a 2 min
24h7 jours30 jours3 mois
+ Filtre · Pays = FR + Ajouter
Utilisateurs actifs 48 720
↑ 12,4%
Sessions 187k
↑ 8,1%
Conversion 4,82%
↑ 0,6 pts
Bounce rate 32,1%
↓ 1,2 pts

Trafic temps réel7 derniers jours · UTC+1

8 240

Top pages

01/pricing12 480↑ 18%
02/features/ai9 280↑ 12%
03/blog/data-stack7 145↑ 6%
04/onboarding5 920↑ 4%
05/integrations4 380↓ 2%
Stratégie · Insight, approche, résultat
01 — Insight

Les outils analytics sont moches.

Mixpanel et Amplitude sont des graphes posés sur des dropdowns. Les équipes produit veulent un outil avec une UI Linear-grade, des queries instantanées et de l'IA embarquée.

Insatisfaction UI tools analytics83%
02 — Approche

Linear meets Bloomberg.

Sidebar dense, command palette ⌘K, monochromatique avec accent flame, sparklines partout, animations 60fps. IA insights inline pour expliquer les pics et chutes.

Time-to-insight vs Mixpanel0,67×
03 — Résultat

L'outil que les PM ouvrent par plaisir.

Sub-300ms queries, NPS 88 en alpha (n=42 PM). Modèle pricing self-serve : 49$/mois → 499$/mois. Onboarding 90s du compte au premier dashboard.

Latence p95 queries284ms
Composants · Figma libraryv3.0 · 64 components
+ Rapport Exporter
ButtonsPrimary · Ghost
24h 7 jours 30 jours
SegmentedPeriod
Active users48 720
KPI Cardw/ sparkline
Rechercher… ⌘K
Search barw/ shortcut
+ Pays = FR + Ajouter
Filter chipsActive + Add
SparklineTrend up
Color tokens · Brand · Mono
flame/400#FF7A4A
flame/600#D43A1A
surface/0#0B0B0E
surface/1#16161B
Status
success#7DEFA1
warning#FFB845
danger#FF5A36
info#7DB7FF
Typography · Scale
Display 32Instrument · 32/30
UI Bold 14Inter · 14/20 · 600
UI Body 11Inter · 11/16 · 500
Tag 9 monoJB Mono · 9/14
N
04 — Web · AI · Workspace

Neural Studio.

Workspace pour orchestrer des agents IA. Conversation, agents en temps réel, palette de commandes ⌘K, glassmorphism cinématique. Linear meets Anthropic Console.

RôleUI · UX · Design system
PlateformeWeb · Mac 16″
Année2026
OutilFigma · Framer Motion
app.neural.studio · Production
GlassmorphismReal-time AI⌘K
app.neural.studio / workspace / ada ↑↓⇄
Workspace / Chat / Ada · Research
Nouveau thread

Comment puis-je t'aider aujourd'hui ?

Ada · gpt-5 · répondu en 312ms
D
Dikenga · il y a 2 min

Donne-moi un brief complet pour le pitch deck Series A — marché, traction, équipe, demande. Ton sérieux, slides 10–15.

Ada · répondu en 312ms · 4 sources

Voilà le brief structuré. J'ai croisé Crunchbase 2026 + State of European SaaS Q1 pour la slide marché. Voici les 4 piliers à valider :

Slide marchéTAM 8,4 Md€Source : Crunchbase Q1 2026
Slide traction+187% YoYARR récurrent · 12 derniers mois
Slide équipe3 foundersGénération en cours…
Demande Series A4,5 M€Pre-money 22 M€ · 2026
Stratégie · Insight, approche, résultat
01 — Insight

Les outils IA sont des chats avec un avatar.

ChatGPT et Claude sont géniaux mais isolés. Les équipes veulent un workspace orchestré : agents spécialisés, threads partagés, contexte projet partagé, suivi des coûts et des tokens.

Outils IA séparés en moyenne par équipe4,2
02 — Approche

Linear pour les agents IA.

Sidebar avec agents nommés et statut, conversation centrale glassmorphism, panneau d'activité droit avec coûts et latence en temps réel. Workflows multi-étapes avec progression visible.

Time-to-first-output312ms
03 — Résultat

L'IA comme collègue, pas chatbot.

NPS 91 en private beta (n=64). Les équipes économisent en moyenne 14h/semaine. Pricing par seat + usage : 49$/seat + tokens consommés. Cohort retention M3 : 92%.

Économie temps moyen / utilisateur / sem14h
Composants · Figma libraryv1.0 · 48 components
+ Nouveau thread
Primary CTAIridescent
A Ada · Research
Agent roww/ status
Demande à Ada…
ComposerGlass · w/ send
Slide traction +187% YoY ARR · 12 mois
Result cardw/ source
Pitch Deck Series A 4 / 7 · 12 min
WorkflowProgress
Tokens / 24h284k
Stat cardCompact
Color tokens · Brand iridescent
indigo/500#6366F1
pink/500#EC4899
sky/400#38BDF8
purple/500#A855F7
Surface · Status
surface/0#050510
surface/1#0A0420
success#10B981
working#FFB845
Typography · Scale
Display 32Instrument · 32/30
UI Bold 14Inter · 14/20 · 600
UI Body 11Inter · 11/16 · 500
Tag 9 monoJB Mono · 9/14
H
05 — Web · Trading · Crypto

Horizon Markets.

Plateforme de trading multi-actifs. Bloomberg meets Apple Vision Pro. Charts temps réel, order book live, exécution sub-50ms, portefeuille auto-tracking.

RôleUI · UX · Data viz
PlateformeWeb · Mac 16″
Année2026
OutilFigma · D3.js
app.horizon.markets · BTC/USD · LIVE
Real-timeWebSocketD3.js
app.horizon.markets / btc-usd ↑↓⇄
₿

BTC / USD

72 480,30 ↑ +2,84%
1H4H1D1W1M
LIVE
74 00073 00072 48071 00070 000
72 480,30
Volume 24h$2,4 Mds↑ 18,4%
High 24h$73 142↑ 1,2%
Low 24h$70 280↓ 0,8%
Market cap$1,42 Tn↑ 2,84%
Stratégie · Insight, approche, résultat
01 — Insight

Les plateformes crypto sont stressantes.

Binance, Kraken, Coinbase Pro affichent 47 chiffres clignotants. Les traders sérieux veulent l'élégance de Bloomberg avec la fluidité d'une app premium — pas un tableur sous stéroïdes.

Time-to-trade vs benchmark0,38×
02 — Approche

Aurora gradient sur structure ferme.

Background radial cinématique sky/purple, panneaux glassmorphism, mais structure stricte : chart 60%, order book et formulaire latéraux. Données denses mais respirables.

Latence ordre exécuté42ms
03 — Résultat

Le trading qui ne fatigue pas.

Test utilisateurs (n=18 traders pro) : 88% préfèrent l'UI vs Coinbase Pro. Sessions plus longues (+34%), plus d'ordres exécutés (+22%). Modèle : freemium → 29$/mois Pro.

Préférence vs Coinbase Pro · n=1888%
Composants · Figma libraryv2.4 · 56 components
72 480,30↑ +2,84%
Live pricew/ delta
72 5020,184 72 480 72 4780,304
Order bookAsk · Spread · Bid
LIVE
Live tagReal-time
1H4H1D
Time selectorSky accent
AcheterVendre
Buy/Sell toggleGreen-red
Acheter BTC →
Submit orderBuy variant
Color tokens · Brand
sky/400#38BDF8
purple/500#A855F7
surface/0#04060D
surface/1#0A1228
Trading semantic
bid/buy#22C55E
bid/light#86EFAC
ask/sell#EF4444
ask/light#FCA5A5
Typography · Scale
Display 32Instrument · 32/30
Price 24Instrument · 24/26
Mono 11 — 72 480,30JB Mono · 11/14
Tag 9 monoJB Mono · 9/14
P
06 — Web · Payments · SaaS

Proton Pay.

Console paiements pour startups SaaS. Inspiré de Stripe avec une couche de luxe en plus. Lavender accent, charts en glassmorphism, transactions temps réel, exports compta.

RôleUI · UX · Design system
PlateformeWeb · Mac 16″
Année2026
OutilFigma · Webflow
app.proton.pay · Live
Stripe-styleReal-timeWebhooks
dashboard.proton.pay ↑↓⇄
Workspace / Vue d'ensemble
Nouveau paiement

Paiements temps réel.

Vue d'ensemble · Workspace Production · 7 derniers jours
Aujourd'hui7 jours30 jours3 mois
+ Devise = EUR + Ajouter
Volume brut 284 480 €
↑ 18,4%
Net après frais 278 215 €
↑ 18,1%
Paiements réussis 2 480
↑ 12,4%
Paiements échoués 42
↑ 3,2%

Volume net7 derniers jours · UTC+1

8 240 €

Transactions5 dernières

A
Atelier Siennepi_3OkPdfL · 11:42
Réussi820 €→
M
Mehdi Lasripi_3OkPdc · 11:08
Réussi240 €→
N
Nora Dembélépi_3OkP9c · 10:55
Réussi3 200 €→
L
Léa Marchandpi_3OkP82 · 10:32
En cours112 €→
K
Kévin Duprépi_3OkP76 · 10:14
Échoué54 €→
Stratégie · Insight, approche, résultat
01 — Insight

Stripe est le standard, mais l'UI est figée.

Stripe Dashboard a 12 ans. Les startups SaaS modernes veulent une console plus douce, plus respirante, qui ressemble à leur produit (luxe, mode, design) — pas à un outil dev fintech.

Startups SaaS qui adapteraient un Stripe-like62%
02 — Approche

Stripe en mieux respiré.

Lavender accent #635BFF, charts en gradient violet, paniers de transactions avec avatars colorés, pills de statut douces (vert/jaune/rouge tendres). Marges généreuses partout.

Densité info / écran vs Stripe0,72×
03 — Résultat

L'admin qu'on regarde sans serrer les dents.

Test utilisateurs (n=24 founders SaaS) : 79% migrent le dashboard mental sur Proton. Baisse des erreurs de saisie de 41%, gain de temps moyen 2,8 min/session pour les opérations courantes.

Préférence vs Stripe Dashboard79%
Composants · Figma libraryv1.6 · 38 components
+ Nouveau paiement
Primary CTALavender
Volume brut 284 480 € ↑ 18,4%
KPI Cardw/ delta
Réussi En cours Échoué
Status pills3 variants
A Atelier Sienne pi_3OkPdfL 820 €
Tx roww/ avatar
+ Devise = EUR + Ajouter
Filter chipsActive + Add
SparklineLavender
Color tokens · Brand
brand/500#635BFF
brand/300#9388FF
paper#FAFAFB
ink#0A0A14
Status semantic
success#16A34A
warning#A16207
danger#DC2626
info#0284C7
Typography · Scale
Display 32Instrument · 32/30
UI Bold 14Inter · 14/20 · 600
UI Body 11 — Texte courant.Inter · 11/16 · 400
Tag 9 monoJB Mono · 9/14
A
04 — Web · E-commerce · Luxe

Atelier Sienne.

Maison de mode parisienne haut de gamme. Direction éditoriale magazine, photographie produit grand format, hiérarchie typographique XL, parcours d'achat ralenti.

RôleUI · Direction artistique
PlateformeWeb · Mac 16″
Année2026
OutilWebflow · Shopify
atelier-sienne.com
EditorialWebflow CMSShopify
atelier-sienne.com / collection-hiver-2026 ↑↓⇄
Collection · Hiver 2026

Sept pièces essentielles,
pensées pour durer.

Une garde-robe d'hiver qui traverse les saisons. Coupes nettes, matières nobles — laine vierge, cachemire, soie pure — finitions à la main dans nos ateliers parisiens.

Découvrir → Édition limitée · 240 ex.
— Pièce01 / 07
Le manteau Sienne 820 €
Ajouter +
02Trench Avenue680 €
03Pull Toscane320 €
04Robe Aurore540 €
05Pantalon Lin290 €
Stratégie · Insight, approche, résultat
01 — Insight

Le luxe en ligne a été uniformisé par Shopify.

Les sites de mode haut-de-gamme se ressemblent tous : grille produits dense, photographie packshot, panier rapide. Les acheteurs luxe veulent ressentir une histoire, pas zapper un catalogue.

Temps moyen sur fiche produit luxe12s
02 — Approche

Magazine d'abord, catalogue ensuite.

Hero éditorial 60% écran, typographie sérif XL en italique, mise en avant d'une seule pièce. Strip de 4 produits secondaires, pas plus. Tout est ralenti, comme dans Vogue.

Pages vues / session2,4×
03 — Résultat

Un site qu'on visite comme une galerie.

AOV multiplié par 2,4 (de 320€ → 780€). Temps moyen sur fiche : 48s vs 12s benchmark. Taux de conversion +0,8 pts en 6 mois.

AOV vs benchmark e-commerce mode+144%
Composants · Webflow libraryv1.2 · 22 components
Découvrir →
CTAPill · Black
Ajouter +
Add to bagGlass
Couleurs
Color pickerInline
Tailles XSSML
Size selectorw/ disabled
820 € 980 €
Pricew/ promo
Édition · 240 ex.
CaptionEditorial tag
Color tokens · Earth
paper#FAF7F2
linen/300#D4C5B0
camel/600#8B6F4E
earth/900#3D2C19
Surface · Status
ink#0A0A0B
surface/9#1B1B1E
camel/400#A89171
linen/200#E5C8A4
Typography · Scale
Display 46Instrument · 46/44
Heading 24Instrument · 24/28
Body 13 — Texte courant éditorial.Inter · 13/22 · 400
Tag 10JB Mono · 10/14

Quatre directions chromatiques.

Chaque produit possède sa propre identité — au service d'une émotion utilisateur précise. Confiance pour Nova, chaleur pour Echo, clarté pour Axis, élégance pour Atelier Sienne.

01 — Fintech
Nova BankIndigo · Violet · Tech
02 — Music
Echo MusicEarth · Terracotta · HiFi
03 — Analytics
Axis AnalyticsFlame · Encre · SaaS
04 — Mode
Atelier SienneLin · Camel · Couture
← Projets Concepts UI/UX · Dikenga Design · 2026 Démarrer un projet →