Zarppi
Zarppi
Icon Design
Icon Design
Cliente
Cliente
João Martins
João Martins
Papel
Papel
UI Design
UI Design
Ano
Ano
2023
2023
Contexto
A Zarppi é uma plataforma digital especializada no gerenciamento completo de embarcações. A empresa oferece soluções para monitoramento, rastreamento, diagnóstico, manutenção e administração financeira, ajudando proprietários e gestores a cuidarem de suas embarcações com mais precisão, segurança e simplicidade. Sua proposta é integrar tecnologia e experiência náutica em uma interface que transforma dados complexos em informações acessíveis e fáceis de interpretar.
Minha atuação
Redesenho completo do sistema de ícones, cobrindo etapas de análise, exploração, definição visual e validação. Meu foco foi entender como os usuários interpretam sinais visuais dentro da interface e traduzir funcionalidades complexas em símbolos simples, claros e escaláveis. Trabalhei na definição de um sistema consistente, garantindo alinhamento entre estética, legibilidade e contexto de uso.
Contexto
A Zarppi é uma plataforma digital especializada no gerenciamento completo de embarcações. A empresa oferece soluções para monitoramento, rastreamento, diagnóstico, manutenção e administração financeira, ajudando proprietários e gestores a cuidarem de suas embarcações com mais precisão, segurança e simplicidade. Sua proposta é integrar tecnologia e experiência náutica em uma interface que transforma dados complexos em informações acessíveis e fáceis de interpretar.
Minha atuação
Redesenho completo do sistema de ícones, cobrindo etapas de análise, exploração, definição visual e validação. Meu foco foi entender como os usuários interpretam sinais visuais dentro da interface e traduzir funcionalidades complexas em símbolos simples, claros e escaláveis. Trabalhei na definição de um sistema consistente, garantindo alinhamento entre estética, legibilidade e contexto de uso.
O problema
Com a evolução da plataforma, o sistema de ícones existente deixou de acompanhar a complexidade do produto. Os usuários enfrentavam dificuldade para reconhecer funcionalidades rapidamente, especialmente em cenários com múltiplas informações na tela. A falta de consistência visual e semântica gerava ruído, aumentando o esforço cognitivo e reduzindo a eficiência da navegação.
Questão central
Os ícones não comunicavam suas funções de forma clara e imediata. A interpretação dependia de leitura complementar ou tentativa e erro, o que comprometia a fluidez da experiência.
Questão de negócio
Se a interface não comunica de forma clara e eficiente, a experiência do usuário é prejudicada. Isso impacta diretamente na percepção de valor do produto, aumenta a curva de aprendizado e pode comprometer a adoção e retenção de usuários na plataforma.
O problema
Com a evolução da plataforma, o sistema de ícones existente deixou de acompanhar a complexidade do produto. Os usuários enfrentavam dificuldade para reconhecer funcionalidades rapidamente, especialmente em cenários com múltiplas informações na tela. A falta de consistência visual e semântica gerava ruído, aumentando o esforço cognitivo e reduzindo a eficiência da navegação.
Questão central
Os ícones não comunicavam suas funções de forma clara e imediata. A interpretação dependia de leitura complementar ou tentativa e erro, o que comprometia a fluidez da experiência.
Questão de negócio
Se a interface não comunica de forma clara e eficiente, a experiência do usuário é prejudicada. Isso impacta diretamente na percepção de valor do produto, aumenta a curva de aprendizado e pode comprometer a adoção e retenção de usuários na plataforma.
Discovery
O objetivo foi entender como os ícones eram interpretados, onde estavam as principais falhas de comunicação e quais padrões poderiam ser aplicados para melhorar a experiência.
Discovery
O objetivo foi entender como os ícones eram interpretados, onde estavam as principais falhas de comunicação e quais padrões poderiam ser aplicados para melhorar a experiência.
Métodos de pesquisa
Entrevistas
Para entender como os elementos visuais eram interpretados no contexto real de uso e identificar dificuldades de reconhecimento e navegação
Workshops estratégicos
Alinhamento de visão entre produto e design, definindo princípios para a nova linguagem de ícones
Análise de referências
Estudo de sistemas de iconografia consolidados para identificar padrões, boas práticas e abordagens visuais eficientes
Análise de mercado
Avaliação de soluções similares no setor para compreender expectativas visuais e padrões adotados
Validação
Testes e revisões iterativas para garantir clareza, consistência e compreensão dos ícones em diferentes contextos
Métodos de pesquisa
Entrevistas
Para entender como os elementos visuais eram interpretados no contexto real de uso e identificar dificuldades de reconhecimento e navegação
Workshops estratégicos
Alinhamento de visão entre produto e design, definindo princípios para a nova linguagem de ícones
Análise de referências
Estudo de sistemas de iconografia consolidados para identificar padrões, boas práticas e abordagens visuais eficientes
Análise de mercado
Avaliação de soluções similares no setor para compreender expectativas visuais e padrões adotados
Validação
Testes e revisões iterativas para garantir clareza, consistência e compreensão dos ícones em diferentes contextos
Conclusões
Conclusões
O redesign do sistema de ícones da Zarppi demonstrou como a clareza visual impacta diretamente a experiência do usuário. Ao transformar uma iconografia inconsistente em um sistema coeso, legível e alinhado ao contexto náutico, foi possível reduzir o esforço cognitivo, acelerar o reconhecimento de funcionalidades e tornar a navegação mais intuitiva.
O redesign do sistema de ícones da Zarppi demonstrou como a clareza visual impacta diretamente a experiência do usuário. Ao transformar uma iconografia inconsistente em um sistema coeso, legível e alinhado ao contexto náutico, foi possível reduzir o esforço cognitivo, acelerar o reconhecimento de funcionalidades e tornar a navegação mais intuitiva.
Necessidades
Dados operacionais claros antes do contexto visual
A compreensão rápida depende da clareza da informação. Os elementos visuais devem reforçar o significado, não competir com ele.
Visão geral adaptável ao nível de experiência
Usuários mais experientes preferem leitura rápida e densa, enquanto iniciantes precisam de maior orientação e previsibilidade.
Pontos críticos
Comunicação fragmentada
A falta de padronização visual dificulta o reconhecimento e obriga o usuário a interpretar cada elemento isoladamente.
Falta de priorização
Sem hierarquia visual, todos os elementos parecem ter o mesmo peso, dificultando a identificação do que é mais importante.
Necessidades
Dados operacionais claros antes do contexto visual
A compreensão rápida depende da clareza da informação. Os elementos visuais devem reforçar o significado, não competir com ele.
Visão geral adaptável ao nível de experiência
Usuários mais experientes preferem leitura rápida e densa, enquanto iniciantes precisam de maior orientação e previsibilidade.
Pontos críticos
Comunicação fragmentada
A falta de padronização visual dificulta o reconhecimento e obriga o usuário a interpretar cada elemento isoladamente.
Falta de priorização
Sem hierarquia visual, todos os elementos parecem ter o mesmo peso, dificultando a identificação do que é mais importante.
Alinhamento de visão
Alinhamento de visão
3 cross-functional workshops to align problem understanding (Product Designers x4, PM, Tech Lead, Operations) We ran a series of collaborative workshops to align on what "real-time operations" actually mean for fleet managers. Instead of defining Live as speed alone, teams agreed that Live should support fast investigation, context switching, and decision confidence. This helped frame real-time data as a starting point for action, not just monitoring.
3 cross-functional workshops to align problem understanding (Product Designers x4, PM, Tech Lead, Operations) We ran a series of collaborative workshops to align on what "real-time operations" actually mean for fleet managers. Instead of defining Live as speed alone, teams agreed that Live should support fast investigation, context switching, and decision confidence. This helped frame real-time data as a starting point for action, not just monitoring.
Definir, validar, iterar
Exploração e testes
A fase de exploração iniciou com a criação de diferentes propostas de ícones, variando formas, metáforas visuais e níveis de detalhe para encontrar o melhor equilíbrio entre reconhecimento e simplicidade. Foram desenvolvidos rascunhos iniciais em baixa fidelidade para validar rapidamente direções visuais, seguidos por versões refinadas com aplicação de grid, proporções consistentes e padronização de traços. Durante os testes, os ícones foram avaliados em contexto real de interface, considerando legibilidade em diferentes tamanhos, clareza semântica e consistência entre elementos. O processo iterativo permitiu identificar quais soluções comunicavam melhor suas funções, garantindo que o sistema final fosse intuitivo, coeso e eficiente no uso cotidiano.
Feedback dos clientes
Usuários, especialmente os de maior idade, relataram maior facilidade na identificação dos ícones e compreensão das funcionalidades. A nova iconografia reduziu o esforço de interpretação, tornando a navegação mais clara, acessível e intuitiva, mesmo para quem possui menor familiaridade com interfaces digitais.
Feedbacks positivos
Percepção de valor
A melhoria na qualidade visual elevou a confiança no produto e reforçou sua profissionalização
Facilidade de entendimento
Os ícones passaram a ser compreendidos com mais rapidez, reduzindo a necessidade de interpretação
Clareza na comunicação
A nova linguagem visual tornou as funcionalidades mais evidentes e diretas, diminuindo ambiguidades na interface
Feedback dos clientes
Usuários, especialmente os de maior idade, relataram maior facilidade na identificação dos ícones e compreensão das funcionalidades. A nova iconografia reduziu o esforço de interpretação, tornando a navegação mais clara, acessível e intuitiva, mesmo para quem possui menor familiaridade com interfaces digitais.
Feedbacks positivos
Percepção de valor
A melhoria na qualidade visual elevou a confiança no produto e reforçou sua profissionalização
Facilidade de entendimento
Os ícones passaram a ser compreendidos com mais rapidez, reduzindo a necessidade de interpretação
Clareza na comunicação
A nova linguagem visual tornou as funcionalidades mais evidentes e diretas, diminuindo ambiguidades na interface
Resultado e impacto
O novo sistema de ícones trouxe mais clareza e consistência para a interface, facilitando a identificação das funcionalidades e tornando a navegação mais fluida. A redução do esforço cognitivo permitiu decisões mais rápidas e aumentou a autonomia dos usuários no uso da plataforma. Além disso, o redesign fortaleceu a percepção de valor do produto, elevando sua qualidade visual e alinhando a experiência ao nível de maturidade da Zarppi.
Resultado e impacto
O novo sistema de ícones trouxe mais clareza e consistência para a interface, facilitando a identificação das funcionalidades e tornando a navegação mais fluida. A redução do esforço cognitivo permitiu decisões mais rápidas e aumentou a autonomia dos usuários no uso da plataforma. Além disso, o redesign fortaleceu a percepção de valor do produto, elevando sua qualidade visual e alinhando a experiência ao nível de maturidade da Zarppi.
Fale sobre sua ideia, seu projeto ou desafio.
Fale sobre sua ideia, seu projeto ou desafio.
Fale sobre sua ideia, seu projeto ou desafio.