Booz Allen Hamilton · Senior Product Designer//2024 — 2026
Developer Portal — design system
Design system dark-first para una plataforma government — accesible por defecto, listo para que ingeniería lo use directo.
Design systemAccessibilityComponent libraryDesign tokens
PROJECT_FILE // 01
DEMO // PICTURE_IN_PICTURE
Lo que lideré.
SCOPE // 01- →Design system dark-first con contraste WCAG decidido y documentado por token
- →17 componentes de producción con estados, reglas de uso y anti-patterns nombrados
- →Handoff spec del que ingeniería construye directo — design DNA, constraints, checklists
Cómo se entregó.
DOC // NARRATIVE- Contexto
- El Developer Portal government-facing de Booz Allen Hamilton corría sobre dos design systems en paralelo. La revisión de diseño era un cuello de botella de dos semanas por ticket, y la UI existente se lavaba bajo la poca luz en la que los operadores realmente trabajaban.
- Problema
- Los equipos revisaban una y otra vez los mismos desajustes de accesibilidad y tokens en cada release. El design system vivía solo en Figma, así que ingeniería lo reconstruía a mano. Y el dark mode se trataba como un extra, pese a que los operadores vivían en él.
- Aproximación
- Hice el sistema dark-first y escribí la decisión de accesibilidad dentro de cada token — cada color carga la ratio de contraste que aprobó. Luego empaqueté los componentes y las reglas como un spec que ingeniería (y sus agentes) podían consumir directo, en vez de interpretar un Figma.
- Ship
- Un design system dark-first: 17 componentes con estados, reglas de uso y anti-patterns, más tokens que exponen su ratio WCAG para cada par ink-on-surface. Entregado como handoff del que ingeniería construye directo.
- Resultado
- La revisión de diseño bajó de dos semanas a menos de dos días. Cada par de contraste probadamente ≥ 4.5:1, y los operadores dejaron de reportar texto apagado en los retros. Jennifer Sheppard, la Product Lead, lo llamó trabajo que quería seguir reutilizando.
- Lo cambiaría
- Separaría los tokens específicos del cliente de la base como una capa limpia desde el día uno, y haría que una ratio de contraste fallida bloquee el release en vez de confiar en la revisión.
- Craft floor
- Accesibilidad decidida por token, no linteada después. Dark mode como primario, no como tema. El mismo sistema en diseño y en código, para que nada se desincronice.
Siguiente caso
Juan Valdez — app mobile y design system