Cómo rehicimos
Wahala Realty.
Cada decisión que tomamos, y por qué.
wahalarealty.comAntes y después, pantalla por pantalla.
El sitio anterior se veía caro, pero costaba leerlo, y había que bajar mucho para encontrar a Neysa. Aquí está cada parte, la vieja a la izquierda, la nueva a la derecha.
En un teléfono.
Capturas del sitio anterior, tomadas antes de reemplazarlo, junto al sitio en vivo de hoy.
Elige los colores.
El color es la primera decisión, y tiene tres partes.
Primero, elige la base: blanco o negro.
La base es el color sobre el que va casi toda la página. Todo lo demás va encima.
- Por qué no verde ni doradoUna página entera en verde o dorado cansa rápido, y nada en ella puede destacar.
- La mayoría de los negociosElige blanco o negro. Tus fotos, tus textos y tus botones hablan por ti.
- La excepciónEl arte, la moda y otros trabajos creativos pueden usar un color de verdad como base. El color es parte de lo que vendes.
Pruébalo: elige una base
Neysa Morales
Most agents have never bought a house with their own money.
What can I afford?Después, haz el contraste fuerte.
El contraste es cuánto resalta algo frente a lo que tiene alrededor. Es lo que hace que un visitante entienda una página sin pensar.
Antes
Después
Pruébalo: arrastra para añadir contraste
- El contraste hace que se leaOscuro sobre claro, o claro sobre oscuro. El texto sobre una foto recargada no tiene ninguno de los dos, así que entrecierras los ojos.
- El contraste pone el ordenLo más grande y oscuro se lee primero. En el sitio nuevo es su nombre, luego una frase, luego un botón verde.
- Poco contraste en todoCuando todo es fino, claro y del mismo tamaño, nada va primero. Así que no lees nada.
Por último, usa tres colores. No más.
Una base, un color para el texto y un color para los botones. Cada color o tono extra es una cosa más que tu ojo tiene que ordenar.
Antes: 4 colores, más tonos extra de ellos
Solo el texto crema venía en cinco transparencias: 60, 80, 82, 85 y 88%.
Después: 3 colores
El verde solo va en lo que se puede presionar, así tu ojo lo encuentra sin buscar.
Decide qué va en el sitio.
Antes de diseñar, hacemos una lista de lo que necesita un comprador de casa. Luego cada sección tiene que ganarse su lugar.
Antes
- Busca en el MLS
- Servicios
- Sobre Neysa
- Zonas
- Cómo funciona
- Contacto
Después
- What can I afford?La primera pregunta de todo comprador.
- ¿Cuánto me va a costar de verdad cada mes?Impuestos, seguro y reparaciones, no solo el precio.
- Casas en venta en un mapaCon un botón para que te envíen casas que encajan contigo.
- Casas que vendió, y reseñasPrueba, con fotos reales y nombres reales.
- Hablar, Llamar, GuardarSiempre abajo en la pantalla del teléfono.
- Para quién esEl sitio anterior estaba hecho para vendedores. Lo enfocamos en compradores.
- Por qué compradoresLos agentes suelen pagar a sitios como Zillow por clientes compradores. Este sitio los consigue solo.
- CómoDale al comprador algo útil, como cuánto puede comprar, a cambio de un nombre y un número.
Elige una fuente que no tengas que leer dos veces.
Las letras elegantes se ven bonitas. Pero te hacen ir más lento.
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éSu nombre y una razón para elegirla, en letras sólidas sobre un fondo simple. Lo lees sin esfuerzo.
- Las letras finas se pierdenEl texto anterior era fino, crema claro sobre una foto. El nuevo es sólido y oscuro.
- Las mayúsculas cuestan másLeemos las palabras por su forma. TODO EN MAYÚSCULAS CON MUCHO ESPACIO no tiene forma.
- Una fuente simpleLetras sencillas que no se parecen entre sí. Más fácil para todos, y sobre todo para personas con dislexia.
Haz que los botones digan qué pasa.
Un botón debe responder una pregunta que ya tienes.
Por quéUn botón principal, con las palabras que el comprador ya está pensando. El número va justo al lado para quien prefiere llamar.
- Palabras normales"¿Cuánto puedo comprar?" es lo que el comprador ya está pensando.
- Un botón principalDos botones del mismo tamaño te obligan a elegir. Uno lo hace fácil.
- Texto más grandeEl texto del botón anterior era de 12 píxeles, en mayúsculas. El nuevo es más grande y en letra normal.
Elige un tema y repítelo en todas partes.
Los mejores sitios tienen una idea que repiten en cada sección. En pocos segundos sabes cómo funciona el sitio, y se siente como una sola cosa, no un montón de piezas.
- En WahalaVerde solo en los botones. Una flecha gruesa y redondeada en cada botón que lleva una. En computadora, las secciones se deslizan sobre la anterior al bajar.
- Por qué funcionaLa repetición enseña. Cuando ya presionaste un botón verde, sabes qué hace cada botón verde.
- La reglaElige uno o dos de estos, y úsalos en todas partes. Seis efectos distintos son ruido.
Usa lo que la gente ya conoce.
No hace falta reinventar la rueda. Cuando algo se parece a lo que la gente usa todos los días, lo entiende al instante.
Siempre muestra reseñas. Haz que se vean como Google.
La gente confía más en otros compradores que en cualquier cosa que una agente diga de sí misma. Y todos han leído reseñas en Google, así que las mostramos como lo hace Google.
- Conocido a primera vistaUna letra en un círculo, un nombre, cinco estrellas, el logo de Google. Sabes qué es antes de leerlo.
- Prueba que puedes verificarCada tarjeta abre esa misma reseña en Google.
- Nuestro, no una copiaEstrellas verdes, sus colores. Se siente como Google, pero es parte de su sitio.
El resto de la página funciona igual.
- Lo conocido es rápidoNadie tiene que averiguar cómo funciona nada. Simplemente lo usan.
- Lo conocido no es aburridoLas formas son conocidas. El color, el tamaño, las fotos y el cuidado hacen que destaque.
- Simple, bien hechoFácil de usar por fuera. Mucho trabajo por dentro.
Limpia la primera pantalla.
La foto anterior era un skyline recargado, y el texto iba justo encima. Ahora la ves a ella.
Por quéUna cara genera confianza antes de leer una palabra. Ahora sabes a quién llamas.
0 palabras en la primera pantalla anterior. 0 en la nueva.
- Menos que leerQuitamos las palabras que nadie lee: eslóganes, etiquetas, un párrafo largo.
- Nada detrás de las palabrasEl texto sobre un fondo simple se lee solo. El texto sobre una foto te hace trabajar.
- Una caraVes con quién vas a trabajar antes de leer una palabra. Eso es confianza.
Muestra su cara, más de una vez.
La mayoría de los sitios de bienes raíces muestran el skyline de una ciudad o una fila de casas. Podrías poner el nombre de cualquier agente. Aquí ves a Neysa, una y otra vez, así que al final de la página sientes que ya la conoces.
- La gente contrata personasComprar una casa es algo personal. Quieres saber quién está de tu lado antes de llamar.
- Una imagen en tu cabezaUna cara se recuerda. Un skyline no. Días después, la recuerdas a ella, no al sitio.
- Cada vez que ella pideCuando la página te pide que la contactes, su cara está ahí. Te lo pide una persona, no un formulario.
En un teléfono, su foto y su nombre se leen como uno solo.
La primera versión para teléfono eran dos cajas separadas: una foto corta y su nombre debajo. Evan dijo que era "un poco aburrida". Hicimos tres versiones nuevas en el sitio real.
- Una sola piezaLa foto es más alta y su parte de abajo se funde con la página. Su nombre va sobre ese degradado, así que cara y nombre se leen juntos.
- Por qué no BUna cara a pantalla completa deja de ser un retrato y se vuelve un primer plano, con un tono más oscuro que el resto del sitio.
- Por qué no CMantenía las dos cajas, y sus etiquetas repetían números que ya aparecían justo debajo.
Probamos tres primeras pantallas.
Nuestra primera versión puso una calculadora de tres casillas directo en la portada. Su cara, su promesa y un formulario pedían atención al mismo tiempo.
Por qué funciona
Una cara genera confianza antes de leer una palabra. Así que la primera pantalla solo presenta a Neysa y su promesa. La calculadora pasó a su propia sección, bajo un titular que dice por qué vale la pena usarla.
Detalles que no vas a notar
- La foto empieza debajo del menú, así que su cabeza nunca se corta en ninguna pantalla.
- El fondo es exactamente el gris del fondo de su foto, así que no se ve ningún borde.
- Quitamos un degradado suave arriba para que su pelo se vea nítido.
Diseña primero para el teléfono.
La mayoría de la gente la va a encontrar en un teléfono. Así que cada sección se diseñó para la pantalla de un teléfono, no se achicó desde una computadora.
- Una columnaNada lado a lado que tenga que encogerse. Lees de arriba abajo.
- Del tamaño para tocarLos botones y las opciones tienen el tamaño de un pulgar, no de un mouse.
- La barra nunca se vaHablar, Llamar y Guardar están abajo en cada pantalla de arriba.
Haz que sea fácil volverse cliente.
Un sitio bonito no es la meta. La meta es más clientes para Neysa. Así que cada parte de la página acerca al visitante un paso más a llamarla.
Su contacto siempre está bajo tu pulgar.
Si tienes que buscar cómo contactar a alguien, te rindes. En un teléfono, Habla con Neysa, Llamar y Guardar se quedan abajo en la pantalla todo el tiempo.
Por quéSu número en la primera pantalla, y Hablar, Llamar y Guardar abajo en cada pantalla. Nadie tiene que buscarla.
La página se mueve. La barra no.
Donde sea que te detengas, Habla con Neysa, Llamar y Guardar están a un toque.
- Habla con NeysaAbre un formulario corto, ahí mismo. Sin cambiar de página.
- LlamarUn toque y tu teléfono la llama.
- GuardarUn toque y queda en tus contactos, con su foto, número, email, WhatsApp y oficina.
Qué pasa cuando tocas Guardar
Tu teléfono abre su tarjeta de contacto completa. Tocas el check, y queda guardada.
Días después, cuando estés listo para comprar, no tienes que volver a buscar el sitio. Está en tu teléfono, junto a tus amigos.
Probamos cinco versiones de la barra.
En un teléfono, un visitante que baja hasta la mitad tiene que subir de nuevo hasta arriba para encontrar cómo contactarla.
Por qué funciona
Tres acciones se quedan en el borde de abajo, donde ya descansa el pulgar: Habla con Neysa, Llamar y Guardar. Guardar la pone en los contactos de tu teléfono con un toque, así que sigue ahí después de cerrar el sitio.
Detalles que no vas a notar
- Pegada al borde, no flotante, así nunca tapa la página.
- Líneas finas separan las tres, no cajas separadas.
- La etiqueta en español se cortaba, así que la medimos en cuatro tamaños de teléfono y ajustamos cada idioma para que quepa.
Un botón en cada sección.
Donde sea que dejes de leer, hay un siguiente paso ahí mismo. Cada botón dice qué obtienes.
- Primera pantalla¿Cuánto puedo comprar?
- Conoce tu númeroQuiero mi desglose
- La mayoría de los agentes venden casasHabla con Neysa
- El precio no es el costoQuiero mi número real
- Busca todas las casasEnvíame casas que encajen
- Mi ritmo va en aumentoTrabaja con Neysa
- Vendidas recientementeEncuentra mi rango de precio
- ¿Ya tienes casa?Quiero saber cuánto vale mi casa
Una respuesta gratis, a cambio de un nombre.
La calculadora te dice gratis cuánto puedes comprar. El desglose completo (pago inicial, dinero para el cierre, cada costo mensual) pide tu nombre, teléfono y email. Tú recibes algo de valor real. Neysa recibe un comprador que de verdad está interesado.
- La forma de siempreEn bienes raíces, los agentes compran clientes a Zillow y al MLS, y pagan mucho por ellos.
- Nuestra formaDale a la gente una herramienta útil en su propio sitio. Escriben sus datos con gusto, porque quieren la respuesta.
- Por qué es mejorEl cliente es de ella, no cuesta nada por persona, y el comprador ya conoce su presupuesto.
Un pop-up amable, más tarde.
Cuando alguien ya leyó casi toda la página, una nota corta de Neysa ofrece enviarle casas que encajen con su presupuesto. Espera, aparece pocas veces, y nunca a quien ya le escribió.
La misma idea funciona para cualquier negocio.
Piensa en una pequeña herramienta gratis que tus clientes quieran. Déjalos usarla, y envía el resultado completo a su email o teléfono, como PDF o mensaje de texto.
- Un broker hipotecario"¿Cuánto voy a pagar?" con el plan completo enviado en PDF.
- Un contratista"¿Más o menos cuánto me costará la cocina?" con el presupuesto enviado por mensaje de texto.
- Un restaurante"Planea una fiesta para 20" con el menú y el precio enviados por email.
Muestra pruebas, no etiquetas.
Cualquiera puede llamarse especialista. Los números reales y las casas reales que vendió son cosas que un comprador puede verificar.
Closed sales on the MLS, as reported by Homes.com.
Por quéNúmeros grandes y sólidos, con su fuente. Prueba que lees en un segundo, y que puedes verificar.
Por quéUna casa real que vendió, con su precio. La prueba le gana a una foto bonita.
Por qué funciona
Las casas que de verdad vendió, con sus precios, son prueba. Podríamos haber hecho fotos más bonitas con IA. No lo hicimos: una foto inventada de una casa real engaña, y más viniendo de una broker con licencia. Pedimos permiso a los agentes de cada propiedad y usamos las fotos reales.
Detalles que no vas a notar
- Las fotos cambian solas, y se detienen mientras tocas una tarjeta.
- El total de $1,807,000 se suma a partir de los tres precios, no se escribe a mano.
- Cada dato de la página dice su fuente, y las ventas privadas quedan fuera.
Haz varias versiones. Quédate con una.
Para cada parte importante, hicimos varias versiones lado a lado, elegimos la mejor y tiramos el resto.
La calculadora.
Tres casillas vacías se sienten como tarea. Nadie quiere escribir sus ingresos en un formulario en blanco.
Por qué funciona
Abre con un ejemplo realista, así ves un precio real antes de tocar nada. Arrastrar se siente como jugar. Un número es gratis. El desglose completo pide nombre y teléfono, y ese es el cliente.
Detalles que no vas a notar
- Suma el seguro hipotecario cuando das menos del 20% de pago inicial, que es lo que paga la mayoría de quienes compran por primera vez.
- El seguro de la casa sube con el precio en vez de quedarse fijo.
- Toca cualquier número para escribir una cantidad exacta.
- Diez pruebas automáticas revisan las cuentas.
Habla su idioma.
En Miami, muchos compradores prefieren leer en español. Así que todo el sitio está en inglés y español, no solo un botón o dos.
- Escrito, no traducido por máquinaCada línea nueva se escribió en los dos idiomas al mismo tiempo.
- Cabe en los dosLas palabras en español son más largas. "Guardar" se cortaba, así que la barra de cada idioma tiene el tamaño justo.
- Fácil de cambiarEN y ES están arriba en cada página.
Haz que Google lo entienda.
Un sitio puede verse increíble y aun así ser difícil de leer para Google. Google lee el título de la página, su descripción y su titular principal, así que esos tienen que decir quién es ella y qué hace.
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.
Titular principalWAHALA
Después
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…
Titular principalNeysa Morales, Licensed broker & investor in Miami
- Su nombre primeroLa gente busca a un agente por su nombre. Ahora su nombre va primero en el título y en el titular.
- Qué hace, y dónde"Miami real estate broker" es lo que los compradores escriben en Google.
- Dos idiomas, bien separadosLa descripción anterior mezclaba inglés y español en una línea. Ahora cada idioma tiene su propia página, y Google sabe cuál es cuál.
Nada está ahí por casualidad.
Cada parte de la página tiene que responder una pregunta: ¿por qué está aquí? Si no hay una buena respuesta, se va.
Lo que quitamos
- Etiquetas pequeñas sobre los titulares que nadie lee
- Palabras decorativas flotando en el fondo
- Una etiqueta "Reseñas" sobre "Lo que dicen los clientes"
- Un contador de "6 reseñas" que la hacía ver pequeña
- Imágenes de Street View de las casas vendidas
- Flechas finas que costaba ver
Lo que queda
- Su caraPara que sepas con quién vas a trabajar.
- Una frasePara que sepas por qué ella.
- Herramientas que responden preguntas realesPara que tengas una razón para dejar tu nombre.
- PruebaVentas reales, fotos reales, reseñas reales.
- Una forma de contactarla, en todas partesPara que nunca tengas que buscarla.
- Por qué importaLas cosas puestas sin razón hacen que un sitio se sienta barato, o hecho por IA sin que nadie lo revise.
- Cómo se sienteCuando cada parte tiene un trabajo, todo el sitio se siente intencional. Los visitantes lo sienten, aunque no sepan decir por qué.
- La pruebaSeñala cualquier cosa de la página. Te podemos decir por qué está ahí.
El sitio nuevo, de arriba abajo.
Todo lo anterior, trabajando junto. En computadora y en teléfono.
Todo el sitio nuevo, de arriba abajo, en computadora y en teléfono.
Qué cambió para Neysa.
El sitio anterior era un folleto. El nuevo trabaja para ella, todos los días.