Étude de cas · N° 02 · SaaS · cloud · 2025

Cloudixy : une console cloud qui dit ce qui se passe avant qu’on le demande

Une plateforme cloud pour les petites équipes : déployer, surveiller et payer depuis un seul tableau de bord, avec un site, un onboarding guidé, la console client et la console interne de l’équipe d’astreinte.

UX produit
Dashboard
Design system

Rôle: Product designer, de la recherche au prototype
Durée: 12 semaines
Équipe: Projet conceptuel, en solo
Plateforme: Web, desktop
Outils: Figma Miro Google Meet Google Docs
Livrables: Benchmark, Proto-personas, User flows, Wireframes, Design system clair et sombre, 34 écrans, Prototype

Le projet en chiffres

Ce qui a été livré, compté dans le fichier Figma. Produit fictif : aucun résultat d’usage.

34
écrans
Site, onboarding, console client, et 3 écrans de console interne
82
variables
Couleurs, espaces et rayons, en modes clair et sombre
343
liens de prototype
Cinq parcours reliés, du site à la gestion d’incident

01 · Le projet

Le cloud, sans devenir ops

Les dépenses mondiales en cloud public devaient atteindre 723 milliards de dollars en 2025, un cinquième de plus qu’en 2024. Une bonne part vient d’équipes qui n’ont ni ingénieur d’infrastructure ni temps à perdre dans des consoles pensées pour des experts.

Cloudixy est une plateforme pour ces équipes : on pousse son code, le service est en ligne, l’autoscaling, les sauvegardes et le chiffrement sont déjà là. Le tableau de bord dit ce qui s’est passé aujourd’hui, ce que coûte le mois, et quoi faire ensuite.

Le projet couvre tout le cycle : le site et la tarification, l’onboarding, la console (services, déploiements, logs, sécurité, facturation, équipe), et la console interne où l’équipe d’astreinte gère un incident et prévient les clients.

Douze semaines, trois espaces

01 · Semaines 1 à 3
Découvrir
Revue de quatre familles d’offres cloud, de leurs tableaux de bord et de leurs pages de statut.
- Benchmark
- Recherche documentaire
02 · Semaines 3 à 4
Définir
Deux proto-personas, le client et l’ingénieur d’astreinte, la carte d’expérience d’un premier déploiement.
- Proto-personas
- Journey map
- HMW
03 · Semaines 4 à 6
Idéer
Architecture de la console, flux de création d’un service, wireframes.
- Architecture de l’information
- User flow
- Wireframes
04 · Semaines 6 à 11
Prototyper
Design system à deux modes, graphiques, 34 écrans, prototype relié en cinq parcours.
- Design system
- Data visualisation
- Prototype Figma
05 · Semaines 11 à 12
Vérifier
États vides, de chargement et d’erreur, revue des lois UX, plan de test.
- Revue heuristique
- Plan de test

02 · Découverte

Un marché immense, pensé pour les experts

723 Md $
de dépenses en cloud public en 2025
Prévision mondiale, contre 596 milliards en 2024.
Gartner, novembre 2024
+21,5 %
en un an
Une croissance qui amène au cloud des équipes non spécialistes.
Gartner, novembre 2024
3 à 15
personnes dans l’équipe visée
Des développeurs, pas d’ingénieur d’infrastructure dédié.
Hypothèse
< 2 min
du push au service en ligne
La promesse que le produit doit tenir et montrer.
Hypothèse

Quatre familles d’offres

Nommées par famille plutôt que par marque : chacune répond à une partie du besoin.

