Dans le cadre de l’amélioration continue des outils internes, j’ai travaillé sur le design et l’UX de tikit via Figma. L’objectif : rendre la création d’une demande plus simple et plus rapide, clarifier le suivi des tickets et harmoniser l’interface grâce à un petit design system.

Contexte et enjeux

Tikit est utilisé par les collaborateur·trices de la Ville de Lausanne pour créer et suivre des demandes (IT, logistique, etc.). Les retours utilisateurs faisaient ressortir plusieurs points : libellés parfois techniques, formulaires trop longs, manque de repères dans le suivi et affichage mobile perfectible.

Objectifs

• Réduire le temps et l’effort de saisie d’un ticket.

• Augmenter le taux de complétion des formulaires.

• Rendre l’état d’avancement d’un ticket immédiatement compréhensible.

• Harmoniser l’UI pour faciliter la maintenance et l’évolution.

Démarche (Figma)

1. Découverte & audit heuristique
   Revue des parcours existants (Nielsen/heuristiques), cartographie des écrans, inventaire des composants.

2. Architecture & flux
   Simplification des étapes « Créer une demande », « Mes tickets », et « Fiche ticket » ; définition des flux d’erreurs/vides/inaccessibles.

3. Wireframes → maquettes haute fidélité
   Prototypes interactifs dans Figma (Auto Layout, Variants, Variables), responsive (mobile d’abord).

4. Tests rapides (top tasks)
   Itérations sur la base de scénarios concrets : créer une demande, joindre une pièce, filtrer ses tickets, comprendre un statut.

5. Handoff & documentation
   Spécifications dans Figma Dev Mode, nomenclature des composants, règles d’usage et tokens (couleurs, espaces, radius, typographie).

Principes de design appliqués

• Langage clair et micro-copie orientée action (ex. « Décrire le problème » plutôt que « Description »).

• Guidage progressif : champs conditionnels, aide contextuelle, exemples.

• Priorisation visuelle : informations clés en tête de page, hiérarchie typographique nette.

• États essentiels couverts : chargement, vide, erreur, succès, désactivé.

• Accessibilité : contrastes AA, focus visibles, labels explicites, navigation clavier, zones cliquables suffisantes.

Écrans et évolutions clés

• Créer une demande

  • Formulaire découpé en sections courtes ; champs conditionnels selon la catégorie.

  • Bouton d’enregistrement temporaire (« Continuer plus tard »).

  • Téléversement de pièces jointes avec prévisualisation et taille max indiquée.

• Mes tickets

  • Liste avec filtres combinables (statut, catégorie, période) et recherche.

  • Badges de statut (À traiter, En cours, En attente, Résolu) et indicateur SLA.

• Fiche ticket

  • Timeline des événements (création, affectation, réponses).

  • Zone de réponse rapide, modèle de commentaire, historique des pièces jointes.

• Design system (Figma)

  • Boutons (remplis/contours/texte + états), champs (texte, select, date), alertes, tags, steps, tables, pagination, modales.

  • Tokens : couleurs (primaire, neutres, feedback), espaces, rayons, ombres ; règles d’icônes et de densité.