Diagramas de arquitectura de sistemas de diseño

Un vocabulario visual para relacionar sistemas, productos y marcas

Muchas empresas presentan ecosistemas mucho más complejos que "un sistema de diseño, todos nuestros productos". Cada vez más, he encontrado que las discusiones entre grupos y líderes de sistemas son desafiantes. Hasta ahora, me faltaba el vocabulario para mostrar y enseñar rápidamente la amplitud de estos muchos sistemas y cómo sirven a diferentes clientes internos con diferentes características.

Este artículo propone un vocabulario visual de marcas, sistemas y productos. El vocabulario denota los diferentes resultados, documentación, adopción y límites organizacionales de un sistema de diseño. Para concluir, el vocabulario se ilustra a través de un ejemplo completo basado en escenarios.

Los símbolos

Los diagramas de arquitectura del sistema usan símbolos (diamantes, círculos y cuadrados) para connotar objetos (sistemas, productos e identidades de marca, respectivamente).

Sistema, como diamante

Cada diamante representa un conjunto de características del sistema de diseño explícito o implícito, que incluye, entre otros, un estilo visual definido aplicado a uno o más componentes de la IU ofrecidos como activos de diseño y / o código.

Las etiquetas de título y descripción se muestran opcionalmente arriba a la derecha con una rotación de 45 grados. Si bien se puede ajustar la ubicación de la etiqueta a medida que emerge un diagrama, este valor predeterminado resultó ser menos probable que entre en conflicto con objetos y conectores.

Herramientas del sistema: diseño de activos y código, como semi-diamantes

Cada sistema ofrece activos de diseño (como Sketch, Figma o Invision Studio), una biblioteca de códigos o ambos. Por lo tanto, el diamante del sistema se divide para indicar si ofrece activos de diseño (una D roja en la mitad izquierda del símbolo), un código (una C azul en la mitad derecha del símbolo) o ambos a sus clientes.

Pautas de diseño y referencia de código como telón de fondo de diamante

La mayoría de los sistemas de diseño documentan ejemplos visualmente y, si están disponibles, el código utilizado para producir ese resultado. Sin embargo, no todos los sistemas de diseño ofrecen pautas de diseño más profundas y material de referencia de código. Ambos generalmente se comunican a través de un sitio web bien diseñado. Por lo tanto, los fondos amarillos en el lado izquierdo y derecho del diamante del sistema indican la disponibilidad de pautas de diseño y referencia de código, respectivamente.

Por ejemplo, IBM Carbon, Shopify Polaris, Morningstar, REI Cedar (divulgación: contribuí a los dos últimos) proporcionan pautas detalladas de diseño y material de referencia del código. Por lo tanto, cada uno incluiría un diamante amarillo completo detrás de las salidas D y C.

Por otro lado, el Origami de Financial Times ofrece códigos de referencia sin pautas de diseño. El material de Google ha proporcionado durante mucho tiempo abundantes pautas de diseño sin código, aunque eso ha cambiado recientemente con sus pautas y código más vagamente acoplados en diferentes arquitecturas de un sitio mucho más amplio.

Salesforce Lightning Design System ofrece una guía de diseño bastante limitada, combinada con documentación de componentes centrada en el código. Por lo tanto, indicaría, de mala gana, que su sitio carece de pautas de diseño detalladas.

Productos como círculos

Diagramar las conexiones entre un sistema de diseño y sus clientes es esencial. Algunos pueden no considerar su trabajo como un "producto" per se. Sin embargo, un círculo representa cualquier experiencia digital (o parte de ella) producida por un equipo que podría optar por adoptar un sistema.

Por ejemplo, una experiencia de comercio electrónico puede tener escuadrones distintos para cada paso del proceso: página de inicio, resultados de búsqueda, página (s) de aterrizaje y categoría, página de producto, carrito de compras, pago, estado del pedido y devoluciones, y perfil de cuenta. Cada uno se representaría claramente en un diagrama.

Cantidad de producto como insignias

Para un ecosistema con muchos productos, consolide en un solo símbolo que represente muchos e indique la cantidad con una insignia.

Estado de adopción del producto como color

La adopción del producto de un sistema es irregular. Por lo tanto, use el color para connotar el estado como adoptar usando el código del sistema (negro), incrustar el diseño del sistema en el código personalizado del producto (gris) o no adoptar el sistema (blanco).

Estos también pueden consolidarse usando insignias para la cantidad.

Conectores, líneas de arriba a abajo

Los conectores verticales de arriba a abajo representan los productos según el (los) sistema (s). Mientras que las pantallas de izquierda a derecha y radiales ofrecen distintas oportunidades (particularmente, "belleza" radial), la orientación de arriba a abajo mejora la eficiencia visual, acelera la comprensión y facilita la producción y el mantenimiento.

Las líneas giran a través de ángulos redondeados de 90 grados. Los conectores rectos o arqueados se superponen y combinan con otros conectores y objetos, lo que hace que la presentación sea desordenada y las rutas sean más difíciles de seguir.

