DataZAP is the real estate intelligence platform (SaaS) of ZAP Imóveis, which assists construction companies, property developers, and financial institutions in making strategic decisions, such as where and when to build, invest, finance, and negotiate properties.
INDUSTRY
Technology
CLIENT
Zap Imóveis
CARGO
Product Design Intern
Context
After migrating to a new platform, users accustomed to the previous version faced difficulties adjusting. The navigation structure was unclear, especially in the sidebar, which hindered the experience and compromised the use of the system's basic functionalities.
Issues
During the discovery phase, based on usability testing and behavior analysis, several friction points were identified:
Sidebar Closed:
Icons without context, making it difficult to understand the function of each button.
Automatic expansion of the sidebar when clicked, causing a loss of usable screen area.
Clustered buttons, increasing the risk of erroneous clicks.
Open Sidebar:
Inadequate proportion on smaller screens, hindering navigation.
Same issues of crowding and confusion among buttons.
Rigid model, which did not allow for the addition of new functionalities.
The platform's navigation was confusing, not scalable, and misaligned with the actual usage by customers.
Approach
I conducted the discovery focused on navigation, mapping specific frustrations in both modes of the sidebar.
I performed user testing and collected real feedback from the operation.
I worked on modular and scalable solutions, prioritizing clarity and efficiency.
I collaborated with PMs and developers to ensure feasibility and consistency in delivery.
Applied solutions
“More” Button
Objectives:
Reduce visual pollution of the sidebar.
Optimize the use of space on smaller screens.
Allow for future expansion of the menu without compromising the experience.
Results:
Decreased number of buttons initially displayed.
Release of visual space and better use of the screen.
Structure ready to accommodate new functionalities in an organized manner.
Organização por Categorias – Sidebar Fechada
Objetivos:
Facilitar a navegação mesmo com a sidebar retraída.
Reduzir a frustração causada pela falta de contexto nos ícones.
Resultados:
Inclusão de rótulos e menus contextuais nos ícones.
Melhor compreensão das categorias sem precisar expandir a interface.
Menos cliques desnecessários e navegação mais fluida.
Organização por Categorias – Sidebar Aberta
Objetivos:
Ajustar o layout às resoluções reais utilizadas pelos clientes.
Melhorar a hierarquia visual das ações.
Prevenir erros de navegação, como cliques acidentais.
Resultados:
Espaçamento otimizado entre os elementos.
Reordenação das categorias com base em dados de uso.
Botão “Sair” isolado para evitar encerramento de sessão acidental.
Resultados concretos
Interface mais clara, responsiva e organizada para diferentes tamanhos de tela.
Redução de erros de navegação e confusão reportada pelos usuários.
Preparação da interface para o crescimento da plataforma sem comprometer a experiência.
Aprendizados
Esse projeto mostrou como detalhes aparentemente pequenos, como o espaçamento entre botões ou a ausência de rótulos, tem impacto direto na navegação do usuário. Observar como o usuário interagia com a plataforma fez toda a diferença.
Smooth Scroll
This will hide itself!
This will hide itself!
Navigation UX: A new experience in the Sidebar
OVERVIEW
DataZAP is the real estate intelligence platform (SaaS) of ZAP Imóveis, which assists construction companies, property developers, and financial institutions in making strategic decisions, such as where and when to build, invest, finance, and negotiate properties.
INDUSTRY
Technology
CLIENT
Zap Imóveis
CARGO
Product Design Intern
Context
After migrating to a new platform, users accustomed to the previous version faced difficulties adjusting. The navigation structure was unclear, especially in the sidebar, which hindered the experience and compromised the use of the system's basic functionalities.
Issues
During the discovery phase, based on usability testing and behavior analysis, several friction points were identified:
Sidebar Closed:
Icons without context, making it difficult to understand the function of each button.
Automatic expansion of the sidebar when clicked, causing a loss of usable screen area.
Clustered buttons, increasing the risk of erroneous clicks.
Open Sidebar:
Inadequate proportion on smaller screens, hindering navigation.
Same issues of crowding and confusion among buttons.
Rigid model, which did not allow for the addition of new functionalities.
The platform's navigation was confusing, not scalable, and misaligned with the actual usage by customers.
Approach
I conducted the discovery focused on navigation, mapping specific frustrations in both modes of the sidebar.
I performed user testing and collected real feedback from the operation.
I worked on modular and scalable solutions, prioritizing clarity and efficiency.
I collaborated with PMs and developers to ensure feasibility and consistency in delivery.
Applied solutions
“More” Button
Objectives:
Reduce visual pollution of the sidebar.
Optimize the use of space on smaller screens.
Allow for future expansion of the menu without compromising the experience.
Results:
Decreased number of buttons initially displayed.
Release of visual space and better use of the screen.
Structure ready to accommodate new functionalities in an organized manner.
Organização por Categorias – Sidebar Fechada
Objetivos:
Facilitar a navegação mesmo com a sidebar retraída.
Reduzir a frustração causada pela falta de contexto nos ícones.
Resultados:
Inclusão de rótulos e menus contextuais nos ícones.
Melhor compreensão das categorias sem precisar expandir a interface.
Menos cliques desnecessários e navegação mais fluida.
Organização por Categorias – Sidebar Aberta
Objetivos:
Ajustar o layout às resoluções reais utilizadas pelos clientes.
Melhorar a hierarquia visual das ações.
Prevenir erros de navegação, como cliques acidentais.
Resultados:
Espaçamento otimizado entre os elementos.
Reordenação das categorias com base em dados de uso.
Botão “Sair” isolado para evitar encerramento de sessão acidental.
Resultados concretos
Interface mais clara, responsiva e organizada para diferentes tamanhos de tela.
Redução de erros de navegação e confusão reportada pelos usuários.
Preparação da interface para o crescimento da plataforma sem comprometer a experiência.
Aprendizados
Esse projeto mostrou como detalhes aparentemente pequenos, como o espaçamento entre botões ou a ausência de rótulos, tem impacto direto na navegação do usuário. Observar como o usuário interagia com a plataforma fez toda a diferença.
Smooth Scroll
This will hide itself!
This will hide itself!
Navigation UX: A new experience in the Sidebar
OVERVIEW
DataZAP is the real estate intelligence platform (SaaS) of ZAP Imóveis, which assists construction companies, property developers, and financial institutions in making strategic decisions, such as where and when to build, invest, finance, and negotiate properties.
INDUSTRY
Technology
CLIENT
Zap Imóveis
CARGO
Product Design Intern
Context
After migrating to a new platform, users accustomed to the previous version faced difficulties adjusting. The navigation structure was unclear, especially in the sidebar, which hindered the experience and compromised the use of the system's basic functionalities.
Issues
During the discovery phase, based on usability testing and behavior analysis, several friction points were identified:
Sidebar Closed:
Icons without context, making it difficult to understand the function of each button.
Automatic expansion of the sidebar when clicked, causing a loss of usable screen area.
Clustered buttons, increasing the risk of erroneous clicks.
Open Sidebar:
Inadequate proportion on smaller screens, hindering navigation.
Same issues of crowding and confusion among buttons.
Rigid model, which did not allow for the addition of new functionalities.
The platform's navigation was confusing, not scalable, and misaligned with the actual usage by customers.
Approach
I conducted the discovery focused on navigation, mapping specific frustrations in both modes of the sidebar.
I performed user testing and collected real feedback from the operation.
I worked on modular and scalable solutions, prioritizing clarity and efficiency.
I collaborated with PMs and developers to ensure feasibility and consistency in delivery.
Applied solutions
“More” Button
Objectives:
Reduce visual pollution of the sidebar.
Optimize the use of space on smaller screens.
Allow for future expansion of the menu without compromising the experience.
Results:
Decreased number of buttons initially displayed.
Release of visual space and better use of the screen.
Structure ready to accommodate new functionalities in an organized manner.
Organização por Categorias – Sidebar Fechada
Objetivos:
Facilitar a navegação mesmo com a sidebar retraída.
Reduzir a frustração causada pela falta de contexto nos ícones.
Resultados:
Inclusão de rótulos e menus contextuais nos ícones.
Melhor compreensão das categorias sem precisar expandir a interface.
Menos cliques desnecessários e navegação mais fluida.
Organização por Categorias – Sidebar Aberta
Objetivos:
Ajustar o layout às resoluções reais utilizadas pelos clientes.
Melhorar a hierarquia visual das ações.
Prevenir erros de navegação, como cliques acidentais.
Resultados:
Espaçamento otimizado entre os elementos.
Reordenação das categorias com base em dados de uso.
Botão “Sair” isolado para evitar encerramento de sessão acidental.
Resultados concretos
Interface mais clara, responsiva e organizada para diferentes tamanhos de tela.
Redução de erros de navegação e confusão reportada pelos usuários.
Preparação da interface para o crescimento da plataforma sem comprometer a experiência.
Aprendizados
Esse projeto mostrou como detalhes aparentemente pequenos, como o espaçamento entre botões ou a ausência de rótulos, tem impacto direto na navegação do usuário. Observar como o usuário interagia com a plataforma fez toda a diferença.
Smooth Scroll
This will hide itself!
This will hide itself!