Trackfy
Aplicativo que oferece um serviço para rastreio de encomendas.
UI Design - aplicativo mobile
Protótipo de baixa fidelidade (Wireframe)
Protótipo de alta fidelidade
Style guide do produto
Protótipo navegável
Projeto educacional
7 meses
Serviços
Brasil
Projeto
Trackfy foi um projeto executado durante o curso de UI Design promovido pela Startup educacional Awari.
A proposta do projeto final é fazer com que os alunos utilizem o conhecimento sobre os conceitos de design aprendidos no curso para criar um produto real.
Através do acompanhamento dos instrutores e mentores da Awari para desenvolver o projeto que possibilitasse o rastreamento e acompanhamento de encomendas de modo fácil e rápido.
Briefing
O que o produto faz?
O produto oferece um serviço de rastreio para encomendas universais.
Qual é o objetivo do produto?
Centralizar em um único lugar o rastreio de encomendas.
Branding: Conceito visual
O Trackfy é um aplicativo de rastreamento universal, que mantém o rastreio de todas suas encomendas em um único lugar.
Simplicidade, intuitivo e velocidade nas atualizações da localização de encomendas, oferecendo tranquilidade para as pessoas.
As cores escolhidas de forma a passarem modernidade, velocidade, simplicidade e confiabilidade à marca.
Tipografia
Cores
Criação
Moodboard
O moodboard foi utilizado para as referências visuais e de possíveis soluções de componentes para o produto a ser desenvolvido.
Prototipação
Wireframes
A partir de um wireframe de baixa fidelidade, foi gerado a versão de um protótipo de média fidelidade para o aplicativo.
Protótipo de alta fidelidade
As telas do protótipo de alta fidelidade foram todas desenhadas usando a ferramenta Figma. A proposta seguiu a identidade visual elaborada como parte do processo de desenvolvimento da atividade deste projeto proposto para ser executado durante o curso da Awari.
Foi desenvolvido guia de estilo visual: escala tipográfica, componentes, escolha de paleta de cores e ícones.
O material design foi aplicado apenas como referência para a construção da interface.
Splash
Login
Listagem de encomendas
Consulta rápida de rastreio
Testes
Validação:
Para identificar possíveis problemas de usabilidade, foi executado uma rodada de testes de modo remoto por vídeo chamada.
Durante os testes foram levados observados e anotados pontos que foram citados e os que foi possível perceber pela expressão das pessoas. E a partir destas anotações foram implementadas melhorias para a entrega do protótipo final.
Melhorias:
A principal mudança foi feita na tela de onboarding, onde a navegação entre as telas não ficou muito clara.
O indicador de navegação foi mudado para a parte superior da tela, de forma a ficar mais visível a navegação, além de manter a opção pular em todas as telas de onboarding para que o usuário possa pular ou sair a qualquer instante.
Mudanças na barra de navegação, na forma em que os botões e ícones eram apresentados também sofreu mudanças, de forma a ficar claro e direto a ação a ser executada.
Layout final
Lições aprendidas
Padrões e frameworks:
São ótimas referências, mas não significam que devam ser totalmente seguidas a risca: Neste projeto, foi adotado alguns padrões visto no Human interaction interfaces guidelines (Apple) e outros no Material Design.
Acessibilidade:
Preocupação com recomendações como contraste e tamanho de elementos e fontes.
Revisar sempre:
Revisar antes, durante e na conclusão do projeto se todas as telas estão consistentes.
Manter atualizado o guia de estilo criados para o projeto.
Documentar o máximo possível durante as etapas do projeto, para que ao fim seja apenas um trabalho de revisão e organização do projeto.
Testar:
Procurar ter em mente sempre o objetivo e foco do teste para que na próxima rodada de testes seja possível comparar resultados e observações.
Observar comportamentos e gestos não verbais são parte importante do teste para que possíveis melhorias sejam implementadas e testadas novamente.
Protótipo navegável:
Planejar os fluxo testados e separar por fluxo é importante para se enxergar o todo.
Quando for testar o produto todo, é importante verificar se todas as possíveis interações possuem telas que possibilitarão estas interações ou isso se tornará um impedimento para o usuário durante o teste.
Protótipo navegável
Ferramentas utilizadas:
Figma
Office Writter
Google meet
OBS studio