top of page
Branding + Design Coffee House App
Branding + Application Design + UX/UI
UP UP AND UP
DATE
Sep - Dic 2021
ROLE
Investigador UX
Diseñador UX
Diseñador UI
AGENCY
Freelancer
ENTREGABLES
Mockups Hi-Fi, Prototipo de alta fidelidad,
FRAMEWORK
Design Thinking
Antecedentes
Coffee House es una empresa de cafeterías ubicadas en distintas partes del mundo, ubicadas generalmente cerca de zonas con oficinas o los suburbios. Su clientela principalmente se compone de oficinistas jóvenes de un rango de edad de 25 a 35 años.
La aplicación debe ser fácil de usar para los usuarios, debe permitirles conocer los detalles del producto que están a punto de pedir y debe permitirles realizar dos tipos distintos de pedidos; Pedidos tipo "Pick-Up" y pedidos para llevar a su mesa.
Desafíos
1) Diseñar un flujo simple que permita la compra de varios productos dentro de un pedido
2) Construir una interfaz atractiva para el usuario que le invite a recorrer la aplicación y conocer los productos
3) Incluir en el flujo de recorrido la opción para elegir el tipo de pedido.
Iniciando el camino
Tomando un enfoque dirigido a simplificar los procesos para que el usuario se concentre en los productos y no en el recorrido, la investigación comenzó buscando conocer quién es la competencia directa e indirecta de Coffee House, además de realizar entrevistas con usuarios reales para comprender las necesidades del usuario encontrar cómo resolver las preguntas clave iniciales:
¿Qué es el producto que quiero
diseñar?
¿Para quién es el producto que voy a diseñar?
¿Cómo puedo hacer intuitivo el recorrido del usuario?
¿Cuál es el procedimiento más complicado del recorrido?
Auditoría competitiva
Una auditoría de competencia entre las empresas con las que Coffee House compite en el mercado nacional e internacional reveló importantes aspectos de las diferencias a veces sutiles pero siempre importantes entre empresas y sus servicios.
Starbucks cuenta con una interfaz moderna, recomendaciones de productos, además promociona de forma especial sus productos nuevos, se encuentra descargable par iOS y Android, cuenta con una UI moderna y atractiva y con la opción de crear un perfil para el usuario.
The Italian Coffee está muy rezagado en cuando a aplicación móvil, pues su aplicación no es ni cercana a una experiencia intuitiva, los tiempos de carga son lentos y el recorrido del usuario está plagado de trabas. No cuenta con casi ningún aspecto deseable.
Café Don Justo no cuenta con aplicación móvil.
Cielito Querido Café cuenta con una aplicación que da recomendaciones y promociona sus nuevos productos, está disponible en Android así como en iOS, pero no da opción para decidir el tipo de pedido, además de que su UI no es moderna ni llamativa, pero si se puede crear un perfil de usuario.
Evaluación económica
En el 2021 el mercado de cafeterías en México alcanzará un valor de 93 mil 100 millones de pesos, 23 por ciento superior al registrado al cierre de 2016.
Actualmente el negocio es disputado entre cadenas como Starbucks, Café Punta del Cielo y The Italian Coffee Company.
Información de Euromonitor International muestra que Starbucks es actualmente el líder del mercado con 39 por ciento; seguido de Café Punta del Cielo con 11 por ciento y The Italian Coffee Company con el 10 por ciento.
"En respuesta a las crecientes expectativas de los consumidores, los operadores de cafeterías en México están tratando de ser cada vez más sofisticados. Muchos negocios ahora se centran en lo artesanal, por ejemplo la salida de Starbucks Expresso", destacó la firma dedicada a la investigación de mercados.
Trazado de priorización
Al trazar una lista de las posibles características de manera gráfica, se pudo vizualizar lo que era fundamental el producto mínimo viable y así se podría desarrollarse más adelante. Una de las ventajas de este producto es la posibilidad de ordenar desde el establecimiento para que el personal de Coffee House lleve el pedido hasta el usuario y éste no tenga que perder su mesa al ir a ordenar a la barra y esperar su bebida.
Conociendo a las personas
Metas
​
-
Realizar sus pedidos en Coffee House de forma rápida y eficiente
​
-
Regresar pronto a su trabajo para tener oportunidad de demostrar sus capacidades
Frustraciones​
​
-
Realizar el pedido en la app es lento y frustrante
​
-
Su pedido a veces es incorrecto
​
-
El pedido pick up que hace solo puede realizarlo en mostrador (no por adelantado)
Metas
​
-
Trabajar en un lugar con buen ambiente, servicio de internet y rico café​
​
-
Utilizar su tiempo de forma productiva en su trabajo.
Frustraciones​
​
-
Tener que levantarse de la mesa para realizar un segundo pedido​
​
-
Es problemático conservar una mesa y cuidar tus pertenencias si te levantas​
Rogelio es un Arquitecto de un importante despacho en CDMX, como parte de sus tareas, se turna con sus compañeros para levantar el pedido de café dentro de la oficina y poder ir a comprar los productos para todos. Ya que todos se turnan para realizar la actividad el lo hace con gusto, sin embargo, a veces es frustrante realizar el pedido en la barra, pues es demasiada información y a veces el barista se confunde y las preparaciones no son como el las pidió, por lo que quiere una aplicación que le permita realizar el pedido por adelantado y de forma más ordenada.
Jess es una programadora independiente, por lo que generalmente trabaja desde alguna cafetería de su ciudad, Coffee House es una de sus preferidas, sin embargo, para Jess es un gran inconveniente tener que levantarse de la mesa para realizar un segundo pedido, pues tiene que dejar su equipo de trabajo sin supervisión y a veces, cuando regresa puede haber otro cliente sentado en su mesa, por lo que ella necesita una aplicación que le permita realizar pedidos y que se los lleven a la mesa.
Arquitectura de la Información
Wireframes de Coffee House
Para poder comenzar con los prototipos de baja fidelidad, quería tener una idea aproximada de cómo lucirían las pantallas del flujo principal para comenzar con el diseño de las mismas.
Flujo del Wireframe digital
Al llegar a este punto, revisé mi flujo original, tuve que decidir que era necesario y que cosa podía dejar por fuera del prototipo inicial, hubo varias mejoras con respecto a los wireframes en papel, invertí mucho tiempo en esto, pero al final valió la pena, pues se convirtió en una experiencia de usuario más fluida e intuitiva.
Reto 1
Flujo sencillo
Se buscó diseñar una aplicación intuitiva y fácil de usar para cualquier tipo de usuario, pero con una UI enfocada en el público meta de Coffee House, que son adultos jóvenes de entre 20 y 35 años de edad.
La aplicación necesitaba contar un flujo intuitivo y sencillo, para que el usuario se centrara en el producto que quiere comprar, y no cómo realizar el recorrido para lograr su objetivo.
Reto 3
Comprobante de compra
Muchas veces, cuando realizamos una compra por primera vez, o cuando estamos distraidos, resulta complicado ingresar a la pantalla con el comprobante de compra, o debemos recurrir a sacar una captura de pantalla del mismo para tenerlo a la mano y solicitar nuestros productos... con Coffee House app esto ya no será un problema, pues permite al usuario ingresar a los comprobantes de compra (con código qr) desde 3 lugares distintos de la app.
Reto 2
Tipo de pedido
Una característica importante de Coffee House app es que permite al usuario seleccionar uno de los dos tipos de pedidos que ofrece la cafetería. Pedido tipo "Pick-Up" que es un pedido que el usuario recoge en mostrador y se retira del establecimiento o "Pedido a la Mesa" que es un pedido de tipo restaurante donde el personal de Coffee House lleva el pedido a la mesa del usuario.
Reto 4
Interfaz atractiva
Se buscó diseñar una interfaz atractiva para los usuarios, con una UI moderna y sobria, con los elementos necesarios para recopilar la información del pedido del usuario, pero sin sobrecargarlo con textos innecesarios.
Guía de estilo
El producto principal de Coffee House, es el café, el café es una valiosa fuente de energía para los trabajadores, por eso se decidió utilizar el color naranja como el color principal de la marca, evocando energía y juventud, en combinación con un negro con ligero matiz azul, crea una mezcla sobria pero enérgica que invita al usuario a seguir explorando dentro de la aplicación.
Conclusiones
Disfruto mucho beber café, ya sea en casa o en una cafetería, pero la experiencia de ir a un establecimiento a recibir un producto elaborado por un profesional, siempre será más memorable. Por esto disfruté mucho trabajar en este proyecto.
Debido a limitantes de tiempo algunas funciones que quise incorporar en Adobe XD quedaron de momento fuera del diseño, pero en un futuro seguramente las aplicaré en otro proyecto en el que puedan potenciar su utilidad y mejorar así la UX.
bottom of page