Image for post
Image for post

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.

Alberto Samaniego
Sep 26, 2018 · 5 min read

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.

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…?

Image for post
Image for post
Notas en formato "Cómo podríamos…"

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:

  1. 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);
  2. Que cada cliente que implemente el sistema lo sienta como "propio", incorporando sus colores y marca.
Image for post
Image for post
Las metas nos sirven para dar dirección clara al trabajo de diseño.

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.

Image for post
Image for post
Vistazo general de las “demos rápidas”.

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.

Image for post
Image for post
Algunas exploraciones en papel, incluyendo una hecha por el mismo cliente como respuesta a lo presentado.

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.

Image for post
Image for post
Evolución: Del boceto en papel a un prototipo de alta fidelidad.

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).

Image for post
Image for post
Interfaces de Panel de Control, Reporte de Sucursales y Monitoreo Global.

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.

Image for post
Image for post
Los estilos de Figma permiten personalizar rápidamente los colores y tipografía.
Image for post
Image for post
Ejemplos de personalización del Panel de Control.

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:

  1. Reunión inicial
  2. Definir metas
  3. Demos rápidas
  4. Bocetado en papel
  5. Prototipos digitales
  6. 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?

The Product Lab

Ayudamos a diseñar productos digitales centrados en las…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store