Equipe: Somente eu
Meu papel: Designer de interface
Contexto: Trabalho final para o curso de UI Design da Awari
Problema: Pensar e fazer uma interface para o app Trackfy, um aplicativo de rastreamento universal, que mantém o rastreio de todas suas encomendas em um único lugar.
Ferramentas e skills: Figma, Wireframe, Flowchart, Style Guide, Design System, Prototipação
Tempo disponível: 1 mês
Quando: 2021
Resumo
O curso da Awari tinha muitos exercícios, e a proposta do exercício final era que fosse entregue a interface para o aplicativo Trackfy, contemplando as telas principais, um protótipo e um style guide com os elementos principais da marca e do aplicativo. A proposta do projeto continha uma descrição do aplicativo, seus objetivos, um resumo das telas necessárias e uma documentação dos fluxos principais.
Wireframe e flowchart
Comecei o desafio fazendo um desenho do flowchart, contemplando as principais decisões e telas de erro. Essa etapa me ajudou muito a mapear tudo que seria necessário fazer, a ter uma compreensão melhor e uma visão mais macro. Logo em seguida, fui fazendo um wireframe mais detalhado para conseguir visualizar melhor as telas mais importantes.
Style guide
Para esse exercício, a proposta é que fosse feito um style guide bem simples mesmo, sem aprofundar em tantos elementos. Pensei em uma marca que passasse a ideia de movimento mas também uma certa estabilidade, confiança, já que estamos falando de entregas.
Escolhi tons de azul, roxo e amarelo como cores da identidade, sendo azul a cor principal. Para a tipografia, usei a Fira Sans, uma fonte que acho simpática por algumas serifas levemente arredondadas, também bastante legível e boa para o meio digital, além de ter os principais pesos e variações. Aproveitei a marca que tem vários elementos arredondados e incluí esses detalhes nos campos de texto, tags e botões.
Telas e fluxos
Nesse momento, comecei a trabalhar nas telas dos fluxos já mapeados. Ao observar esse trabalho hoje, apesar de me sentir orgulhosa com o resultado, não posso deixar de fazer alguns comentários sobre essas telas finais e o que eu faria diferente. Na época, desenhei os fluxos e depois apaguei as setas na hora da entrega do trabalho. Hoje, manteria as setas, pois sei que ajudam a guiar e entender os comportamentos do que leva uma tela/estado/interação para a outra. Também acho que poderia ter descrito melhor todos os passos e comportamentos. Hoje também questiono o tamanho de tela recomendado pelo professor para fazer a interface, considerando que é uma boa prática começar o projeto por uma tela menor, para minimizar problemas de espaço e usabilidade.
Infelizmente não consegui incluir o link do Figma aqui no meu portfólio.
Como último requisito da entrega, fiz um protótipo do aplicativo para materializar o projeto, mostrar as principais interações mais no detalhe. Fazer um protótipo sempre agrega muito ao resultado, possibilitando uma melhor visualização da proposta, ajuda nas discussões caso o projeto precise ser conversado com outros times, nos faz perceber detalhes que poderiam passar despercebidos e também considerar animações e interações.
Infelizmente não consegui incluir o link do protótipo do Figma aqui no meu portfólio para navegação, mas fiz uma gravação da tela.
Conclusão
Resolvi fazer esse curso em um momento de minha carreira que percebi estar focando meus estudos nas partes de pesquisa, experiência, jornada, discovery, dados, mas pouca importância para a construção de fato das telas, jornadas e interações. Talvez por já ter experiência trabalhando com design visual, acabei focando menos na materialização de interface ao estudar produtos digitais. Percebi que me faltava embasamento e encontrei nesse curso um conteúdo extremamente completo, com prática e teoria, que me alavancou muito como profissional.
Além desse projeto, fizemos exercícios de acessibilidade, projetos responsivos que funcionam tanto em desktop como mobile, boas práticas, gestalt, usabilidade, tipos de tela, motion, entre muitos assuntos relevantes. Gostei muito do curso e do resultado do projeto final, apesar de que hoje com certeza faria muitas coisas diferentes, considerando que tenho dois anos a mais de experiência na área. Muito obrigada por acompanhar essa jornada e até breve!
