Aller au contenu
UC • 02

Unitel Cloud Services

Concevoir une plateforme « Self-care » permettant aux clients Unitel de piloter intégralement leur infrastructure cloud IaaS, sans assistance, en toute autonomie.

Client
Unitel
Secteur
Cloud IaaS
Rôle
Product design · Design system · Suivi de développement
Durée
9 mois
Période
2025
Périmètre
Product Design · Self-care

01 · Le défi

Comment donner à des équipes techniques un contrôle total sur leur infrastructure cloud sans avoir besoin de contacter le support, tout en restant accessible aux profils non-développeurs ?

02 · Contexte & objectifs

Chaque action passait par le support.

Unitel proposait une offre Cloud IaaS robuste mais dont la gestion nécessitait systématiquement l'intervention du support technique. L'enjeu : créer un portail self-care qui donne aux clients la maîtrise complète de leur infrastructure, provisionnement, monitoring et facturation sans friction.

  • Permettre la gestion autonome de l'infrastructure cloud sans support
  • Concevoir un dashboard de monitoring temps réel lisible et actionnable
  • Gérer les droits et rôles utilisateurs (admin, viewer, billing)
  • Construire un design system scalable pour les futures évolutions produit

03 · Démarche

Comment j'ai résolu le problème.

  1. Découverte & Recherche

    Recherche menée par l'équipe produit : immersion de 2 semaines avec les équipes support pour identifier les demandes récurrentes, entretiens avec 8 clients sur leurs usages réels de l'infrastructure. Cartographie des 12 actions les plus fréquentes transformées en parcours self-service.

    • Immersion support
    • Entretiens clients
    • Cartographie des actions

  2. Définition & Architecture

    Structuration du portail autour de 6 espaces : Dashboard, Configurer (Compute, Storage, Network), API, Support, Facturation, Paramètres. Définition des niveaux de permission et des workflows de validation. Création d'un langage design cohérent avec l'univers technique cloud.

    • Architecture en 6 espaces
    • Niveaux de permission
    • Workflows de validation

  3. Design & Prototypage

    4 cycles d'itération avec tests utilisateurs sur prototypes Figma. Conception d'un dashboard central avec indicateurs temps réel, notifications et alertes. 62 composants dans le design system, documentation technique pour l'équipe Angular.

    • Prototypes Figma
    • Tests utilisateurs
    • Dashboard temps réel
    • Design system

  4. Livraison & Suivi

    Accompagnement de l'équipe de développement pendant toute la phase de réalisation (6 mois).

    • Suivi de développement

04 · Architecture

Six espaces pour tout piloter.

  • Espace client Unitel Cloud
    • Dashboard
    • Configurer
      • Droplet (VMs)
      • Stockage S3
      • Volume Block Storage
      • Backup & Snapshots
      • Networking
        • Domaines
        • IPs réservées
        • Équilibreurs de charge
        • VPC
        • Pare-feu
        • Enregistrements PTR
      • Monitoring
    • API
    • Support
    • Facturation
    • Paramètres

05 · Flow clé

Déployer un Droplet sans ouvrir de ticket.

Déployer un Droplet sans passer par le support
CLIENTConfigurer › Droplet depuis labarre latéraleCONFIGURATEURPrésentation Droplet : bénéfices,prix d'appel, FAQCONFIGURATEURChoix du datacenter : Marseille,Bordeaux, LyonSYSTÈMERéseau VPC du datacenter attribuépar défaut2CONFIGURATEURChoix de l'OS ou d'une imagepersonnaliséeCONFIGURATEURTaille : type de CPU, option,plan au mois ou à l'heure1CLIENTVolume supplémentaire etsauvegarde automatique, en optionCLIENTClé SSH ou mot de passe ?3CLIENTAjout d'une clé SSH publiqueCLIENTPlus d'options : monitoring, basede données géréeCONFIGURATEURFinalisation : quantité, nomd'hôte, tagsSYSTÈMECoût estimé au mois et à l'heureCLIENTDroplet(s) créé(s)clé SSHmot de passe root
  • Entrée
  • Écran
  • Système
  • Action
  • Décision
  • Fin
  1. 1Cinq types de Droplet et trois options CPU : chaque type décrit son usage pour que les non-développeurs choisissent sans support
  2. 2Réseau privé prêt sans saisie : les ressources d'un même datacenter communiquent par IP privée
  3. 3La clé SSH, plus sûre face à la force brute, doit rester accessible à qui ne l'a jamais configurée

