Desafio Loggi - Ana Leticia

---

Desafio proposto pela empresa Loggi para o evento Talent Fest 2023 da Laboratoria. O objetivo desse desafio é assumir a perspectiva de "dono da Loggi", implementando aprimoramentos na experiência do usuário, notadamente no que concerne ao rastreamento de pacotes no site. O objetivo é construir uma aplicação que se distingua por sua responsividade e estilização, atendendo de forma plena e satisfatória às demandas e expectativas dos usuários.

Ao abraçar esse desafio, busquei prezar pela experiência do usuário. Por meio de um trabalho cuidadoso pensando em uma experiência de rastreamento de pacotes que se destaca pelo seu caráter ágil, intuitivo e funcional.

Índice

• 1. Histórias de Usuários 📝
• 2. Tecnologias e Decisões Tomadas 📌
• 3. Protótipos 🗒️
• 4. Acesso ao Projeto 📽️
• 5. Versão Mobile 📱
• 6. Versão Desktop 🖥️
• 7. Implementações Futuras ↗️
• 8. Sobre a Autora 💙

1. Histórias de Usuários 📝

No início do projeto, a definição das histórias de usuários desempenhou um papel fundamental no direcionamento de prioridades e no alcance das metas. Ao estabelecer claramente as necessidades e expectativas, o foco no desenvolvimento se tornou mais eficiente, garantindo que as funcionalidades mais relevantes fossem entregues em primeiro lugar.

2. Tecnologias e Decisões Tomadas 📌

Para enfrentar esse desafio, optei por utilizar as tecnologias React e Styled Components. Essa escolha foi motivada pelo meu apreço genuíno por essas ferramentas e minha experiência de trabalho com elas durante o bootcamp. Ciente da importância de uma entrega de excelência, ressalto que minha busca incessante pela qualidade é um valor intrínseco à minha abordagem profissional.

Ao considerar o prazo de 4 dias para a execução do projeto, a ponderação tornou-se ainda mais essencial. Após uma análise criteriosa, percebi que a utilização do React e Styled Components se alinhava perfeitamente aos objetivos propostos, permitindo-me otimizar a produtividade e a eficiência no desenvolvimento.

Acredito veementemente que a escolha das tecnologias adequadas não apenas facilita o processo, mas também contribui substancialmente para a obtenção de um produto final de alta qualidade. A fluidez proporcionada pelo React, aliada à simplicidade e poder de personalização do Styled Components, oferece um ambiente de trabalho propício para alcançar resultados superiores.

As tecnologias e ferramentas utilizadas no projeto foram:

3. Protótipos 🗒️

Para iniciar o projeto, os protótipos foram elaborados no Figma. Nesse processo, estabeleceu-se uma paleta de cores e definiu-se o posicionamento dos elementos para facilitar tanto a implementação quanto a estilização do projeto. O uso do Figma proporcionou uma visão clara do layout e das diretrizes visuais, o que agilizou significativamente o desenvolvimento e garantiu a coerência estética em todo o projeto.

4. Acesso ao Projeto 📽️

Para acessar o projeto, foi disponibilizado três tipos distintos de códigos para testes na aplicação. Ao inseri-los no campo designado como "Digite o código de rastreamento" e acionar o botão "Rastrear", será possível vivenciar a simulação do histórico e status do pedido.

Para simular pedidos e o fluxo de informações, usou-se um arquivo JSON que contém dados fictícios pertinentes aos status, histórico e outras informações relacionadas aos pedidos. Esse arquivo JSON desempenhou um papel fundamental na fase de desenvolvimento, permitindo a obtenção de dados simulados e realistas para testar e validar o funcionamento do sistema em diferentes cenários.

Vale ressaltar que o Vite foi empregado como bundler, garantindo uma construção otimizada e ágil do projeto. Adicionalmente, procedeu-se ao deployment da aplicação por meio da plataforma Vercel, conferindo-lhe disponibilidade e acessibilidade. Para visualizar o projeto, clique no seguinte Link.

Para rodar a aplicação em sua máquina, siga os passos abaixo:

1. Clone este repositório para o seu computador.
2. No terminal, navegue até o diretório do projeto.
3. Execute o comando npm install para instalar as dependências.
4. Em seguida, utilize o comando npm run dev para iniciar a aplicação.

Agora a aplicação estará em execução localmente em seu ambiente de desenvolvimento.

5. Versão Mobile 📱

A aplicação foi desenvolvida com uma abordagem Mobile First, priorizando a experiência dos usuários em dispositivos móveis como ponto central de sua concepção. O Mobile First é uma metodologia que coloca a versão móvel de um site ou aplicativo em primeiro lugar, garantindo que a experiência do usuário seja otimizada para dispositivos de menor tamanho de tela, como smartphones e tablets. Para demonstrar a aplicação em ação, apresento registros visuais que capturam a experiência do usuário em telas de dispositivos móveis.

6. Versão Desktop 🖥️

A versão desktop foi projetada com foco em proporcionar uma experiência do usuário aprimorada, ao mesmo tempo em que mantém a paleta de cores da Loggi. A seguir, apresento registros visuais para ilustrar.

7. Implementações Futuras ↗️

Alcancei meus objetivos primordiais ao executar este projeto, contudo, tenho perspectivas para futuras implementações. Entre essas perspectivas, inclui-se:

1. Utilização aprimorada do Next.js e Material UI:

   • Explorar e implementar recursos avançados oferecidos pelo Next.js e Material UI para otimizar o desempenho e a experiência do usuário.

2. Desenvolvimento dos testes:

   • Criar testes abrangentes utilizando ferramentas como Jest e React Testing Library para garantir a robustez e confiabilidade da aplicação.

3. Aprimoramento da estética da tabela na seção "Rastreio":

   • Refinar o design da tabela, tornando-a mais intuitiva e esteticamente agradável, considerando a usabilidade e a experiência do usuário.

4. Atualização das cores dos ícones informativos dos status dos pedidos:

   • Revisar e selecionar uma paleta de cores coerente e significativa para os ícones de status, facilitando a compreensão visual das informações.

5. Implementação de feedback dos usuários:

   • Coletar e analisar o feedback dos usuários para identificar pontos de melhoria e priorizar novas funcionalidades.

6. Otimização de desempenho e carregamento:

   • Realizar análises e ajustes para melhorar o desempenho geral da aplicação, reduzindo o tempo de carregamento e tornando-a mais responsiva.

7. Documentação abrangente:

   • Atualizar e criar documentação detalhada, incluindo guias de uso e informações para facilitar o onboarding de novos colaboradores.

8. Planejamento de novas funcionalidades:

   • Identificar e priorizar novas funcionalidades com base no feedback dos usuários e nas necessidades do negócio, para planejar o próximo ciclo de desenvolvimento.

9. Revisão do código e refatoração:

   • Realizar revisões periódicas do código e refatorar quando necessário para manter o código limpo, legível e de fácil manutenção.

8. Sobre a Autora 💙

Sou Ana Letícia, engenheira biomédica e desenvolvedora web formada pela Laboratória. Convido você a conhecer meu portfólio aqui e conectar-se comigo pelo LinkedIn.