Keirin Design System
Vaig renovar el sistema de components centrals de Keirin per fer-lo accessible, cohesiu, escalable i més fàcil de treballar per a dissenyadors i enginyers.
Lead Product Designer, 2023
Context
Keirin és el sistema de disseny multiplataforma de Stuart. A mesura que la suite de productes s'expandia, els seus components centrals s'havien anat separant. Patrons que havien de ser consistents s'havien dividit en múltiples interpretacions, sovint sense un raonament clar.
Els equips trobaven repetidament problemes com:
- espaïat, gruix de traç i tipografia conflictius
- variants que no eren necessàries (p. ex. diverses mides de checkbox)
- estats d'interacció inconsistents i de baix contrast
- variants que faltaven per a placeholders i comportaments clau
- manca de guia sobre alineament, agrupació i espaïat
Com a resultat, les pantalles construïdes per equips diferents es veien i es comportaven de manera diferent, i els enginyers sovint havien de prendre decisions de disseny al moment. El sistema necessitava una base més sòlida abans de poder escalar més.
Enfocament
Vaig redefinir el sistema subjacent perquè cada component pogutés escalar de manera consistent. Vaig alinear dissenyadors i enginyers al voltant de fonaments compartits: espaïat, color, radi, contrast, comportament d'estats i convencions de nomenclatura.
Auditoria del sistema i fonaments
Vaig col·laborar amb dissenyadors i enginyers per mapar incoherències visuals, estructurals i d'interacció. Això ens va permetre definir regles unificades per a espaïat, traç, tipografia, ús del color, accessibilitat i radi a través de tota la biblioteca de components.
Redisseny
En lloc de pedaçar components individuals, vaig redissenyar tokens i patrons i els vaig aplicar de manera consistent a botons, inputs, checkboxes, radios, validació i estats de focus. Això va crear un sistema predictible i escalable.
Alineament entre equips
Vaig facilitar múltiples crítiques de disseny amb l'equip més ampli per arribar a consens sobre color, radi, mides, jerarquia de text i patrons d'interacció. Això va assegurar que les decisions escalaven a través de tots els equips de producte.
Proves de flux de treball
Vaig fer proves d'usabilitat amb dissenyadors interns per entendre com muntaven interfícies utilitzant els components. Això va treure a la llum problemes sistèmics que eren fàcils de passar per alt en una revisió estàtica.
Millores clau
- Ús de color d'alt contrast i accessible alineat amb WCAG AA
- Estats de focus reconstruïts amb millor visibilitat i consistència
- Regles unificades d'espaïat, radi i traç a tots els components centrals
- Paleta de grisos reduïda i jerarquia de color semàntic més clara
- Patrons de validació millorats, alineament d'icones i comportament desactivat
- Mides de components simplificades i variants innecessàries eliminades
- Estructura de components més neta i clara, tant a Figma com al codi
Aquests canvis van fer els components més fàcils d'entendre, més fàcils de mantenir i molt més difícils de fer servir malament.
Resultats
El sistema de components renovat va millorar significativament la consistència de disseny i implementació a tota l'organització.
- Comportament i visuals consistents a tots els components interactius centrals
- Accessibilitat millorada a través de contrast, tipografia i disseny d'estats
- Fluxos de treball de disseny més ràpids amb menys components trencats a Figma
- Reducció de l'ambigüitat per als enginyers durant la implementació
- Un llenguatge visual i d'interacció compartit entre equips de producte
- Una base més sòlida per a futures ampliacions
Keirin es va convertir en un sistema en què els equips podien confiar de nou: visualment, estructuralment i operativament.