Quatre familles d’offres
Critère	Cloudixy · le projetLe projet	Grand cloud publicHyperscaler	Plateforme d’hébergementPaaS	Cloud frontendSpécialisé	Serveur louéIndirect
Mettre en ligne depuis un push	Oui	PartielSelon le service choisi	Oui	Oui	NonScripts maison
Coût du mois lisible	OuiSur l’accueil	PartielConsole de facturation à part	Partiel	Partiel	OuiForfait fixe
Autoscaling sans configuration	OuiSeuils par défaut	PartielÀ configurer	PartielSelon l’offre	Oui	Non
Incidents expliqués aux clients	OuiStatut et bandeau	Oui	Oui	Oui	Non
Une région proche du Maghreb	OuiCasablanca, Paris	PartielEurope	PartielEurope	Non documenté	OuiHébergeur local

Le tableau défile de côté.

Revue documentaire des offres publiques, verdicts simplifiés par famille.

À retenir

La puissance est chez les grands, la simplicité chez les spécialistes, la lisibilité des coûts chez personne. Cloudixy se place sur les trois, pour des équipes qui ne veulent pas choisir.

03 · Définition

Celui qui déploie, celui qui veille

Proto-personas : des hypothèses à valider en entretien ; leurs citations sont illustratives.

P1 · le client
Mathis, 34 ans
CTO d’une jeune entreprise logistique, six développeurs, huit services en production
Objectif
Mettre en ligne sans devenir ops, et savoir ce que coûte le mois
Ce qui bloque
Les factures cloud illisibles, les alertes à 3 h sans contexte
« Je veux savoir en une minute si tout va bien, et combien ça coûte. »
P2 · l’astreinte
Julien, 31 ans
Ingénieur fiabilité chez Cloudixy, d’astreinte une semaine sur quatre
Objectif
Comprendre un incident et prévenir les clients touchés en quelques minutes
Ce qui bloque
Des outils éparpillés : alertes, chat, page de statut, e-mails
« Pendant un incident, chaque fenêtre de plus coûte des minutes. »

Un premier déploiement, sans plateforme

Mathis

01Créer le compte

02Choisir

03Configurer

04Déployer

05En ligne

06La facture

Fait

Remplit carte bancaire et organisation

Compare des dizaines de services

Règle build, port, variables

Attend sans savoir où ça en est

Ouvre l’adresse du service

Découvre le total en fin de mois

Pense

Pourquoi une carte pour essayer ?

Lequel est le bon ?

J’espère ne rien oublier

Ça tourne, ou c’est bloqué ?

Enfin

Qu’est-ce qui a coûté si cher ?

Ressent

Opportunité

Essai sans carte

Un service, détecté depuis le dépôt

Valeurs par défaut déjà remplies

Étapes du déploiement en direct

Coût du mois sur l’accueil, alertes de seuil

La carte défile de côté.

Le problème à résoudre

Les petites équipes ont besoin de déployer et de surveiller sans expert dédié, parce que chaque heure passée sur l’infrastructure est prise au produit. Aujourd’hui, les consoles cloud supposent qu’on sait déjà où regarder.

Les questions auxquelles la conception répond

Q1
Comment pourrions-nous mettre un service en ligne en quelques minutes, sans configuration ?
Pourquoi elle · Le creux de la carte d’expérience est au choix et à la configuration.
Q2
Comment pourrions-nous dire en un écran si tout va bien ?
Pourquoi elle · Mathis veut une réponse en une minute.
Q3
Comment pourrions-nous rendre le coût prévisible ?
Pourquoi elle · La facture de fin de mois est l’autre point bas.
Q4
Comment pourrions-nous gérer un incident et prévenir les clients depuis un seul écran ?
Pourquoi elle · Le besoin de Julien, côté équipe.

04 · Idéation

Ce que la première version garde

Impact ↑

Gains rapides · Impact fort · Effort faible

Détection du projet depuis le dépôtEn V1
Q1
Accueil : santé, coût, actionsEn V1
Q2, Q3
Étapes du déploiement en directEn V1

Grands chantiers · Impact fort · Effort fort

Autoscaling par défautEn V1
Console d’incident interneEn V1
Q4
Logs et rechercheEn V1

Bonus · Impact faible · Effort faible

