Aumentando as interações do bairro mais sustentável do mundo
Aumentando as interações do bairro mais sustentável do mundo
Aumentando as interações do bairro mais sustentável do mundo
Aumentando as interações do bairro mais sustentável do mundo
Uma nova abordagem institucional baseada em heurísticas e cognição, que resultou em +240 mil interações e +33 mil visitantes em 5 meses
Uma nova abordagem institucional baseada em heurísticas e cognição, que resultou em +240 mil interações e +33 mil visitantes em 5 meses
Uma nova abordagem institucional baseada em heurísticas e cognição, que resultou em +240 mil interações e +33 mil visitantes em 5 meses
Ano
Ano
Ano
2024
2024
2024
Duração
Duração
Duração
3 semanas
3 semanas
3 semanas
Categoria
Categoria
Categoria
Site Institucional
Site Institucional
Site Institucional
Minha função
Minha função
Minha função
Product Designer
Product Designer
Product Designer
Contexto
Contexto
Contexto
O Eurogarden é um bairro planejado em Maringá com certificações LEED Platinum e WELL Community Gold, sendo referência em sustentabilidade e qualidade de vida. Apesar do alto padrão do produto, o site não estava à altura: a presença digital comunicava genérico enquanto o bairro entregava extraordinário.
O projeto nasceu de uma demanda do time de marketing: poucas interações e baixo acesso às páginas de empreendimentos e investimentos. O site precisava de hierarquia clara, arquitetura de informação estruturada e uma narrativa que traduzisse para o digital a experiência que as pessoas já viviam no bairro.
Meu papel foi redesenhar o site do zero, construindo um sistema flexível o suficiente para crescer com os novos empreendimentos. Em 5 meses após o lançamento: mais de 240 mil interações e mais de 33 mil visitantes.
O Eurogarden é um bairro planejado em Maringá com certificações LEED Platinum e WELL Community Gold, sendo referência em sustentabilidade e qualidade de vida. Apesar do alto padrão do produto, o site não estava à altura: a presença digital comunicava genérico enquanto o bairro entregava extraordinário.
O projeto nasceu de uma demanda do time de marketing: poucas interações e baixo acesso às páginas de empreendimentos e investimentos. O site precisava de hierarquia clara, arquitetura de informação estruturada e uma narrativa que traduzisse para o digital a experiência que as pessoas já viviam no bairro.
Meu papel foi redesenhar o site do zero, construindo um sistema flexível o suficiente para crescer com os novos empreendimentos. Em 5 meses após o lançamento: mais de 240 mil interações e mais de 33 mil visitantes.
Problema
Problema
Problema
O site do Eurogarden não refletia o padrão do produto nem conduzia o usuário a nenhuma ação clara, o que gerava baixo engajamento e deixava conteúdos estratégicos, como empreendimentos e oportunidades de investimento, invisíveis para quem mais importava.
O site do Eurogarden não refletia o padrão do produto nem conduzia o usuário a nenhuma ação clara, o que gerava baixo engajamento e deixava conteúdos estratégicos, como empreendimentos e oportunidades de investimento, invisíveis para quem mais importava.
Objetivos de negócio
Objetivos de negócio
Aumentar as interações e o tempo de navegação no site
Dar visibilidade às páginas de empreendimentos e investimentos, tornando-as parte natural da jornada do usuário
Construir um sistema de páginas escalável, preparado para receber novos lançamentos sem exigir reestruturação
Objetivos do Usuário
Objetivos do Usuário
Encontrar rapidamente o conteúdo relevante para seu perfil: seja morar, investir ou conhecer o bairro
Compreender o que é o Eurogarden e o que o diferencia em menos de uma visita
Ter uma navegação clara o suficiente para tomar uma decisão de contato ou aprofundamento sem fricção
O Processo
O Processo
O Processo
Com um prazo de 20 dias para entrega, optei por direcionar o esforço para onde o impacto seria mais imediato. Em vez de pesquisa com usuários, conduzi uma análise heurística estruturada do site anterior. Esse método me permitiu diagnóstico fundamentado sem comprometer a entrega.
Antes de iniciar a análise, levantei 3 hipóteses sobre os principais pontos de fricção:
Com um prazo de 20 dias para entrega, optei por direcionar o esforço para onde o impacto seria mais imediato. Em vez de pesquisa com usuários, conduzi uma análise heurística estruturada do site anterior. Esse método me permitiu diagnóstico fundamentado sem comprometer a entrega.
Antes de iniciar a análise, levantei 3 hipóteses sobre os principais pontos de fricção:
Com um prazo de 20 dias para entrega, optei por direcionar o esforço para onde o impacto seria mais imediato. Em vez de pesquisa com usuários, conduzi uma análise heurística estruturada do site anterior. Esse método me permitiu diagnóstico fundamentado sem comprometer a entrega.
Antes de iniciar a análise, levantei 3 hipóteses sobre os principais pontos de fricção:
HIPÓTESE 1
HIPÓTESE 1
A falta de hierarquia visual estava gerando abandono
A falta de hierarquia visual estava gerando abandono
O site apresentava muitas informações com peso visual semelhante, sem uma ordem clara de leitura. A hipótese era que isso aumentava a carga cognitiva e levava o usuário a desistir antes de encontrar o que procurava.
HIPÓTESE 2
HIPÓTESE 2
O site não deixava claro o que o Eurogarden era e nem o que o usuário deveria fazer
O site não deixava claro o que o Eurogarden era e nem o que o usuário deveria fazer
Sem uma proposta de valor evidente e CTAs bem posicionados, a hipótese era que boa parte dos visitantes saía sem realizar nenhuma interação e não era por falta de interesse, mas sim por falta de direcionamento.
HIPÓTESE 3
HIPÓTESE 3
A diversidade de públicos não estava sendo atendida pela arquitetura de informação
A diversidade de públicos não estava sendo atendida pela arquitetura de informação
Quem chegava para investir, para morar ou para conhecer o bairro encontrava o mesmo fluxo sem segmentação. A hipótese era que essa ausência de direcionamento por intenção gerava confusão e aumentava a taxa de saída.
Análise Heurística
Análise Heurística
Análise Heurística
Com as hipóteses definidas, iniciei a análise heurística do site anterior avaliando cada tela com base nas 10 heurísticas de Nielsen.
O objetivo era transformar impressões em problemas concretos e defensáveis, conectando cada ponto de fricção a um princípio estabelecido de usabilidade.
Com as hipóteses definidas, iniciei a análise heurística do site anterior avaliando cada tela com base nas 10 heurísticas de Nielsen.
O objetivo era transformar impressões em problemas concretos e defensáveis, conectando cada ponto de fricção a um princípio estabelecido de usabilidade.
Com as hipóteses definidas, iniciei a análise heurística do site anterior avaliando cada tela com base nas 10 heurísticas de Nielsen.
O objetivo era transformar impressões em problemas concretos e defensáveis, conectando cada ponto de fricção a um princípio estabelecido de usabilidade.
Problema identificado
Problema identificado
Heurística violada
Heurística violada
Solução aplicada
Solução aplicada
Sem hierarquia entre seções
Sem hierarquia entre seções
#8 Estética e minimalismo
#8 Estética e minimalismo
Tipografia em escala + respiro generoso
Tipografia em escala + respiro generoso
CTAs genéricos e enterrados
CTAs genéricos e enterrados
#6 Reconhecimento em vez de lembrança
#6 Reconhecimento em vez de lembrança
CTAs em primeira pessoa
integrados ao conteúdo
CTAs em primeira pessoa
integrados ao conteúdo
Navegação sem segmentação
Navegação sem segmentação
#4 Consistência e padrões
#4 Consistência e padrões
Arquitetura por intenção do usuário
Arquitetura por
intenção do usuário
Arquitetura por intenção do usuário
Empreendimentos invisíveis
Empreendimentos invisíveis
#1 Visibilidade do status
#1 Visibilidade do status
Destaque na home e fluxo integrado
Destaque na home e fluxo integrado
A análise confirmou as três hipóteses levantadas e revelou um problema adicional: os empreendimentos não tinham visibilidade suficiente na navegação, o que explicava o baixo acesso a essas páginas relatado pelo time de marketing.
Rabiscoframes
Rabiscoframes
Rabiscoframes
Com os problemas mapeados, o próximo passo foi estruturar as soluções longe do computador. Os rabiscoframes permitiram explorar rapidamente diferentes arquiteturas de informação e hierarquias de conteúdo, sem o peso de decisões visuais prematuras. Só depois de validar a estrutura no papel é que fui para a criação no digital.
Com os problemas mapeados, o próximo passo foi estruturar as soluções longe do computador. Os rabiscoframes permitiram explorar rapidamente diferentes arquiteturas de informação e hierarquias de conteúdo, sem o peso de decisões visuais prematuras. Só depois de validar a estrutura no papel é que fui para a criação no digital.
Protótipos de média fidelidade
Protótipos de média fidelidade
Protótipos de média fidelidade
Com a estrutura validada no papel, os esboços evoluíram para protótipos de média fidelidade no Figma. Nessa etapa, o foco ainda era na arquitetura, como posicionamento de elementos, fluxo de navegação e hierarquia de conteúdo. Decisões de cor, tipografia e estética foram deliberadamente deixadas para depois, garantindo que a estrutura estivesse sólida antes de qualquer refinamento visual.
Com a estrutura validada no papel, os esboços evoluíram para protótipos de média fidelidade no Figma. Nessa etapa, o foco ainda era na arquitetura, como posicionamento de elementos, fluxo de navegação e hierarquia de conteúdo. Decisões de cor, tipografia e estética foram deliberadamente deixadas para depois, garantindo que a estrutura estivesse sólida antes de qualquer refinamento visual.
Solução
Solução
Solução
Os wireframes de média fidelidade validaram a estrutura. O que veio a seguir foi a materialização das decisões, ou seja, onde cada problema diagnosticado na análise heurística se transformou em uma solução concreta de design. Abaixo, as 5 frentes que guiaram o UI final.
Os wireframes de média fidelidade validaram a estrutura. O que veio a seguir foi a materialização das decisões, ou seja, onde cada problema diagnosticado na análise heurística se transformou em uma solução concreta de design. Abaixo, as 5 frentes que guiaram o UI final.
UI Final
UI Final
UI Final
Com a estrutura e as soluções definidas, o design ganhou sua forma final. Cada tela construída para refletir o padrão do Eurogarden e conduzir o usuário com clareza.
Com a estrutura e as soluções definidas, o design ganhou sua forma final. Cada tela construída para refletir o padrão do Eurogarden e conduzir o usuário com clareza.
Com a estrutura e as soluções definidas, o design ganhou sua forma final. Cada tela construída para refletir o padrão do Eurogarden e conduzir o usuário com clareza.
O resultado
O resultado
O resultado
Em 5 meses, o redesign saiu do papel e virou número, provando que cada decisão de design teve impacto direto no engajamento e no crescimento do Eurogarden.
Em 5 meses, o redesign saiu do papel e virou número, provando que cada decisão de design teve impacto direto no engajamento e no crescimento do Eurogarden.
+240mil interações
+240mil interações
em 5 meses
em 5 meses
+33mil
+33mil
visitantes navegando pelo site
no tempo de
agendamento
visitantes navegando pelo site
Impacto qualitativo
Impacto qualitativo
Impacto qualitativo
O site passou a refletir o que se espera de um produto de alto padrão, eliminando a dissonância entre o que o Eurogarden entregava fisicamente e o que comunicava digitalmente.
O site passou a refletir o que se espera de um produto de alto padrão, eliminando a dissonância entre o que o Eurogarden entregava fisicamente e o que comunicava digitalmente.
O site passou a refletir o que se espera de um produto de alto padrão, eliminando a dissonância entre o que o Eurogarden entregava fisicamente e o que comunicava digitalmente.
Desdobramentos
Desdobramentos
Desdobramentos
A consistência e o padrão estabelecidos no redesign geraram confiança suficiente para expandir a parceria. No ano seguinte, o cliente iniciou o desenvolvimento de um aplicativo para moradores dos empreendimentos Eurogarden, um projeto que nasceu diretamente da solidez do sistema criado para o site.
A consistência e o padrão estabelecidos no redesign geraram confiança suficiente para expandir a parceria. No ano seguinte, o cliente iniciou o desenvolvimento de um aplicativo para moradores dos empreendimentos Eurogarden, um projeto que nasceu diretamente da solidez do sistema criado para o site.
A consistência e o padrão estabelecidos no redesign geraram confiança suficiente para expandir a parceria. No ano seguinte, o cliente iniciou o desenvolvimento de um aplicativo para moradores dos empreendimentos Eurogarden, um projeto que nasceu diretamente da solidez do sistema criado para o site.
Aprendizados desse projeto
Aprendizados desse projeto
Aprendizados desse projeto
Prazo curto não inviabiliza método, e sim exige priorização
Prazo curto não inviabiliza método, e sim exige priorização
Prazo curto não inviabiliza método, e sim exige priorização
A análise heurística provou ser suficiente para fundamentar decisões defensáveis em 20 dias.
Copywriting e UX são inseparáveis em produtos de alto padrão
Copywriting e UX são inseparáveis em produtos de alto padrão
Copywriting e UX são inseparáveis em produtos de alto padrão
A hierarquia de informação só funcionou porque o texto e o layout foram pensados juntos.
A hierarquia de informação só funcionou porque o texto e o layout foram pensados juntos.
Projetar para escalar é tão importante quanto projetar para o presente
Projetar para escalar é tão importante quanto projetar para o presente
Projetar para escalar é tão importante quanto projetar para o presente
O sistema de páginas flexível foi o que permitiu o projeto continuar crescendo após o lançamento.
O sistema de páginas flexível foi o que permitiu o projeto continuar crescendo após o lançamento.
Se gostou desse case, com certeza vai gostar deste!
Se gostou desse case, com certeza vai gostar deste!
Se gostou desse case, com certeza vai gostar deste!
DESIGN SYSTEM
2026
Como usei automação com IA para levar tokens e componentes do Figma até o código de produção e reduzir em 16% as inconsistências de componentes