Paso a paso de un Sistema de Diseño para una herramienta de administración para Agentes de Seguros

Investigación

Durante la etapa de la comprensión de las necesidades del usuario, se puede utilizar metodologías como Design Thinking (Empathize), Lean UX (Think) o Design Sprint (Map).

Una técnica de investigación que nos permite conocer los problemas de los usuarios es la técnica de los 5 porqués.

Esto se realiza con entrevistas a usuarios para explorar los problemas que estos experimentan y así hacernos de una idea clara de cómo se podrá resolver a través del diseño.

¿Por qué no vendes más seguros? “No me alcanza el tiempo para hablar con mis prospectos.”

¿Por qué? “Porque no puedo atender a todos mis contactos.”

¿Por qué? “Necesito organizarlos.”

¿Por qué? “Para que no tenga contactos perdidos o traspapelados.”

¿Por qué? “Porque no tengo un control al registrar mis contactos.”

Posteriormente, se usarán historias de usuario para poder tomar decisiones de diseño para resolver el problema central.

Historias de Usuario

Principales historias de usuario para la plataforma

Como un (quién → tipo de usuario), quiero (qué → acción) para que (porqué → beneficio).

- Como un vendedor de seguros, quiero atender a todos mis clientes para que tener una mayor oportunidad de cerrar ventas.

- Como un vendedor de seguros, quiero cotizar múltiples seguros en mi celular para que no tenga que ir a la oficina por cotizaciones.

- Como un vendedor de seguros, quiero administrar mis contactos para pueda tener un mejor control de mi cartera.

Mindmap del sistema

Design System

Paso a paso para diseñar un Design System

Para desarrollar un sistema de diseño para una empresa en desarrollo de software es necesario utilizar la fórmula atomic design.

Para justificar mi recomendación, voy a compartir mi proceso de diseño en el momento en que pasé de la fase de wireframe hacia la construcción del diseño UI aplicando color, tipografías y componentes.

Quiero aclarar que los pasos que describo a continuación no son las etapas de atomic design.

Primer paso

Una vez que se detectó la necesidad del usuario y cuál será la solución a diseñar, el / los diseñadores deben esbozar los primeros wireframes hasta pulirlos completamente.

Es muy sencillo ir detectando los patrones que se pueden requerir para el diseño.

Es muy probable que a medida que se vaya yendo de la menor a la mayor calidad, los patrones pueden ir cambiando.

Nótese en las imágenes cómo se les fueron agregando unos detalles. No es tan importante ser muy precisos en esta etapa, sin embargo, debe quedar claro el objetivo de cada pantalla.

Segundo paso

El último wireframe en papel es muy relevante para este paso, ya que deben ser identificables los componentes que se van a diseñar en un ambiente digital.

Para la etapa de la digitalización de los wireframes, se puede recurrir a la utilización de recursos gráficos como íconos y la definición de una retícula que permitirá estructurar los espacios entre los patrones de diseño.

Agregar contenido detallado es recomendable para no estar diseñando a ciegas, es decir, tomar en cuenta los casos que se nos podrían presentar.

Por ejemplo, el teléfono no podría estar en una sola fila junto con el correo, ya que éste podría tener una longitud mayor.

Tercer paso

Es importantísimo definir los siguientes aspectos antes de ir directamente a diseñar los patrones de diseño:

Colores y variantes (la marca ayuda a definirlos)
Tipografía y estilos de textos
Retículas y espaciados (medianiles)
iconografía

Con esto definido, ya podremos ir desarrollando los átomos de nuestro sistema.

Aquí lo importante es ir nombrando bien las capas en el software de diseño.

Figma es muy útil para el registro de nombres, sin embargo, sketch y adobe XD funcionan muy bien.

Cuarto paso

Ahora es muy fácil empezar a crear átomos y posteriormente las moléculas.

Creo que la fórmula para crear átomos y/o moléculas es muy simple:

elemento + espacio definido + elemento = átomo

átomo + espacio definido + átomo = molécula

Quiero resaltar que el atomic design es un proceso un algo tardado dependiendo de la profundidad de la app o plataforma a diseñar, sin embargo, se ahorrará mucho tiempo en el futuro al hacer actualizaciones de componentes, tipografías o diseño en general.

Quinto paso

Ya tenemos nuestras moléculas definidas, ahora es valioso dar paso a los organismos, pues estos van a estructurar el diseño de una forma modular, es decir, los organismos son reutilizables entre pantallas.

En esta etapa ya se puede ir articulando las plantillas, aunque sea con contenido falso para ir viendo el comportamiento de nuestros organismos a la hora de diseñar.

Antes de introducir contenido real, es fundamental hacer una guía de los escenarios o historias de usuario que se van a presentar para poder visualizar TODOS los estados distintos del sistema.

Por ejemplo, cuándo un elemento está habilitado, deshabilitado; cuando un mensaje se podría marcar como leído o una tarea como completada.

Último paso

Si ya tenemos los organismos definidos y articulamos una o varias plantillas, ya se puede colocar contenido real o simulado.

Esto nos permitirá verificar que nuestro sistema sea adaptable de acuerdo a contenido variable.

Es importante cuidar cada átomo, molécula y organismo desde el principio porque puede que cuando se le agregue contenido real, los componentes pueden sufrir deformaciones o no podrían responder como lo esperamos. Y se tendrá que re-trabajar.

¿Cuál sería el Design Sytem Ideal para una empresa de software?

El que esté realizado a partir del método de atomic design.

Para una empresa de software que maneja muchos productos, es necesario tener su propio equipo de diseño para la elaboración de múltiples sistemas de diseño. Se recomienda que el equipo tenga conocimientos sobre atomic design y que cualquier diseñador que se involucre con los sistemas, pueda realizar cambios sin afectar la consistencia y manteniendo la usabilidad y en general la buena experiencia de usuario.

Buenas prácticas para diseñar un sistema de diseño

• Establecer los objetivos del diseño desde un principio. Es fundamental que todos los involucrados miren sobre una misma dirección.
• Tener una identidad de marca muy definida.
• Mantener la simpleza de la interfaz. Demasiados estilos, fuentes o colores impedirán que exista una consistencia visual.
• Documentar. No solo es crucial definir los comportamientos de los patrones, también es necesario dejar en un documento para qué sirve cada componente y qué variaciones tiene. A los desarrolladores les importará más la documentación que si responde el componente en Figma.
• Tener paciencia. A veces los diseñadores nos queremos adelantar pasos para visualizar nuestros diseños que tenemos en mente lo más pronto posible, pero a veces existen sesgos visuales que afectan la consistencia.

Agradezco infinitamente tu lectura

Te regalo mi última rebanada de pizza 🍕