Nuestro Proceso de Diseño (UX)
Compartimos nuestro proceso de diseño para rediseñar el Panel de Control de un Sistema de Gestión de Colas.
Cuando aún no tenía experiencia en el diseño de productos digitales (UX), por lo general me estancaba en el proceso: no sabía por dónde comenzar y qué hacer a continuación. Me tomó un tiempo ganar práctica y aprender de otros diseñadores quienes compartían su forma de trabajar (por lo general en inglés).
De ahí la intención de este post: compartir de forma didáctica y resumida nuestra forma de trabajar de manera a que otros diseñadores puedan tomarlo para reflexionar sobre su propio proceso; y por qué no, también reflexionar y mejorar nosotros mismos ;-) .
Entender nuestros procesos, nos hace más efectivos.
Caso de estudio: Rediseño de un Panel de Control
En The Product Lab, tuvimos el desafío de rediseñar el panel de control del Sistema de Gestión de Colas Qbox de KnowHow.
Qbox permite a las sucursales de distintos negocios administrar los tickets de atención al cliente de manera a brindar un servicio eficiente y diferenciado. El supervisor utiliza el Panel de Control para controlar los boxes de atención, y priorizar a los clientes según el tiempo de espera.
A continuación les compartimos nuestro proceso.
Paso 1: Reunión inicial
Establecimos una reunión inicial con el equipo de KnowHow para hacer una evaluación inicial de la versión actual del sistema y, sobre todo, definir sus metas y expectativas.
Durante la reunión, tomamos notas en el formato "Cómo podríamos…". Este formato, utilizado comúnmente en los Design Sprints de Google Ventures, nos permite rápidamente formular los problemas identificados como oportunidades de diseño.
¿Cómo podríamos…?
Paso 2: Definir las metas
Además, durante la reunión inicial también nos aseguramos de establecer metas claras para el proyecto. Por más que parezca obvio, este paso por lo general es pasado por alto (o dado por sabido).
Definir las metas es uno de los pasos más importantes en el proceso, ya que ayuda en la toma de decisiones y sienta las bases para definir el éxito o fracaso del proyecto.
Identificamos dos metas principales:
- Que el supervisor pueda monitorear una sucursal sin tener que "estar controlando" todo el tiempo (es decir, tener la información necesaria de un vistazo);
- Que cada cliente que implemente el sistema lo sienta como "propio", incorporando sus colores y marca.
Paso 3: Demos rápidas
Antes de comenzar a idear soluciones, un paso muy útil es el de realizar "demos rápidas" (lightning demos, en inglés) para buscar inspiración. Esta dinámica también es recomendada por Google Ventures en los Design Sprints.
Las demos rápidas consisten en dar un vistazo general a algunas soluciones ya existentes, destacando la esencia de cada una.
Paso 4: Bocetado en papel
Es muy tentador para quienes manejan herramientas digitales ir directamente a la computadora y comenzar a diseñar con algún software de diseño (o peor aún: comenzar a programar). Sin embargo, toda idea comienza primero en un papel.
Bocetar primero en papel nos permite explorar en cantidad y tener feedback inicial del cliente de forma rápida sobre una variedad de opciones.
Nuestros conceptos se centraron en crear primeramente un "dashboard operacional". Es decir, nos enfocamos en mostrar en el panel de control solo los elementos que sirven para tomar decisiones en el instante, dejando los elementos analíticos (de reporte) para una interfaz separada.
Paso 5: Prototipos digitales
Recién una vez que acordamos con el cliente en un concepto o una línea a seguir, pasamos a crear prototipos en formato digital. Para los prototipos digitales utilizamos Figma, una de nuestras herramientas preferidas ya que permite trabajar de forma simultánea y colaborativa en un mismo diseño.
En el primer prototipo plasmamos solo la estructura del panel de control, sin muchos colores ni detalles. Luego de una ronda de feedback, pasamos a un prototipo de más alta fidelidad antes de tener el visto bueno final.
Paso 6: Pulir detalles
Una vez aprobada la versión de alta fidelidad de nuestro prototipo, pasamos a definir y refinar el resto de las pantallas (siempre en continua comunicación con el cliente), ya teniendo en cuenta los distintos tipos de resoluciones y con una atención obsesiva al detalle. Más sobre el trabajo de UI en detalle lo publicaré en otro post.
Como resultado de nuestro proceso, entregamos un archivo de Figma con todas las interfaces detalladas, mostrando ejemplos de uso y adaptaciones para distintas resoluciones, y además incluyendo una librería modularizada de componentes.
Finalmente, el nuevo diseño permite monitorear de forma más eficiente las sucursales, separando la información operacional en el dashboard principal de la información analítica (en las interfaces de reporte).
Además, aprovechando la funcionalidad de estilos de Figma, definimos elementos específicos de la interfaz que el cliente pueda personalizar con los colores específicos de su marca.
Resumen
La idea de este post es mostrar nuestra forma de trabajar para un caso particular. Si bien no existe un solo proceso que funcione como fórmula para resolver todos los problemas de diseño, siempre es útil tener frameworks de referencia.
En este caso específico, resumimos nuestro proceso en:
- Reunión inicial
- Definir metas
- Demos rápidas
- Bocetado en papel
- Prototipos digitales
- Diseño detallado
Un buen diseñador debe poseer una variedad de herramientas, y utilizar su experiencia y criterio para decidir cuáles son las más apropiadas para cada caso particular.
Para terminar, consideramos que compartir experiencias de trabajo y aprendizajes es una de las maneras más enriquecedoras de crear comunidad. ¿Cómo es tu proceso de diseño?
