Retour aux projets

Sterna

Sterna

J’ai conçu le prototype et l’interface d’un outil de pilotage des migrations cloud.

Rôle
Frontend / UI
Collaboration
Backend & IA
Contexte
SaaS · Migration cloud
  • UX/UI Design
  • Figma
  • Design System
  • SaaS

01 · Le défi

Rendre lisible une migration cloud complexe

Une migration cloud réunit applications, infrastructures, dépendances, validations, échéances et scénarios de retour arrière.

L’enjeu était de donner aux équipes une lecture immédiatement exploitable, sans masquer les informations techniques nécessaires aux spécialistes.

Interface Sterna présentant la préparation et le pilotage d’une migration cloud.
Vue d’ensemble du prototype Sterna.

02 · Direction artistique

Signe graphique de l’identité visuelle Sterna.

STERNA

Identité et langage visuel d’un SaaS dédié au pilotage des migrations cloud.

Une migration est une traversée.

  • Horizon
  • Progression
  • Clarté
  • Maîtrise
  • Calme
  • Direction
Horizon marin calme utilisé dans l’univers visuel de Sterna.

Trajectoire de migration

  1. Analyse
  2. Planification
  3. Préparation
  4. Bascule
  5. Validation
  6. Hypercare

Palette

  • Deep blue#102d3f
  • Ocean#17556b
  • Sky#3c91a0
  • Cloud#f0f8fa
  • Sea green#287d70
  • Signal#a65f43

Typographie

Inter · Regular / Medium

Garder le cap.

Regular

Migrations en cours

Medium

Migrations en cours

Principes de design

  • L’espace avant les séparateurs.
  • La hiérarchie avant les cartes.
  • L’essentiel avant la profondeur technique.
  • Sterna recommande, l’humain décide.

Fragments UI

ProgressionEn cours

Stable

Recommandation Sterna

Vérifier les prérequis avant la bascule.

Décision attendue

Valider le scénario de bascule.

03 · Principe UX

Hiérarchiser avant de détailler

L’interface donne la priorité aux décisions et à la trajectoire, puis rend la profondeur technique accessible au bon moment.

  1. Prioriser les décisions

    Faire apparaître les alertes et actions attendues avant les détails.

  2. Montrer la trajectoire

    Transformer les étapes en progression lisible, avec un cap.

  3. Préserver la profondeur

    Garder les données expertes accessibles sans surcharger la lecture.

Écran de pilotage Sterna présentant une décision attendue, la progression et la route de migration.
Décision, progression et trajectoire structurent la lecture avant les données expertes.

04 · Application au produit

Piloter l’essentiel, accéder au détail

Le produit articule une vue d’ensemble, un portefeuille de migrations et un écran de pilotage. Les actions, alertes et décisions restent au premier plan ; les données techniques se découvrent au bon moment.

Portefeuille Sterna avec recherche, filtres et migrations actives.
Le portefeuille rassemble statuts, échéances et progression.
Portefeuille de migrations Sterna adapté à une lecture mobile.
Le portefeuille conserve sa hiérarchie sur mobile.

05 · Design system

Une interface calme pour des décisions techniques

La palette marine, la hiérarchie typographique et les états fonctionnels rendent la profondeur technique accessible sans la simplifier artificiellement.

Couleurs

  • Deep blueTexte et navigation#102d3f
  • OceanActions principales#17556b
  • SkyProgression et repères#3c91a0
  • CloudSurfaces secondaires#f0f8fa
  • Sea greenÉtats stables#287d70
  • SignalDécisions attendues#a65f43

Typographie

Inter · Regular / Medium

Garder le cap.

L’essentiel apparaît en premier ; les dépendances et données expertes restent accessibles au moment utile.

06 · Prototype et collaboration

Un prototype pour cadrer le produit

Le prototype a permis de cadrer rapidement l’architecture de l’information, les parcours prioritaires et le langage visuel de Sterna. Les écrans utilisent encore des données de démonstration.

Mon rôle porte sur le Frontend / UI, en collaboration avec des profils backend et IA. Frontend, backend et intelligence artificielle sont pensés comme les parties d’un même produit.