BurgerQueen es un pequeño restaurante de hamburguesas estilo vintage. Este restaurante está creciendo, por lo que fue necesario realizar una interfaz en la que se puedan tomar pedidos usando una tablet. Estos pedidos posteriormente podrán ser enviados a la cocina, permitiendo que la orden sea preparada eficientemente.
Esta aplicación posee dos vistas, las cuales se sincronizan en tiempo real. La primera vista corresponde al mesero. Este podrá interactuar con la app pudiendo ingresar en primera instancia su nombre, la mesa a la cual se está atendiendo y el nombre del cliente. Posteriormente será redirigido a una nueva orden en donde podrá ingresar los productos requeridos, los cuales se irán sumando y acumulando en la boleta.
Finalmente, la boleta se despachará a la cocina con el botón "enviar", y el mesero podrá ver su estado (Listo, o entregado). La segunda vista corresponde a la del cocinero o chef. Sin necesidad de ingresar un usuario, el chef podrá ingresar directamente al apartado de cocina, en donde podrá visualizar todas las ordenes pendientes, pudiendo marcarlas como "listas" (las ordenes que ya han sido realizadas).
- 1. Definición de Usuario
- 2. Flujo de proyecto
- 3. Historias de usuario
- Historia de usuario 1
- Historia de usuario 2
- Historia de usuario 3
- 4. Proceso de Diseño
- Prototipo de baja fidelidad
- Prototipo de alta fidelidad
- Decisiones de diseño
- Paleta de colores utilizada
- 5. Investigación UX
- 6. Planificación
- 7. Objetivos de aprendizaje
- 8. Testing
- 9. Git Tags
- 10. Aspectos a mejorar
[HISTORIA DE USUARIO 1] Mesero/a debe poder tomar pedido de cliente
- Yo como mesero/a quiero tomar el pedido de un cliente para no depender de mi mala memoria, para saber cuánto cobrar, y enviarlo a la cocina para evitar errores y que se puedan ir preparando en orden.
- Anotar nombre de cliente.
- Agregar productos al pedido.
- Eliminar productos.
- Ver resumen y el total de la compra.
- Enviar pedido a cocina (guardar en alguna base de datos).
- Se ve y funciona bien en una tablet
- Debes haber recibido code review de al menos una compañera.
- Haces test unitarios y, además, has testeado tu producto manualmente.
- Hiciste tests de usabilidad e incorporaste el feedback del usuario.
- Desplegaste tu aplicación y has etiquetado tu versión (git tag).
[HISTORIA DE USUARIO 2] Jefe de cocina debe ver los pedidos Yo como jefe/a de cocina quiero ver los pedidos de los clientes en orden y marcar cuáles están listos para saber qué se debe cocinar y avisar a los/as meseros/as que un pedido está listo para servirlo a un cliente.
- Ver los pedidos ordenados según se van haciendo.
- Marcar los pedidos que se han preparado y están listos para servirse.
- Ver el tiempo que tomó prepara el pedido desde que llegó hasta que se marcó como completado.
- Debes haber recibido code review de al menos una compañera.
- Haces test unitarios y, además, has testeado tu producto manualmente.
- Hiciste tests de usabilidad e incorporaste el feedback del usuario.
- Desplegaste tu aplicación y has etiquetado tu versión (git tag).
[HISTORIA DE USUARIO 3] Mesero/a debe ver pedidos listos para servir Yo como mesero/a quiero ver los pedidos que están preparados para entregarlos rápidamente a los clientes que las hicieron.
- Ver listado de pedido listos para servir.
- Marcar pedidos que han sido entregados.
- Debes haber recibido code review de al menos una compañera.
- Haces test unitarios y, además, has testeado tu producto manualmente.
- Hiciste tests de usabilidad e incorporaste el feedback del usuario.
- Desplegaste tu aplicación y has etiquetado tu versión (git tag).
- Los datos se deben mantener íntegros, incluso después de que un pedido ha terminado. Todo esto para poder tener estadísticas en el futuro.
Como podrán en ver el prototipo, quisimos basar nuestro proyecto en un restaurante con estilo vintage, el cual direccionó todo el diseño de nuestra aplicación.
Partimos creando una paleta de colores acorde al tema, utilizando una gama de colores un tanto apagados en la saturación pero muy colorida en cuanto a su tonalidad.
Para seguir la misma linea, buscamos referentes de iconos al igual que una tipografía que nos parecieran apropiados al tema.
Esto resultó en una aplicación que nos recuerda totalmente un estilo vintage, retro y colorido.
Utilizando el prototipo de alta fidelidad, se realizaron testeos de usabilidad y de diseño en Maze, hecho con 7 testers. Recibimos buenos comentarios respecto a la página, tanto en lo funcional como en lo gráfico. Sin embargo, con ese feedback pudimos recopilar respuestas en las que nos basamos para algunas mejoras en el proyecto final. Algunos de los cambios hechos fueron los siguientes:
- Agrandar las imágenes para que el mesero o quien tome el pedido, pueda relacionarlas y encontrarlas fácilmente.
- Agrandar la letra de los productos en cada botón.
- Que el producto sea un botón en si, para que quede mucho más claro que se está agregando ese producto a la lista de la orden. Para visitar el detalle de los resultados de los testeos de usabilidad haz click aquí
Realizamos nuestra planificación mediante la página miro, semana a semana, poniéndonos metas por día y para garantizar una buena organización del proyecto.
A continuación detallamos los objetivos de aprendizaje que logramos en este proyecto:
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de Media Queries.
- Uso de condicionales (
if-else|switch|operador ternario) - Uso de funciones (
parámetros|argumentos| valor de retorno) - Manipular arrays (
filter|map|sort| reduce) - Manipular objects (
key| value) - Uso ES modules (
import| export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Testeo unitario.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (
add|commit|pull|status| push) - Manejo de repositorios de GitHub (
clone|fork|gh-pages) - Colaboración en Github (
branches|pull requests|tags) - Organización en Github (
projects|issues|labels| milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (
OnAuthStateChanged| onSnapshot)
- JSX
- Componentes class y componentes function
- props
- Eventos en React.
- Listas y keys.
- Renderizado condicional.
- Elevación de estados.
- hooks
- CSS modules.
- React Router.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.
- Hacer funcional el timer
- Mover funciones al Context