Caso de Estudio — Rediseño Web Certicalia

Venía yo pensando que para mi práctica semanal de Diseño UX quería analizar y rediseñar un producto/web. Valoraba yo webs de mis intereses, moda, cine, viajes, flores…pero de pronto pensé que ya que me encontraba en medio de un proceso de selección con Certicalia, por qué no, ir avanzando trabajo ;). Así que, me puse manos a la obra.

Dividí el trabajo en dos fases: Research y Diseño

#1. Research

¿A qué se dedica Certicalia?

Certicalia es una startup española que nació para dar soporte a una nueva ley española de certificación energética del hogar. Fueron creciendo, siendo ahora una comunidad de más de 7000 técnicos y pioneros en su sector. En los últimos años se está orientando a facilitar cualquier tipo de trámite legal que se nos presenta a lo largo de nuestra vida. Guau, gran tarea!

A través del Desk Research leí todo lo que pude sobre ellos:

**Desarrollamos las nuevas líneas de negocio de Certicalia***Luego, nuestra participación incluyó la realización de cuatro talleres con el personal de Certicalia´s y el monitoreo…*opinno.dev.opinnosites.com

**Certicalia crea una plataforma online para hacer 240 trámites técnicos en un clic***La empresa aragonesa facilita a través de su plataforma online la realización de más de 240 trámites técnicos, además…*www.eleconomista.es

**La aragonesa Certicalia gestiona más de 55.000 certificados energéticos — EXPANSION***22:56 22:37 21:02 Este mes de junio se cumplen 5 años de la entrada en vigor del Real Decreto sobre Certificación de…*www.expansion.com

A continuación:

Lo primero, mirar su web y entender lo mejor posible, su modelo de negocio.

Revisando su página de inicio, me doy cuenta que el modelo de negocio principal parece un comparador de precios de certificación energética.

Hero web Certicalia

Por un lado, el usuario particular lo que hace es rellenar los datos que se piden en el mini formulario (foto arriba) y enseguida pueden ver los técnicos que hay disponibles en su zona. Pudiendo filtrar por precio, valoración y por cercanía.

Por otro lado, Certicalia tiene una comunidad de técnicos certificados que se registran en la web y consiguen trabajo en la zona en la que se mueven. A través de reseñas, precio e imagino que rapidez en la respuesta podrán optar a realizar más certificaciones.

Bueno, hasta aquí bien, aunque me preguntaba dónde se habían metido los más de 230 trámites restantes que facilitan hoy en día. Es verdad, en el menú hay un elemento que dice ´Todos los trámites´, y me pregunto, ¿por qué lo sitúan en un segundo plano?.

A partir de ahí, es un infinito, hay muchos trámites, muchos. Por ejemplo, sabíais que a veces se necesita homologar neumáticos, o faldones de los coches? Yo no, perdonad.

Uno de los 240 trámites que ofrecen

Pues eso, Certicalia para mí es un mundo nuevo.

Y viendo las dimensiones del servicio decido centrarme del rediseño de la Home.

Después del Research y ya comprendiendo mejor el producto paso al análisis:

#1.1. Herramientas para Definición

1. Me creo un protopersona del “usuario particular” para identificar y empatizar con la persona/target de este servicio y poder ofrecerle la mejor experiencia de usuario.

Protopersona

2. Además, analizo la web en base a

• Principios de diseño
• Affordance
• Arquitectura de la información

Home Certicalia

Apuntes sobre la HOME de Certicalia:

Esto es lo que percibo cuando analizo la web (insisto, es una percepción, me faltarían datos para confirmar mis hipótesis).

• En el banner/hero hay una falta de accesibilidad. El texto y la imagen no tienen un buen contraste visual por lo que generan peor legibilidad al usuario.
• Encuentro los elementos del menú poco consistentes, es como que no tienen coherencia entre ellos. Sin embargo, estoy segura, de que hay una razón y/o unas métricas que argumentan esa decisión.
• Además, da la impresión de que solo ofrecen el trámite de Certificado Energético cuando en realidad existen otros 238 procesos.
• El buscador apenas se destaca y tengo el supuesto de que muchos de los usuarios escribirían directamente lo que necesitan.
• En general, hay demasiado texto, la página tiene una estructura limpia pero muy densa y sin elementos visuales. Esto no ayuda nada a la carga cognitiva del usuario.
• Hay secciones que creo que no aportan valor al proceso inicial, tal vez sí más adelante, pero no en la home.

