Acesse a aplicação aqui ou
- Apresentação
- Cargill
- Talent Fest
- Histórias de Usuários
- Protótipos
- Testes
- Design
- Painel de Administração
- Planejamento
- Tecnologias Utilizadas
- Futuras Implementações
- Desenvolvedoras
Você já se perguntou como os produtos do mercado são feitos até chegarem no seu carrinho ? Pois então encontrou a resposta ! Com objetivo de disponibilizar informações e aumentar transparência da empresa, sob demanda da Cargill desenvolvemos esta aplicação que demonstra as etapas de processamento de cada produto alimentício e como seus estes produtos são feitos desde o campo até a mesa do cliente final. Este projeto foi desenvolvido no 5º Hackathon Talent Fest promovido pela <Laboratória>.
A Cargill oferece serviços e produtos alimentícios, agrícolas, financeiros e industriais ao mundo. Juntamente com produtores rurais, clientes, governos e comunidades, ajuda as pessoas a prosperar com a aplicação de suas ideias há mais de 155 anos. Tem 155.000 funcionários em 70 países, que estão comprometidos a fornecer alimentos ao mundo de uma forma responsável, reduzindo o impacto ambiental e melhorando as comunidades onde atuam.
O Talent Fest é um hackathon organizado pela Laboratória ao final de cada bootcamp para conectar as alunas ao mercado de tecnologia. É o espaço perfeito para que as empresas conheçam o potencial do talento feminino da Laboratória, pois as estudantes trabalham com cases reais propostos pelas organizações participantes. A quinta edição do evento ocorreu entre os dias 12 e 15 de abril de 2021 de maneira remota e foi exibido em tempo real no Youtube.
O aplicativo foi realizado baseado nas seguintes histórias de usuários:
-
Eu como cliente quero visualizar a lista de produtos disponíveis.
-
Eu como cliente quero filtrar os produtos por categoria.
-
Eu como consumidora quero saber quais etapas o produto que irei consumir passaram até chegar em minha mesa.
-
Eu como cozinheiro quero conhecer uma receita com o produto que comprei.
Os protótipos foram criados através da ferramenta Figma, utilizando o conceito de mobile first.
Ao longo do processo de prototipagem, realizamos testes e recebemos os seguintes feedbacks e as respectivas resoluções que realizamos:
❗ Nomes das categorias de filtragem técnicos e não populares, dificultando entendimento
✔️ Definir nomes das categorias com sonônimos não técnicos e populares.
❗ Vídeo sugestão de receita ao final das etapas no carrocel, dificulta a visualização para usuário frequente
✔️ Definir localização do vídeo fora do carrocel, abaixo das etapas de processamento, na tela principal do produto.
A identidade Visual da aplicação seguiu conceitos de User Experience, testes de usabilidade, testes de produto e code review in par.
A paleta de cores escolhida seguiu a identidade da empresa.
A interface finalizou desta forma:
A responsividade para mobile finalizou desta forma:
Utilizamos o Firebase como banco de dados e como painel de administração, onde é possível incluir, deletar e alterar informações. A descrição e categorização dos produtos feita pelo Firestore do firebase, é exemplificada abaixo:
Armazenamento de imagens e videos foi realizado pelo Storage do Firebase:
O planejamento e a divisão de tarefas foram feitos através do Trello.
- HTML
- CSS
- JavaScript
- ReactJs
- React Hooks
- React Router
- Git Bash
- GitHub
- Firebase
- Viual Studio Code
- Trello
- Figma
- Zoom
Para as próximas refatorações iremos implementar:
📌Espaço Fale Conosco, com contatos da empresa e formulário para enviar mensagens
📌Campo de busca por produto
💛 Esta aplicação foi orgulhosamente desenvolvida pelas devas:
Bianca Sherika - Linkedin /GitHub
Caroline Costa - Linkedin /GitHub
Karine Venerando - Linkedin /GitHub
Laura Deperon - Linkedin/ GitHub
Priscila Silveira - Linkedin/GitHub
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent