Case Study Maquiabella: UX & UI Redesign of a Fashion Ecommerce

7 min readJun 9, 2021

Para llevar a cabo este proyecto he trabajado en grupo con mis compañeros de Bootcamp en Iron Hack Madrid MyNameIsPablo Gloria Alonso Ignacio Alvarez Sanjuan. Durante dos semanas hemos documentado el proceso de diseño, nuestro pensamiento, los métodos que hemos utilizado y cómo llegamos hasta el prototipo final de la tienda online. Incluso hemos incluido un prototipo interactivo de pantallas en las que se puede hacer clic para tener una idea del uso de un sitio web real al final de este estudio de caso. ¡¡Así que estad atentos!!

Proceso de diseño

El proceso de diseño que seguimos son las cinco etapas del proceso de pensamiento de diseño: empatizar, definir, idear, crear prototipos y probar.

Durante este proceso vamos a trabajar en dos fases

Fase de descubrimiento destinada a comprender y enmarcar un área problemática, recopilar requisitos y analizar el contexto de uso. Entregables: segmentos de usuarios, mapas del sitio, wireframes.

La fase de entrega es el espacio de solución que hace que las ideas sean tangibles, utilizables y hermosas. Entregables: Diseño de interfaz de usuario e interacción, sistema de diseño.

UX

✋🏼 Empatizar 🤚🏼

¿Por qué necesita un rediseño?

Después de hacer un cuidadoso análisis del sitio web de Maquiabella, llegamos a la siguiente conclusión de por qué necesitaba un rediseño:

Diseño desactualizado y confuso en la arquitectura de la web.
Las fotos de las prendas no guardan estética visual de grupo.
No genera confianza cuando la usuaria ve las descripciones de los productos.
Numerosas categorías de productos en las que muchas de ellas no encontramos ninguno porque están vacías.

Durante el proceso de UX hemos utilizado una serie de herramientas (Business Analysis, lean Survey Canvas, User Persona) gracias a las cuales ha llevado a cabo un análisis de la problemática y de la información que rodea al proyecto desde la competencia, usuarios o posibles soluciones que pudiesen aplicarse al problema principal.

Research

¿Qué sabemos de Maquiabella?

Maquiabella es una tienda de moda que se ubica en la región de Murcia (España).
En la actualidad tienen presencia online con una web de comercio electrónico y les funciona muy bien la venta a través de redes sociales como es Instagram.
Algo está sucediendo con las ventas desde su ecommerce que parece que nunca terminan de arrancar y la compra se cae.

Realizamos 48 encuestas y 7 entrevistas guiadas que nos aportaron información muy relevante y descubrimos una serie de patrones de comportamiento acerca de las personas que compran ropa online.

El 62% de los encuestados compra ropa online
El 87,5% de los usuarios encuestados no comprarían si la página no es intuitiva y no la entienden desde un primer momento
El 77,1% de los usuarios creen que el diseño de la web influye en su decisión de compra
La seguridad en una tienda online me la aporta el que tenga diferentes formas de pago, email de seguimiento cuando hago el pedido, fotos con detalles que describen muy bien el producto y el video es un PLUS

User persona

Karen es una persona sociable que trabaja mucho, le gusta salir con sus amig@s y estar siempre guapa y es muy coqueta. Cuando cobra a primeros de mes ya está pensando que modelitos se va a comprar.

El problema que tiene Karen es que no tiene tiempo para irse de comprar por eso le gustaría comprar ropa online pero en la que se sienta segura al hacer el pago y encuentra de forma fácil lo que está buscando y pueda ver los componentes de la prenda y cómo le quedaría puesta para hacerse una idea.

Arquitectura de información y prototipado

Una vez que contamos con toda la información que queremos incluir en la aplicación después de haber priorizado las features es hora de organizar y estructurar el contenido. El orden es muy importante de cara a que el usuario sepa encontrar lo que necesita justo donde espera encontrarlo. Es una de las partes más difíciles a la hora de que un producto cumpla bien su objetivo.

Soluciones

Algunas de las features que se incluirán en el resideño de la web será el rediseño del flujo de compra, reagrupación de las categorías en la página, mejorar el diseño de la coreografía del eCommerce, modificar el sistema de grids a uno más visual, añadir la opción de filtrar los productos y modificar el carrito de compra.

UI

Una vez que contamos con el contenido para el resideño del ecommerce y su estructura, es hora de dar paso a la parte visual. Un buen diseño UI hace que el proyecto pueda empezar a cobrar vida. En el caso de este proyecto era necesario darle una nueva imagen de marca sin perder la esencia de la que ya tenían, una estética nueva pero basándonos en lo anterior, unos atributos con un aire fresco… todo debe de tener sentido para que el proyecto tenga una consistencia, coherencia visual y accesibilidad. Estos tres factores son muy importantes.

El moodboard representa algunos de los rasgos más característicos. Algunos de los atributos que representarán la nueva Maquiabella son: sensual, a la última, moderna y rebelde. Los colores principales que pudieron destacarse nos acompañarían en el rediseño de la web. El blanco como color background, el rojo como color principal para elementos diferenciadores y como secundarios encontramos blancos y grises.

Decidimos mantener algunos aspectos claves que representan la marca como es su logo. Pero si se modificó la tipografía donde destacamos el uso de dos fuentes para títulos y subtítulos utilizamos Lato y en el cuerpo y caption utilizamos Roboto porque son tipografías legibles y que combinan en sintonía.

Maquiabella before UX & UI Redesign

Maquiabella after UX & UI Redesign

Rediseño de la home de la web a una versión más minimalista
Rediseño del flujo de compra
Reagrupación de las categorías
Mejorar el diseño de la coreografía del eCommerce
Modificación del sistema de grids a uno más visual
Hemos añadido la opción de filtrar los productos por talla, color, estilo y precio

Mejora de la ficha de producto en la que podemos encontrar de una forma más fácil la composición de la prenda
Hemos añadido un vídeo en la ficha de producto para que las personas puedan ver cómo les quedaría la prenda
En el carrito de compra hemos incluido la posibilidad de modificar la talla de la prenda cuando ya estás en el carrito. De esta forma consigues que el usuario tenga una buena experiencia de compra ya que no tienes que volver a comenzar el proceso de nuevo.
En la pasarela de pago hemos añadido nuevas formas de pago y una ficha resumen con fotografías e información del pedido.

También hemos incluido la sección de favoritos ya que nos parece un aspecto clave en un ecommerce de retail.

Si lo deseas puedes hacer click aquí para ver el prototipo en figma

Aprendizaje

En este proyecto me pareció muy enriquecedor trabajar junto a mis compañeros. Supimos gestionar nuestras diferencias y puntos de vista para llegar a un acuerdo y sacar el proyecto adelante.

También me ha parecido soprendente llevar a cabo el trabajo de rediseño. Ya que haciendo las labores de investigación nos dimos cuenta de muchos factores que estaban fallando y cómo podíamos solventarlos para mejorar la usabilidad de la tienda online.