Mejoras de UX en la versión mobile de la web www.mastermarketingdigital.com

Este proyecto Hands On ha tenido como objetivo la mejora de la web del Máster en Comunicación y Marketing Digital de la UAB para mobile, con el fin principal de incrementar las conversiones.

El proyecto se ha dividido en tres etapas principales:

  • 1. Análisis de la web actual del Máster para detectar los puntos débiles mediante Google Analytics, un análisis heurístico y entrevistas con los clientes.
  • 2. Realización de un prototipo con diferentes propuestas de mejora.
  • 3. Realización de un test de usabilidad del prototipado.

1. Detección de puntos débiles

Google Analytics

Analizando en Analytics los datos de la web en versión mobile durante el último año, se puedo ver que el número de usuarios era mínimo y el único pico que hubo en abril, correspondía al lanzamiento de una campaña con landing pages que estaban optimizadas tanto para web como para mobile.

Además, el porcentaje de rebote resultó ser muy elevado (81,46%), siempre debido a una web que no estaba optimizada para mobile y que no atraía a sus usuarios target como debería.

Mediante Analytics, además de detectar que el 35,1% de sus usuarios se conectaba a través del mobile, se pudieron concretar cuáles eran las páginas más visitadas por los usuarios. De esta forma, fue posible enfocar las mejoras sobre las páginas que más tráfico atraían a la web en versión mobile. Estas páginas fueron, en orden decreciente:

  • – Home Page
  • – Datos Básicos
  • – Programa
  • – Inscripción

Análisis Heurístico

Con tal de detectar los principales problemas de la página en versión mobile, se realizó un análisis heurístico con el que se determinó que los principales problemas eran:

  • – La sobrecarga de información (texto).
  • – La mala jerarquización.
  • – No se resaltaba la identidad de la universidad.
  • – No había botón back-to-top.
  • – El tamaño de la fuente era demasiado pequeño para mobile.
  • – Había problemas con los márgenes.

Para mejorar estos puntos de inflexión, se determinaron las siguientes mejoras:

  • – Añadir información breve de la UAB (rankings…).
  • – Añadir un apartado de “contacto” en el menú principal.
  • – Quitar idioma del menú de navegación y buscar una nueva ubicación.
  • – Seguir guía de estilo UAB.
  • – Usar un logo más grande, que representara las identidades de la UAB y del Máster.
  • – Adaptar el copy a mobile (párrafos más breves).
  • – Añadir un botón back-to-top.
  • – No usar un recaptcha visible.
  • – Hacer que la caja de título fuera fija.
  • – Cambiar el color de los enlaces y hacer que los enlaces visitados fueran de un color diferente.
  • – Quitar breadcrumbs y poner un título de sección.

Entrevistas a dos clientes

Con el fin de obtener más información acerca de la página web en versión mobile, se realizaron una entrevista a dos clientes de la universidad. Con ésta se obtuvieron un seguido de determinaciones que se tuvieron en cuenta para realizar el nuevo prototipo.

Los dos clientes comentaron que el objetivo principal era la conversión -que los usuarios rellenaran el formulario- y aportar la información necesaria y de calidad del máster para conseguirla. Aún así, el principal problema era la falta de tiempo para actualizar el web.

El objetivo principal era destacar el equipo de profesores que combina lo académico con lo profesional, la cantidad de ediciones y detalle del proceso de selección del número de plazas disponibles. El perfil principal de usuario es de 22-30 años, busca una especialización en el ámbito laboral y ve una salida en el ámbito digital. Remarcaron además que hay demasiada poca actualización del contenido, exceso de texto y falta de identidad de la universidad.

2. Puntos de mejora y prototipado

Tomando en consideración las conclusiones extraídas del test heurístico y de las entrevistas con los clientes, se detallaron los puntos de mejora expuestos a continuación. Al final de los distintos apartados se puede ver el prototipado de cada una de las páginas con las mejoras aplicadas:

Generales:

  • – Mejorar de la arquitectura del navegador (buscar nueva ubicación a los idiomas).
  • – Facilitar la navegación en mobile: añadir botones back-to-top, quitar breadcrumbs y hacer fijo el navegador.
  • – Simplificar y mejorar el copy para hacerlo más ameno y legible.
  • – Atorgar mayor visibilidad a la UAB y resaltar la identidad del máster añadiendo sus iniciales en el navegador fijo.

Páginas “Home” y “Datos básicos”:

  • – Añadir elementos visuales para presentar la información de manera más atractiva.
  • – Resumir y reorganizar los datos para facilitar la navegación y presentar la información de forma más clara y sencilla.

Página “Inscripción”:

  • – Introducir pop-ups con información extra. De este modo el usuario puede consultar más detalles sin tener que visitar el web de la Universitat Autònoma de Barcelona.
  • – Redistribuir los CTA -colocar el botón “inscripción” debajo de los requisitos principales-.
  • – Simplificar y mejorar el copy.

Página “Programa”:

  • – Resumir la información.
  • – Separar los itinerarios y módulos por bloques de colores para diferenciarlos.
  • – Redistribuir los CTA para conseguir más conversiones.

Se puede ver e interactuar con el prototipo diseñado a través de Marvel App desde el siguiente enlace.

3. Test de usabilidad

Finalmente, se realizó un test de usabilidad para evaluar la reacción de los usuarios ante las mejoras aplicadas. El test se llevó a cabo a partir de los prototipos interactivos presentados en el apartado anterior y lo realizaron dos usuarios ajenos al proyecto.

Los objetivos principales de este test fueron:

  • – Averiguar si los usuarios podía encontrar de forma intuitiva información general sobre el máster.
  • – Detectar con qué facilidad y cuánto tiempo tardaban los usuarios en solicitar información.
  • – Descubrir si la información de la web en versión mobile era suficiente.

Para ello, se pidió a los usuarios que hicieron el test que realizarán algunas acciones específicas. Éstas fueron, por ejemplo, buscar información básica del máster, solicitar información extra, o buscar si el máster impartía alguna asignatura sobre analítica web.

Los resultados obtenidos a través del test de usabilidad llevaron a las siguientes conclusiones. El menú de navegación y la navegación propia de la web era más clara e intuitiva, por lo que las mejoras hechas fueron efectivas. La reacción ante el nuevo formulario pop-up fue positiva, al igual que las nuevas localizaciones del botón para acceder a éste y al formulario de pié de página.

En cuanto a las reacciones negativas, los usuarios creyeron que aún había aspectos mejorables en la web. La cantidad de texto aún era excesiva, por lo que habría que seguir trabajando en mejorar el copy de la versión mobile. Además, los usuarios encontraron aspectos estilísticos que no fueron de su agrado, por lo que habría que mejorar el diseño visual de la versión mobile de la web.

Puedes visualizar la presentación completa de este proyecto Hands On aquí.

Maria Celma, Elvira Vilardell, Laura Ruiz, Sònia Canals, Valentina Rubino, Ruben Serrano, Ana Varela, Oriol Ruiz, Arianna Loayza y Miriam Castillo.

¡Deja el primer comentario, no seas tímido!

Únete a la discusión

Puedes utilizar los siguientes HTML tags y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>