7 para una organización a gran escala antes de crear un

preguntas que debes resolver antes de crear un sistema de diseño para una organización a gran escala7

Alejandro Figueroa E. Coordinador UX, [email protected]

7 preguntas que debes resolver antes de crear un sistema de diseño para una organización a gran escala

Sistemas de Diseño

Colección de componentes reutilizables que, guiados por estándares claros, permiten ensamblarse para construir un número ilimitado de aplicaciones.

Fuente: Invision Blog

https://www.invisionapp.com/blog/guide-to-design-systems/


○ Falta de lineamientos claros y consistencia gráfica en los productos digitales.

○ Ineficiencia en el proceso de diseño y desarrollo.

○ Dificultad para transferir buenas prácticas entre diferentes equipos de trabajo.

Sistemas de Diseño

Soluciona diferentes problemas:

7 preguntas que debes resolver antes de crear un Sistema de diseño para una organización a gran escala


Kit Digital UCDiseña y desarrolla rápidamente interfaces para el ecosistema digital de la Universidad Católica de Chile.

Preguntas que resolvimos para crear el Kit Digital UC


Kit Digital UC

¿Por dónde empezar?1.



Todo sistema de diseño debe pensarse a partir de un cultura organizacional.



○ Una cultura y un lenguaje común.

○ Una visión y situación financiera (lo viable).

○ Capacidades técnicas (lo factible).

○ Clientes con necesidades (lo deseable).

Toda organización posee:



Lo viableVisión y situación

financiera

Lo factibleCapacidades

técnicas

Lo deseableClientes con necesidades



○ Universidad tradicional con 131 años.

○ Comunidad de 38.480 personas.

○ Cuenta con 526 sitios web actualmente.


Kit Digital UC

¿Cómo logramos el apoyo para crearlo?2.



Es fundamental alinear los objetivos del sistema de diseño con los objetivos estratégicos de la organización (lo viable).

Es clave conseguir apoyo financiero que se traduzca en las personas, insumos y cambio de normativas institucionales.



Visibilizar el problema de diseño:

○ Inconsistencias de interfaz.

○ Procesos de diseño ineficientes.

○ Visibilizar el problema y la solución, y poder cuantificar ambos en términos financieros.

○ La importancia de la comunicación, el lenguaje y el uso de metáforas.

○ Tener vocación de oportunista.

○ Traducir el problema de diseño en problema organizacional, por ejemplo:

Y traducirlo en estrategia:

○ Costos económicos y recursos mal utilizados.

○ Posicionamiento institucional.



○ Levantar información de los problemas de los equipos de la organización.

○ Incorporar esta información en el discurso para la “venta”.

○ Prestar atención cuando se presenten las oportunidades.


Kit Digital UC

¿Quién usará el sistema de diseño?3.



Lo que es importante para nosotros no es necesariamente importante para quién usará el sistema de diseño.



Para nosotros:Consistencia

Para los equipos:Diferenciación

Lo importante...



Responsable del proyecto

Identificar los tipos de usuario:

Diseñador/a Desarrollador/a



Identificar el modelo de trabajo:

Fuente: Team Models for Scaling a Design System, Nathan Curtis

Solitario Centralizado Federado

https://twitter.com/nathanacurtis


Kit Digital UC

¿Cuál será la propuesta de valor del sistema de diseño?4.



Existen oportunidades para crear valor desde la conceptualización hasta la implementación del sistema.



Visión, misión, valores

Identidad corporativa

Equipos de la organización

Guía de estilo

Componentes

Documentación

Sistema de diseñoOrganización



○ En la definición de principios de diseño.

○ Adaptando la identidad corporativa.

○ Creando componentes y templates útiles para los diferentes equipos de la Universidad.

Oportunidades:



Misión+Identidad corporativa

Principios de diseño

Guía de estilo (ADN)

Componentes y plantillas



MisiónLograr la excelencia en la creación y transferencia del conocimiento y en la formación de personas, inspirada en una concepción católica y siempre al servicio de la Iglesia y la Sociedad.





Guía de estilo (ADN)Invitación al

conocimientoOrientación a la excelencia

Foco en las personas




Aplicación en el estilo:○ Llamados a la acción claros y efectivos. ○ Elementos de interfaz visual que faciliten el

acceso a la información.○ Diseño capaz de adaptarse a cualquier

dispositivo.

Invitación al conocimiento




Aplicación en el estilo:○ Equilibrio y balance de elementos en la

composición de cada interfaz. ○ Uso de jerarquías claras. ○ Foco en los detalles. ○ Uso de los elementos institucionales de marca.

Orientación a la excelencia




Aplicación en el estilo:○ Principios de Experiencia de Usuario (UX),

como accesibilidad (WCAG 2.1), usabilidad, deseabilidad, etc.

Foco en las personas




Arquitectura de marca:○ Marca madre○ Marca modificada○ Sub marca○ Denominación

Marca y elementos institucionales





Paleta cromática





Tipografía





Para los diferentes equipos:





○ Header y footers según tipo de sub marca.

○ Programas de estudio.

○ Campus, facultades y unidades.

○ Perfiles de autoridades, académicos, etc.

○ Eventos, noticias, concursos de investigación, etc.

○ Etiquetas o tags para categorizar contenidos similares.


Kit Digital UC

¿Qué debería incluir el sistema de diseño?5.



“Un sistema complejo que funciona invariablemente se ha desarrollado de un sistema simple que funcionó.”

Fuente: John Gall



○ Guía de estilo (ADN): Tipografías, colores, grilla, uso de marca, formas, etc.

○ Librería de diseño (Sketch + Figma): Con un catálogo de alrededor de 300 componentes.

○ Repositorio de código: Con todos los componentes en HTML/CSS/JS.

○ Documentación con lineamientos:Uso correcto del kit, ejemplos de diseño, etc.

kit Digital UC



Atomic Design adaptado a la UC

Átomos Moléculas Organismos Templates Páginas

Fuente: Brad Frost

Íconos: Noun Project



Átomos



Moléculas



Organismos



Templates



Páginas


Kit Digital UC

¿Cómo mediremos la adopción del sistema?6.



Medir el grado y modo en que se adopta el sistema es vital para validar el proyecto y mejorar en el tiempo.



Escala de colores de adopción:

Basado en: Survey Monkey

No se ha usado el Kit Digital UC

Planea usar el Kit

Se diseña con el Kit, pero no usa o usará el código

Se diseña y usa el código



○ Actividades públicas y reuniones.

○ Documentación y canales de atención.

○ Proyectos y alianzas clave.

○ Feedback y participación.

Logrando adopción


Kit Digital UC

¿De qué forma podría escalar nuestro sistema?7.


¿De qué forma podría escalar nuestro sistema?7.

El arte de abrazar la incertidumbre.

1. ¿Por dónde empezar?2. ¿Cómo logramos el apoyo para crearlo?3. ¿Quién usará el sistema de diseño?4. ¿Cuál será la propuesta de valor?5. ¿Qué debería incluir el sistema de diseño?6. ¿Cómo mediremos la adopción del sistema?7. ¿De qué forma podría escalar nuestro sistema?

preguntas para crear un sistema de diseño:7



¡Muchas gracias!

7 para una organización a gran escala antes de crear un

Documents