check
Este servicio facilita el autoservicio de los usuarios en locales de ocio y restauración mediante el acceso a la carta por medio de QR.
Categorías
Diseño UX, diseño UI, wireframes, prototipado
Roles
Diseñador UX UI
Diseñador gráfico
Herramientas
Figma, Zoom, Figjam, Illustrator, Photoshop
El problema
Check se dio cuenta que la profesión de camarero en España desde hace años es algo pasajero hasta optar a otro trabajo. Las empresas encuentran dificultad en encontrar personas comprometidas en determinadas épocas del año de más afluencia de usuarios, formándose un problema a la hora de atender a todos los clientes.
Esta empresa les ofrece una solución en la que cada usuario puede gestionar su pedido de forma totalmente autónoma mediante el escaneo de un QR en el local. Una vez pagado el pedido, se les avisa por SMS o Whatsapp en el momento de poder recogerlo en la barra del mismo sitio.
Mi aporte a Check fue la propuesta de rediseño de la solución centrada en el recorrido de una persona haciendo un pedido en una hamburguesería, desde el acceso hasta el final del pago.
Metodología
Llevé a cabo la metodología de Design Thinking para poder empatizar y entender al usuario, pudiendo así descubrir necesidades nuevas que implementar y acabar prototipando este flujo en Figma para su presentación.
Investigación
Antes de ponerme de lleno a rediseñar, quise hacer una pequeña investigación por medio de benchmark y desk research.
Check es una solución que mezcla un pedido online de comida como el que puede hacer cualquiera desde su casa, pero en el mismo local. Por ello, analicé la forma de trabajar los flujos de usuario y diseño de más de diez empresas entre las que destacan Just Eat, Uber Eats, Glovo, Telepizza, Go Sushing, Domino’s y La Tagliatella.
Del desk research encontré varios datos y verbatims que me fueron útiles y me resonaron para tenerlos en cuenta a la hora de encontrar o reforzar funcionalidades de esta app de pedidos de comida online, en especial los siguientes:
“Cecilia, que también reconoce haber comprado comida a domicilio tras recibir una alarma con un descuento” - Aecoc Shopperviewer
Valoramos un 22% ver fotos de los productos, 12% la personalización de productos, 35% las ofertas y 28% la puntualidad. - Ticksy
Casi el 80% de los pedidos son para 2, 3 o 4 comensales. - OCU
Entrevistas y encuestas
El siguiente paso que di fue encontrarme con usuarios que potencialmente fuesen muestra de un local de hamburguesas. Quería saber su experiencia haciendo pedidos a domicilio, qué pain points tenían de un servicio similar y cómo podía mejorar Check para diferenciarse del resto.
De las 6 entrevistas y más de 30 encuestados, pude sacar varios datos relevantes. Me sorprendió que el 61,8% repitiese plato en restaurantes. La hipótesis que tenía sobre que a los usuarios les gustaría personalizar y filtrar su carta en base a sus preferencias alimentarias e intolerancias fue confirmada por un 91,2% y, en relación a esto, un 42,9% consideraba difícil de consultar los alérgenos en una carta de comida.
A un 94,1% de los usuarios les gustaría saber cuánto tiempo va a tardar su plato en estar listo. Con respecto a esto, prefieren ser avisados por la misma página en la que hizo el pedido (47,1%) o Whatsapp (38,2%). Finalmente, dejarían buena valoración si la atención ha sido cercana (91,2%) y si le han recomendado platos (17,6%).
Repite plato en restaurantes
Quiere personalizar y filtrar la carta
Encuentra difícil consultar alérgenos
Insights
Gracias a esta investigación previa, pude ir encontrando patrones y llegar a la elaboración de varios insights potentes que ayudarían a Check a mejorar su servicio actual:
Los usuarios tienen miedo de hacer un pedido de comida online al desconfiar del trato de la comida con respecto a sus intolerancias.
"Me suele dar miedo por mis intolerancias, por eso he reducido mucho mi consumo." Estefanía
Los usuarios se sienten bien cuando se personaliza su menú y no pierden tiempo buscando un producto.
"Me sería útil un filtro sin gluten, lactosa... Pierdes mucho tiempo mirando los alérgenos." Javier
Los usuarios se sienten perdidos y confusos al localizar y consultar los alérgenos de un producto en la carta de un restaurante.
"Yo lo tengo interiorizado, pero mis padres no entienden bien los iconos de alérgenos." Daniel
Los usuarios se sienten tranquilos al saber que hay un camarero que les pueda recomiendar platos o solventar dudas.
"Me gusta que te recomienden un plato. Me parece algo imprescindible." Eneko
La solución
Una vez que tenía la información clara y analizada, fue el momento de presentar las propuestas de mejora de Check con funcionalidades nuevas y mejorando otras ya existentes.
Uno de los puntos fuertes que se tenía que trabajar era el acceso a la información, en especial a los alérgenos, ya que muchos usuarios tienen un difícil acceso a esta información. Las ofertas, recomendaciones de platos y estado de los pedidos también eran fortalezas de las que sacar partido. Además, se implementaron propuestas para implementar técnicas de cross-selling y upselling en el proceso del pedido para aumentar las ventas del local.
El diseño se desarrolló con una estética moderna y formal, ya que el servicio de esta empresa está presente en multitud de locales y debía ser algo versátil sin perder la esencia corporativa de Check.
Propuestas de diseño y accesibilidad
Como parte del rediseño, analicé la accesibilidad que tenía el proyecto y de qué forma podía impactar para bien al usuario con su uso, trabajando la información para encontrarse de forma clara y accesible. Al ser un proyecto versátil destinado a muchos locales cada uno con su identidad gráfica, se trabajó en una propuesta moderna, elegante y que se adaptase a cualquier negocio.
#1 Diseño de la interfaz
El diseño propuesto fue mucho más limpio y moderno, destacando únicamente las partes deseadas. También se redujo el tamaño de la cabecera, quedando una interfaz que aprovecha mucho mejor el espacio para jerarquizar el contenido.
#2 Uso del color
Uno de los problemas que detecté es que los botónes y otros componentes usaban el texto en negro sobre el naranja corporativo, lo que dificultaba su legibilidad e impedía pasar el control de accesibilidad.
Se redujo la presencia del naranja sin eliminarlo por completo, dejándolo para destacar y así ganar limpieza y presencia.
#3 Accesibilidad
Otro punto de mejora era el espacio, ya que no se aprovechaba bien como era en la ficha del producto. El diseño nuevo se hizo full width y se estandarizó el estilo de los elementos, permitiendo jerarquizar la información existente.
#4 Reducción de clics
Con el fin de hacer el camino más fácil al usuario, también se trabajó en las pantallas que intervenían en el proceso de hacer y pagar un pedido de comida. De esta forma, se crearon pantallas con más información en el proceso de datos del pedido y se redujo este proceso de seis pasos a la mitad.
Propuestas de mejora
A parte del diseño, un punto importante de propuesta para Check fue la implementación de un menú inferior en el que destacar las secciones más útiles para usuarios: la carta, las ofertas, el carrito con el pedido actual, el estado del pedido y los hechos anteriormente y la ayuda.
#1 Pain point
Para aliviar el miedo y desconfianza de los usuarios debido a sus intolerancias, se propuso un filtro de platos en la carta con selección de alérgenos y notas en el pedido y para cada producto en particular en el caso de pedir más de un producto.
#2 Necesidad
Para potenciar la personalización del menú y evitar perder tiempo, se creó un filtro de platos en base a alérgenos y preferencias alimentarias. También se implementaron etiquetas en los productos para resaltar el tipo de alimentación, si estaba en oferta o si era un plato popular.
Finalmente, los usuarios pueden seleccionar el número de comensales al realizar el pedido, llegando todo al mismo tiempo y obteniendo cantidades de platos recomendadas.
#3 Pain point
La confusión de los usuarios al consultar los alérgenos se eliminó creando una sección desplegable al inicio la ficha del producto (un 85,7% de los encuestados esperaban verla ahí) con el icono y texto descriptivo de cada intolerancia.
#4 Necesidad
Con el fin de no perder las recomendaciones de platos que los usuarios valoran positivamente de un camarero, se creó una sección desplegable en la carta con los platos que se quisieran resaltar. Además, al haber establecido cuántas personas harán el pedido, también se les aconsejará sobre las cantidades de platos.
#5 Necesidad
Para reforzar la confianza de los usuarios con las notificaciones de su pedido, se propuso consultar su estado en el apartado “Pedidos”. De esta forma aliviaría a aquellos usuarios reticentes de facilitar sus datos (un 47,1% lo consultaría en la misma página) y podrías repetir pedidos anteriores (un 61,8% lo haría).
Design System
Como resultado de este diseño, pude crear los componentes necesarios para este flujo respetando siempre la identidad corporativa que ya poseía Check.
Iconos
Botones, menús y tarjetas
Recursos varios
Wireframes alta
El proyecto no requirió de un user testing final para hacer los últimos ajustes, ya que primero la empresa tenía que contemplar cuánto de lo propuesto llevar a cabo. De esta forma, el equipo de Check obtuvo una propuesta amplia de mejoras que debatir cómo y cuando implementar. De hecho, a lo largo de los próximos meses esperan poder ir haciéndolo y así potenciar un proyecto que tiene mucho futuro.
Conclusiones
Este proyecto me ha enseñado otra forma de trabajar un proyecto. No siempre tienes que hacer los mismos pasos de investigación y diseño, ya que cada proyecto tiene unas necesidades en concreto y un punto de inicio distinto.
El equipo de Check me lo puso muy fácil para poder trabajar de una forma cómoda desde la libertad total, cosa que facilitó a que las mejoras propuestas fuesen lo más ambiciosas y redondas posibles.
Ojalá les vaya muy bien en el futuro, de verdad 🙂
