Como fizemos o site da
Anisleidy Hernandez.
Cada mockup, cada escolha, e por quê.
loansbyani.comUm site de financiamento imobiliário feito em torno de uma pessoa.
Anisleidy Hernandez é agente de crédito imobiliário licenciada em Miami-Dade e nas Keys, em inglês e espanhol. Fizemos o site dela para que as pessoas a conheçam primeiro, vejam os próprios números e falem com ela com um toque. Esta é a história do design: os mockups que colocamos lado a lado, os que escolhemos e as pequenas mudanças que vieram depois.
- Por que importaUm financiamento imobiliário é uma decisão grande. As pessoas querem saber com quem estão falando antes de compartilhar um único número.
- O trabalhoColocar o rosto dela em primeiro lugar, responder à pergunta do dinheiro em segundos e deixar ligação, mensagem ou WhatsApp a um toque.
- Como trabalhamosCada grande escolha começou com dois a quatro mockups reais. O site passou por 36 versões salvas, cada uma conferida no celular e no computador.
O site inteiro, de cima a baixo.
Antes dos detalhes, aqui está cada seção em ordem, no celular e no computador, da primeira tela à última palavra.
Feito para quem toca num anúncio.
A maioria dos visitantes chega por um anúncio do Google, no celular, com poucos segundos para decidir. Por isso cada tela tem alto contraste e é fácil de ler, com uma única coisa clara a fazer. É simples de propósito, mas nunca sem graça: a primeira tela em movimento e a foto da varanda dão vida própria à página.
Do que precisa quem vem de um anúncio.
- 1Palavras pretas no branco, letras grandes e linhas curtas. Nada para apertar os olhos, nem sob o sol.
- 2Uma ação em cada tela, sempre com as mesmas palavras: Get my rate.
- 3Prova de que ela é uma pessoa real no primeiro segundo: o rosto, o nome e o número da licença.
Um céu feito de palavras.
Na última tela antes do rodapé, recortamos o céu da foto da varanda dela. Os prédios e as palmeiras ficam sobre um branco liso, e a frase final fica bem onde o céu estava. É a imagem da página em que as pessoas param.
12Por que funciona.
- 1O branco atrás das palavras deixa a leitura tão fácil quanto no resto da página, enquanto a cidade continua emoldurando o texto.
- 2Mostra ela na cidade dela uma última vez, bem onde as pessoas decidem pedir uma taxa.
- 3A foto se dissolve direto no rodapé, então a página termina sem uma borda dura.
Onde começou.
O primeiro rascunho foi o nosso modelo de página de financiamento: um título, um formulário curto e números de exemplo. Funcionava, mas podia ser de qualquer pessoa. Cada rodada depois disso deixou o site mais dela.
Uma primeira tela que faz a primeira pergunta.
A primeira versão para computador tinha um título, uma linha pequena, dois botões e uma caixa de perguntas, tudo em volta da foto dela. Coisa demais dos dois lados. Testamos três layouts mais calmos.
Por que C funciona melhor numa página de financiamento.
- 1Tocar em Buy a home é um primeiro passo mais fácil do que Get my rate. As pessoas escolhem a própria situação em vez de se inscrever num formulário.
- 2O toque abre o formulário já na pergunta dois, então elas começam com uma resposta dada.
- 3As três opções também mostram, num relance, com quais financiamentos ela trabalha. Get my rate continua na barra do topo para quem já está pronto.
Depois, equilibrar os dois lados.
Com o C no lugar, a frase dela e a pergunta estavam certas, mas não pareciam iguais. Mais três mockups.
123
Por que D funciona melhor.
- 1Os dois lados têm a mesma forma: um título de duas linhas e uma linha embaixo. O olho lê os dois como um par.
- 2As três respostas cabem numa fileira curta, então nada fica pendurado embaixo e nada é cortado.
- 3As bases se alinham na mesma linha, então a tela parece assentada. O E perdeu uma resposta para parecer equilibrado, e o F cobriu a foto com caixas.
A primeira tela do celular, rodada por rodada.
No celular, a primeira tela tem uma função: mostrar ela, mostrar onde ela trabalha e sair do caminho. A primeira versão mostrava ela pequena e cortada embaixo, com um bloco de texto abaixo. Fizemos três mockups. Um deles, ela saindo de um cartão com foto, foi descartado cedo porque o recorte dela batia nas palavras. Aqui estão os outros dois.
Por que A venceu.
- 1É a primeira tela mais ousada, e ela fica quase duas vezes maior, então a própria foto já diz pessoa real, não call center.
- 2Nada fica por cima dela. As palavras ficam na parte calma da foto, sobre um degradê suave.
Depois, cinco rodadas de ajuste.
123Por que a rodada final funciona.
- 1O nome do lugar fica logo acima da cabeça dela, então a primeira coisa que você lê é o seu próprio bairro.
- 2A frase dela fica embaixo, onde a foto é calma, então ela continua sendo a maior coisa da tela, sem texto por cima.
- 3Um só conjunto de botões, na barra de baixo. As rodadas anteriores tinham os mesmos botões duas vezes.
Cinco lugares, uma linha que não se mexe.
- Brickell, Coral Gables, Miami Beach, Homestead, Key LargoCada lugar tem a própria foto atrás dela, e muda sozinho a cada 3,4 segundos.
- Nada pulaNomes longos como Coral Gables diminuem para caber, então a linha de cima se mexia. Agora ela fica travada no lugar.
- Sem falhasCada foto carrega antes de aparecer, então nenhuma surge pela metade no celular.
Um menu de celular que dá para usar com um polegar.
O primeiro menu era uma lista simples que descia do topo. Fizemos três mockups novos e depois misturamos dois deles.
Por que C, com os blocos do B.
- 1Ele sobe de baixo, onde o polegar já está. O A descia do topo, fora de alcance num celular alto.
- 2Os blocos cinza grandes do B são mais fáceis de acertar do que uma lista de palavras, então os financiamentos foram para blocos.
- 3Cada bloco mostra o que importa naquele financiamento, como 3.5% down, para as pessoas escolherem antes de tocar.
1234O que o menu final resolve.
- 1Sem o rótulo Loans e sem rolagem: tudo cabe numa tela, até num iPhone pequeno.
- 2Texto preto sobre branco sólido, para cada palavra ser fácil de ler sobre a foto atrás.
- 3Quatro seções numa fileira e as redes sociais dela embaixo, tudo acima da barra.
- 4O painel se apoia reto na barra de baixo, então o menu e a barra parecem uma peça só.
Abra, olhe, toque.
- Sobe de trás da barraOs blocos entram um depois do outro, e a página atrás escurece.
- Tudo numa telaCinco páginas de financiamento, quatro seções e as redes sociais dela, até num iPhone pequeno.
- Um toque para qualquer lugarToque num bloco e a página desliza até lá. Toque na página escurecida para fechar.
A barra de baixo, em seis rodadas.
No celular, a barra de baixo é onde as pessoas agem. Ela passou de quatro botões pequenos para três blocos claros que ficam sempre na tela. Três é o número certo: uma ação principal difícil de não ver e duas formas rápidas de falar com ela.
123Números que parecem vivos.
A calculadora de parcela é onde as pessoas param e brincam. A primeira versão funcionava, mas os números só piscavam e os controles deslizantes eram difíceis de pegar.
Cada dígito rola.
- Números que rolamCada dígito desliza até o novo valor como um hodômetro. Só os dígitos que mudam se mexem.
- Um botão que você encontraUm trilho preto grosso e um botão branco grande que cresce um pouco enquanto você segura.
- Do tamanho do polegarA área de toque tem 44px de altura, e os rótulos subiram para 17px.
Como funciona, em ação.
- Três passos que andam sozinhosResponda às perguntas, atenda a ligação dela, feche o negócio. Roda em loop da esquerda para a direita, com um caminho diferente a cada vez.
- Telas de celular reaisUma tela de chamada com botões de atender e desligar desenhados como os de um iPhone.
- Menos é maisUma barra de progresso 1, 2, 3 foi testada e retirada: os passos já mostram onde você está.
Por que se mexe.
- 1Passos parados parecem uma lista, e as pessoas pulam listas. Um fluxo que anda da esquerda para a direita mostra o processo na ordem em que quem pede o financiamento vive.
- 2O passo dois é ela ligando para você, numa tela de chamada de iPhone. Mostra a promessa, você trata com ela do começo ao fim, em vez de só dizer.
- 3Cada loop segue um caminho diferente, então uma segunda olhada ainda mostra algo novo. No celular, ele passa sozinho e pausa enquanto você toca.
Um rodapé que encerra a página.
O rodapé começou com quatro colunas de links pequenos. Virou um painel de vidro com o rosto dela, o número escrito por extenso, um botão Add contact e uma grande despedida.
123
123O que deixa o novo rodapé melhor.
- 1A foto dela fica ao lado do nome e da licença, então a página termina como começou: com ela.
- 2O telefone e o e-mail dela aparecem por extenso em blocos próprios, e o Add contact salva o cartão dela com um toque.
- 3LET'S TALK. ocupa a fileira com o mesmo espaço dos dois lados, uma última palavra clara. No celular, os ícones e os blocos de contato ficam centralizados, cada um na sua caixa.
Os detalhes que você sente.
A maior parte do trabalho é pequena. Ninguém nota cada mudança sozinha, mas juntas elas são o motivo de o site parecer calmo e fácil.
Na seção About.
- 1A fileira de números saiu. Fechamentos recentes, dois idiomas e um número de licença dizem pouco a quem pede um financiamento, e a licença já está na barra do topo e no rodapé.
- 2O texto agora fica centralizado ao lado da foto dela, então as palavras e o rosto se leem juntos.
- 3A etiqueta com o nome dela virou um vidro leve e transparente, então fica sobre a foto sem cobri-la.
Em todo o site.
- 1Botões um pouco mais baixos e um pouco menos arredondados, para parecer o site de uma profissional, não um app.
- 2Setas mais firmes e mais curtas, que continuam nítidas em tamanhos pequenos e combinam com o peso das letras.
- 3No celular, as ações principais foram para a barra de baixo, e as fileiras de botões repetidas ao longo da página foram retiradas.
- 4Os celulares recebem fotos próprias, menores, e as coisas aparecem mais rápido, então nada fica atrasado em relação à rolagem.
Por dentro.
- 1O formulário faz uma pergunta por vez, então nunca parece papelada.
- 2Cada página tem uma versão em espanhol: dez páginas no total.
- 3As mudanças do celular ficam em código só do celular, então mexer no celular nunca alterou o computador.
Cada tela pede o contato.
Um site para anúncios tem uma função: transformar uma visita numa conversa. Cada seção termina com uma forma de falar com ela, e cada forma é pensada em como os clientes dela realmente falam com ela.
WhatsApp, já escrito.
- Como os clientes dela falamMuitos dos clientes dela que falam espanhol usam mais o WhatsApp do que SMS, então ele tem seu próprio bloco verde.
- A primeira mensagem está prontaA conversa abre com Hi, I would like to check my mortgage options, ou a versão em espanhol nas páginas em espanhol. Mais um toque e ela é enviada.
O cartão dela, salvo com um toque.
- Tudo preenchidoFoto, nome, cargo, celular, e-mail, WhatsApp e número da licença dela, prontos para adicionar.
- Ela fica no celular delesQuando estiverem prontos para comprar, ela está nos contatos, não perdida numa aba do navegador.
Um formulário que parece uma conversa.
- Quatro toques, depois um nomeO que você quer fazer, o preço do imóvel, seu crédito e quando. Depois nome, telefone, e-mail e ZIP.
- Sem pressãoUma pergunta por vez, e perguntar não afeta seu crédito.
- Ela liga de volta já preparadaAs respostas são o que um agente de crédito pergunta primeiro, então antes de ligar ela já sabe o objetivo, a faixa de preço, o crédito e o prazo. A primeira ligação pode ser sobre o financiamento certo.
Testado, e deixado de fora.
Metade do bom design é o que você tira. Estes foram feitos, avaliados e removidos.
Azul como cor de destaque.
Ela gosta de azul, então testamos. Pareceu colado por cima, não parte do site. O site ficou em preto, branco e cinza, com cor só nas fotos e nos brilhos.
Um brilho de pôr do sol atrás de LET'S TALK.
Brilhos laranja, rosa e azul para destacar a palavra branca. Deixou o rodapé mais carregado que o resto da página, então voltou para a palavra branca simples.
Profundidade estilo Apple na mesma palavra.
Um sombreado suave dentro de cada letra. Também desfeito: a palavra branca simples ficou mais limpa.
Números na seção About.
Fechamentos recentes, idiomas, número de licença. Números sem significado para quem compra. A história dela se lê melhor sem eles.
Um botão de menu num círculo.
Os primeiros ícones de menu ficavam todos dentro de formas. Um círculo fazia parecer um botão dentro de um botão. Virou três linhas simples.
Uma seção de imóveis à venda.
Um espaço reservado para anúncios de imóveis ao vivo. Foi retirado para manter a página sobre ela e o financiamento.
O que fizemos para a Anisleidy.
Um site que a apresenta primeiro, responde rápido à pergunta do dinheiro e a deixa a um toque.