![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/97f03151-a34a-4396-b1c0-905a6f60cffc_rw_1920.jpg?h=74bbf3bbda346213ea3fbbcf088e0da5)
Contexto do Projeto
O Portal de Operações do Cliente foi desenvolvido para uma empresa de logística multimodal, que opera em terminais, ferrovias e portos, oferecendo soluções logísticas integradas para clientes de diversos segmentos, como siderurgia, agricultura e industrializados. A empresa possui uma grande cobertura nacional e movimenta um volume gigantesco de produtos, além de um faturamento anual na casa dos bilhões de reais. O Portal é utilizado para o acompanhamento da operação, tanto pelo cliente, quanto pelos usuários internos da companhia.
No protótipo aperte CTRL\ ou vá em "Options" e desabilite "Show Figma UI" para interagir com o menu lateral
Problema
Os clientes e usuários internos do Portal não encontravam de forma rápida as informações desejadas e não tinham conhecimento de todas as funcionalidades disponíveis.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/54926d08-0b43-454c-b933-887ef218424f_rw_1920.png?h=b49bbf355387a0e132b150d6b6f3dfa2)
1. Nessa interface as funcionalidades ficam escondidas no menu lateral com várias seções e níveis. Em uma análise heurística da tela, percebe-se que o reconhecimento é totalmente sobreposto pela memorização, prejudicando a usabilidade.
A página "Home" era preenchida com apenas dois elementos, era um espaço mal aproveitado. Também demos atenção para a página de "Novidades", pois seria um ponto de contato do usuário com o que está sendo implementado no Portal.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/3018022d-c984-4000-a92c-00e7475254b5_rw_1920.png?h=5ed2cacb3820f150a3efd34a2eef8265)
Objetivos da Feature
Aumentar os acessos e o engajamento dos usuários na utilização do portal.
Time
Nosso time operava com a metodologia ágil Scrum. A estrutura do time contava com: Scrum Master, Arquiteto de Dados, Tech Manager, Product Owner, Desenvolvedor e Designer.
Minha Atuação
Como Product Designer em uma equipe, eu era responsável por conduzir ou auxiliar em pesquisas, dinâmicas com usuários chave e alinhamentos com os stakeholders. Desenvolvi também o protótipo de alta fidelidade e o protótipo interativo da Home e Menu, mantendo a consistência visual e da informação, de acordo com o nosso design system.
Processo
Primeiramente realizamos uma pesquisa exploratória partindo de entrevistas com usuários, além de rodarmos uma desk research a fim de analisar o que já havia sido implementado no Portal e o que havia de documentação sobre esse desenvolvimento.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/e40f01fc-858a-4a8c-a131-a60d7280e3ad_rw_1920.png?h=bdbf65448adfc36678f74690536a6e08)
Card Sorting
Para garantir uma boa arquitetura da informação e uma familiaridade dos usuários com a interface do Portal, reunimos alguns stakeholders e usuários chave para uma dinâmica de Card Sorting, onde cada um agrupou as páginas/funcionalidades do Portal levando em conta critérios que fizessem sentido para eles. O card sorting foi uma ferramenta importante para entendermos a relação dos usuários com as informações que o Portal oferece.
Após consolidar todos esses dados, muitos insights foram gerados, e partimos para a validação das hipóteses de solução que surgiram.
Protótipo
Desenvolvi um protótipo de alta fidelidade com a reestruturação da página principal e do menu lateral.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/f10e4f3f-def5-40c2-9622-97a95532038d_rw_1920.png?h=ede3d2aaa1a3bcb11957fcd8d31375d5)
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/42cfa309-b0c8-4cd6-81f7-bdc59b8020d8_rw_1920.png?h=be7375382280fe4937f2a5855ca1d6cf)
A partir da separação de categorias na etapa de pesquisa, reestruturamos a página Home do Portal para exibir os itens do Menu também em Cards, de acordo com as categorias. Cada card possui uma descrição, e passando o mouse por cima, é possível visualizar todos os itens relacionados.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/385f6fc7-9d8b-41ba-9dc0-402f8c03d19d_rw_1920.png?h=d70e4da2da70b0e49c3054164f5bc7b9)
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/990ce32e-e9e4-463a-bac9-d7ce0c1e69d7_rw_1920.png?h=647dd2d24605911bb653dd60462e71be)
Organização das camadas no canto esquerdo, e as linhas das interações dos componentes do protótipo
Teste de Usabilidade
Preparei o protótipo partimos para os testes de usabilidade com usuários chave. Criamos tarefas para validarmos a arquitetura da informação, nomenclatura e também para colher feedbacks.
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/45b6f415-214d-4e3f-86b8-084459bc7e72_rw_1920.png?h=d2627e1b18d77308f9dac1b9aeebde61)
![](https://cdn.myportfolio.com/d1ed8296-57b5-4140-bf1c-6fe8b6acde04/90c2e3b9-ca36-4f7a-adbb-d6cbd11c788e_rw_1920.png?h=4cbcb1d3fedbb31e7afadb12dbe63b5d)
Após esse processo de validar e receber o feedback dos usuários, a tela foi sendo refinada, passando também pela avaliação técnica do time de desenvolvimento, e foi incorporada ao backlog de produção, pronta para ser implementada.
Próximos passos
A próxima etapa desta feature seria a priorização no backlog, para começar a ser produzida na sprint seguinte (período de duas semanas). A feature seria quebrada em user storys menores, com cada parte da tela a ser desenvolvida. Na planning é onde seriam estimadas as user storys que entrariam em cada sprint, de acordo com a capacidade do time de desenvolvimento.
Após a feature ser concluída, iniciará o processo de acompanhamento, observando as métricas de acesso, dando diagnósticos do que precisa ser aprimorado ou corrigido para que o objetivo seja atingido.