Nueva Imagen en la Sección — Trámites

En el proceso de análisis de la web descubro una sección que bien podría ser un test de nueva Home. (ver página completa:https://www.certicalia.com/tramites)

En esta nueva página se nota un esfuerzo de diseño por tratar de simplificar y darle un aspecto más minimalista y estético a la web. Han introducido el campo del buscador, han quitado el comparador, se han quedado con el CTA de “Pedir presupuesto” y han dado visibilidad al resto de trámites en forma de pequeñas cards. Sin embargo, todavía creo que se puede seguir mejorando si se estructura la información de otra manera y se mejora el estilo visual para que invite a conocer las secciones, trámites, empresa y retenga al usuario con una mejor experiencia.

3. Una vez hecho el análisis hago un Benchmarking para buscar inspiración.

No sólo para la capa visual sino también para ver cómo organizan la información en modelos de negocio similares y cómo estructuran el contenido en productos que ofrecen tantos servicios.

Algunas de las webs analizadas en el Benchmarking

#2. (Re)-Diseño

Tengo ya bastante información sobre el servicio y una idea de lo que me gustaría mejorar, así que, pinto mis wireframes y luego paso al rediseño en alta fidelidad.

Lo que intento es mantener la esencia de Certicalia (teniendo en cuenta las dos páginas analizadas) pero aportando un toque personal que se basa en dar más presencia al color y a la imagen en algunas de las secciones. Así es como me quedó.

Rediseño web -Certicalia-

Comento algunos de los cambios más significativos:

1. Ayudándome de su página “Trámites”, llevé al menú principal (mega menú) las categorías destacadas que ofrecen actualmente. Además, mantuve el ´Resuelve tus dudas´ porque me pareció que es una parte útil para los usuarios. Si tuviese posibilidad, realizaría un test A/B o Card Sorting para definir mejor los elementos del menú.
2. Otro punto relevante, es que incorporé el Buscador en el Banner. Decisión arriesgada, pues estoy quitando el comparador. Como comenté más arriba, creo que los usuarios de este servicio en muchos casos preferirían buscar el trámite que necesitan, por lo tanto haría retener al usuario y no dejarlo ir porque el energético no es el que necesita.
3. Añado cards con los trámites más populares e informo con una burbuja de color el de nueva incorporación
4. Diseño el apartado de “Por qué los clientes confían..” dándole un aspecto más ilustrativo y visual para explicar el funcionamiento del servicio.
5. Me parece importante destacar algunos aspectos de la empresa aprovechando que están muy bien posicionados en su sector.
6. La sección de Dudas la convierto en cards de preguntas desplegables para evitar tanta carga de texto y una mayor libertad al usuario a la hora de elegir lo que quiere leer.
7. Finalmente tanto en la sección de “Registro para profesionales” como en la del “Blog” incorporo imágenes para que la navegación sea más agradable, visual y enganche al usuario a golpe de vista.

#3. Aprendizajes

Lo que he aprendido haciendo este ejercicio es que para hacer un rediseño lo primero que hay que hacer es entender el modelo de negocio que hay detrás de ese producto, comprender la esencia de la marca y cómo la perciben los usuarios.

A veces, el rediseño será más drástico como puede parecer a priori en el mío o más sutil. Sin embargo, lo que de verdad importa es hacer que la experiencia e interacción se vea mejorada y por supuesto que se alinee con los objetivos del negocio. Para ello habría que medir los resultados de mi rediseño y ver realmente si el objetivo se ha conseguido.

Web Actual vs rediseño

¡Espero que hayáis disfrutado de la lectura tanto como yo del ejercicio!