Caso de Estudio UI/UX: Paso paso para rediseño de una web de apoyo crediticio.

Hector Giron
Sep 2, 2018 · 9 min read
Imagen que me hallé por ahi y no encontré a quien darle su credito. =/

Introducción:

Hace unas semanas, tuve la oportunidad de colaborar con la pagina tu cantón, es una startup dedicada a apoyar a las personas que desean adquirir un inmueble a través de un crédito pero no tienen idea de cómo o dónde comenzar, entonces se les lleva de la mano, desde la selección de la casa, visita, apoyo para papeleo de su crédito… hasta que les entregan las llaves de su nuevo hogar, todo esto sin costo alguno.

Todo esto suena genial, por lo que me gustó la causa de la misma, ya que he visto entre personas muy cercanas que los han estafado con sus patrimonios y esta es una compañía seria, reconocida por el INFONAVIT (Institución de Crédito del Gobierno Mexicano) y que ayuda a la población, por lo que me uní a su causa.

Reconociendo el terreno.

imagen de gfycat.com

Como Dice Sun Tzu en “El arte de la guerra”: “Tienes que conocer el terreno donde pisas, para poder determinar tu estrategia”, debido a que fue mi proyecto final para el Bootcamp de UX/UI en Ironhack, sólo contaba con 10 dias para poder presentar un buen trabajo.

Ya que es un producto que actualmente funciona, me entrevisté por primera vez con los fundadores de “tu cantón” para que me explicaran su situación,

En resumen:

Por medio de la página web captan al 8% de su tráfico por la pantalla principal y el 1% restante por medio de la página donde habían escogido la propiedad. Ellos no querian que le moviera nadita a la página inicial, ya que “está perfecta” como estaba (SIC), les pregunté que si tenian alguna guía de imagen de marca y me dijeron que no, solo el logo y unos flyers digitales que usaron para promociones de hace unos meses. La cosa pintaba a que iba a tener mucha chamba para los próximos dias; también me explicaron el modo de como tratan a los clientes y era de manera muy de los 90’s: una vez que el cliente se registraba, ese registro se lo mandan a un asesor y este le marca por telefono…

Ya recuperado de eso, me gustó me dieran total margen de manejo para poder generar una propuesta decente y que ellos pudieran captar mas clientes, con un 3–5 % que aumentaran les daría un enorme margen de ganacias. Les pedí me mandaran los flyers y el logo para la parte de UI (User Interfacing).

¡Manos a la obra!

imagen de gfycat.com

La investigación.

Debido al corto tiempo que tenia, de la gama de herramientas con que contamos en UX, me decanté por la humilde prueba de usabilidad, como dice Steve Krug en su libro Don’t make me think: “No hay sustituto para una prueba de usabilidad”, ahi ves en toda su gloria o no a tu producto actuar, y, te guste o no, verás que lo que creías de tu producto es cierto o falso. Me llevé cerca de 30 minutos por usuario, personas entre 22–42 años que deseaban adquirir una casa.

La ventaja de la prueba de usabilidad es que en ella ves a la gente usando las cosas, en vez de solo escuchar a tu equipo de trabajo hablando del producto, por lo que puedes detectar y arreglar las cosas que confunden o frustran a tu usuario.

Resultados de las pruebad de suabilidad

De ahí obtuve los siguientes resultados:

Main Page:

Describir que hace “mi cantón”, como y por qué. De manera clara en la parte superior

Homologar Fuentes, tamaños y colores.

Procurar consistencia en todas las paginas.

  • Estetificar el area de “testimonials”
  • Mejorar el área de búsqueda
  • Indicar que hace cada cosa.
  • Introducir en el sistema de búsqueda un filtro mas detallado y reducido.
  • Filtro por rango de costos
  • Presentación de resultados de acuerdo a nuestro posible crédito
  • Posible implementación de Registro de usuarios con el CRM que manejan mediante un conector para agilizar el proceso.

Area de Registro:

-Posibilidad de hacer un usuario si el cliente desea seguir con el proceso.

-grabar busquedas.

