PIT Coffee · Propuesta

Un pedido, de principio a fin

De la nave a la ventanilla

Así se ve un pedido para recoger en el camión. En la demo puedes recorrerlo completo y cambiar qué pasa en cada paso: que el banco rechace la tarjeta, que la parada se cancele o que se vaya la señal.

Inicio con el camión en Nave 4 — 1Ve dónde está el camiónLa parada de ahora, cuánto falta para que se vaya y el menú de esa parada.

Producto con tamaños y extras — 2Arma su bebidaTamaño, leche y extras. Lo agotado se ve, pero no se puede elegir.

Pago con tarjeta guardada — 3Paga con su cashbackTarjeta guardada, propina opcional y el saldo de cashback descontado.

Pedido listo con código de recogida — 4Le avisamos cuando está listoPreparación lo marca listo y al cliente le llega el aviso con su código.

Pedido entregado con cashback y sello — 5Recoge y ganaAl entregarlo suma cashback y un sello para su bebida gratis.

Tres lados del mismo sistema

Cliente, camión y oficina

Cliente, en teléfono y computadora

42 pantallas en móvil y 13 en escritorio. Cubren entrar con código por SMS, ruta en vivo, carrito, pago, seguimiento, cashback, sellos, facturación y ayuda.

Recoger en el camión o entrega cercana
Avisos cuando el camión se acerca
Qué pasa si falla el pago, se llena la hora o no hay señal

Probar como cliente

Inicio del cliente en escritorio con su pedido a la derecha

El equipo del camión

10 pantallas para el teléfono o la tableta del camión. Cada persona entra con su PIN y ve solo lo de su puesto.

Operador: abre, pausa, retrasa o cancela la parada
Preparación: cola de pedidos, entregar con código y agotar productos
Reparto: tomar entregas y marcar entregado

Probar como personal

Administración

17 pantallas para la oficina: lo que necesita atención hoy, pedidos y reembolsos, menú, paradas de la semana, reparto, avisos, lealtad, clientes, reportes, inventario y equipo.

Probar la administración

Panel de administración con el resumen de hoy

Claro y oscuro

Cada pantalla, en los dos temas

La app sigue el tema del teléfono o la computadora. En oscuro el fondo es negro neutro y el azul de PIT queda en los paneles de marca. Arrastra para comparar.

ClaroOscuro

Cómo se armó

Cada botón tiene a dónde ir

Antes de construir la demo documentamos cada control de cada pantalla: qué hace, a dónde lleva, qué necesita, qué entrega y quién depende de él. La demo se conecta desde ese mismo documento, y un validador revisa que no quede nada suelto.

1,037

controles con regla: botones, campos, interruptores, opciones y filas.

destinos rotos. Cada botón lleva a una pantalla que existe y cada pantalla tiene cómo llegar.

huecos del diseño encontrados: falta el botón «Cambié de número» y la pestaña «Lo que hay» en preparación.

Roadmap de interacciónPantalla por pantalla, control por control Roadmap de backendDatos, estados del pedido, llamadas y fases

Pruébala

Elige dónde abrirla. En la demo puedes cambiar de rol, de tema y de escenario, y ver el roadmap de la pantalla en la que estás.

MóvilCliente y personal del camión EscritorioCliente y administración