Mode sombreEn V1
Variables à deux modes

Plus tard · Impact faible · Effort fort

Éditeur d’infrastructure visuelPlus tard
Marketplace d’extensionsPlus tard

Effort →

Impact et effort estimés : une priorisation de concepteur.

Créer un service

Début
Services
« Nouveau service »
Écran
Source
Dépôt et branche
Système
Détection
Langage, build et port remplis
Écran
Ressources
Taille, autoscaling, variables
Écran
Récapitulatif
Coût mensuel estimé
Décision
Build réussi ?
Non : logs du build, correction, nouveau push
Écran
Déploiement
Étapes en direct
Fin
Service en ligne
Adresse et premier graphique

Les wireframes basse fidélité

01 · Tableau de bord
02 · Nouveau service
03 · Incident
04 · Tarifs

05 · Conception

Un système clair, et son mode sombre

Inter seule, un bleu d’action, des statuts sémantiques : l’app est en mode clair, le site en mode sombre, les deux sur les mêmes variables.

Couleurs

Toile
#F7F9FC
Fond de la console
Surface
#FFFFFF
Cartes, tableaux
Accent
#1F8FE5
Action, graphiques
Accent doux
#EAF6FF
Sélection, bandeaux
Texte
#1E1E1E
Titres et texte
Texte secondaire
#454459
Légendes
Succès
#1E9E63
En ligne, déployé
Alerte
#C77700
Seuil, dégradé
Danger
#E0322F
Erreur, incident
Succès doux
#E6F6EE
Fond de statut

Typographie

Display
Inter ExtraBold 64
Transform your cloud experience
Titre 2
Inter Bold 32
Everything you need to ship
Chiffre
Inter Bold 32
99.98 %
Corps
Inter Regular 16
Push to main and your service is live.
Code
Inter Medium 13
npm run build

29 composants

Logo
Bouton
Badge
Champ
Toggle
Onglet
Avatar
Élément de menu
Carte d’offre
Menu latéral
Bouton icône
Barre du haut
Statistique
Segment
Jauge d’usage
En-tête de tableau
Ligne de service
Toast
Courbe
Anneau
Légende
Barres
Navigation du site
Logo partenaire
Carte de fonction
Carte de prix
Témoignage
FAQ
Pied de page

Planche des composants de Cloudixy : boutons et leurs états, champs, contrôles, badges, cartes et jeu d’icônes — Les composants, tels qu’ils sont dans Figma : chaque variante, puis les icônes.

Le tableau de bord : ce qui s’est passé, et quoi faire

Première itération du tableau de bord : quatre indicateurs et trois graphiques sur un fond dégradé

Version finale : indicateurs avec leur variation et leur action, graphiques, table des services

Ce qui change

La phrase d’accueil dit ce qui s’est passé aujourd’hui sur les huit services.
Loi UX · Effet de position sérielleRespectée
Chaque indicateur garde sa variation et son action : détails, rapport, sécurité, facture.
Loi UX · Loi de proximitéRespectée
Le menu complet, groupé : services, déploiements, sécurité, facturation, équipe.
Loi UX · Loi de JakobRespectée
Un seul bouton plein : ajouter un service.
Loi UX · Effet Von RestorffRespectée

Le site : dire ce que fait le produit

Première itération du site : un titre et un bouton sur une photo d’océan

Version finale du site : la promesse, deux actions et un aperçu de la console

Ce qui change

Le sous-titre dit ce que fait le produit : déployer, mettre à l’échelle, sécuriser.
Loi UX · Loi de JakobRespectée
Deux actions et leurs conditions : essai gratuit, démo, sans carte.
Loi UX · Aversion à la perteRespectée
La console apparaît dès le premier écran : on voit ce qu’on achète.
Loi UX · Effet esthétique-pratiqueRespectée

La console client

Onboarding
Nouveau service
Déploiement en direct
Détail d’un service
Logs
Analytics
Facturation
Passer à Pro

