ABRALATAS
Website
Sobre
Fundada em 2003, a Abralatas representa os fabricantes brasileiros de latas de alumínio para bebidas, promovendo inovação, sustentabilidade e o fortalecimento do setor.
Um redesign que integrou branding e UX para organizar a informação, fortalecer a identidade e tornar mais claro o papel institucional da Abralatas.
Ano
2024
Tempo
45 dias
Tipo
Projeto @Look&Feel
Minhas responsabilidades
UX
UI
Branding
UI
Branding
Ferramentas
Mais clareza, menos complexidade
Um redesign que integrou branding e UX para organizar a informação, fortalecer a identidade e tornar mais claro o papel institucional da Abralatas.
Desafio
Redesign
Comunicação fragmentada, navegação pouco intuitiva e a experiência visual distante da magnitude institucional da marca.
Falta de clareza institucional
O site não comunicava de forma clara o papel da Abralatas, seus stakeholders e sua atuação como associação, dificultando a compreensão do seu valor estratégico.
Arquitetura da informação confusa
A organização do conteúdo dificultava o acesso às informações, concentrando grande volume em estruturas pouco eficientes, como o uso excessivo de vários conteúdos em um único componente (tabs), comprometendo a encontrabilidade.
Inconsistência visual e falta de padronização
Diferentes páginas apresentavam variações significativas de layout e estilo, gerando a sensação de múltiplos sites e prejudicando a coerência da experiência.
Baixa atratividade
A interface não refletia modernidade nem engajava o usuário, além de apresentar falhas em princípios heurísticos, impactando a navegação e o entendimento do conteúdo.
O site não comunicava de forma clara o papel da Abralatas, seus stakeholders e sua atuação como associação, dificultando a compreensão do seu valor estratégico.
Arquitetura da informação confusa
A organização do conteúdo dificultava o acesso às informações, concentrando grande volume em estruturas pouco eficientes, como o uso excessivo de vários conteúdos em um único componente (tabs), comprometendo a encontrabilidade.
Inconsistência visual e falta de padronização
Diferentes páginas apresentavam variações significativas de layout e estilo, gerando a sensação de múltiplos sites e prejudicando a coerência da experiência.
Baixa atratividade
A interface não refletia modernidade nem engajava o usuário, além de apresentar falhas em princípios heurísticos, impactando a navegação e o entendimento do conteúdo.
Antes: uma experiência fragmentada
Um site com inconsistências visuais, navegação pouco intuitiva e excesso de informação concentrada, dificultando a compreensão do papel institucional da Abralatas.
Processo
O processo foi guiado por uma imersão estratégica na marca e no contexto institucional, conectando branding e arquitetura da informação.
Imersão institucional e mapeamento de stakeholders
O processo começou com uma compreensão aprofundada da Abralatas, incluindo o mapeamento de stakeholders, análise da atuação da associação e entendimento de como ela é percebida pelo mercado.
Participação no rebranding
A atuação no processo de branding permitiu uma leitura mais aprofundada da personalidade da marca, seus atributos e arquétipo, garantindo maior consistência entre discurso, identidade visual e experiência digital.
Análise heurística do site existente
Avaliação da interface atual com base em princípios de usabilidade, identificando falhas de navegação, inconsistências e pontos de fricção na experiência.
Reestruturação da arquitetura da informação
Levantamento completo dos conteúdos existentes e reorganização da arquitetura para melhorar a encontrabilidade, hierarquia e clareza das informações.
Análise de referências do setor
Estudo de instituições e organizações do segmento para identificar padrões de comunicação, conteúdo, estrutura e posicionamento.
O processo começou com uma compreensão aprofundada da Abralatas, incluindo o mapeamento de stakeholders, análise da atuação da associação e entendimento de como ela é percebida pelo mercado.
Participação no rebranding
A atuação no processo de branding permitiu uma leitura mais aprofundada da personalidade da marca, seus atributos e arquétipo, garantindo maior consistência entre discurso, identidade visual e experiência digital.
Análise heurística do site existente
Avaliação da interface atual com base em princípios de usabilidade, identificando falhas de navegação, inconsistências e pontos de fricção na experiência.
Reestruturação da arquitetura da informação
Levantamento completo dos conteúdos existentes e reorganização da arquitetura para melhorar a encontrabilidade, hierarquia e clareza das informações.
Análise de referências do setor
Estudo de instituições e organizações do segmento para identificar padrões de comunicação, conteúdo, estrutura e posicionamento.
Solução
A solução partiu da reorganização do papel institucional da Abralatas, conectando estrutura, conteúdo e experiência.
Arquitetura orientada por contexto
A estrutura foi organizada em dois grandes blocos: Abralatas (institucional) e A lata de alumínio (conteúdo sobre o produto do setor). Essa divisão trouxe mais clareza ao separar o papel da associação de informações sobre o setor.
Estruturação do bloco institucional (Abralatas)
Organização do conteúdo em três pilares principais: Quem somos, Recursos e Transparência; facilitando o acesso às informações institucionais, publicações e dados formais da associação.
Foco na comunicação institucional
Reorganização de conteúdos, priorizando uma comunicação mais objetiva e estratégica. Informações mais aprofundadas foram mantidas em publicações, tornando o site mais leve e direcionado.
Experiência interativa — Anatomia da Lata
Substituição do modelo estático baseado em tabs por uma experiência interativa em 3D, desenvolvida com Blender. A nova abordagem permite que o usuário explore a lata de forma dinâmica, interagindo com seus componentes e acessando informações de maneira mais intuitiva e envolvente.
A estrutura foi organizada em dois grandes blocos: Abralatas (institucional) e A lata de alumínio (conteúdo sobre o produto do setor). Essa divisão trouxe mais clareza ao separar o papel da associação de informações sobre o setor.
Estruturação do bloco institucional (Abralatas)
Organização do conteúdo em três pilares principais: Quem somos, Recursos e Transparência; facilitando o acesso às informações institucionais, publicações e dados formais da associação.
Foco na comunicação institucional
Reorganização de conteúdos, priorizando uma comunicação mais objetiva e estratégica. Informações mais aprofundadas foram mantidas em publicações, tornando o site mais leve e direcionado.
Experiência interativa — Anatomia da Lata
Substituição do modelo estático baseado em tabs por uma experiência interativa em 3D, desenvolvida com Blender. A nova abordagem permite que o usuário explore a lata de forma dinâmica, interagindo com seus componentes e acessando informações de maneira mais intuitiva e envolvente.
Resultado
Clareza e organização da informação
A nova arquitetura facilitou a navegação e o acesso aos conteúdos, tornando mais evidente o papel da Abralatas e sua atuação no setor.
Percepção de modernidade
A integração com o rebranding trouxe consistência visual e um aspecto mais moderno, com uso mais estratégico do verde da marca como acentuação, resultando em uma interface mais leve e atrativa.
Experiência mais fluida e engajadora
A simplificação dos conteúdos e a introdução de interações, como a anatomia da lata em 3D, tornaram a navegação mais intuitiva e envolvente.
A nova arquitetura facilitou a navegação e o acesso aos conteúdos, tornando mais evidente o papel da Abralatas e sua atuação no setor.
Percepção de modernidade
A integração com o rebranding trouxe consistência visual e um aspecto mais moderno, com uso mais estratégico do verde da marca como acentuação, resultando em uma interface mais leve e atrativa.
Experiência mais fluida e engajadora
A simplificação dos conteúdos e a introdução de interações, como a anatomia da lata em 3D, tornaram a navegação mais intuitiva e envolvente.
Aprendizados estratégicos
Menos é mais: priorização de conteúdo é estratégia
Priorizar o que é essencial tornou a experiência mais eficiente e alinhada ao papel institucional do site.
Participação desde o rebranding fortalece a experiência
Atuar desde a definição da identidade verbal e visual permitiu maior consistência entre marca e produto digital. Essa integração garantiu que decisões de UX estivessem alinhadas ao posicionamento estratégico desde o início.
Priorizar o que é essencial tornou a experiência mais eficiente e alinhada ao papel institucional do site.
Participação desde o rebranding fortalece a experiência
Atuar desde a definição da identidade verbal e visual permitiu maior consistência entre marca e produto digital. Essa integração garantiu que decisões de UX estivessem alinhadas ao posicionamento estratégico desde o início.
Projeto desenvolvido em colaboração com:
Bárbara Barcelos – UX/UI Design
Brendo Lincoln – Visual Designer
Gabriela Chaves – Project & Product Management
Marcelo Glaser – UX Writer
Nelson Pereira – Lead Design & Web Dev
Rafael Félix – Web Dev
Brendo Lincoln – Visual Designer
Gabriela Chaves – Project & Product Management
Marcelo Glaser – UX Writer
Nelson Pereira – Lead Design & Web Dev
Rafael Félix – Web Dev
