Cómo hicimos
Anisleidy Hernandez.
Cada mockup, cada elección, y por qué.
loansbyani.comUn sitio hipotecario hecho alrededor de una persona.
Anisleidy Hernandez es oficial de préstamos hipotecarios con licencia en Miami-Dade y los Cayos, en inglés y español. Hicimos su sitio para que la gente la conozca primero, vea sus propios números y la contacte con un toque. Esta es la historia del diseño: los mockups que pusimos lado a lado, los que elegimos y los pequeños cambios que vinieron después.
- Por qué importaUna hipoteca es una decisión grande. La gente quiere saber con quién habla antes de compartir un solo número.
- El trabajoPoner su cara primero, responder la pregunta del dinero en segundos y dejar llamar, escribir o usar WhatsApp a un toque.
- Cómo trabajamosCada decisión grande empezó con dos a cuatro mockups reales. El sitio pasó por 36 versiones guardadas, cada una revisada en un teléfono y en una computadora.
Todo el sitio, de arriba abajo.
Antes de los detalles, aquí está cada sección en orden, en un teléfono y en una computadora, desde su primera pantalla hasta la última palabra.
Hecho para quien toca un anuncio.
La mayoría de las visitas llegan desde un anuncio de Google, en un teléfono, con pocos segundos para decidir. Por eso cada pantalla tiene alto contraste y se lee fácil, con una sola cosa clara para hacer. Es simple a propósito, pero nunca aburrido: la primera pantalla en movimiento y la foto del balcón le dan vida propia a la página.
Lo que necesita quien llega de un anuncio.
- 1Letras negras sobre blanco, texto grande y líneas cortas. Nada que obligue a forzar la vista, ni siquiera al sol.
- 2Una sola acción en cada pantalla, siempre con las mismas palabras: Ver mi tasa.
- 3Prueba de que es una persona real en el primer segundo: su cara, su nombre y su número de licencia.
Un cielo hecho de palabras.
Para la última pantalla antes del pie de página, recortamos el cielo de la foto de su balcón. Los edificios y las palmas quedan sobre blanco limpio, y la frase final se ubica justo donde estaba el cielo. Es la imagen de la página en la que la gente se detiene.
12Por qué funciona.
- 1El blanco detrás de las palabras las hace tan fáciles de leer como el resto de la página, y la ciudad las sigue enmarcando.
- 2La muestra en su ciudad una última vez, justo donde la gente decide pedir una tasa.
- 3La foto se funde directo con el pie de página, así la página termina sin un borde duro.
Dónde empezó.
El primer borrador fue nuestra plantilla de página hipotecaria: un titular, un formulario corto y números de ejemplo. Funcionaba, pero podía ser de cualquiera. Cada ronda después la hizo más suya.
Una primera pantalla que hace la primera pregunta.
La primera versión de computadora tenía un titular, una línea pequeña, dos botones y un cuadro de preguntas, todo alrededor de su foto. Demasiado a ambos lados. Probamos tres diseños más tranquilos.
Por qué C funciona mejor en una página hipotecaria.
- 1Tocar Comprar una casa es un primer paso más fácil que Ver mi tasa. La gente elige su propia situación en vez de inscribirse en un formulario.
- 2El toque abre el formulario ya en la pregunta dos, así empiezan con una respuesta hecha.
- 3Las tres opciones también dicen, de un vistazo, qué préstamos maneja. Ver mi tasa sigue en la barra superior para quien ya está listo.
Después, equilibrar los dos lados.
Con C en su lugar, su frase y la pregunta estaban bien, pero no se sentían parejas. Tres mockups más.
123
Por qué D funciona mejor.
- 1Los dos lados tienen la misma forma: un título de dos líneas y una línea debajo. La vista los lee como un par.
- 2Las tres respuestas caben en una fila corta, así nada queda colgando abajo y nada se pierde.
- 3Las partes de abajo se alinean en una misma línea, así la pantalla se siente asentada. E perdió una respuesta para verse parejo, y F tapó la foto con cajas.
La primera pantalla en el teléfono, ronda por ronda.
En un teléfono, la primera pantalla tiene un trabajo: mostrarla a ella, mostrar dónde trabaja y no estorbar. La primera versión la mostraba pequeña y cortada abajo, con un bloque de texto debajo. Hicimos tres mockups. Uno, con ella saliendo de una tarjeta con foto, se descartó pronto porque su recorte chocaba con las palabras. Aquí están los otros dos.
Por qué ganó A.
- 1Es la primera pantalla más audaz, y ella se ve casi el doble de grande, así que la idea de una persona real, no un call center, se lee en la foto misma.
- 2Nada queda encima de ella. Las palabras van sobre la foto donde está tranquila, sobre un degradado suave.
Después, cinco rondas de ajustes.
123Por qué funciona la ronda final.
- 1El nombre del lugar queda justo encima de su cabeza, así lo primero que lees es tu propio vecindario.
- 2Su frase queda abajo, donde la foto está tranquila, así ella sigue siendo lo más grande de la pantalla, sin texto encima.
- 3Un solo grupo de botones, en la barra de abajo. Las rondas anteriores tenían los mismos botones dos veces.
Cinco lugares, una frase que no se mueve.
- Brickell, Coral Gables, Miami Beach, Homestead, Key LargoCada lugar tiene su propia foto detrás de ella, y cambia sola cada 3.4 segundos.
- Nada saltaLos nombres largos como Coral Gables se achican para caber, y eso movía la línea de arriba. Ahora está fija en su lugar.
- Sin fallosCada foto carga antes de mostrarse, así ninguna aparece a medio dibujar en un teléfono.
Un menú de teléfono que se usa con un pulgar.
El primer menú era una lista simple que bajaba desde arriba. Hicimos tres mockups nuevos y luego mezclamos dos.
Por qué C, con los mosaicos de B.
- 1Sube desde abajo, donde ya está el pulgar. A bajaba desde arriba, fuera de alcance en un teléfono alto.
- 2Los mosaicos grises grandes de B son más fáciles de tocar que una lista de palabras, así que los préstamos pasaron a mosaicos.
- 3Cada mosaico muestra lo importante de ese préstamo, como 3.5% de pago inicial, para que la gente elija antes de tocar.
1234Lo que arregla el menú final.
- 1Sin la etiqueta Préstamos y sin desplazarse: todo cabe en una pantalla, incluso en un iPhone pequeño.
- 2Texto negro sobre blanco sólido, así cada palabra se lee fácil sobre la foto de atrás.
- 3Cuatro secciones en una fila y sus redes sociales debajo, todo encima de la barra.
- 4La hoja se apoya plana sobre la barra de abajo, así el menú y la barra se ven como una sola pieza.
Abre, mira, toca.
- Sube desde detrás de la barraLos mosaicos entran uno tras otro, y la página de atrás se oscurece.
- Todo en una pantallaCinco páginas de préstamos, cuatro secciones y sus redes sociales, incluso en un iPhone pequeño.
- Un toque a cualquier parteToca un mosaico y la página se desliza hasta ahí. Toca la página oscurecida para cerrar.
La barra de abajo, en seis rondas.
En un teléfono, la barra de abajo es donde la gente actúa. Pasó de cuatro botones pequeños a tres mosaicos claros que siempre están en pantalla. Tres es el número justo: una acción principal difícil de pasar por alto, y dos formas rápidas de contactarla.
123Números que se sienten vivos.
La calculadora de pagos es donde la gente se detiene a jugar. La primera versión funcionaba, pero los números solo parpadeaban y las barras eran difíciles de agarrar.
Cada dígito rueda.
- Números que ruedanCada dígito se desliza a su nuevo valor como un odómetro. Solo se mueven los dígitos que cambian.
- Una perilla fácil de encontrarUna barra negra gruesa y una perilla blanca grande que crece un poco mientras la sostienes.
- Del tamaño del pulgarEl área táctil mide 44px de alto, y las etiquetas subieron a 17px.
Cómo funciona, en acción.
- Tres pasos que avanzan solosResponder las preguntas, recibir su llamada, cerrar. Se repite de izquierda a derecha, con un camino distinto cada vez.
- Pantallas de teléfono realesUna pantalla de llamada con botones de contestar y colgar dibujados como los de un iPhone.
- Menos es másSe probó una barra de progreso 1, 2, 3 y se quitó: los pasos ya muestran dónde estás.
Por qué se mueve.
- 1Los pasos quietos se leen como una lista, y la gente se salta las listas. Un flujo que avanza de izquierda a derecha muestra el proceso en el orden en que lo vive quien pide un préstamo.
- 2El paso dos es ella llamándote, en una pantalla de llamada de iPhone. Muestra la promesa, tratas con ella de principio a fin, en vez de decirla.
- 3Toma un camino distinto en cada vuelta, así una segunda mirada todavía muestra algo nuevo. En un teléfono rota solo y se detiene mientras lo tocas.
Un pie de página que cierra la página.
El pie de página empezó como cuatro columnas de enlaces pequeños. Se convirtió en un solo panel de vidrio con su cara, su número escrito completo, un botón Agregar contacto y una despedida grande.
123
123Lo que mejora el nuevo pie de página.
- 1Su foto está junto a su nombre y su licencia, así la página termina como empezó: con ella.
- 2Su número de teléfono y su correo están escritos completos en sus propios mosaicos, y Agregar contacto guarda su tarjeta con un toque.
- 3HABLEMOS. llena la fila con el mismo espacio a ambos lados, una última palabra clara. En un teléfono los íconos y los mosaicos de contacto están centrados, cada uno en su propia caja.
Los detalles que se sienten.
La mayor parte del trabajo es pequeño. Nadie nota cada cambio por separado, pero juntos son la razón por la que el sitio se siente tranquilo y fácil.
En su sección Sobre mí.
- 1Se quitó la fila de cifras. Cierres recientes, dos idiomas y un número de licencia significan poco para quien pide un préstamo, y la licencia ya está en la barra superior y en el pie de página.
- 2El texto ahora queda centrado junto a su foto, así las palabras y la cara se leen como una sola cosa.
- 3La etiqueta con su nombre se volvió de vidrio claro y transparente, así queda sobre la foto sin taparla.
En todo el sitio.
- 1Botones un poco más bajos y un poco menos redondos, para que parezca el sitio de una profesional, no una app.
- 2Flechas más firmes y cortas que se ven claras en tamaños pequeños y van con el grosor del texto.
- 3En un teléfono, las acciones principales pasaron a la barra de abajo, y se quitaron las filas de botones repetidas a lo largo de la página.
- 4Los teléfonos reciben sus propias fotos más pequeñas, y las cosas aparecen más rápido, así nada se queda atrás al desplazarse.
Por dentro.
- 1El formulario hace una pregunta a la vez, así nunca parece papeleo.
- 2Cada página tiene su versión en español: diez páginas en total.
- 3Los cambios para teléfono viven en código solo para teléfono, así arreglar el teléfono nunca movió la versión de computadora.
Cada pantalla pide el contacto.
Un sitio para anuncios tiene un trabajo: convertir una visita en una conversación. Cada sección termina con una forma de contactarla, y cada forma está pensada en cómo le hablan de verdad sus clientes.
WhatsApp, ya escrito.
- Cómo le hablan sus clientesMuchos de sus clientes hispanohablantes usan WhatsApp más que los mensajes de texto, por eso tiene su propio mosaico verde.
- El primer mensaje ya está listoEl chat se abre con Hi, I would like to check my mortgage options, o con Hola, quiero ver mis opciones de hipoteca en las páginas en español. Un toque más lo envía.
Su tarjeta, guardada con un toque.
- Todo ya completoSu foto, nombre, cargo, celular, correo, WhatsApp y número de licencia, listos para agregar.
- Ella se queda en su teléfonoCuando estén listos para comprar, ella está en sus contactos, no perdida en una pestaña del navegador.
Un formulario que se siente como un chat.
- Cuatro toques, luego un nombreQué quieres hacer, el precio de la casa, tu crédito y para cuándo. Luego nombre, teléfono, correo y código postal.
- Sin presiónUna pregunta a la vez, y preguntar no afecta tu crédito.
- Ella devuelve la llamada preparadaLas respuestas son lo primero que pregunta un oficial de préstamos, así que antes de llamar ya conoce la meta, el rango de precio, el crédito y los plazos. La primera llamada puede ser sobre el préstamo correcto.
Lo probamos y lo dejamos fuera.
La mitad del buen diseño es lo que se quita. Estas cosas se hicieron, se revisaron y se quitaron.
Azul como color de acento.
A ella le gusta el azul, así que probamos agregarlo. Se veía agregado encima, no parte del diseño. El sitio se quedó en negro, blanco y gris, con color solo en las fotos y los brillos.
Un brillo de atardecer detrás de HABLEMOS.
Brillos naranja, rosa y azul para que la palabra blanca resaltara. Hacía el pie de página más recargado que el resto de la página, así que volvió a la palabra blanca simple.
Profundidad estilo Apple en la misma palabra.
Un sombreado suave dentro de cada letra. También se quitó: la palabra blanca simple se veía más limpia.
Cifras en la sección Sobre mí.
Cierres recientes, idiomas, número de licencia. Números sin significado para quien compra. Su historia se lee mejor sin ellos.
Un botón de menú en un círculo.
Los primeros íconos del menú estaban todos dentro de contenedores. Un círculo lo hacía parecer un botón dentro de un botón. Se convirtió en tres líneas simples.
Una sección de casas en venta.
Un espacio reservado para propiedades en venta. Se quitó para que la página siguiera centrada en ella y en el préstamo.
Lo que hicimos para Anisleidy.
Un sitio que la presenta primero, responde rápido la pregunta del dinero y la mantiene a un toque.