Jesús Marcos

El centro comercial ha sido reformado, y con él su presencia online. Necesitaban mayor claridad en la estructura de la web y facilitar el acceso a la información más relevante.

Investigación

Comenzamos analizando las métricas de Google Analytics para conocer inputs tan importantes como:

• Las páginas más solicitadas.
• El comportamiento del usuario en cada página.
• Las páginas que tienen un porcentaje de abandono más elevado.

Captura de Google Analytics.

Los datos nos indican que la sección Tiendas recibe la mayoría del tráfico y también que debemos mostrar los Horarios del centro comercial en un lugar muy visible de la web, ya que es una información muy solicitada por sus usuarios.

Captura de heatmap de Hotjar sobre la antigua web.

En este heatmap podemos observar que la mayoría de usuarios no llegaban a la mitad de la Home haciendo scroll down. Esto nos deja claro hasta qué zona debemos colocar determinados elementos.

En el siguiente gráfico, podemos ver el journey que siguen los usuarios en el sitio web desde que acceden a la home:

Captura de Google Analytics.

Otra sección que destaca es la de Cine por ser la cuarta más visitada de la web. Los usuarios pasan bastante tiempo en esta página, (posiblemente consultando la cartelera). Consideramos importante que aparezca en las primeras posiciones del menú principal y no en el submenú, como se encontraba anteriormente.

Benchmarking

Hemos analizado a la competencia para detectar posibles elementos que no se hayan considerado, así como semejanzas y distinciones entre ellos. Podemos destacar los siguientes aspectos:

• Todos los competidores muestran la sección de Cine en el menú principal.
• Algunos muestran el buscador abierto para facilitar su uso.
• La mayoría de ellos destaca en el header la Ubicación y Horarios.

Arquitectura de la información

Tras el estudio a los usuarios y a la competencia, propusimos los siguientes niveles:

Captura de la arquitectura de la información.

Bocetos y Wireframes

Trabajamos junto a los stakeholders en una propuesta muy visual, donde las imágenes tuvieran protagonismo. Que respirase frescura e incitase a los usuarios a desplazarse hasta el centro comercial.

Boceto y wireframe para la nueva web.

Los apartados de la web que requerían mayor dedicación fueron Tiendas y Restaurantes debido a que requieren de un sistema de filtraje.
Los ítems se muestran en modo mosaico y también se pueden visualizar en un mapa 3D del centro. Se pueden filtrar por orden alfabético, por nueva apertura, por categoría y además dispone de un buscador. Cada categoría se puede filtrar también por subcategorías. La sección Restaurantes también dispone de filtros avanzados.

En el apartado de Cine las películas se muestran en forma de cards. Estas se pueden visualizar tanto en mosaico como en lista. Y se pueden filtrar por fecha, categoría y versión.

En la versión mobile procuramos resumir la información sin ocultar elementos importantes. El menú hamburguesa contiene las mismas opciones que en desktop, pero también se muestran fuera las tres secciones más relevantes de la web: Tiendas, Restaurantes y Cines.

Otros elementos que requieren visibilidad son Buscador, Horarios y Localización.

Wireframe Home versión mobile.

Visual Design

El estilo debía ser fresco y marítimo para hacer honor al nombre del centro comercial y a su proximidad con el mar. Así que el cambio era drástico.

La antigua versión de la web tenía tonos magenta y negro. Ahora la paleta de azules (que va desde el turquesa al azul marino) transmite paz y armonía, y va más acorde con el concepto de la marca. Los únicos motivos decorativos son líneas diagonales (por aquello de Diagonal Mar) y pequeñas olas dispuestas a modo de patrón modular.

Resultado

Combinar los datos cuantitativos y cualitativos nos permitió reformular la arquitectura de la información y diseñar una nueva navegación, lo cual, aumentó la tasa de conversión más de un 40% durante el primer año.

Aparte de la investigación realizada, es conveniente hacer seguimiento del producto una vez que se ha lanzado. Se trata de un proceso iterativo que siempre podemos seguir mejorando. La optimización puede continuar mediante herramientas de tracking, y otros métodos como las encuestas de satisfacción.