Hamburgueria Ipê é uma aplicação para tablets baseada em ReactJS, JSX e CSS3.
- Exaustivamente testado para atingir a melhor experiência do usuário
- Identidade visual agradável e de fácil identificação das features
- A aplicação está toda componentizada para fácil manutenção do código
- Todo o processo está bem documentado para melhor entendimento
- Possibilidade de levantar dados para o desenvolvimento do negócio
Você pode acessar a aplicação clicando aqui e utilizar um dos logins de teste abaixo:
| # | Salão | Cozinha |
|---|---|---|
| 🆔 | [email protected] | [email protected] |
| 🔑 | 123456 | 123456 |
- 1. O Projeto
- 2. A aplicação
- 3. Histórias de usuários
- 4. Planejamento
- 5. Identidade Visual
- 6. User Interface
- 7. Desenvolvimento
- 8. Tecnologias
- 9. Desenvolvedoras
- 10. Licença
O desafio Burguer Queen proposto pela Laboratória, é de desenvolver uma interface para uma hamburgueria 24hrs que está em expansão. Premissas:
- Manter a interface e o estado sincronizados com React
- Ser um SPA (Single Page App)
- Ser responsivo em tablets
- Definir a estrutura de pastas e arquivos
- Usar JavaScript (ES6+) para a lógica do projeto
Para isso, o atendimento deve ser simples e rápido, a cozinha deve ser eficiente e o negócio deve ser gerenciado com base em dados reais e relatórios fáceis de entender.
A Hamburgueria Ipê nos forneceu as histórias de usuários:
✍️ História de usuário #1
✍️ História de usuário #2
✍️ História de usuário #3
✍️ História de usuário #4
| HU #1 ✔️ | HU #2 ✔️ | HU #3 ✔️ | HU #4 ✔️ |
|---|---|---|---|
| Criar login e senha | Anotar nome do cliente e a mesa | Ver os pedidos em ordem | Ver a lista de pedidos prontos para servir |
| Registar usuário conforme setor (cozinha ou salão) | Adicionar e/ou excluir produtos aos pedidos | Marcar pedido como 'PRONTO' para ser servido | Marque os pedidos que foram entregues |
| Fazer login na tela correta | Ver resumo e o valor total do pedido | Ver o tempo que levou para preparar o pedido | |
| Enviar o pedido para a cozinha |
🖍️ Todo o conceito do projeto envolveu uma enorme valorização da experiência do usuário e suas necessidades. Também planejamos e estudamos as opções disponíveis antes de apresentar a solução para a Hamburgueria Ipê.
📝 Para conseguir entregar todas as funcionalidades do projeto, organizamos todo o fluxo de desenvolvimento do projeto pelo método Kanban no Trello.
Dessa forma, definimos:
🌱 MVP
🤙 Critérios mínimos de aceitação
🏷️ Padronizações do código (Code Style)
⚒️ Divisão de tarefas
🔐 Para merge no repositório (main), somente após code review para revisão em pares e aprovação da reviewer
🔎 Clique na imagem para ampliar
🧭 Com as histórias de usuário, conseguimos entender as necessidades da Hamburgueria Ipê e montar o fluxo da aplicação
🔎 Clique na imagem para ampliar
🤩 Durante o processo de criação, fizemos diversas entrevistas com usuários para ter uma base mais sólda sobre o que eles esperavam e compreender melhor suas necessidades.
Começamos a desenvolver o wireframe de média fidelidade no Figma e atender as necessidades do usuário entregando uma boa experiência.
🔰 Com as respostas dos usuários, conseguimos desenvolver e testar o protótipo de média fidelidade, que pode ser acessado clicando aqui.
🔎 Clique nas imagens para ampliar
🖌️ O conceito da identidade visual da hamburgueria envolve as cores do Brasil e da árvore símbolo Ipê Amarelo e sua flor:
👩🎨 A paleta de cores foi desenvolvida com tons de verde e amarelo presentes na bandeira do Brasil e da flor Ipê, e, alguns tons terrosos como da árvore
Fizemos entrevistas com os usuários para alcançarmos tons que entregassem a melhor e mais agradável visualização.
🔎 Clique na imagem para ampliar
✒️ Testamos e escolhemos duas fontes para serem utilizadas na aplicação e em todos os meios de comunicação, como banners, posts em redes sociais, cartazes, etc.
Tipografia principal
A fonte Playfair Display é utilizada no logo e em títulos de páginas
Tipografia de apoio
A fonte Work Sans é utilizada em todo o corpo da aplicação
💎 Após a definição da paleta de cores e tipografia, desenvolvemos o logotipo da hamburgueria para ser original, clean e harmônico com todo o visual da aplicação.
O logo lembra uma mesa de madeira e a cor predominante é marrom (RGB #7F381A), inspirado no tronco da árvore. Ao centro, está a flor Ipê que dá nome a hamburgueria, rodeada pelas palavras 'Hamburgueria' e 'Ipê', em tom amarelo-creme (RGB #F8E7C9).
Desenvolvemos quatro versões para serem aplicadas em fundos de cores distintas:
🟢 Deve ser usado respeitando a paleta de cores, formas e tamanhos, para ter consistência no uso e desenvolver o reconhecimento da marca pelo público.
🚫 O logo deve ser usado respeitando a identidade visual, mantendo os padrões de cores Pantone ou CMYK para impressos no geral e RGB para aplicações digitais.
⚖️ Desde o começo do projeto, a experiência do usuário sempre foi uma de nossas prioridades. Nessa fase do era o momento de equilibrar UX & UI (User Interface) ainda mais. Dessa forma, aumentamos consideravelmente as chances de entregar uma aplicação de visual agradável e extremamente funcional!
Principais objetivos de UI
✔️ Leitura clara de todos os textos
✔️ Consistência e padrões para não confundir os usuários
✔️ Design minimalista
✔️ Eficiência
✔️ Navegação intuitiva
✔️ Reconhecer ícones, formas, imagens e funcionalidades ao invés de lembrar após várias utilizações
✔️ Responsivo em tablets
✔️ Liberdade e controle do usuário
✔️ Feedbacks instântaneos para todas as ações (erros, confirmações, etc.)
✔️ Prevenção de erros (prever as ações de descuido do usuário)
🗣️ As primeiras conversas com os usuários foram um norte para chegarmos até essa fase. Mas era necessário ouvi-los mais algumas vezes para elevar a UX para outro nível!
Voltamos ao Figma , criamos um wireframe de média fidelidade, que pode ser acessado clicando aqui, e usamos ele para uma nova série de entrevistas.
🔎 Clique nas imagens para ampliar
🔄 O feedback que recebemos dos usuários foi muito positivo no geral. A interface visual foi absolutamente elogiada pela beleza, cores agradáveis e em sintonia, além da facilidade para leitura de todos os textos.
Ainda assim, durante as entrevistas e testes, percebemos que o botão "Adicionar Item" prejudicava a experiência, pois tornava a navegação confusa e improdutiva, exigindo que eles dedicassem uma quantidade razoável de tempo para utilizar a aplicação.
Removemos o botão e optamos por mudar a cor de fundo para tentar facilitar a navegação por meio de cores:
Os usuários continuaram confusos 🙃
Oferecemos uma nova solução: Transformar as fotos dos itens em radio buttons.
Quando o atendente clica em cada botão ou foto, o item muda de cor e é automaticamente adicionado a coluna de itens que monta o pedido.
Essa solução agradou aos usuários e tornou a tarefa de montar pedido mais eficiente.
🔄 Outra funcionalidade que precisou de uma pequena melhoria, foi a coluna que armazena os itens selecionados pelo atendente. Alguns usuários tiveram dificuldade de entender claramente como funcionava. Na nova versão, deixamos ela mais clean:
🔎 Clique nas imagens para ampliar
As soluções foram aplicadas e a versão final do wireframe foi bem aceita pelos usuários.
🔎 Clique nas imagens para ampliar
🛠️ Com toda a identidade visual definida, UX & UI plenamente satisfatórios, começamos a desenvolver a interface da Hamburgueria Ipê. Os principais objetivos foram definidos logo de início:
🧾 A aplicação foi desenvolvida como SPA (single-page application), para que o usuário tenha a experiência similar à de um aplicativo para desktop.
📱 Como o ambiente é uma hamburgueria, a aplicação é 100% responsiva para tablets utilizados na vertical.
🧩 Utilizamos React JS para componentizar todo o site. Isso mantém a aplicação com alto desempenho e também permite que os componentes sejam reutilizados, gerando um código de fácil manutenção por qualquer desenvolvedor.
✨ Instalamos o ESLint na aplicação para manter o código padronizado e pronto para ser testado.
💫 Depois de três sprints, apresentamos a interface final da aplicação e todas as suas funcionalidades:
🔎 Clique nas imagens para ampliar
Toda a aplicação foi aprovada 100% pelo cliente e seus usuários.
💲 Para que a Hamburgueria Ipê continue crescendo e pensando em futuras expansões, implementamos uma feature para auxiliar no R.O.I (Return Over Investment).
Os pedidos ficam armazenados na API após finalizados. Isso abre a possibilidade da equipe de back-end utilizar esses dados para uma análise profunda de dados como:
💡 Eficiência da cozinha e do salão
💡 Melhor controle de estoque
💡 Planejar novas filiais
💡 Estratégia para promoções mais eficientes
💡 Comportamento do cliente
Entre diversos outros benefícios que a análise de dados pode oferecer!
🧙♀️ A aplicação está completa e funcional, mas sempre é possível melhorar no futuro.
Nossas metas para o futuro são:
- Retornar mensagens de erro para cada ação do usuário
- Aplicar loading em todas as páginas necessárias
- Melhoras gerais na API
- Favicon
- Calcular automaticamente o tempo de preparo dos pedidos
- Responsividade para desktop e mobile
- 70% de cobertura em testes
Hamburgueria Ipê utiliza as seguintes ferramentas:
Code:
Planejamento:
📦 Fique à vontade para rodar o projeto localmente. É bem simples!
1 - Clone o repositório para seu local
2 - Instale o Node.JS
3 - Abra o terminal e instale o NPM
npm install4 - Entre na pasta raiz do projeto e digite:
npm start
🖥️ Os ambientes suportados são:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE / Edge | Firefox | Chrome | Safari | Opera |
| Versão 89 + | Versão 89 + | Versão 89 + | 13 ou 14 + | 74 + |
Enjoy 👊
👩💻 Hamburgueria Ipê foi orgulhosamente desenvolvido em 4 semanas, por Akemi Mitsueda e Cris Mantovani, alunas da SAP005 do bootcamp da Laboratória.
Se você ficou com alguma dúvida, tem sugestões ou quer apenas nos conhecer melhor, por favor, entre em contato :)
| Akemi Mitsueda | Cris Mantovani |
|---|---|
 |
 |
  |
|
© 2021 - Alguns direitos reservados
🔴 NUNCA use de forma comercial!
🟡 SEMPRE que for compartilhar essa aplicação, dê os créditos!
🟢 NÃO altere e nem crie derivados dessa aplicação se for para uso público!
Quer pedir uma exceção? Entre em contato antes!
Mais detalhes da licença clicando aqui.