Como reconstruímos
a Wahala Realty.
Cada escolha que fizemos, e por quê.
wahalarealty.comAntes e depois, tela por tela.
O site antigo parecia caro, mas era difícil de ler, e você precisava rolar muito para encontrar a Neysa. Aqui está cada parte, a antiga à esquerda, a nova à direita.
No celular.
Capturas de tela do site antigo, feitas antes de ele ser substituído, ao lado do site no ar hoje.
Escolha as cores.
A cor é a primeira escolha, e ela vem em três partes.
Primeiro, escolha a base: branco ou preto.
A base é a cor sobre a qual fica a maior parte da página. Todo o resto vai por cima dela.
- Por que não verde ou douradoUma página inteira em verde ou dourado cansa rápido, e nada nela consegue se destacar.
- A maioria das empresasEscolha branco ou preto. Suas fotos, seus textos e seus botões falam por você.
- A exceçãoArte, moda e outros trabalhos criativos podem usar uma cor de verdade como base. A cor faz parte do que você vende.
Experimente: escolha uma base
Neysa Morales
Most agents have never bought a house with their own money.
What can I afford?Depois, deixe o contraste forte.
Contraste é o quanto algo se destaca do que está em volta. É assim que o visitante entende uma página sem pensar.
Antes
Depois
Experimente: arraste para aumentar o contraste
- O contraste deixa legívelEscuro no claro, ou claro no escuro. Texto sobre uma foto cheia de coisas não tem nenhum dos dois, então você aperta os olhos.
- O contraste define a ordemA coisa maior e mais escura é lida primeiro. No site novo, é o nome dela, depois uma frase, depois um botão verde.
- Pouco contraste em tudoQuando tudo é fino, claro e do mesmo tamanho, nada vem primeiro. Então você não lê nada.
Por último, use três cores. Não mais.
Uma base, uma cor de texto e uma cor para os botões. Cada cor ou tom a mais é mais uma coisa que seu olho precisa organizar.
Antes: 4 cores, mais tons extras delas
Só o texto creme vinha em cinco transparências: 60, 80, 82, 85 e 88%.
Depois: 3 cores
O verde só vai em coisas que você pode apertar, então seu olho as encontra sem procurar.
Decida o que vai no site.
Antes de qualquer design, listamos o que um comprador de imóvel precisa. Depois, cada seção tem que merecer o seu lugar.
Antes
- Buscar no MLS
- Serviços
- Sobre a Neysa
- Regiões
- Como funciona
- Contato
Depois
- What can I afford?A primeira pergunta de todo comprador.
- Quanto vai custar de verdade por mês?Impostos, seguro e reparos, não só o preço.
- Imóveis à venda num mapaCom um botão para receber imóveis compatíveis.
- Imóveis que ela vendeu, e avaliaçõesProva, com fotos reais e nomes reais.
- Falar, Ligar, SalvarSempre na parte de baixo da tela do celular.
- Para quem éO site antigo foi feito para vendedores. Nós o voltamos para compradores.
- Por que compradoresCorretores costumam pagar sites como o Zillow por contatos de compradores. Este site consegue esses contatos sozinho.
- ComoDê ao comprador algo útil, como quanto ele pode pagar, em troca de um nome e um número.
Escolha uma fonte que você não precise ler duas vezes.
Letras enfeitadas são bonitas. Mas deixam a leitura mais lenta.
Miami-Dade specialist · Serving all of Florida
Real Estate,
Done With Strategy.
Wahala Realty is the boutique practice of Neysa Morales Gonzalez PA, agent, broker, and investor.
Neysa
Morales
Most agents have never bought a house with their own money.
Por quêO nome dela e um motivo para escolhê-la, em letras sólidas sobre um fundo liso. Você lê sem esforço.
- Letras finas somemO texto antigo era fino, creme claro sobre uma foto. O novo é sólido e escuro.
- Maiúsculas são mais difíceisLemos as palavras pelo formato. TUDO EM MAIÚSCULAS COM ESPAÇOS LARGOS não tem formato.
- Uma fonte simplesLetras simples que não se parecem entre si. Mais fácil para todo mundo, e principalmente para quem tem dislexia.
Faça os botões dizerem o que acontece.
Um botão deve responder a uma pergunta que você já tem.
Por quêUm botão principal, com as palavras que o comprador já está pensando. O número fica ao lado, para quem prefere ligar.
- Palavras normais"Quanto posso pagar?" é o que o comprador já está pensando.
- Um botão principalDois botões do mesmo tamanho obrigam você a escolher. Um só deixa fácil.
- Texto maiorO texto do botão antigo tinha 12 pixels, em maiúsculas. O novo é maior e em letras normais.
Escolha um tema e repita em todo lugar.
Os melhores sites têm uma ideia que se repete em cada seção. Em poucos segundos, você entende como o site funciona, e ele parece uma coisa só, não um monte de partes.
- Na WahalaVerde só nos botões. Uma seta grossa e arredondada em todo botão que tem seta. No computador, as seções deslizam sobre a anterior enquanto você rola.
- Por que funcionaA repetição ensina. Depois de apertar um botão verde, você sabe o que todo botão verde faz.
- A regraEscolha um ou dois destes, e use em todo lugar. Seis efeitos diferentes é barulho.
Use o que as pessoas já conhecem.
Não há motivo para reinventar a roda. Quando algo se parece com o que as pessoas usam todo dia, elas entendem na hora.
Mostre sempre as avaliações. Deixe com cara de Google.
As pessoas confiam mais em outros compradores do que em qualquer coisa que uma corretora diga sobre si mesma. E todo mundo já leu avaliações no Google, então mostramos do jeito que o Google mostra.
- Familiar à primeira vistaUma letra num círculo, um nome, cinco estrelas, o logo do Google. Você sabe o que é antes de ler.
- Prova que dá para conferirCada cartão abre exatamente aquela avaliação no Google.
- Nosso, não uma cópiaEstrelas verdes, nas cores dela. Parece Google, mas pertence ao site dela.
O resto da página funciona do mesmo jeito.
- Familiar é rápidoNinguém precisa descobrir como nada funciona. É só usar.
- Familiar não é sem graçaOs formatos são conhecidos. A cor, o tamanho, as fotos e o cuidado fazem a diferença.
- Simples, bem feitoFácil de usar por fora. Muito trabalho por dentro.
Limpe a primeira tela.
A foto antiga era um horizonte cheio de prédios, e o texto ficava bem em cima dela. Agora você vê a Neysa.
Por quêUm rosto gera confiança antes de qualquer palavra ser lida. Agora você sabe para quem está ligando.
0 palavras na primeira tela antiga. 0 na nova.
- Menos para lerCortamos as palavras que ninguém lê: slogans, rótulos, um parágrafo longo.
- Nada atrás das palavrasTexto sobre um fundo liso se lê sozinho. Texto sobre uma foto dá trabalho.
- Um rostoVocê vê com quem vai trabalhar antes de ler uma palavra. Isso é confiança.
Mostre o rosto dela, mais de uma vez.
A maioria dos sites de imóveis mostra o horizonte de uma cidade ou uma fileira de casas. Daria para trocar pelo nome de qualquer corretor. Aqui você vê a Neysa, de novo e de novo, então no fim da página parece que você já a conhece.
- Pessoas contratam pessoasComprar uma casa é pessoal. Você quer saber quem está do seu lado antes de ligar.
- Uma imagem na cabeçaUm rosto fica na memória. Um horizonte de prédios, não. Dias depois, você se lembra dela, não do site.
- Toda vez que ela pedeQuando a página pede para você entrar em contato, o rosto dela está ali. É uma pessoa pedindo, não um formulário.
No celular, a foto e o nome dela são lidos como uma coisa só.
A primeira versão para celular eram duas caixas separadas: uma foto baixa, e o nome dela embaixo. O Evan chamou de "um pouco sem graça". Criamos três versões novas no site real.
- Uma peça sóA foto é mais alta e a parte de baixo se funde com a página. O nome dela fica sobre essa transição, então rosto e nome são lidos juntos.
- Por que não a BUm rosto em tela cheia deixa de ser um retrato e vira um close, num clima mais escuro que o resto do site.
- Por que não a CMantinha as duas caixas, e as etiquetas repetiam números que já apareciam logo abaixo.
Testamos três primeiras telas.
Nossa primeira versão colocava uma calculadora de três caixas logo no topo. O rosto dela, a promessa dela e um formulário pediam atenção ao mesmo tempo.
Por que funciona
Um rosto gera confiança antes de qualquer palavra ser lida. Então a primeira tela só apresenta a Neysa e a promessa dela. A calculadora foi para uma seção própria, com um título que diz por que vale a pena usá-la.
Detalhes que você não vai notar
- A foto começa abaixo do menu, então a cabeça dela nunca é cortada em nenhuma tela.
- O fundo é exatamente o cinza do fundo da foto dela, então não aparece nenhuma borda.
- Tiramos um esfumado suave no topo para o cabelo dela continuar nítido.
Pense primeiro no celular.
A maioria das pessoas vai encontrá-la pelo celular. Então cada seção foi pensada para a tela do celular, não espremida a partir do computador.
- Uma colunaNada lado a lado que precise encolher. Você lê de cima para baixo.
- Grande o bastante para tocarBotões e opções têm o tamanho de um polegar, não de um mouse.
- A barra nunca saiFalar, Ligar e Salvar ficam embaixo em todas as telas acima.
Facilite virar cliente.
Um site bonito não é o objetivo. O objetivo é mais clientes para a Neysa. Então cada parte da página leva o visitante um passo mais perto de ligar para ela.
O contato dela está sempre ao alcance do polegar.
Se você precisa procurar como falar com alguém, desiste. No celular, Falar com a Neysa, Ligar e Salvar ficam na parte de baixo da tela o caminho todo.
Por quêO número dela na primeira tela, e Falar, Ligar e Salvar embaixo de todas as telas. Ninguém precisa procurar por ela.
A página se move. A barra, não.
Onde quer que você pare, Falar com a Neysa, Ligar e Salvar estão a um toque.
- Falar com a NeysaAbre um formulário curto, ali mesmo. Sem página nova.
- LigarUm toque e seu celular liga para ela.
- SalvarUm toque e ela está nos seus contatos, com foto, número, e-mail, WhatsApp e escritório.
O que acontece quando você toca em Salvar
Seu celular abre o cartão de contato completo dela. Toque no check, e ela está salva.
Dias depois, quando você estiver pronto para comprar, não precisa encontrar o site de novo. Ela está no seu celular, junto dos seus amigos.
Testamos cinco versões da barra.
No celular, um visitante que rola até a metade precisa voltar lá para cima para achar um jeito de falar com ela.
Por que funciona
Três ações ficam na borda de baixo, onde o polegar já descansa: Falar com a Neysa, Ligar e Salvar. Salvar coloca ela nos contatos do seu celular com um toque, então ela continua lá depois que você fecha o site.
Detalhes que você não vai notar
- Presa na borda, não flutuante, então nunca cobre a página.
- Linhas finas separam as três, não caixas separadas.
- O texto em espanhol estava sendo cortado, então medimos em quatro tamanhos de celular e ajustamos cada idioma para caber.
Um botão em cada seção.
Onde quer que você pare de ler, o próximo passo está ali. Cada botão diz o que você recebe.
- Primeira telaQuanto posso comprar?
- Saiba o seu númeroQuero meu detalhamento
- A maioria dos corretores vende casasFalar com a Neysa
- O preço não é o custoQuero meu número real
- Busque todos os imóveisMe envie imóveis compatíveis
- Meu ritmo está acelerandoTrabalhe com a Neysa
- Vendidos recentementeDescubra minha faixa de preço
- Já tem uma casa?Quanto vale minha casa
Uma resposta grátis, em troca de um nome.
A calculadora mostra de graça quanto você pode pagar. O detalhamento completo (entrada, dinheiro para fechar, cada custo mensal) pede seu nome, telefone e e-mail. Você recebe algo de valor. A Neysa recebe um comprador realmente interessado.
- O jeito comumNo mercado imobiliário, corretores compram contatos do Zillow e do MLS, e pagam caro por eles.
- O nosso jeitoDê às pessoas uma ferramenta útil no próprio site dela. Elas digitam seus dados por vontade própria, porque querem a resposta.
- Por que é melhorO contato é dela, não custa nada por pessoa, e o comprador já sabe o próprio orçamento.
Um pop-up simpático, mais tarde.
Depois que alguém leu a maior parte da página, um recado curto da Neysa oferece enviar imóveis que cabem no orçamento. Ele espera, aparece raramente, e nunca para quem já escreveu para ela.
A mesma ideia funciona para qualquer negócio.
Pense numa pequena ferramenta grátis que seus clientes querem. Deixe que usem, e envie o resultado completo para o e-mail ou celular deles, em PDF ou por mensagem.
- Um corretor de financiamento"Quanto vai ser minha parcela?" com o plano completo enviado em PDF.
- Uma empreiteira"Quanto vai custar mais ou menos minha cozinha?" com o orçamento enviado por mensagem.
- Um restaurante"Planeje uma festa para 20" com o cardápio e o preço enviados por e-mail.
Mostre prova, não rótulos.
Qualquer um pode se chamar de especialista. Números reais e casas reais que ela vendeu são coisas que o comprador pode conferir.
Closed sales on the MLS, as reported by Homes.com.
Por quêNúmeros grandes e sólidos, com a fonte de cada um. Prova que você lê em um segundo, e confere.
Por quêUma casa real que ela vendeu, com o preço. Prova vale mais que uma foto bonita.
Por que funciona
Casas que ela realmente vendeu, com os preços, são prova. Poderíamos ter feito imagens mais bonitas com IA. Não fizemos: uma foto inventada de uma casa real engana, ainda mais vinda de uma corretora licenciada. Pedimos permissão aos corretores dos anúncios e usamos as fotos reais.
Detalhes que você não vai notar
- As fotos passam sozinhas, e param enquanto você toca num cartão.
- O total de $1,807,000 é a soma dos três preços, não digitado à mão.
- Cada número da página cita a fonte, e negócios privados ficam de fora.
Faça várias versões. Fique com uma.
Para cada parte importante, criamos algumas versões lado a lado, escolhemos a melhor e jogamos o resto fora.
A calculadora.
Três caixas vazias parecem lição de casa. Ninguém quer digitar a própria renda num formulário em branco.
Por que funciona
Ela abre com um exemplo realista, então você vê um preço real antes de tocar em qualquer coisa. Arrastar parece brincadeira. Um número é grátis. O detalhamento completo pede nome e telefone, e esse é o contato.
Detalhes que você não vai notar
- Ela soma o seguro hipotecário quando a entrada é menor que 20%, que a maioria de quem compra a primeira casa paga.
- O seguro residencial cresce com o preço em vez de ficar fixo.
- Toque em qualquer número para digitar um valor exato.
- Dez testes automáticos conferem a matemática.
Fale a língua deles.
Em Miami, muitos compradores preferem ler em espanhol. Então o site inteiro está em inglês e espanhol, não só um ou dois botões.
- Escrito, não traduzido por máquinaCada linha nova foi escrita nos dois idiomas ao mesmo tempo.
- Cabe nos doisAs palavras em espanhol são mais longas. "Guardar" estava sendo cortado, então a barra de cada idioma tem o tamanho certo para caber.
- Fácil de trocarEN e ES ficam no topo de todas as páginas.
Faça o Google entender.
Um site pode ser lindo e ainda assim difícil de o Google ler. O Google lê o título da página, a descrição e o título principal, então eles precisam dizer quem ela é e o que ela faz.
Antes
wahala realty
Wahala Realty | Neysa Morales Gonzalez PA — Miami & All of Florida Real Estate
Wahala Realty — Neysa Morales Gonzalez PA. Real estate agent, broker & investor based in Miami, serving all of Florida. Venta, compra y renta de propiedades.
Título principalWAHALA
Depois
wahalarealty.com
Neysa Morales | Miami Real Estate Broker & Investor | Wahala Realty Group
Neysa Morales Gonzalez is a licensed Miami broker who invests her own money in real estate. Buying or selling anywhere in Miami-Dade, from Coral Gables to Miami Beach…
Título principalNeysa Morales, Licensed broker & investor in Miami
- O nome dela primeiroAs pessoas buscam um corretor pelo nome. Agora o nome dela abre o título da página e o título principal.
- O que ela faz, e onde"Corretora de imóveis em Miami" é o que os compradores digitam no Google.
- Dois idiomas, bem separadosA descrição antiga misturava inglês e espanhol numa linha só. Agora cada idioma tem sua própria página, e o Google sabe qual é qual.
Nada está ali por acaso.
Cada parte da página tem que responder a uma pergunta: por que isso está aqui? Se não há uma boa resposta, sai.
O que cortamos
- Rótulos pequenos acima dos títulos que ninguém lê
- Palavras decorativas flutuando no fundo
- Um rótulo "Avaliações" acima de "O que dizem os clientes"
- Uma contagem de "6 avaliações" que a fazia parecer pequena
- Imagens do Street View das casas vendidas
- Setas finas difíceis de ver
O que ficou
- O rosto delaPara você saber com quem vai trabalhar.
- Uma frasePara você saber por que ela.
- Ferramentas que respondem perguntas reaisPara você ter um motivo para deixar seu nome.
- ProvaVendas reais, fotos reais, avaliações reais.
- Um jeito de falar com ela, em todo lugarPara você nunca precisar procurar.
- Por que importaCoisas colocadas sem motivo fazem um site parecer barato, ou feito por IA sem ninguém conferir.
- Como fica a sensaçãoQuando cada parte tem uma função, o site inteiro parece intencional. Os visitantes sentem isso, mesmo sem saber dizer por quê.
- O testeAponte para qualquer coisa na página. Sabemos dizer por que ela está ali.
O site novo, de cima a baixo.
Tudo o que está acima, funcionando junto. No computador e no celular.
O site novo inteiro, de cima a baixo, no computador e no celular.
O que mudou para a Neysa.
O site antigo era um folheto. O novo trabalha para ela, todos os dias.