-posibilidad de escoger tu asesor

  • Acomodar los elementos de la página de tal manera que pueda ser mas intuitivo
  • Al presentar resultados el área de detalles mas claro y que las fotos puedan ampliarse a pantalla completa,
  • Que presenten los amenities del inmueble
  • Un query desde google mostrando los servicios mas comunes cerca
  • (escuela, transporte poublico, hospitales, parques, supermecardos, lavanderias, mercados, tianguis, centro comercial.
  • Crear un landing page que tenga “punch”, conciso y preciso.

Esto nos dió un backlog muy extenso, por lo que me enfoqué en puntos clave:

Describir que hace “mi cantón”, como y por qué. De manera clara en la parte superior

Homologar Fuentes, tamaños y colores.

Indicar que hace cada cosa.

Crear un landing page que tenga “punch”, conciso y preciso.

Al presentar resultados el área de detalles mas claro y que las fotos puedan ampliarse a pantalla completa

Posibilidad de escoger tu asesor

Mejorar el área de búsqueda

Que presenten los “amenities” del inmueble

Realmente lo que generaba los registros es un error en el diseño y no que se hayan registrado por que les gustó la página.

Lean UX Canvas

El Lean UX canvas es el chico consentido de UX Research, te ayuda a sistematizar tu investigación, es una herramienta sencilla y muy visual de lo que tienes que hacer y relacionar tus hallazgos.

Un Lean UX canvas en plena batalla, por eso lo arrugado.

Conforme iba haciendo pruebas de usabilidad, revisando el sitio, comentarios de usuarios, brainstorming y demás prácticas de UX, fuí llenando el Lean UX Canvas.

Con esta herramienta me apoyé para poder llegar a las conclusiones del Backlog.

User Personas

De la prueba de usabilidad y una pequeña encuesta que realicé me di cuenta que tenemos un abanico de usuarios, es imposible hacer una patina web para todos los gustos, por eso me enfoqué en dos perfiles generales de la población que usarían a tu cantón.

User persona 1
User persona 2

Estos dos perfiles cubren una buena parte de la población, y sobre todo me dan una idea de quiénes son, sus sentimientos sus pains & gains, que les gusta que no, para asi poder generar una propuesta de valor a mis clientes. Esa es la utilidad de los “user persona”.

User Journey

En paralelo a nuestros user persona, es necesario saber cuales son los pasos que lleva a cabo nuestro usuario para llegar a su objetivo. El User Journey nos muestra de manera gráfica los pains & gains que se encuentra, con el se puede ver en realidad y de manera gráfica las áreas de oportunidad que tenemos para hacerle más grata la experiencia de uso a nuestros usuarios.

User Journey

En este User Journey estan mas claros los pains & gains del proceso de adquirir una casa, el problema que “tu cantón” tratará de atacar y dar una excelente experiencia de usuario.

Los pains criticos que se ven son: el precio de los inmuebles, el conseguir credito y el papeleo, que es donde “tu canton” puede apoyar.

Este proceso me ayudó a definir la experiencia de usuario, a diseñar para darle el mayor apoyo y confort a los usuarios de tu cantón.

Algo muy importante es que, en vez de enfocarme en cuál es el problema o lo qué los usuarios quieren, opté por ver qué es lo que necesitan.

Entender por que la gente quisiera entrar a tu cantón, aumenta las posibilidades de hacer un verdadero producto de valor.

UI

Debido a la limitante de tiempo me atreví a armar directamente mis wireframes de alta calidad en vez de probarlos en baja resolución, para esto me apoyé en el software Mockup Plus, y para lo mas “fresa” en Sketch.

Pero vámonos por partes, tuve que hacer los siguientes ejercicios de UI:

MoodBoard

Habia que crear el Moodboard de la compañia, ya que solo me dieron unos flyers y su logo, me puse a ver su visión, misión y lo que desean reflejar a sus usuarios, de lo cual generé el siguiente moodboard:

Moodboard Final de tu cantón, lindo ¿Verdad?

En base a un moodboard que me reflejara frescura, confianza, y las fuentes que vamos a usar, procedí a generar la caja de estilos.

Caja de Estilos

En la caja de estilos defino colores, fuentes, y basandome en el sabio consejo de mi profesor de UI, me basé en Atomic Design (Como referencia a Uxers y UI designers, es un must a seguir) para evitarme dolores en futuras ediciones.

Como iba a ser una página web con miras a una app en un futuro, la caja de estilos quedó como se muestra abajo, me apoye en la plantilla de Oliver Jahn, la cual me redujo mucho el trabajo para los pocos dias que tenia para terminar el proyecto:

Caja de estilos 1
caja de estilos 2

Seleccioné dos fuentes en google fonts (Usenlo, son open source) para todo el sitio, Quicksand y Hind, ya que el sitio original tiene cerca de 12 fuentes, lo cual no es bueno gráficamente hablando.

Landing Page

Sabemos que UX/UI abarca muchas disciplinas, y una de ellas es el marketing, por lo tanto, la mejor manera de hacer que tu usuario realice una acción es a través de una landing page, la cual responde a las cuatro preguntas que debe responder claramente un sitio:

Top de Landing page

Asi mismo, esta página debe explicar y darle “hook up” al usuario:

Habiendo desarrollado la landing page, seguí con las nuevas pantallas y flujo de “tu cantón”:

La nueva Home Page, con sus elementos mas estilizados y descripciones más claras.
Nueva página de busqueda, más clara y accesible a los usuarios.

Esta selección de elementos, tamaños y colores fueron mas atractivos, asi como el contenido, lo cual fue demostrado con una segunda prueba de usabilidad, en donde las opiniones mejoraron por parte de los usuarios, habia cosas todavia que mejorar, pues en una primer iteración no se resuelven todos los objetivos, pues se requieren mas pruebas para pulir mas aún el Minimum Value Product (MVP).

Esta investigación se presentó al equipo de “Tu Cantón” y recibí buenos comentarios sobre el mismo, ya sólo queda que lo implementen.

Plan de trabajo

Este es el plan de trabajo que definí al prinicipio para trabajar con “Mi cantón”

Plan de trabajo Proyecto “Mi Cantón”

Actividades

UX

Desarrollo UX CANVAS

-Definición del problema de negocio

Analisis Contextual

-definición de outcomes

benchmark del negocio(Vs otros competidores)

-definición de usuarios y clientes

user persona

perfilado de muestreo

estrategia de user research

entrevista exploratoria

-beneficios al usuario

user journey

user persona

-hipotesis

Supuestos (creemos que) HMW

entrevista viabillidad (conceptual)

Affinity Diagram

-que hipotesis es critica, cual sirve cual descarto

- actividades minimas que hacer

-ideas y soluciones

sitemap Analisis

wireframes low res

Revision con el user de wireframes

Seccion UI

Mockups Finales

Moodboard

Caja de estilos

Atomic Design

User Flow

Prototipo Sketch

Moraleja:

El UX es crítico para que tengas un diseño centrado en el usuario. No por que una página haya dado resultados, no significa que sea la mejor manera:

Diseño no centrado en el usuario. (Simone Giertz, musa del Maker Internacional)

El UX es crítico para que tengas un diseño centrado en el usuario

No, en 12 dias auque para este ejercicio fue el tiempo limite, no es lo ideal para hacer una investigación de UX/UI (Ni fisica ni emocionalmente para ti, ni para tu cliente), lo explica mejor la siguiente imagen:

Imagen de Kiwi Burd

La prueba de usabilidad es la prueba máxima de un producto, pues aquí recibimos información de nuestro usuario objetivo. La verdad no peca pero incomoda.

Usa modelos ya estandarizados y que sirven, fijate en lo que los expertos hacen y aprendeles.

Para UX y UI, no basta con ser buen diseñador gráfico, eso lo aprendes o lo encargas, tienes que meterle coco para investigar y ver realmente las necesidades de tu usuario.

Manden sus comentarios a: hectorgironc@gmail.com

Hector Giron

Written by

Just a former automation engineer, wants to change his career towards UX/UI designing- love jazz, classical music, photo, maker hobbyst & Coffe lover.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade