Diego Valencia
Designer

Rediseño de Kitchen Display

Ayudar a las cocinas a trabajar en nuevas órdenes a un ritmo más rápido. Proyecto en colaboración con ZagaLabs LLC.

Kitchen United MIX es el futuro de la comida para llevar y la entrega a domicilio. La primera experiencia para llevar “pedidos de varios restaurantes” en los EE. UU. Es el único destino que permite a los amantes de la comida que aman la variedad pedir comidas de más de 10 restaurantes, todos con la misma factura.

KU Página de Facebook

KU Página de Facebook

Descrubimiento

KU tenía el KDS funcionando en producción pero sabían que su experiencia, usabilidad e interfaz tenían margen de mejora.

Los miembros de las cocinas estaban teniendo dificultades al usarlo y la apariencia no les atraía.

Las alarmas y los estados de las órdenes en general no eran cosas que KU tenían totalmente claro todavía.

Me uní a Zagalabs y construimos una solución sólida para que los miembros de la cocina comprendan el flujo de órdenes y las entreguen a un ritmo más rápido.

Versión antigua del KDS

Versión antigua del KDS

Problemas de usabilidad

· Teniendo en cuenta que la pantalla está puesta en un lugar alto de la cocina, tener los botones "Total" y "Agendados" en la parte superior de la pantalla hace que sea difícil para los miembros de baja estatura alcanzarlos. Lo mismo sucede con la paginación.

· Los pedidos no cuentan con un scroll interno, lo que significa que deben dividirse en tantos mosaicos como sea necesario para mostrar todos sus items.

· Los botones "listo" y "reimprimir" parecen dos acciones principales. La velocidad lo es todo en este producto y tener dos botones iguales no ayuda a saber qué acción deben tomar para marcar un pedido como completado.

· Las órdenes se colocan exactamente una al lado de la otra sin espacio para respirar. Tener muchas en la misma pantalla lo hace abrumador.

· La jerarquía de la información no estaba clara.

Hallazgos

El equipo de KU investigó un poco para comprender mejor los puntos de dolor de los usuarios utilizando el KDS.

Los resultados nos permitieron enfocar nuestros esfuerzos en entregar un producto que resolviera sus necesidades particulares.

Resultados del descubrimiento y priorización realizados por el equipo de KU

Resultados del descubrimiento y priorización realizados por el equipo de KU

Flujo de órdenes

Antes de trabajar en cualquier rediseño, tuvimos que averiguar el flujo de órdenes teniendo en cuenta que hay varios estados y alarmas que se deben activar.

Flujo de órdenes

Flujo de órdenes

Después de comprender el flujo actual de pedidos y realizar un par de revisiones e iteraciones, diseñé este nuevo flujo.

Los nombres de estado se muestran en colores en el flujo. Se aplicarán los mismos colores en la interfaz para indicar la cola, la cocción, el empaque y los pedidos completados y los activadores de alarmas.

Este flujo tenía margen de mejora, así que lo repetí teniendo en cuenta el estado de los miembros, los pedidos y el backend. También considerar el flujo de pedidos de KDS impacta en la vista del Centro EXPO.

Nuevo Kitchen Display
Desafíos de diseño

· Dar un impulso visual para reflejar un aspecto más moderno e integrarse con la identidad de la marca KU.

· Evaluar la interfaz general para la usabilidad y la experiencia del usuario: jerarquía, tamaños de botones, ubicación de elementos para ayudar a los usuarios a recopilar información relevante sin mucho esfuerzo.

· Mejorar la interfaz para mejorar las interacciones, asegurándome de que los elementos de interacción se centren en áreas específicas y no se extiendan por toda la pantalla.

· Mejorar la visibilidad de los productos y órdenes y la legibilidad de todos los textos e información.

Wireframes
Wireframes del nuevo KDS

Wireframes del nuevo KDS

Teniendo el flujo de órdenes y las recomendaciones del equipo de KU basadas en entrevistas con los usuarios, construimos una nueva arquitectura para el KDS. 

Estos wireframes abordaron varios puntos de dolor que tenían los usuarios:

· La jerarquía era mucho más clara.

· Los mosaicos de órdenes tienen espacio para respirar y diferenciarse unas de otras. Además, no tendrán que dividirse en diferentes mosaicos debido a un indicador de scroll en las que tienen muchos elementos.

· Los detalles de una órden -como miembro, ID, fecha de vencimiento, etc- se colocan de una manera que no interfirieran con el flujo de los usuarios: cambiar el estado y hacer su trabajo.

· Se colocaron filtros de orden por estado y paginación en la parte inferior de la pantalla para mejorar la interacción táctil de todos los miembros de la cocina.

· El único call to action que tienen para visualizar más rápido es el que les permite cambiar el estado del pedido. El botón de reimpresión es secundario.

Esta versión de los wireframes parecía bastante sólida pero le faltaban dos cosas: 1) el número de la orden no es relevante sino el ID y el tiempo de entrega y 2) el flujo de bolsas aún no estaba listo.

En cuanto a las bolsas, los miembros de la cocina habían mencionado que se sentían frustrados porque los llevaba a otra pantalla para seleccionar la cantidad de bolsas.

En estos wireframes, consideré agregar este flujo dentro del mismo mosaico de la orden, pero la forma en que la marcan como completada no estaba terminada, así que lo iteré en la versión de diseño de interfaz.

Solución final
The new KDS

The new KDS

La interfaz aborda los puntos débiles de los usuarios y les brinda una mejor comprensión de los flujos de pedidos de la siguiente manera:

· Mayor legibilidad de la información.

· La identificación del pedido y el tiempo de vencimiento tienen mayor visibilidad que el resto de detalles de un pedido.

· Las estatuas de pedidos y las alarmas son más claras, que se activan según el tiempo de vencimiento o la prioridad (por ejemplo, pedidos que necesitan hacer cambios).

Flujo de empaque

Como mencioné antes, los miembros de la cocina se sintieron frustrados porque los llevaba a otra pantalla para seleccionar la cantidad de bolsas. En este nuevo KDS pueden seleccionarlas directamente desde la misma orden y su diseño es bastante sencillo.

Mantuve un estilo de contraseña de Android ya que es familiar para la mayoría de los usuarios. 

Después de seleccionar al menos una bolsa, el CTA está listo para permitirles completar el pedido y moverlo a la lista de completados. 

También coloqué una flecha para volver a revisar la orden en caso de que necesiten verificar los artículos que tiene para asegurarse de que están colocando la cantidad correcta de bolsas.

Seleccionar bolsas - revisar orden - dígito presionado

Seleccionar bolsas - revisar orden - dígito presionado