Difiaba es una marca italiana de productos para el cabello, orientado a estilistas profesionales que buscan productos de calidad para utilizar u ofrecer en su salón.
Descripción del proyecto
Difiaba es una marca de productos para el cabello fundada en 2006, bajo la misión de crear productos de calidad superior, con ingredientes que promuevan un pelo hermoso y saludable.
El cliente buscaba renovar un sitio e-commerce de Shopify que permitiera conocer la amplia gama de productos y acceder a la compra tanto para profesionales como para el consumidor común, haciendo especial foco en la experiencia mobile del usuario.
Nuestros objetivos
Problema
Por un lado, el estilo visual no coincidía con el branding y los valores que quería transmitir la marca y por otro, la experiencia de usuario tenía muchos puntos a mejorar, desde la navegación hasta la arquitectura de la información. Además, la versión mobile no estaba optimizada con patrones de diseño utilizados en pantallas pequeñas.
Comenzando por la homepage, se desaprovechaba el impacto que puede generar la primera página que ve el usuario, con un banner simple casi sin contenido, pocos CTA y sin mostrar ningún producto destacado. En cuanto a la navegación, era difícil encontrar productos determinados porque todos estaban englobados dentro del mismo menú de Shop, y recién dentro de esta página el usuario podía utilizar un buscador y los filtros de líneas o tipos de productos.
Era muy difícil navegar por el sitio e identificar la página en la que el usuario se encontraba; todas las categorías de productos se encontraban escondidas en la página de Shop y no había títulos que diferenciaran las categorías más allá de algunos filtros.
No había consistencia en los componentes, colores y estilos de texto.
La jerarquía en la información de producto no era la mejor para diferenciar la descripción, los tamaños, los precios y la categoría a la que pertenecía.
La homepage no estaba optimizada para una tienda ecommerce: no se mostraban las categorías de productos, el hero banner no transmitía información importante ni un producto destacado, y no estaba claro cuál era el CTA principal.
Versión previa del website, con un menú y homepage poco orientados a los productos en venta.
Proceso de diseño
Tras comprender tanto la búsqueda y los objetivos del cliente como los valores de la marca, realizamos el audit inicial de todo el sitio y un análisis de la competencia para identificar las diferentes áreas de mejora.
Con los primeros hallazgos, pasamos a trabajar en la arquitectura de la información, reorganizando el sitemap y validando las decisiones con un estudio de card sorting. Se definió la nueva estructura del sitio y el menú en dos niveles: por un lado, todas las categorías de productos (con sus respectivas subcategorías), y por el otro, los elementos relacionados a la tienda y el proceso de compra: el registro/login, el carrito y la barra de búsqueda.
Categorización de productos
Para la nueva propuesta de la navegación principal, desde la búsqueda de productos hasta el proceso de compra, organizamos todos los productos por categorías y subcategorías para que el usuario pueda encontrar rápidamente un producto filtrando desde el menú y además no se sienta abrumado por ver demasiadas opciones a la vez en una misma página.
Userflow
Basándonos en el nuevo mapa de sitio, establecimos el MVP para crear los wireframes de las pantallas principales del proceso de compra: Homepage, Categoría de productos, Página de producto, Carrito de compras y Checkout.
Después de ajustar los wireframes, trabajamos en las propuestas de alta fidelidad incorporando imágenes y color, teniendo en cuenta los requerimientos de Difiaba: mantener las mismas tipografías y utilizar el rosa pastel como el nuevo color principal. Lo más importante fue utilizar el enfoque de mobile first para priorizar la experiencia móvil y adaptar determinados patrones y comportamientos para las pantallas más pequeñas.
Una vez que todo fue aprobado por el cliente, compartimos todos los diseños, imágenes y assets al equipo de desarrollo para seguir con la siguiente etapa del proyecto, manteniendo el contacto para asegurar la correcta implementación del diseño.
Solución y resultados
Una vez definidos los estilos visuales y las estructuras de las páginas principales con los wireframes, diseñamos todas las pantallas del MVP establecido previamente, en versión mobile y posteriormente en desktop, haciendo especial énfasis en la localización de los productos y el proceso de compra.
Así, logramos un website con un sistema visual acorde al branding y los valores de la marca, y una experiencia de compra mejorada para el usuario a través de pequeños cambios y mejoras que facilitaran la búsqueda de productos y agilizaran el proceso de compra de principio a fin.
Mejoramos la búsqueda y localización de productos
Agregamos el ícono de búsqueda al header para un rápido acceso.
Reorganizamos los filtros en las páginas de cada categoría para incluir las distintas subcategorías, promociones y descuentos, rangos de precios.
Incluimos breadcrumbs para que el usuario pueda ubicarse dentro de la página y volver rápidamente a una categoría o subcategoría anterior.
Optimizamos la experiencia de compra con cambios simples
Incluimos un pop-up del carrito después de agregar un producto, para que el usuario pueda ver rápidamente el total o ir directamente al checkout.
En el checkout mobile, agregamos una pestaña deslizable fija para que sean visibles el subtotal y los detalles del carrito mientras el usuario scrollea.
Permitimos realizar compras sin la necesidad de registrarse para productos no-profesionales.
Agregamos métodos de pago rápidos como PayPal y Afterpay.
Uno de los aspectos centrales de este proyecto fue el diseño de la organización de los colores de las tinturas para la página general de ‘Shop by Shade’ y la individual de cada producto de tintura.
Previamente, el sistema de organización de los colores era muy complejo, con demasiadas opciones de agrupaciones de colores, lo cual resultaba en una sobrecarga de información y dificultaba la toma de decisiones. Decidimos reducir la cantidad de opciones al mínimo, organizando los colores en grandes grupos generales (naturales, marrones, rubios, etc.) y no tan específicos como el sistema anterior.
Selector de colores de tintura
En la página de producto, queríamos incluir un selector de colores que funcionara como un atajo rápido para ver otras opciones.
En un principio, consistía en un dropdown para seleccionar el grupo color (shade) y otro para el nivel de brillo (level), mostrando los resultados debajo. Sin embargo, esta versión resultaba muy compleja para algo que debería ser un atajo rápido, por lo que se realizó una nueva propuesta con sólo un dropdown con los grupos de colores, mostrando por defecto el grupo del color actual. Así, el usuario podría ver todos los colores del grupo a la vez y elegir más fácilmente, comparando todas las opciones.
