Zara Home

6 min readFeb 22, 2022

Rediseño “Menú Hamburguesa”

INTRODUCCIÓN

- Menú Hamburguesa -

Zara Home nació en 2003 y, cuatro años más tarde, fue la primera marca del grupo Inditex en comercializar sus artículos a través de internet. Desde entonces, la firma ha trabajado por mantenerse al día en los entornos digitales, actualizando sus funcionalidades y asegurando una experiencia de compra satisfactoria.

Los esfuerzos de Inditex, y concretamente de Zara Home por ofrecer un UX de calidad y vanguardia se reflejan en las valoraciones que hacen los usuarios de sus apps para Android e IOS, con 4.5 y 4.7 puntos de media respectivamente.

En definitiva, Zara Home es una marca con voluntad para situarse en la punta de lanza de las tendencias de UX y UI. Su presencia online continúa ganando importancia, y ya cuenta con una afluencia en sus plataformas virtuales que constituye una fuente invaluable de datos que permitirá testear de forma rápida y eficaz cualquier nueva funcionalidad, sin ningún riesgo.

Aprovechando todos estos recursos, he decidido enfrentarme a uno de los elementos más presentes y más controvertidos del diseño de interfaces móviles: el menú hamburguesa (esas tres rayitas que usamos como cajón desastre).

¿Por qué abandonar el Menú Hamburguesa?

Estamos de acuerdo: este tipo de menú ahorra espacio, su iconografía es reconocida por gran cantidad de usuarios, y su uso generalizado lo está convirtiendo en un estándar. Además, es una solución mágica para todos nuestros problemas de Arquitectura de la Información. Entonces, ¿por qué cambiar?

La realidad es que este tipo de menú aún no es intuitivo para todo el mundo, no es eficiente ya que añade clicks antes de llegar al destino, y lo que es más importante: reduce significativamente la discoverability (capacidad de descubrimiento).

Un estudio realizado por el Nielsen Norman Group estableció que, al usar un menú hamburguesa, la discoverability se reduce casi a la mitad, además aumenta el tiempo necesario para llevar a cabo una tarea sencilla y la dificultad para realizarla aumenta.

¿Cómo es esta funcionalidad en ZARA HOME?

Analizo la funcionalidad del Menú Hamburguesa en ZARA HOME. Sigue un estilo similar al resto de apps del grupo Inditex, y del sector hogar y moda en general.

¿Por qué es interesante para Zara Home — o cualquier ecommerce — explorar otras opciones?

Entendemos que esta discoverability de la que hablamos incidiría directamente en la manera en que el usuario se relaciona con la plataforma, y en la libertad — y tentación — que tiene para curiosear.

Emulando la experiencia de una tienda física, quizá sea el momento de sacar del cajón todas las opciones disponibles y ponerlas en el escaparate a la vista del cliente.

¿Cuál es la propuesta para Zara Home?

A través de las siguientes fases de research, diseño y testing buscaré:

Hacer del menú hamburguesa una función menor, para acciones puntuales.
Mejorar la discoverability de las distintas categorías de productos.
Aumentar las ventas favoreciendo la curiosidad y el descubrimiento.

RESEARCH

Análisis Competencia

Analizo cómo es esta funcionalidad en webs y apps de referencia en el sector del hogar y decoración.

Empiezo con aquellas empresas que hacen esta funcionalidad de manera similar a ZARA HOME.

Y acabo el análisis con aquellas empresas que han buscado una manera diferente de definir esta funcionalidad, tomando cómo referencia los ejemplos que mostramos a continuación.

Ejemplos Similares

Analizo apps y webs referentes del sector hogar, que cuentan con un buen diseño UI y UX, y me di cuenta de que todas siguen el mismo estilo a la hora de definir y diseñar la funcionalidad del Menú Hamburguesa.

Vi necesario seguir analizando hasta encontrar una propuesta diferente.

Ejemplos Diferentes

Busco apps que prescinden del Menú Hamburguesa, de esta manera ví las otras opciones que hay y cómo resuelven los problemas que el Menú Hamburguesa da y he mencionado anteriormente.

IKEA

No tiene Menú Hamburguesa.

Es el ejemplo que más me ha gustado, a parte de la lista de categorías, empieza con fotos y filtros con botones mucho más visuales.
Por si el usuario echa de menos la lista de filtros, también está esa opción.
Sistema de personalización.
Varios tamaños en las fotografías creando una composición muy vistosa.

Entrevistas

En la fase de investigación, realicé entrevistas a los usuarios para comprender mejor su relación con el servicio actual.

Preguntas realizadas:

¿Inviertes más tiempo del que te gustaría en encontrar lo que quieres en la app de ZARA HOME?
¿Estás cómodo con el método de búsqueda?
¿Te parece una aplicación intuitiva y sencilla?
¿Te parece que hay demasiadas categorías y filtros hasta llegar a lo que buscas?
¿Qué es lo que más te gusta de la app de ZARA HOME? ¿Y lo que menos?
¿Qué otra app de hogar utilizas a parte de ZARA HOME?
¿Qué mejorarías de la app de ZARA HOME?

Conclusiones:

Los usuarios no tienen un problema urgente con al app de Zara Home al que hubiese que dar prioridad. Por lo que podemos innovar con la funcionalidad del Menú Hamburguesa.
A los usuarios les parece “un lío” la cantidad de menús y submenús con palabras y listas que se generan para poder encontrar lo que buscan.
Les gustaría un método de búsqueda más sencillo y conciso.

ARQUITECTURA DE LA INFORMACIÓN

Inventario de Contenidos

Identifico todo aquello que quiero incluir en la propuesta: contenido y funcionalidades.

Para decidir qué incluir me baso en la investigación y el conocimiento que obtuve de los usuarios. También tuve en cuenta no hacer cambios bruscos sobre productos o funcionalidades de la actual app de Zara Home.

Reestructuré sus funcionalidades con la ayuda de un inventario de contenidos, comparando como están actualmente con mi propuesta.

Card Sorting

La pregunta era: ¿Cómo preferirán los usuarios navegar para encontrar los productos que buscan?

Para ello lancé un Card Sorting online donde pedía a los usuarios que ordenasen y agrupasen las funcionalidades de Zara Home según lo que para ellos tuviese sentido. Sorprendió ver cómo a veces su esquema mental era diferente a la idea preconcebida. Y cómo los usuarios coincidieron en la estructura de algunas de las funcionalidades:

Mapa

Tras tener más claro como coincidían los usuarios en la estructura de las funcionalidades, decidí hacer un mapa para establecer dicha estructura antes de empezar con la fase del diseño.

PROPUESTA DE DISEÑO

Wireframes

Comencé el proceso de diseño con unos Wireframes de Media Fidelidad, basándome en lo hablado con los usuarios y toda la arquitectura de la información, para posteriormente hacer el diseño final.