Un momento para tomar café
Exploración propiaConcepto de app · sin afiliación con Nestlé · Diseño de producto y prototipo en código
NescaféNescafé, con EBACEBAC · Curso de UX/UIResumen del proyecto
- Problema
- Del café de todos los días molesta ir a comprarlo, la monotonía y no saber qué preparar.
- Meta
- Que la app dé algo distinto cada mañana —receta, lectura, rutina, comunidad— y el café no se haga rutina.
- Rol
- Diseño de producto y prototipo en código, de la investigación a la entrega.
- Duración
- Más de tres meses, trabajo individual con revisiones del tutor.
- Escuela
- EBAC — proyecto final del curso de UX/UI.
Método
- 01
Investigar — benchmark de 7 referencias, 20 entrevistas, mapa de empatía y 2 user personas opuestas con sus viajes
- 02
Definir — síntesis (qué mejorar, qué evitar, qué sentir), priorización con MoSCoW y 4 historias de usuario
- 03
Estructurar — arquitectura de 5 secciones y la tienda, y 6 wireframes de media fidelidad
- 04
Diseñar y construir — alta fidelidad, design system de 6 láminas y prototipo en React de 19 pantallas
- 05
Probar — 5 recorridos de prueba
El proceso, fase por fase
20
personas entrevistadas
5
recorridos de prueba, cinco arreglos
25
ideas priorizadas con MoSCoW
19
pantallas en código, recorribles
4
teléfonos en los que se probó
Hábitos sin costumbre
Qué hay en la app
- 01Inicio
- La frase del día, cuatro lecturas y las actividades nuevas
- 02Recetas
- Qué preparar, en calientes y frías, con los productos Nescafé
- 03Mi día
- Planificador, rutina de 5 min, playlist, respiración y meditación
- 04NescaféRed
- Se publica el momento del café; ahí vive el perfil
- 05Juegos
- Juegos de estimulación mental; el de memoria se juega en el prototipo
Cómo se entra
- Bienvenida
- Crear perfil
- Iniciar sesión
- Inicio
- Canjea tu frasco
Tengo el código de la tapa
- Canjear código
No tomo café
- Plan de $49 al mes
- ¿Para qué tomas café?
- Inicio
El canje está en el prototipo: se escribe el código, se suma el mes y se pregunta para qué se toma café, que es lo que ordena el inicio. La tienda —Comprar y Carrito— está a un toque desde Inicio y Recetas.
- 01
Qué es la app
Acompaña el momento del café: qué preparar, una lectura o una playlist, una rutina de cinco minutos y un lugar donde la gente publica su taza. La compra es la puerta: un código en la tapa del frasco da un mes de acceso.
- Cinco secciones y una tienda a un toque
- Un mes de app por frasco, con el código de la tapa
- 5 min de rutina, 3 de respiración, 10 de meditación
Bienvenida Inicio Mi día - 02
Benchmark: qué se lleva de quién
Siete referencias, cada una con una conclusión anotada debajo: recetas, información del café, ambiente de cafetería, facilidad de uso, recompensas, lealtad y raíces mexicanas. La última, el diseño mexicano, acabó en «Won’t have» al priorizar.
- 3 apps de café
- 4 cadenas
- 1 aprendizaje descartado
Arriba, cada referencia. Abajo en amarillo, lo que se llevó de ella. - 03
Lo que la gente dice del café
Las 20 entrevistas se ordenaron en un mapa de empatía: el café les da calma, recuerdos y ganas de trabajar; lo que molesta es ir a comprarlo, la monotonía y no saber qué preparar.
- 20 entrevistas
- 3 frustraciones, 3 deseos
Lo que estorba: ir a comprarlo, la monotonía y no saber dónde encontrar recetas. Lo que se pide: comprar sin salir de casa, descuentos y hasta los ingredientes. - 04
Dos personas opuestas y su día
Eduardo, 29, analista, no consume la marca; Ricardo, 68, jubilado, dos cafés en casa. Sus viajes cuentan el mismo día a dos ritmos —5:30 con termo, nueve en la cocina— y elegirlos opuestos descartó las pantallas que pedían prisa o buena vista.
- 29 y 68 años
- Cuatro etapas por viaje
- El ánimo, etapa por etapa
Eduardo, 29: le falta tiempo Ricardo, 68: «cero complicaciones» Su día: dos picos, los dos café Su día: mismo patrón, otro ritmo - 05
Los hallazgos, en tres columnas
Lo que salió de las entrevistas se ordenó en Mejoras, Evitar y Emociones. De ahí salieron las dos decisiones que armaron la app: que cambie de contenido cada día y que se entre con un código en la tapa del frasco.
- Evitar: la costumbre, la desmotivación y que se complique para alguien mayor
- Emociones de marca: motivación, impulso, productividad, relajación, familia
Verde, qué mejorar. Rojo, qué evitar. Azul, qué debe sentir quien la usa. - 06
MoSCoW: qué entra al MVP
Las 25 ideas se repartieron en 10 imprescindibles, 8 deseables, 5 posibles y 2 descartadas, y al MVP pasaron 18 notas. Fuera, el diseño mexicano y la notificación de «hora del café».
- 25 ideas
- 18 al MVP
- 2 descartadas
Las ideas, de imprescindible a descartada Las 18 notas del MVP, con una nueva: «Libro del Mes» - 07
Historias de usuario y primeros wireframes
Cuatro historias de usuario —ocupada, productiva, de rutina y social— resueltas con seis pantallas de media fidelidad. Al lado, Recetas ya terminada: misma retícula, con color, foto y filtros.
- Cuatro historias: ocupada, productiva, de rutina y social
- Seis pantallas de media fidelidad
- Sin bocetos de baja fidelidad: se entró directo a media
Recetas, ya resuelta Arriba, las cuatro historias. Abajo, las pantallas que las resuelven. - 08
El design system: seis láminas
Seis láminas para que todo se dibuje igual: diez colores, seis estilos de texto, 22 botones, quince cabeceras de sección, el header de marca y la barra de abajo.
- 22 botones, sacados de sus pantallas
- 15 cabeceras de sección
- Iconos de la librería Solar, en trazo lineal
22 botones, sacados de sus pantallas 15 cabeceras de sección Header de marca, 390×99 px Barra inferior, cinco iconos El sistema entregado: color y tipografía
Paleta y tipografía salen de las láminas del curso; los iconos, de la librería Solar, en trazo lineal. La tipografía de marca no es libre: aquí las muestras van compuestas con la voz de este mundo, y en el prototipo en código los tokens se derivaron de los wireframes, así que algunos valores no coinciden con estos.
Paleta
#DA291C
Primario
#FCFAF8
Fondo
#F4EDE6
Superficies
#1C140D
Texto principal
#6B4A2F
Texto secundario
#9E7347
Botones e iconos
#1A1A1A
Neutro
#FFFFFF
Neutro
#F5F5F5
Neutro
#B3B3B3
Neutro
Escala tipográfica
Bienvenida
Nescafé Sans Regular · 28/35 px
Título de header
Nescafé Sans Regular · 18/23 px
Título de sección y saludo
Epilogue SemiBold · 22/28 px
Subtítulo
Epilogue SemiBold · 16/20 px
Texto y copy
Epilogue Regular · 14/21 px
Botón
Epilogue Bold · 14/21 px
- 09
La comunidad, los juegos y el perfil
Lo que hace que se vuelva a abrir: publicar el momento del café y verlo de otros, juegos de estimulación mental y un perfil con las publicaciones propias.
- 11 juegos dibujados; el de memoria es el que se juega en el prototipo
NescaféRed Juegos Perfil - 10
Del diseño al código
Las pantallas se llevaron a React: 19 recorribles en el navegador, con el canje del código de la tapa, tienda, carrito y un mini-juego de memoria, medidas en cuatro teléfonos.
- 19 pantallas recorribles en el navegador
- Probado en cuatro teléfonos, del SE al 14 Pro Max
Comprar Carrito - 11
Cinco recorridos de prueba
Cinco recorridos sobre las tareas principales: crear el perfil, buscar una receta, publicar en la comunidad, revisar el planificador y pagar. De ahí salieron cinco arreglos.
- El botón de compartir, a la vista
- Iconos y botones más grandes
- Los favoritos, al alcance del pulgar
- Los juegos cargan antes
- El pago confirma que se pagó
El prototipo
Se recorre en el navegador, sin instalar nada.
Reflexión final
La regla de que la app cambiara cada mañana fue la que más recortó: por ella quedó fuera la notificación de «hora del café», que gustaba pero convertía la app en un recordatorio. Programar las pantallas sacó errores que el diseño no enseña —una bienvenida sin salida, textos que no caben en 320 px— y se arreglaron ahí. Y las dos personas opuestas, de 29 y 68 años, sirvieron de filtro: lo que pedía prisa o buena vista no pasaba.
El caso, en texto
resumen · investigación · decisiones · cifras · preguntas
Emiliano Rodríguez diseñó y construyó Nescafé, un concepto de app para la marca de café, como proyecto final del curso de UX/UI de EBAC. Veinte entrevistas dejaron la regla del proyecto: la gente quiere el café de todos los días y no quiere que se le haga rutina. De ahí salieron 25 ideas, priorizadas con MoSCoW; 18 llegaron al MVP y el diseño acabó en 19 pantallas en React, recorridas en cinco pruebas.
¿Cuál era el problema real?
El encargo del curso pedía imaginar Nescafé como app, y la salida fácil era una tienda de café. Las 20 entrevistas apuntaron a otra parte: del café se habla en memoria y calma —«mi día no empieza hasta que tomo una taza»—, y lo que molesta es ir a comprarlo, la monotonía y no saber qué preparar. De ahí salió la regla del proyecto: hábitos sin costumbre.
Tres decisiones y su desenlace
- D1
La marca como ritual diario — Inicio abre con la frase, las lecturas y las actividades del día; la tienda es una pestaña más.
- D2
Un mini-juego de memoria dentro de la app — es la única parte jugable del prototipo y se recorre en el demo.
- D3
Probado en cuatro teléfonos — del iPhone SE al 14 Pro Max, sin pantallas rotas ni textos cortados.
Qué cambió, con números
| Métrica | Antes | Después |
|---|---|---|
| Ideas de producto | 25 sueltas en la pizarra | 10 must · 8 should · 5 could · 2 won't(tablero MoSCoW del curso) |
| Pantallas | 6 wireframes de media fidelidad | 19 en código, recorribles(prototipo en React, 2026) |
| Piezas de interfaz | cada pantalla con sus botones dibujados aparte | 22 botones y 15 cabeceras inventariados en 6 láminas(láminas del design system del curso) |
| Tamaños de teléfono probados | 1 (el del diseño) | 4 teléfonos, del iPhone SE al 14 Pro Max(medición en navegador, 2026) |
Preguntas frecuentes
- ¿Es un proyecto real de Nescafé?
- No. Es un concepto de app hecho como proyecto final del curso de UX/UI de EBAC, sin afiliación ni encargo de Nestlé. La marca se usa como caso de estudio: el logotipo, los productos y las fotos que aparecen en el prototipo son material de la marca usado con fines didácticos, y el sistema de diseño —paleta, tipografía, botones— se construyó desde cero para el ejercicio.
- ¿Las pantallas que se ven son el diseño o el código?
- Las nueve pantallas de teléfono del proceso son el diseño de alta fidelidad, exportado de los vectores y rasterizado para esta página; los tableros son la pizarra del curso. El prototipo en código es otra cosa: 19 pantallas en React que se recorren en el navegador. Ahí la barra de abajo nombra sus cinco destinos —Inicio, Comprar, Mi día, Red y Perfil—; en el diseño son cinco iconos sin texto y dos de ellos van a otra parte (recetas y notificaciones). Los tokens del código se derivaron de los wireframes, así que los colores no coinciden al dígito con la lámina de color.
- ¿Qué investigación hay detrás?
- Veinte entrevistas, un benchmark de siete referencias —tres apps de café (Espresso Coffee Guide, Barista Coffee Dictionary, Coffitivity) y cuatro cadenas (Starbucks, Dunkin, Costa Coffee y Tierra Garat)—, un mapa de empatía con las frases de la gente, dos user personas opuestas y el viaje de un día de cada una. Al final del proyecto, cinco recorridos de prueba sobre el prototipo en código, uno por perfil, de los que salieron cinco arreglos.
React · Vite · Tailwind · Motion · Zustand
Última revisión de cifras:
Los tokens que pintan esta ficha