Produto · SuaQuadra · imóveis comerciais
Home SuaQuadra
role para ler o case

Projetos / Produto
A porta de entrada de uma imobiliária que deixou de ser portal
Como traduzi o novo momento da SuaQuadra numa home para três públicos, e prototipei a página inteira com vibe coding antes de ela ir para o código.
- Projeto
- Home SuaQuadra
- Empresa
- SuaQuadra · imóveis comerciais
- Papel
- Product Designer: benchmark, estratégia da página, texto e protótipo funcional
- Ferramentas
- Figma e vibe coding com IA
- Entregas
- Home desktop e mobile, copy, componentes animados
Resumo · 1 min de leituraA história completa continua abaixo
- 01Problema
- A home ainda era de um portal de busca e falava com um público só, enquanto a SuaQuadra já atendia três públicos e três tipos de imóvel.
- 02Papel
- Product Designer: benchmark, estratégia da página, texto e protótipo funcional.
- 03Solução
- Uma home de imobiliária comercial, organizada por tipo de imóvel, com três portas (empresas, proprietários e corretores) e a jornada encontre, negocie, opere.
- 04Resultado
- Uma porta de entrada à altura do novo momento da empresa, e um protótipo feito com vibe coding que virou a referência do time para interações e componentes animados.
O problema
Uma home de portal para uma empresa que já era muito mais
A home antiga dizia “a plataforma que simplifica o aluguel comercial”: uma busca por bairro e tipo, imóveis em destaque e depoimentos. Falava com um público só, quem procurava imóvel.
A SuaQuadra tinha entrado num novo momento. Passou a trabalhar de forma separada pontos comerciais, escritórios e galpões, e a atender de perto quem aluga, quem anuncia e quem corretora. Nada disso aparecia na porta de entrada.
“Menos simplificar, mais apoiar uma decisão estratégica.”
Anotação do processo
A virada
De plataforma a imobiliária comercial completa
Comecei pelo benchmark e por entender como cada mudança do negócio deveria virar página. Três movimentos guiaram a home: se posicionar como imobiliária, e não como portal; organizar a oferta pelo tipo de imóvel; e falar com três públicos diferentes sem virar três sites.
O texto fez parte do design. A promessa saiu de “simplificar o aluguel” para “do primeiro negócio à expansão, alugue seu imóvel comercial com confiança”.

Uma home, três portas
Cada público encontra a sua promessa
Em vez de três páginas, uma home com três blocos que mudam de tom e de argumento conforme quem está lendo.
Do imóvel certo à operação. Tudo no mesmo lugar.
- Busca com IA que cruza o negócio com infraestrutura e localização
- Consultores especializados e estrutura legal e financeira
- Acompanhamento da inauguração ao dia a dia



A jornada
Encontre, negocie, opere
- 01Encontre
Busca personalizada com IA que cruza as necessidades do negócio com dados de infraestrutura e localização. O Fit aparece já na home.
- 02Negocie
Consultores especializados e estrutura legal e financeira. As etapas, de visita a contrato, aparecem como um checklist que se completa.
- 03Opere
Um time que acompanha da inauguração ao dia a dia, com rede de parceiros e seguros que tiram a dor de cabeça imobiliária.


- ✓Visita
- ✓Negociação
- ✓Garantia
- ✓Contrato
Protótipo funcional
Prototipei com vibe coding para testar o que o Figma não mostra
Animação e interação decidem se uma home parece viva ou parece um folder. Por isso construí um protótipo funcional da página com IA, e fui testando nele cada interação e cada componente animado: o Fit no hero, o checklist da negociação, o painel de leads dos corretores e o antes e depois do imóvel.
O protótipo virou a referência para o time. A conversa deixou de ser “imagina que isso anima” e passou a ser “abre e vê”.



Processo
Muitas versões até a final
O arquivo de exploração guarda o caminho: versões mobile do hero, testes de ordem das seções, a paleta revista e as anotações que viraram decisão, como “categorizar por pontos comerciais, escritórios e galpões”.

Antes × depois
A mesma empresa, outra porta de entrada
Antes e depois
| Antes | Depois | |
|---|---|---|
| Posicionamento | Plataforma que simplifica o aluguel | Imobiliária comercial completa |
| Públicos | Quem procura imóvel | Empresas, proprietários e corretores |
| Oferta | Imóveis em destaque | Pontos comerciais, escritórios e galpões |
| Busca | Bairro e tipo de imóvel | Linguagem natural, com o Fit em destaque |
| Como foi validada | Telas estáticas | Protótipo funcional com vibe coding |
Resultado
O que mudou
- Posicionamento
De portal a imobiliária
A porta de entrada passou a falar como imobiliária comercial completa, organizada por pontos comerciais, escritórios e galpões.
- Públicos
Três portas, uma home
Empresas, proprietários e corretores encontram a sua promessa sem que a SuaQuadra vire três sites diferentes.
- Time
O protótipo virou referência
Interações e componentes animados foram testados no protótipo feito com vibe coding. A conversa deixou de ser “imagina que isso anima” e passou a ser “abre e vê”.