Estos diagramas se relacionan estrechamente con los diagramas de dependencia que concluyen los conectores con una flecha. Sin embargo, los comentarios sugirieron fuertemente que la orientación vertical del diagrama implicaba direccionalidad. "Las flechas desordenan el diagrama", afirmaron mis colegas. Por lo tanto, confíe en el color simple de contraste más bajo de una línea para conectar objetos.

Identidades de marca como cuadrados

A veces es divertido ver a los profesionales del sistema de diseño sobresaltados cuando se les recuerda que su sistema no es la parte superior de la pirámide. Todos los sistemas de diseño (digital) que he trabajado heredan elementos esenciales visuales (color, tipografía, ilustración) y otras propiedades de una o más identidades de marca administradas por una marca o equipo de marketing. Las marcas se representan como un cuadrado.

Múltiples marcas como padres de un sistema

Mostrar marcas es útil para representar muchas identidades compatibles con un solo sistema. Por ejemplo, un sistema de diseño de Marriott incorporó reglas para distintas propiedades del hotel como Courtyard, Renaissance y JW Marriott.

Límites organizacionales como columnas

Ninguna arquitectura de sistemas de diseño en toda la empresa está completa sin una indicación de las unidades organizativas atendidas por cada uno. Estos pueden tomar la forma de dominios, tribus y escuadrones. O tal vez líneas de negocio. O segmentos del viaje de un cliente. No importa cómo divida su empresa su trabajo y equipos, si es de cualquier escala, tiene divisiones.

Elegí usar límites morados que son discontinuos y más gruesos que las líneas que conectan los nodos. Además, las etiquetas moradas de uno o dos niveles orientadas en la línea de base del diagrama etiquetan claramente cada área.

Ejemplos

Para ver el vocabulario visual en acción, presento una variedad de ejemplos respaldados por historias descriptivas para establecer el contexto y revelar los desafíos de alto nivel que enfrentan los sistemas en cuestión.

Ejemplo: un sistema central con intermediarios

Esta arquitectura de sistema de diseño connota un sistema único y reconocido del que dependen todos los productos digitales. Algunos productos adoptan el sistema directamente. En otros casos, el sistema es intermediado por equipos que ofrecen traducciones de JavaScript basadas en React y Vue de su biblioteca de HTML y CSS.

El equipo del sistema de diseño reconoció la redundancia arquitectónica y la complejidad, liderando su próxima generación de trabajo para ofrecer componentes web para aliviar la necesidad de tales traducciones.

Ejemplo: bancos pequeños y compañías de seguros

Muchas compañías de seguros y bancos organizan equipos de productos digitales a medida que el embudo fluye desde el marketing de .com a través de embudos de ventas que adquieren clientes hasta experiencias de servicio para administrar transacciones, como un reclamo y una transferencia de dinero respectivamente. Esto puede dar como resultado al menos dos sistemas de diseño, dividiendo al menos .com y servicio, si no también un tercer sistema para los flujos que adquieren clientes en el espacio dividido entre ellos.

Ejemplo: software como servicio (educación)

Considere una cartera de software bajo el paraguas de una empresa matriz. Su sistema surgió a través de un rediseño de su oferta emblemática: contenido y medios interactivos como plan de estudios.

Después de que se lanzaron los buques insignia, los equipos aplicaron el sistema a herramientas de productos cruzados (autenticación, página de inicio, panel (es), búsqueda y administración de cuentas) y consolas administrativas donde los educadores administraron los datos y el acceso de los estudiantes. Con el éxito cada vez mayor, comenzaron a mirar hacia una unidad de hermanos que producía sitios personalizados y de marca blanca para los clientes.

Ejemplo: unidades de negocio por tipo de cliente

Una empresa organizó equipos digitales en unidades de desarrollo de productos que prestan servicios por separado a consumidores, empleadores y sus empleados, y a grandes instituciones en su campo. Como resultado, surgieron distintos sistemas en cada unidad.

Los equipos del sistema compartieron prácticas y herramientas, pero se mantuvieron autónomos para servir óptimamente a distintos clientes. Esto ayudó a evitar desafíos, como la convergencia prematura de un lenguaje de diseño que aún no era una prioridad.

Ejemplo: software como servicio (Enterprise)

Una compañía de software estableció un sólido sistema centralizado con adopción en todos los productos principales y secundarios. Dicho esto, persistió en una experiencia de documentación de diseño separada, aparte de sus componentes codificados aplicados universalmente. Algunos productos clave ampliaron el sistema, ya sean diseñadores de productos A y B que administran bibliotecas de Sketch o un ingeniero que mantiene el código de componente para sus equipos. Además, una adquisición potencial desencadenará la discusión sobre la integración a nivel de producto, sistema y marca.

Puede descargar el archivo de croquis de símbolos y ejemplos que se muestran aquí.