- 1. Sobre o Projeto
- 2. Pesquisa de Mercado
- 3. Planejamento
- 4. Funcionalidades da Aplicação
- 5. As Histórias de Usuário
- 6. Layout
- 7. Teste de usabilidade
- 8. Objetivos de Aprendizagem
- 9. Autoras
O projeto BURGUER QUEEN foi criado no bootcamp da Laboratoria Brasil.
O desafio foi desenvolver uma aplicação destinada aos funcionários de uma hamburgueria. Para isso, criou-se uma aplicação SPA (Single Page Aplication), uma interface web integrada com a API Burger Queen API, usando JavaScript (ES6 +), HTML, CSS e o framework React. Além disso, a interface é responsiva.
A aplicação foi denominada "Hamburgueria Jesus" e atende às necessidades dos funcionários que trabalham no atendimento dos clientes e no gerenciamento do preparo dos pedidos.
O squad visitou uma unidade de uma rede de fastfood, onde foi possível indentificar as necessidades comuns dos funcionários, como, por exemplo, visualizar comandas diferentes em uma única página e apagar a anotação de pedido após um erro. Essa experiência foi útil pois influenciou as escolhas das páginas e funcionalidades implementadas.
Para o planejamento, respeitamos o método "FDP" (Fatiar, Descartar e Priorizar) e utilizamos a ferramenta GitHub Projects. A implementação das funcionalidades foi segmentada conforme as histórias de usuários de diferentes sprints. (foto do planning)
Na aplicação tem funcionalidades específicas para 3 tipos de funcionários. Sendo eles o garçom/garçonete, cozinheiro(a) e o(a) gerente.
O garçom/garçonete tem acesso ao "Cardápio", onde consegue visualizar os menus, e ao "Atendimento", onde consegue ver os status das mesas, anotar pedido e o histórico de pedidos prontos e entregues.
O cozinheiro(a) tem acesso a "Pedidos", onde consegue ver e manipular o status dos pedidos e o histórico de pedidos prontos e entregues.
O(a) gerente tem acesso a todas as funcionalidades.
As funcionalidades foram implementadas conforme cada história do usuário
[Historia de usuário 1] "Eu, como funcionária quero entrar no sistema de pedidos". A funcionária deve:
- Acessar uma tela de login.
- Inserir email e senha.
- Receber mensagens de erros compreensíveis, conforme o erro e as informações inseridas.
- Entrar no sistema de pedidos caso as credenciais forem corretas.
[Historia de usuário 2] "Eu como garçom/garçonete quero poder anotar o pedido de um cliente para não depender da minha memória, saber quanto cobrar e poder enviar os pedidos para a cozinha para serem preparados em ordem". A atendente deve:
- Acessar uma página específica para anotar pedidos.
- Anotar o nome do cliente.
- Adicionar produtos aos pedidos.
- Excluir produtos.
- Ver resumo e o total da compra.
- Enviar o pedido para a cozinha (guardar em algum banco de dados).
- Funcionar bem em um tablet.
[Historia de usuário 3] "Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os garçons/garçonetes que o pedido está pronto para ser entregue ao cliente". A cozinheira deve:
- Ver os pedidos ordenados à medida em que são feitos.
- Marcar os pedidos que foram preparados e estão prontos para serem servidos..
- Ver o tempo que levou para preparar o pedido desde que chegou, até ser marcado como concluído.
[Historia de usuário 4] "Eu como garçom/garçonete quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes". A atendente deve:
- Ver a lista de pedidos prontos para servir.
- Marcar os pedidos que foram entregues.
As cores do layout foram pensadas de acordo com as cores de um hamburguer.
Fizemos um fluxograma para verificar quais seriam os passos do usuários de acordo com cada histórias de usuário.
Os protótipos foram pensandos na experiência dos usuários e para visualizar a melhor forma de montar a aplicação.
Tela de Login e Cadastro:
Home:
Tela de Cardápio:
Tela de Atendimento:
Tela de Pedidos: Tela de Atendimento:
Utilizamos o FORMS para criar um formulário formulário, em que questionamos quais foram as experiências dos usuários, ao usar cada funcionalidade, e como foi o desempenho da aplicação.
Após a coleta das respostas, filtramos sugestões de melhoria, e uma delas já foi implementada. Um usuário sugeriu que alterássemos o formato do botão para que o "click" ficasse mais intuitivo, e isso foi implementado.
Botão inicial:
Botão após teste de usabilidade:
HTML
- Uso de HTML semântico
CSS
- Uso de seletores de CSS
- Empregar o modelo de caixa (box model): borda, margem, preenchimento
- Uso de flexbox en CSS
- Uso de media queries
JavaScript
- Uso ES modules
- Uso de linter (ESLINT)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
Git e GitHub
- Git: Instalação e configuração
- Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
- Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
- GitHub: Criação de contas e repositórios
- GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
- GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
HTTP
- Solicitações o requisições (request) e respostas (response).
- Cabeçalhos (headers)
- Corpo (body)
- Verbos HTTP
- Codigos de status de HTTP
- Encodings e JSON
- CORS (Cross-Origin Resource Sharing)
react
- jsx
- components
- events
- lists-and-keys
- conditional-rendering
- lifting-up-state
- hooks
- routing
UX (User eXperience)
- Desenhar a aplicação pensando e entendendo o usuário
- Criar protótipos para obter feedback e iterar
- Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Planejar e executar testes de usabilidade
Projeto realizado para o Bootcamp da LABORATÓRIA.