Mirando al horizonte: por qué construimos un sistema de diseño

Sistema de Diseño Horizon, Parte 1

Cuando me uní a Twitter hace más de dos años, descubrí un grupo de diseñadores e ingenieros dedicados que trabajan en un proyecto apasionado de Hack Week llamado Feather. Feather se convirtió en una biblioteca de componentes web enfocada en servir los productos internos y empresariales de Twitter.

La misión de Feather era proporcionar experiencias consistentes y reflexivas a escala. A medida que crecía el número de componentes, patrones y clientes internos de Feather, este proyecto de pasión de Hackathon, una vez evolucionado, se convirtió en un equipo bien respaldado. Nuestro grupo se comprometió a crear una biblioteca de componentes de calidad que apoyara a otros equipos mejorando el rendimiento y la eficiencia del trabajo.

Mientras tanto, los recursos que estábamos usando para construir la aplicación de Twitter no estaban tan bien definidos. A pesar de las mejores intenciones de todos de crear una experiencia coherente con las plantillas de Sketch UI y las horas de oficina, sesiones informales donde los diseñadores de características consultan con el equipo de diseño de la Plataforma sobre las mejores prácticas, el tamaño del equipo de diseño era demasiado grande para mantener la alineación y la coherencia.

Para obtener más información sobre la falta de cohesión, un investigador de usuarios de nuestro equipo, Wilson Chan, realizó numerosas entrevistas entre el equipo de diseño en busca de dónde podríamos hacer mejoras. Pronto compartiremos lo que aprendimos en una publicación.

Según la investigación recopilada, formamos un equipo para crear Horizon, nuestro sistema de diseño para todos nuestros productos de consumo de Twitter. Para que Horizon tuviera éxito, sabíamos que debía tratarse con el mismo esfuerzo que un producto, con objetivos claramente identificados, una hoja de ruta y, por supuesto, un botín.

Objetivo 1: aportar cohesión a través de las plataformas
Una forma confiable de introducir cohesión en todas las plataformas fue a través de auditorías. Las pequeñas diferencias visuales entre plataformas eran fáciles de encontrar, pero con diferentes equipos dedicados a diversas iniciativas, las inconsistencias entre los elementos de la interfaz de usuario y las interacciones eran demasiado comunes.

Los ejercicios de auditoría nos ayudaron a crear un inventario de actualizaciones para que hagamos a medida que los recursos estén disponibles o los equipos toquen áreas relacionadas de las aplicaciones.

El mejor uso de nuestros hallazgos de auditoría fue tomar patrones conflictivos y documentar los usos apropiados para guiarnos hacia la unificación. Con esta documentación, finalmente tuvimos un recurso para ayudar a evitar que vuelvan a surgir los mismos problemas.

Objetivo 2: proporcionar recursos confiables
La creación de pautas de documentación coherentes y la distribución de activos .sketch siempre actualizados como recursos ayudaron a todos a comenzar a comunicarse verbal y visualmente de manera unificada.

Queríamos asegurarnos de que el lenguaje de nuestro equipo para diferentes elementos e interpretaciones del uso apropiado no fuera muy diferente. A través de ejercicios de nombres, entrevistas y sesiones de trabajo, colaboramos con diseñadores e ingenieros de todo el equipo para elaborar un amplio conjunto de pautas de uso.

Sin esta documentación centralizada, nuestro equipo no podría escalar correctamente. El conocimiento se limitaba a personas específicas, lo que hacía que esas personas tuvieran que reunirse con otros regularmente para discutir el mismo tema una y otra vez. Nuestra documentación creó un lugar único para reunir el conocimiento que los miembros del equipo adquirieron mientras trabajaban en un producto, lo que permitió un modelo de autoservicio.

A partir de la investigación realizada dentro del equipo de diseño, se dedicó una cantidad considerable de tiempo a recrear vistas en el producto en Sketch. Al proporcionar un conjunto de recursos sincronizados en la computadora de cada diseñador que contienen elementos y pantallas actualizados, podemos aumentar la productividad y la eficiencia; Eliminamos esa tarea tediosa y recurrente (más sobre esto en una próxima publicación).

Objetivo 3: mirar hacia el futuro sin recrear la rueda
Saber cómo y cuándo evolucionar un componente o patrón de interacción existente a menudo puede no estar claro. Estamos resolviendo esto mediante la identificación de una fase de exploración secuencial dentro de nuestro proceso de diseño de productos: utilización, adaptación, luego creación.

La utilización de los componentes de Horizon nos permite aprovechar soluciones definidas para problemas y necesidades de diseño comunes. Con nuestro sistema de diseño, construimos bases sólidas de elementos de interfaz de usuario existentes y patrones de interacción que podemos usar y reutilizar, con poca sobrecarga y la menor cantidad de fricción. El uso de estos elementos permite crear una experiencia consistente en todas las plataformas que requieren que las personas tengan que hacer menos trabajo cognitivo para aprender nuevas interacciones.

La adaptación de un elemento es una oportunidad para refinar y mejorar todos los casos de uso actuales. Cuando una presentación o comportamiento existente no resuelve completamente un problema, podemos hacer ajustes a un elemento para acomodar las necesidades y hacer que esos cambios se propaguen por toda la aplicación.

La creación de nuevos elementos de interfaz de usuario o patrones de interacción a veces es necesaria cuando las partes de nuestro sistema de diseño no resuelven un problema específico para las personas que usan Twitter. Intentamos, siempre que sea posible, adherirnos a la utilización y adaptación de nuestro sistema, pero reconocemos que para proporcionar una gran experiencia, a veces se necesitan nuevos artefactos para resolver un problema. Al pasar por este ciclo, podemos asegurarnos de que la creación de un nuevo elemento sea beneficiosa para nuestro sistema y para las personas que usan Twitter.

Conclusión
Al identificar estos objetivos al principio de nuestro proceso, estamos fijando nuestra mirada en cómo queremos trabajar y qué queremos construir.

Estamos aprendiendo mucho a lo largo de este proceso, a través de encuestas y presentaciones trimestrales del equipo, mientras evangelizamos nuestra misión en toda la organización.

Esta es la primera publicación de blog en la serie "Horizon Design System". Esperamos poder compartir más sobre nuestro proceso y progreso en futuras publicaciones. Mientras tanto, si tiene preguntas, déjenos una respuesta. O envíenos un Tweet!

Imágenes de estudio cortesía de Josh Wilburne. Ilustración del encabezado cortesía de Michie Cao.