la marca.
Una de las cadenas de moda más grandes, cuenta con 1939 tiendas repartidas por todo el mundo. Las tiendas Zara se encuentran en centros comerciales y en las calles más importantes de venta en todo el mundo. Zara suele seleccionar las áreas mejor ubicadas y más caras del mundo para dar una mejor reputación a su marca. La plataforma en línea de Zara, presente en 49 mercados distintos en todo el mundo, recibe 2,5 millones de usuarios únicos al día, y más de 30 millones al mes. Durante el Black Friday de 2017, Zara alcanzó su récord de ventas en línea con 249.216 pedidos en solo una hora.
período de tiempo.
6 semanas.
mi papel.
Diseño UX + UI, Diseño visual, Flujo de usuario, Investigación, Prototipado y Pruebas
herramientas.
Figma, Illustrator, Formularios
de Google, Optimal Workshop, Maze.
el problema.
Los usuarios, al entrar a la web se encuentran con varias dificultades: búsqueda poco intuitiva, poca legibilidad, demasiada infotmación, confusión a la hora de navegar en las secciones de productos, no se encuentra con facilidad la Ayuda. La plataforma en línea de Zara, presente en 49 mercados distintos en todo el mundo, recibe 2,5 millones de usuarios únicos al día, y más de 30 millones al mes. Durante el Black Friday de 2017, Zara alcanzó su récord de ventas en línea con 249.216 pedidos en solo una hora.
la hipótesis.
El diseño de toda la web no está centrado en el usuario, sino en la estética de la marca. Al priorizar la imágen por sobre la usabilidad, dificulta la experiencia del usuario. Genera un esfuerzo de parte del usuario para poder realizar la compra. La plataforma en línea de Zara, presente en 49 mercados distintos en todo el mundo, recibe 2,5 millones de usuarios únicos al día, y más de 30 millones al mes. Durante el Black Friday de 2017, Zara alcanzó su récord de ventas en línea con 249.216 pedidos en solo una hora.
el objetivo.
Este proyecto busca lograr una mejor experiencia. Darle más importancia a la usabilidad. Que la web sea más intuitiva y que el usuario no sienta frustración a la hora de realizar una compra. La plataforma en línea de Zara, presente en 49 mercados distintos en todo el mundo, recibe 2,5 millones de usuarios únicos al día, y más de 30 millones al mes. Durante el Black Friday de 2017, Zara alcanzó su récord de ventas en línea con 249.216 pedidos en solo una hora.
cómo.
estrategia.
Qué quiere el usuario de la web y qué quiere conseguir la empresa con la creación de esta web.
alcance.
Qué requerimientos se necesitan entregar al usuario para facilitarle la tarea de cumplir sus objetivos.
estructura.
Cómo se van a organizar las funciones y la información en el producto digital.
esqueleto.
Cómo se mostrará la información y en qué posición se mostrará cada componente.
superficie.
Cómo se verá y percibirá finalmente la experiencia de usuario. Definir estilos visuales y crear un sistema de diseño.
estrategia.
heurísticas. leyes de miller / postel van restorff / jacob /efecto de usabilidad y estética.
Principios básicos pero necesarios para generar una usabilidad realmente intuitiva. Es decir, que todo lo que se desee o se necesite mientras se navega, sea captado por el usuario con sencillez. Se valorarán de 0 a 4, siendo 4 la peor evaluada. La plataforma en línea de Zara, presente en 49 mercados distintos en todo el mundo, recibe 2,5 millones de usuarios únicos al día, y más de 30 millones al mes. Durante el Black Friday de 2017, Zara alcanzó su récord de ventas en línea con 249.216 pedidos en solo una hora.
benchmarking.
Metodología que permite conocer la posición de un producto en relación con su competencia en un determinado momento. Importante para conocer fortalezas y debilidades.
Empresa multinacional española dedicada al diseño, la fabricación y la comercialización de prendas de vestir y complementos para mujer, niño y hombre.
Cadena multinacional sueca de tiendas de ropa con establecimientos en Europa, Oriente Próximo, África, Asia y Latinoamérica.
Una de las principales compañías europeas del sector moda en el segmento de las cadenas especializadas. Fundado en Madrid en 1880, está presente en más de 70 países, con más de 1800 puntos de venta.
usabilidad: UI
Tema: Ocupación del espacio en página, distribución de los elementos y tamaño en relación al espacio.
| Ocupación del espacio en página | ZARA | MANGO | HM | CORTEFIEL |
|---|---|---|---|---|
| Limpio: Deja aire entre los elementos para que visualmente no se vea todo muy amontonado | ||||
| Balanceado: La relación entre los distintos elementos es equilibrada, visualmente lo más importante ocupa mayor espacio y se lee bien | Intenta generar un equilibrio. Hay muchos productos, pero la búsqueda no es agobiante. | Intenta generar un equilibrio. Hay muchos productos, pero la búsqueda no es agobiante. | ||
| Lleno: Los elementos no están bien proporcionados en relación al espacio, algunos pueden mostrarse muy grandes ocupando mal el espacio. | Demasiados elementos, por momentos dificulta la búsqueda ver tanta información. | Demasiados elementos, por momentos dificulta la búsqueda ver tanta información. |
usabilidad: vocabulario.
Tema: Comparación del uso de las palabras y la comunicación que tiene cada web analizada.
| Uso de las palabras y la comunicación | ZARA | MANGO | HM | CORTEFIEL |
|---|---|---|---|---|
| Cumple: permite que el usuario pueda cumplir los objetivos. | Usa un vocabulario sencillo y simple. Fácil de entender. | Usa un vocabulario sencillo y simple. Fácil de entender. | Usa un vocabulario sencillo y simple. Fácil de entender. | |
| Errores menores: entorpecen los objetivos. | Usa palabras en inglés y terminología que no es común para la mayoría de usuarios. | |||
| Errores mayores: no pueden cumplir objetivos | ||||
| No cumple |
usabilidad: navegación.
Tema: Comparación de pasos que se hacen para diferentes propósitos dentro de las webs de cada marca.
| Comparación de pasos | ZARA | MANGO | HM | CORTEFIEL |
|---|---|---|---|---|
| Cantidad de pasos para el registro | 3 | 3 | 2 | 3 |
| Cantidad de pasos para comprar | 4 | 5 | 4 | 5 |
| Cantidad de pasos para acceder a favoritos | 2 | 1 | 1 | 1 |
conclusiones berchmarking
Para hacer el rediseño habrá que tener en cuenta la cantidad de pasos que se realizan para concretar una acción. Habrá que hacer accesos más directos. Además, es importante hacer un diseño un poco más balanceado e intentar usar sólo palabras y términos en castellano, fáciles de comprender.
análisis de tendencias.
Comparación de cómo fueron cambiando los hábitos de consumo, la tecnología, el mercado, la cultura y los modelos de negocio en el sector retail. Se presentan las prácticas anteriores, la situación actual y las tendencias emergentes que marcan hacia dónde evoluciona la experiencia de compra.
| Tiendas on-line. | ANTERIOR | ACTUAL | EMERGENTE |
|---|---|---|---|
| PERSONAS | Las personas compraban ropa únicamente en las tiendas físicas. | Se pueden hacer las compras, tanto en las tiendas físicas. como de manera online . | Cada vez va a haber más oferta de tiendas online y de apoco, irán desapareciendo las tiendas físicas. |
| TECNOLOGÍA | Efectivo y tarjeta de crédito, en persona. | Web y aplicaciones móviles. | Realidad virtual para saber cómo van a quedarte las prendas. |
| MERCADO | Mucha cantidad de sucursales en las ciudades más importantes. | Pocas sucursales pero de grandes dimensiones. | Sólo sucursales en lugares y ciudades estratégicas. |
| CULTURA | Se planidica el día para ir de compras. Se compra en las tiendas de la ciudad o del barrio. | Se puede hacer la compra en cualquier momento del día, desde cualquier lugar. | Compras en tiendas de cualquier parte del mundo. |
| NEGOCIO | Se hacen las compras en las tiendas de confianza. | Se pueden hacer compras con entregas rápidas en tiendas dentro del país o de zonas cercanas. | Compras con entregas rápidas en tiendas de cualquier parte del mundo. Incluídas tiendas pequeñas, sin necesidad de ser masivas. |
conclusiones panel de tendencias.
Las tiendas en línea cada vez van a ser más y va a haber menos tiendas físicas. Es súper importante que las webs y apps estén preparadas para compras multitudinarias.
encuesta exploratoria.
Se utiliza para elegir qué problemas se van a resolver, a partir de las conclusiones de la investigación. La investigación generativa o exploratoria conduce a ideas y ayuda a definir el problema de diseño.
Se encuestaron 16 personas de entre 25 y 45 años para saber cuáles son los puntos de dolor de la web y cuáles son las áreas proritarias a rediseñar.
Le resulta fácil navegar por la web.
Prefieren comprar en otras web.
Le resulta fácil realizar la compra.
Le resulta confuso el diseño de la web.
encuesta cualitativa.
Se realizaron entrevistas de aproximadamente 15 minutos a 5 mujeres de entre 25 y 40 años y 1 hombre de 36 años que compran habitualmente en la web de Zara y de otras marcas.
El objetivo de estas entrevistas es poder identificar puntos de dolor, necesidades de los usuarios y así, poder realizar un mejor rediseño.
Prefiere hacer las compras online.
Piensan que es difícil de manejar la web..
Prefieren otras marcas para compras online.
Entra a la página sabiendo lo que quiere comrpar.
Se siente agobiado por la cantidad de información.
No ven apropiados los cuerpos de las modelos de las fotos.
Cree que las fotos de los productos son importantes.
No se siente cómodo con la distribución del menú.
conclusiones encuestas.
El 100% de los entrevistados y encuestados tienen alguna queja sobre la usabilidad de la web. Los problemas planteados parecen ser posibles de corregir en un futuro rediseño.
user persona.
Un perfil ficticio que representa a un usuario típico del producto o servicio. Se construye con datos reales de investigación (hábitos, motivaciones, frustraciones) para guiar el diseño y asegurar que las decisiones estén centradas en las personas.
Sara Martinez Estrada.
Madrid, España.
31 años.
Abogada.
Sara es una mujer soltera e independiente viviendo su sueño de vivir en la capital. Nació en un pueblito cerca de Pamplona, estudió en la Universidad de Madrid y ahí se quedó. Vive sola en un pequeño piso en el centro de Lavapies. De lunes a viernes trabaja hasta las 18hs, suele salir de copas con amigas al salir de trabajar. Todas las mañanas se levanta temprano para tomarse un buen desayuno y hacer su clase de yoga. Los sábados y domingos sale a correr por el parque del Retiro. Los findes por la noche siempre tiene un plan, empezó a usar tinder y está muy entusiasmada. El resto de la semana se duerme mirando alguna serie de Netflix junto a su gata Lucrecia.
Está muy pendiente de su imagen. Le gusta verse bien para ir a trabajar y para tener reuniones con clientes. Ella dice que viven dos Saras en un mismo cuerpo. Tiene un look muy definido para sus días en la oficina y otro más jugado para las salidas y sus citas de Tinder. Le encanta la ropa y la moda pero no le gusta salir de compras, le resulta agobiante y una péredida de tiempo. “No me da la vida para todo”
motivaciones.
- Siempre llamar la atención por su imágen.
- Ser la mejor en su trabajo.
frustraciones.
- Perder tiempo eligiendo ropa.
- No tener el dinero suficiente para comprar todo lo que le gusta.
- No encontrar el look adecuado para sus salidas nocturnas.
metas.
- Ascender en su trabajo.
- Viajar más.
- Tener más tiempo libre.
- Cambiar de piso para tener un vestidor más grande.
“Me gusta verme bien, es importante dar una buena imagen en mi trabajo pero no tengo tiempo para nada”
Irene Ramos Gonzales.
Sevilla, España.
42 años.
Administrativa.
Irene es una madre soltera de dos nenas de 5 y 7 años. Nació y vive en Sevilla. Siempre fue muy sociable, tuvo muchos amigos y le gustaba salir de fiesta. Estudió Relaciones Públicas pero tuvo que dejarlo cuando quedó embarazada de Alba, su primera hija. Se dedicó a la crianza y, según sus palabras “descuidó su cuerpo”. Ahora está en pleno divorcio, con dos nenas, empezando de nuevo. Tiene muchas ganas de trabajar y de conocer gente. Quiere retomar sus amistades y volver al ruedo. Con el trabajo, la escuela y las actividades extra.curriculares, le queda poco tiempo para ella. Le gusta verse bien y que Alba y Pilar se sientan a gusto, pero no puede ir de compras. Prefiere comprar online. Tiene sus marcas predilectas, aquellas en las que puede encontrar tanto prendas para ella como para las chicas. Le encanta la ropa de Zara pero, muchas veces, sólo les compra a las nenas y ella se queda con las ganas. Se siente frustrada al ver a las modelos de las fotos. Ella ya no tiene ese cuerpo y no se siente bien cuando navega por la tienda. Al final, se decanta por tiendas pequeñas que no le gustan tanto, pero se siente más a gusto y segura a la hora de comprar.
motivaciones.
- Estar bien vestida para cualquier ocasión que pueda surgir.
- Ser la mejor para sus hijas.
frustraciones.
- Perder tiempo eligiendo ropa.
- No tener el dinero suficiente para comprar sola todo lo que necesitan las nenas.
- No encontrar las prendas adecuadas para su nueva figura.
metas.
- Darle todos los gustos a las hijas.
- Sentirse mejor con ella misma.
- Tener más tiempo libre.
- Empezar el gimnasio para cambiar su cuerpo.
“Me encanta la moda y verme bien pero desde que soy madre, mi cuerpo no es el mismo. Me cuesta vestirme como me gustaría”
journey maps.
Mapa de trayectoria donde se analizan las distintas fases para identificar los puntos de dolor y mejorar la experiencia de usuario.
lean UX canvas.
Una herramienta que permite ver en un lienzo y de solo un vistazo toda la información relevante sobre un tema. Ayuda a guiar el proceso de desarrollo del servicio. Funciona con una mirada iterativa, circular y global, a través de un desarrollo ágil que pone como meta corregir errores e incorporar mejoras de forma progresiva.
alcance.
arquitectura de la información actual.
Análisis y mapa de la arquitectura actual.
tree testing.
Análisis y testeo con la información actual de la página web.
Tree Testing sobre la arquitectura de la información actual. Para realizarlo se utilizó la aplicación Optimal Workshop. Se les envió a 10 mujeres de entre 20 y 50 años, habituales clientas de Zara.
conclusiones tree testing.
Gracias al análisis del Tree Testing, podemos concluir en que el menú de hamburguesa, no se ve o no tiene prioridad. El 100% de los usuarios eligió usar el menú que aparece en la home, de esta manera se ahorran un paso.
Por otro lado, es muy difícil de encontrar el apartado de Favoritos, también al 100% de los usuarios les costó localizarlo.
arquitectura de la información propuesta.
Análisis y mapa de la arquitectura propuesta..
tree testing.
Análisis y testeo con la información propuesta de la página web.
Tree Testing sobre la arquitectura de la información actual. Para realizarlo se utilizó la aplicación Optimal Workshop. Se les envió a 10 mujeres de entre 20 y 50 años, habituales clientas de Zara.
conclusiones tree testing.
Agregando Favoritos a la página de Inicio, no se ha cometido ni un sólo error. El 100% de los usuarios lo ha encontrado sin dificultades. En cuanto al menú, eliminando la hamburguesa, no se registran cambios en el comportamiento de los usuarios. Lo que nos lleva a pensar que la eliminación de este, es un acierto.
wireflow.
Un wireflow es un diagrama en el que, mediante wireframes, marcamos cómo es el trayecto de un usuario para llevar a cabo una tarea concreta.
taskflow.
Un taskflow es un diagrama en el que marcamos el trayecto que debe realizar un usuario para llevar a cabo una tarea concreta.
Madrid, España.
31 años.
Abogada.
escenario.
Tiene una reunión decisiva en el trabajo. Son clientes muy importantes. Necesita verse bien, resaltar. Quiere un vestido elegante y profesional.
1-Inicia sesión
2-Selecciona "mujer"
3-Elige "vestidos"
4-Encuentra vestido
5-Añade al carrito de compra
6-Finaliza la compra
Sevilla, España.
42 años.
Administrativa.
escenario.
Tiene el cumpleaños de 40 de una de sus amigas del secundario en unos meses y necesita hacer una pre-selección de vestidos para comprar uno más adelante.
1-Registro
2-Selecciona "mujer"
3-Elige "vestidos"
4-Guarda en Favoritos
5-Comparte con amigas
esqueleto. ux/writing
matiz de voz / tono.
Matiz de voz: Conceptos imaginarios y palabras centrales de la identidad de la marca que no pueden faltar.
Tono: Permite definir mensajes más “amigables” o “serios” para acompañar lo que está sucediendo en la pantalla.
guía de estilo.
El estilo es generalización de la manera en que la empresa se comunica con sus usuarios y es coherente con la voz y el tono.
| Estilo | DESCRIPCIÓN | BUENAS PRÁCTICAS | MALAS PRÁCTICAS |
|---|---|---|---|
| TÍTULOS | Se usarán mayúsculas. Palabras simples, en castellano. Fáciles de entender. | MUJER/ HOMBRE/ BELLEZA/ ESTILO DE VIDA | mujer/ hombre/ belleza/ estilo de vida |
| TÍTULOS SECUNDARIOS | Se usarán mayúsculas sólo al inicio y se resaltarán con “negrita”. | Vestido lazo bordado. Cazadora doble faz. | Vestido lazo bordado. Cazadora doble faz Vestido Lazo Bordado. |
| BOTONES | Se usarán mayúsculas, una o dos palabras y, si se pudiese, se reemplazarán las palabras por iconos. | AÑADIR/ CONTINUAR/ ELIMINAR PAGAR | AÑADIR A LA CESTA/ CONTINUAR CON LA COMPRA/ ELIMINAR DE LA CESTA/ REALIZAR PAGO. |
| DESCRIPCIONES | Mayúsculas sólo al inicio de cada oración y además, en algunos casos, se usará la “negrita” para resaltar. | Vestido midi confeccionado en hilatura de algodón 100%. Escote pico y manga corta acabada en vuelta. Detalle de bordados | Vestido midi confeccionado en hilatura de algodón 100%. Escote pico y manga corta acabada en vuelta. Detalle de bordados |
| ERRORES | Los mensajes de error se representarán en minúscula e indicarán cómo resolverlo. | Debe seleccionar una talla para realizar la compra. La contraseña es incorrecta. Mínimo 10 caracteres. | SELECCIONAR TALLA/ CONTRASEÑA INCORRECTA/ ERROR EN EL PAGO. |
| MENSAJES DE ÉXITO | Los mensajes de éxito se representarán en mayúscula y serás simples y directos. | COMPRA REALIZADA CON ÉXITO/ PAGO REALIZADO CON ÉXITO. | ¡LA COMPRA SE HA REALIZADO CORRECTAMENTE!. EL PAGO SE HA REALIZADO CON ÉXITO. Bien hecho! |
| PRECIOS | Los precios se indicarán siempre con comas y la moneda después de la cifra con la abreviación EUR. | 25,49 EUR | WOMAN/ Hombre/ BEAUTY/ JOINLIFE |
conclusiones ux/writing.
Para intentar generar una experiencia más eficaz, se usarán mensajes y opciones de retorno.
Se utilizarán fotografías y vocabulario inclusivo (sin usar e, @ o X).
No habrá palabras ni conceptos en otro idioma, sólo en castellano.
Se reducirá el uso de mayúsculas. Sólo para títulos, botones y llamadas a la acción.
superficie.
sistema de diseño.
La grilla, espaciados, componentes, colores, tipografías y estilos con los que se va a trabajar.
wireframes de alta fidelidad.
Prototipos detallados que muestran la estructura, el diseño visual y la interacción casi final de una interfaz. Incluyen tipografías, colores, imágenes y componentes reales, acercándose mucho al producto definitivo.
Test.
testeo de usabilidad.
Remoto no moderado.
12 usuarios.
Herramienta: Maze.
8 mujeres de entre 25 y 47 años.
3 de ellas estudiantes, 5 profesionales.
4 hombres de entre 30 y 42 años.
todos ellos profesionales.
guión.
¡Hola!
Gracias por participar en este test de usabilidad. Tu colaboración es muy valiosa para nosotros, ya que nos ayudará a mejorar el rediseño de nuestra web existente.
Propósito del test.
El objetivo de este test es comprender mejor cómo los usuarios interactúan con nuestra nueva interfaz y detectar posibles áreas de mejora. Queremos asegurarnos de que la navegación sea intuitiva y que puedas completar las tareas sin dificultades.
Instrucciones Generales
Configuración del entorno.
Asegúrate de estar en un lugar tranquilo y sin interrupciones.
Utiliza un dispositivo con conexión a internet estable. Preferimos que uses una computadora de escritorio o portátil.
Presentación.
Nos gustaría conocerte un poco, que nos cuentes tu edad, tu género (si es que te apetece), tu ocupación y tus hobbies.
Tareas:
A continuación, te presentaremos una serie de tareas que nos gustaría que intentes completar. Lee cada tarea con atención antes de comenzar.
Confidencialidad.
Toda la información que nos proporciones será tratada de manera confidencial y anónima. Los datos recopilados se utilizarán únicamente con fines de mejora del diseño.
Contacto.
Si tienes alguna pregunta o necesitas asistencia durante el test, puedes contactar a nuestro equipo de soporte a través del siguiente correo electrónico: [rofernandezpereyra@gmail.com].
Empezar el test.
Cuando estés listo/a, haz clic en el enlace que se proporciona a continuación para comenzar el test. Asegúrate de seguir las instrucciones y completar todas las tareas propuestas.
[Enlace al Test]
¡Gracias de nuevo por tu participación!
prueba.
- Prueba con un prototipo y luego preguntas tales como:
En una escala del 1 al 10:
¿ Qué tan fácil fue realizar la tarea?
¿La navegación fue como la esperaba?
- Prueba de los 5 segundos con pantallas del prototipo y luego cuestionario:
¿Cómo encontró el uso del lenguaje?
¿Le resultó fácil encontrar íconos y secciones?
¿Cuál fue su impresión del diseño?
¿Qué es lo que más le gustó?
objetivos.
- Reconocer la sección “FAVORITOS” y lograr compartir una lista.
- Encontrar la sección de “SEGUNDA MANO”.
- Comprobar si el menú y la información es visible y legible.
resultados.
Descripción de cada tarea, con resultados, imágenes, porcentajes y resultados.
conclusiones testeo.
A partir de los cambios realizados, se puede observar una mejoría en la navegación de la web. Los textos son legibles y entendibles para todo el público. Las secciones se encuentran fácilmente y los íconos son de gran ayuda. La idea de Compartir la lista de favoritos, tuvo una buena recepción, al igual que el cambio en las fotos de los productos. La estética de la web original se mantiene ya que es la esencia de la marca. Hubo un problema muy claro: la sección de Segunda Mano. En este último caso, se hará una nueva propuesta con cambio de nombre.
antes.
propuesta.
