Se lee en 7 minutos

Para este case study voy a investigar sobre algún sector empresarial  de España con amplio margen de mejora en cuanto a presencia online y rediseñar su Home. He encontrado en empresas dedicadas a la eliminación de humedades el ejemplo que andaba buscando. Me he centrado en una de ellas, Murprotec.

Para afrontar el rediseño de la Home he seguido una serie de metodologías y procesos que resumo a continuación.

Research: he realizado diversas búsquedas para analizar la manera en que se usa la marca en distintos contextos digitales y físicos. He descubierto que no hay una uniformidad clara de criterios a la hora de aplicarla. Por este motivo lo primero que he hecho ha sido idear una unificación de criterios aplicables a la nueva interfaz de la Home. También he investigado el look & feel de la competencia y los elementos de interfaz comunes, para determinar aquellos que son necesarios y los que pudieran ser secundarios o prescindibles.

Benchmarking: lo siguiente ha sido analizar webs de la competencia para revisar su storytelling, buscar lugares comunes y valores diferenciadores. El propósito final es extraer las mejores ideas y alinearse mentalmente con el tipo de negocio de la marca que nos ocupa. Éstas son las webs de la competencia que he valorado en el benchmarking: 

https://acuasec.com/

https://humexpert.es/

https://www.hogarseco.com/

http://humeingenieria.es/

https://www.hidrotec.com/

http://www.stop-humedades.com/

https://hydrotec.es/

https://www.eliminarhumedades.com/

https://www.technosec.es/

Pasemos a analizar la Home de Murprotec en busca de elementos mejorables a nivel de interfaz y de branding.

Desktop

Problemas:

  • El logotipo y menú principal estarían mejor al principio por usabilidad.
  • El texto “Diagnosis / Tratamiento / Solución” que forma parte del logo crea un problema de falso affordance. Las barras inclinadas (“ / ”) dan impresión de migas de pan o ‘breadcrumbs’ de navegación (ruta de la página).
  • Los iconos de idiomas no guardan la misma separación entre ellos. Inglés y Español parecen estar agrupados frente a Portugués y Alemán. Portugués y Alemán abren nuevas pestañas, pero inglés y español cargan en la misma ventana.
  • El texto “¡Acabe para siempre con la humedad!” del slogan nos enlaza a la Home desde la Home.
  • El menú principal no indica visualmente qué secciones tienen subsecciones. Ocurre en ‘Murprotec’, ‘Humedades’ y  ‘Consecuencias’.
  • El sello azul a la derecha “Premios 2017” es muy invasivo y tapa / dificulta la lectura de los contenidos. En desktop no hay una manera clara de cerrarlo hasta que no se reduce el ancho del navegador hasta 1140px.
  • La imagen interactiva de la casa bajo la cabecera no predice claramente qué áreas de la misma son interactivas. Esto podría desconcertar a la audiencia y/o pasar inadvertido.
  • Los botones (CTA) de la Home no tienen estado ’hover’ o es casi imperceptible.
  • El tamaño de texto en los boxes azules de los Premios es muy pequeño y está embebido en la imagen (se ve borroso). Además el icono del dedo en el CTA “Más información” no debería ser necesario en un botón.
  • El módulo “Los clientes de Murprotec opinan” tiene texto justificado, pero otros bloques de texto de la home no lo tienen.
  • Inconsistencia general de aspecto en los botones (CTA).
  • Algunos bloques de información llevan título y otros no. Además, el tipo de letra no es consistente.
  • En el bloque dedicado a últimos artículos del Blog, los estilos son diferentes al resto de la Home.
  • En el footer hay enlaces a 9 mapas web numerados del 1 al 9. Desconozco su utilidad y posiblemente un usuario nuevo también.

Mobile

Problemas:

  • Los premios y banners acaparan la pantalla hasta tal punto que no dejan ver el logotipo ni pulsar en el menú de hamburguesa.
  • El gráfico circular del premio 2017 se hace especialmente molesto en mobile, tapando gran parte de la pantalla.
  • Al convertirse la imagen interactiva de desktop en slider a tamaño mobile, el texto se alinea un poco hacia la derecha.
  • En la zona de “Premios” tenemos un evidente problema con la legibilidad de textos y botones embebidos en las imágenes.
  • Los testimonios se apilan verticalmente uno bajo el otro. Generan demasiado scroll vertical.
  • En mobile se hace mas evidente la falta de unidad en el diseño de los botones CTA.

Rediseño

Rediseño desktop

Rediseño mobile

Puntos que se han mejorado en el rediseño:

Unificación en la imagen de marca: se han reducido los colores corporativos a aquellos contenidos en el logotipo más un color de resalte (verde-azulado) para enfatizar ciertos elementos. Este color de resalte se usa por ejemplo en los nuevos iconos generados para el módulo o sección “Más de 60 años de experiencia”.
Esta simplificación de colores otorga a la interfaz un aspecto más elegante, profesional, cohesivo y predecible. Esto mejora la usabilidad y la curva de aprendizaje al utilizar la web.

Modularización de bloques de contenido: se han añadido y revisado los títulos de todos los distintos bloques de contenido de la Home. De esta manera conseguimos una interfaz más clara, mejor estructurada y ayudamos a que en mobile todo fluya de manera más armoniosa. También se ha cuidado mucho el espaciado entre dichos bloques y sus adyacentes, e incluso en el contenido interno de cada uno de los módulos.

 Tipografía y elementos de interfaz unificados: Se ha utilizado la tipografía “Titillium Web” en vez de la “Open Sans” para dotar de mayor diferenciación y carácter al branding de Murprotec. Los elementos comunes de interfaz, por ejemplo los botones o las “cards”, se han unificado al máximo para ayudar a entender y preveer su utilidad e interacción.

Limpieza y eliminación de elementos prescindibles: como ya se mencionaba en la introducción (Research), algunos elementos no son completamente necesarios por no aportar un claro valor real, por ser repetitivos e inducir a confusión o directamente por entorpecer el uso de la web. Es el caso de la ventana flotante con el círculo del premio “ATUSALVD 2017” que empeoraba la usabilidad de la web, de manera especialmente dramática en mobile. Otros elementos gráficos, como la imagen que acompañaba a los valores diferenciadores (“El número 1 en España y Europa”, “Experiencia e investigación” y “Soluciones definitivas y garantizadas”) o la de “Zona Profesional”, se han suprimido por ser demasiado genéricos y no aportar una clara diferenciación de marca. Además, el módulo “La garantía de Murprotec” también se ha suprimido por considerarse redundante.

En general, se ha buscado un diseño más memorable, moderno, usable, responsivo, corporativo y estructurado. Pensado como una base para crecer, evolucionar y ser aplicado a este y otros productos digitales relacionados con Murprotec.

 

Y este ha sido el case study, espero que te haya gustado y sobre todo que te haya resultado útil para desarrollar tus propios case studies. 

 

Suscríbete a tonalidad.es