Système de design adaptable pour l'interface utilisateur
Datama - Juillet 2014
Vue d’ensemble
Planter le décor
Ce kit UI (système de design) a contribué à :
25 %
Temps de développement
Amélioration de la croissance des comptes et de l'adoption des applications
La plupart d'entre nous considèrent les systèmes de design comme un moyen de rationaliser les flux de travail.
Ceci est l'histoire de comment j'ai construit le système de design de Datama dans Figma, seul, de zéro, dans le rythme effréné d'une startup. Sans base de départ, j'ai pris l'initiative : réaliser un audit d'interface utilisateur pour découvrir des incohérences, en se référant à Material Design pour la structure, et en adaptant Angular Material pour s'aligner avec la pile de nos développeurs.
Ce système est devenu plus qu'un guide visuel, il nous a permis de prototyper plus rapidement, de tester des idées plus efficacement et de transférer parfaitement, libérant ainsi du temps pour se concentrer sur de nouvelles fonctionnalités au lieu de corriger les anciennes.
Datama est une plateforme SaaS B2B d'analytique de données qui simplifie l'analyse de performance et la détection d'anomalies, soutenue par des leaders de l'industrie comme LVMH et accompagnée par l'accélérateur WILCO.
C'est ainsi que la structure est devenue notre outil d'innovation.
Problématique
Le défi révélé
Corrigeons cela.
Refondre la hiérarchie visuelle
Comment le Design a Évolué
En appliquant le principe KISS (Keep It Simple, Stupid), j'ai éliminé le superflux et je me suis concentré sur des solutions directes qui correspondaient réellement aux besoins des utilisateurs et des développeurs.
Avant
Après
Avant
Après
Table connect/Application
Bien que ce travail ait encore besoin d'améliorations, les trois points clés réalisables de cette fenêtre contextuelle de tableau spécifique sont :
Clarté
Une mise en page plus épurée et un espacement optimal pour une lecture facilitée.
Consistance
Étapes unifiées et styles de composants.
une configuration plus rapide avec des filtres et des tableaux plus clairs.
Défis
Chez Prisma Media, j'ai brièvement travaillé sous la direction d'Ismaïl Hamila et j'ai eu un premier aperçu de ce à quoi ressemble un système de design bien structuré. Plus tard, chez Datama, j'ai eu l'opportunité d'en créer un entièrement à partir de zéro.
Au lieu de compliquer les choses, j'ai ancré le système dans ce que je comprenais déjà bien :
Comment j'ai abordé ce problème
Construit sur Material Design
J’ai choisi le Material Design de Google et Angular pour leur structure logique et leur convivialité pour les développeurs, assurant ainsi une base solide.
Système évolutif et prêt pour le développement
Conçu un système de boutons sur 5 à 15 écrans dans des délais serrés, en veillant à ce qu'il soit facile à mettre en œuvre, cohérent et prêt pour la croissance.
Audit UI & Kit de Boutons.
Étapes unifiées et styles de composants.
Du Chaos à la Clarté
Mais ce n'est que le début !
Méthode utilisée
Principes utilisés pour les meilleures pratiques
Commencez par ce qui fonctionne
J'ai rapidement étudié les meilleures pratiques au lieu de réinventer la roue, en me référant au Material Design de Google pour une base propre et conviviale pour les développeurs. J'ai ajouté des liens afin que les développeurs puissent facilement accéder aux sources. Ensuite, j'ai audité l'interface utilisateur pour repérer les incohérences et j'ai créé le système de boutons à partir de zéro dans Figma, en m'appuyant sur des modèles réels et une logique d'espacement.
Le principe de Don Norman et les indicateurs et affordances
En m'appuyant sur ce qui fonctionnait, je me suis concentré sur la création d'éléments UI clés plus intuitifs. J'ai utilisé des signes d'affordance et des indicateurs clairs pour rendre les boutons plus faciles à comprendre d'un coup d'œil, améliorant ainsi l'utilisabilité sans compliquer le système.
J'ai initié une nouvelle approche : présenter trois options pour inviter à de meilleurs retours.
Lorsque j'ai réalisé que l'équipe avait du mal à donner des retours clairs, j'ai commencé à créer option 1, 2 et 3 pour chaque itération.
En m'appuyant sur ce qui fonctionnait, je me suis ensuite concentré sur le fait de rendre les éléments clés de l'interface utilisateur plus intuitifs ; en utilisant des affordances et des indicateurs clairs pour que les boutons soient plus faciles à comprendre en un coup d'œil, améliorant ainsi l'utilisabilité sans ajouter de complexité.
Remarque
J'ai perdu mes données originales à la mi-juillet de l'année dernière, donc c'est une refonte, un extrait simplifié de ce qui était autrefois un système plus détaillé, comprenant des composants primaires, secondaires et tertiaires.
Réflection
Ce que j'ai appris de cela
Construire le bouton de kit UI de Datama à partir de zéro m'a appris à équilibrer la rapidité, la cohérence et la scalabilité dans des projets réels.
J'ai appris à :
Travailler dans un rythme hybride, en restant efficace sans perdre en qualité.
Structurer les fichiers Figma à la fois pour les designers et les développeurs.
Collaborer avec les équipes de développement et de données en utilisant Angular Material et Google Material Design.
Diriger une refonte de la page d'accueil qui a renforcé la confiance et la clarté de la marque.