Quand ça casse

Q4 : l’incident vu par le client, puis par l’équipe d’astreinte, et la page de statut publique.

Côté client
Console interne
Page de statut

06 · Validation

Les lois UX à l’œuvre

Respectée
Loi de Tesler
La complexité ne disparaît jamais, quelqu’un la porte : que ce soit vous.
La complexité reste dans la plateforme : build et port sont détectés.
Nouveau service
Respectée
Seuil de Doherty
Sous 400 ms, le système ressemble à une conversation.
Chaque étape répond en direct, l’attente se lit.
Déploiement
Respectée
Loi de proximité
Ce qui est proche se lit ensemble.
Un chiffre, sa variation et son action dans la même carte.
Tableau de bord
Respectée
Effet Von Restorff
Ce qui diffère est ce dont on se souvient.
Un bouton plein par écran.
Partout
Respectée
Loi de Miller
La mémoire de travail retient environ sept éléments : découpez le reste.
Dix entrées, en trois groupes lisibles.
Menu
Respectée
Règle du Peak-End
On juge le pic et la fin, pas la moyenne.
La fin d’un incident est un message clair et des crédits appliqués d’office.
Incident

Résultats attendus

Ce qu’un test et un lancement devraient montrer. Rien n’a été mesuré.

Résultat attendu	Indicateur	Cible indicative
Un premier service vite en ligne	Temps de l’inscription au premier service en ligne	Moins de 10 min (hypothèse)
Un état compris d’un regard	Testeurs qui disent si tout va bien en 30 s	5 sur 5 en test
Des coûts sans surprise	Écart entre coût estimé et facture	Moins de 10 % (hypothèse)
Des incidents mieux annoncés	Temps entre l’ouverture et le premier message client	Moins de 15 min (hypothèse)

Le test qui validerait la console

ParticipantsCinq développeurs d’équipes de moins de quinze personnes, sans ingénieur d’infrastructure, en séance à distance de 45 minutes sur le prototype.

01
TâcheCréer un compte et mettre en ligne le service orders-api.
Critère de réussiteEn ligne sans aide, valeurs par défaut gardées.
02
TâcheDire si tout va bien aujourd’hui, et ce que coûte le mois.
Critère de réussiteRéponse juste en moins de 30 secondes.
03
TâcheTrouver pourquoi le dernier déploiement a échoué.
Critère de réussiteLigne d’erreur trouvée dans les logs.
04
TâcheEn astreinte : publier une mise à jour d’incident.
Critère de réussiteMessage envoyé aux clients touchés depuis un seul écran.

Questions d’entretien

Racontez votre dernier déploiement qui a mal tourné.
Comment savez-vous aujourd’hui ce que vous coûte votre infrastructure ?
Qu’attendez-vous d’un fournisseur pendant une panne ?

Ce que j’en retiens

01
Un dashboard est une réponse
Chaque carte répond à une question de Mathis ; un graphique sans action a été retiré.
02
Dessiner l’équipe derrière
La console interne a changé la console client : bandeau d’incident, crédits, page de statut.
03
Deux modes, un système
Des variables à deux modes ont permis un site sombre et une app claire sans dupliquer un composant.

Un projet en tête ?

Décrivez l’écran ou le parcours qui coince : je réponds avec une première lecture du problème.

Lancer un projet Voir les offres

Découvrir

Définir

Idéer

Prototyper

Vérifier

Mathis, 34 ans

Julien, 31 ans

Les questions auxquelles la conception répond

Couleurs

Typographie

29 composants

Ce qui change

Ce qui change

Loi de Tesler

Seuil de Doherty

Loi de proximité

Effet Von Restorff

Loi de Miller

Règle du Peak-End

Questions d’entretien

Un dashboard est une réponse

Dessiner l’équipe derrière

Deux modes, un système

Un projet en tête ?