06 · Wireframes

Trois configurateurs, une même logique.

  1. Wireframe : Configurateur Droplet : datacenter, OS, taille et options
    Flow · étape 03 / 13

    Configurateur Droplet : datacenter, OS, taille et options

  2. Wireframe : Création d'un stockage S3 : classe, volume et chiffrement

    Création d'un stockage S3 : classe, volume et chiffrement

  3. Wireframe : Création d'un Volume Block Storage : taille et Droplet associé

    Création d'un Volume Block Storage : taille et Droplet associé

Wireframe : Configurateur Droplet : datacenter, OS, taille et options

1 / 3 Configurateur Droplet : datacenter, OS, taille et options

07 · Système

62 composants, deux thèmes.

Surfaces
RôleLightDark
surface_container_lowest
#ffffff
#21294c
surface_container_low
#f1f5fd
#2f3f79
surface_container
#e0eaf9
#344899
surface_container_high
#c9daf4
#3a56bb
surface_container_highest
#a3c3ed
#4368cd
Planche : Navigation latérale, thème clair

1 / 6 Navigation latérale, thème clair

08 · Interface finale

Le coût visible à chaque choix.

  1. Écran : Présentation de l'offre Droplet : prix d'appel, avantages et FAQ
    Flow · étape 02 / 13

    Présentation de l'offre Droplet : prix d'appel, avantages et FAQ

    Avant tout formulaire, la page présente l'offre : prix d'appel, datacenters, avantages. Une FAQ répond aux questions qu'on se pose avant de lancer une machine : quelle taille, clé SSH ou mot de passe, comment c'est facturé.

  2. Écran : Configurateur Droplet, avec un coût estimé mis à jour à chaque choix
    Flow · étape 03 / 13

    Configurateur Droplet, avec un coût estimé mis à jour à chaque choix

    Une seule page, de haut en bas : datacenter, système, taille, stockage, sauvegarde, authentification, options. Chaque taille affiche son prix au mois et à l'heure.

  3. Écran : Création d'un Volume Block Storage

    Création d'un Volume Block Storage

    Un formulaire court : nom, taille, Droplet associé dans le même datacenter, mode de montage. Le coût estimé suit la taille et reste visible à côté du bouton de création.

  4. Écran : Réseaux : détail d'un VPC, en thème sombre

    Réseaux : détail d'un VPC, en thème sombre

    Le réseau privé en un écran : plage d'adresses et son taux d'utilisation, sous-réseaux, ressources connectées et règles de sécurité, chacun avec son statut.

  5. Écran : Réseaux : ajout d'un enregistrement DNS

    Réseaux : ajout d'un enregistrement DNS

    Les champs changent selon le type d'enregistrement choisi, et une ligne explique à quoi il sert. Ici, CAA limite les autorités autorisées à émettre un certificat.

  6. Écran : Réseaux : détail d'un équilibreur de charge, en thème sombre

    Réseaux : détail d'un équilibreur de charge, en thème sombre

    Configuration, santé des backends, trafic, règles de sécurité et coût estimé du mois sur une même page. On diagnostique sans changer d'écran.

Écran : Présentation de l'offre Droplet : prix d'appel, avantages et FAQ

1 / 6 Présentation de l'offre Droplet : prix d'appel, avantages et FAQ

09 · Impact & apprentissages

Ce que le self-care m'a appris.

  • Les demandes récurrentes du support sont la meilleure carte des parcours self-service à construire en premier.
  • Rendre visibles le prix et ses variations à chaque étape du configurateur, c'est rendre l'autonomie possible : on ne lance pas une machine sans savoir ce qu'elle coûte.

10 · Cas suivant

UC • 03E.O.S Smart Building