• Projetos
  • Carreira
  • Sobre

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”.

Seção de tipos de imóvel: pontos comerciais, escritórios e galpões
Pontos comerciais, escritórios e galpões: a oferta passa a se organizar pelo tipo de imóvel.

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
Bloco para empresas e empreendedoresBloco para proprietáriosBloco para corretores

A jornada

Encontre, negocie, opere

  1. 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.

  2. 02Negocie

    Consultores especializados e estrutura legal e financeira. As etapas, de visita a contrato, aparecem como um checklist que se completa.

  3. 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.

Encontre
92%
Compatível com barEste imóvel tem alta vocação para o seu negócio.
Negocie
  • ✓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ê”.

Hero com busca em linguagem natural e o FitAntes e depois do imóvel, para começar, mudar ou expandir
Bloco de bairros, regiões, ruas, preço e tamanho
No fim da página, atalhos por bairro, região, rua, preço e tamanho: navegação para quem já sabe o que quer, e conteúdo para busca orgânica.

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”.

Arquivo de exploração da home no Figma

Antes × depois

A mesma empresa, outra porta de entrada

home antiga
home antiga
home nova
home nova

Antes e depois

AntesDepois
PosicionamentoPlataforma que simplifica o aluguelImobiliária comercial completa
PúblicosQuem procura imóvelEmpresas, proprietários e corretores
OfertaImóveis em destaquePontos comerciais, escritórios e galpões
BuscaBairro e tipo de imóvelLinguagem natural, com o Fit em destaque
Como foi validadaTelas estáticasProtótipo funcional com vibe coding

Resultado

O que mudou

  1. 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.

  2. 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.

  3. 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ê”.

Próximo case Zé CompensaDesenhar para quem está no bar, à noite, com 5% de bateria

próximo passo

Todo projetocomeça com umaconversa.

Geist 600 · 9.4vw · tracking −0.06em · lh 0.95
Todo projetocomeça com umaconversa.
estrutura
Vamos conversar

site

ProjetosCarreiraLabSobreContato

redes

LinkedInBehanceInstagramMedium
ola.franlima@gmail.com© 2026