Case Study: E-commerce Re-design
Rol: UX-UI Product Design
Brief
Carlos es el dueño de una empresa de joyas personalizables, se ha puesto en contacto conmigo y el equipo de marketing, porque su web actual lleva sin cambios desde sus comienzos y necesita un rediseño con necesidades:
- Quiere buscar una solución para mejorar el editor de joyas porque este causa problemas en los usuarios y necesita mejoras, pero sin perder su esencia. Además de otros fallos de usabilidad y mejoras en general.
- Quiere un cambio visual en general, con un look & feel mas limpio.
*Por temas de privacidad con la marca, el nombre de esta se ha sustituido por uno ficticio: “Eclectika Jewels”.
Investigación
El primer paso fue programar una entrevista con el CEO y Att. cliente, para recopilar información para comprender mejor el negocio, conocer incidencias y su lugar en el mercado.
Antes de la entrevista, me quedó algo de tiempo para hacer investigación sobre el mercado de joyas personalizables.
Primero, usé la técnica de matriz CSD que usa espacios compartidos para definir el alcance del desafío considerando:
- Certezas, lo que ya se sabe.
- Suposiciones (hipótesis planteadas)
- Dudas, (lo que aún desconozco pero necesita ser investigado).
Los resultados de la matriz me orientaron para las direcciones a seguir para la investigación secundaria. Los principales objetivos de la investigación secundaria fueron:
- Comprender y conocer internamente a la compañía y obtener datos de usuarios.
- Recopilar datos para preparar el análisis competitivo y verificar o validar mis suposiciones durante la entrevista con los stakeholders.
Entrevistas a Stakeholders
Realizamos junto al equipo de Marketing la entrevista con el CEO y Att. al cliente de la compañía. En la que obtuvimos diferentes puntos a remarcar para mi investigación sobre el producto actual:
- Detrás de cada joya hay una historia.
- Los problemas actuales son fechas de entrega, y enviar a otra dirección.
- Necesita un cambio la página de configuración de producto .
- Venden mucho producto para bodas, quieren focalizar ventas ahí.
- Todo es personalizable, menos los pendientes.
- Quieren enfocarse y desarrollarse en el mundo de las bodas.
- Tienen entregas rápidas con Prime, pero sin personalizar.
- Hacen uso de influencers, y está siendo favorable.
Conocer a los usuarios
La clave hubiese sido hacer entrevistas a usuarios, pero no nos lo facilitaron esa información. Ya que no tuve esta oportunidad me dediqué a investigar a usuarios a través de sus comentarios “Netnografía”.
Tienen una buena media de opiniones 9 sobre 10 de 600 reseñas, lo que me lleva a varias conclusiones:
- El gran problema viene de tiempos entregas y pedidos erróneos. Algo que debería mejorar la empresa.
- Problemas de comunicación con Att. cliente.
- Mala calidad en algunos productos. Un punto a mejorar a nivel interno.
- Bonitos diseños, pero calidad pésima en entrega.
Como no tuve opción a entrevistar a usuarios actuales, obtuve datos a través de analíticas de estos últimos meses, eso me ayudó a conocer más a los usuarios, algunas conexiones y patrones interesantes que fueron apareciendo a través de la investigación (y pensamientos sobre posibles soluciones) fueron:
- Target: Mujeres, edad 23–35.
- Página de configuración de producto, muchos clientes expirados
- Clientes recurrentes que vuelven.
- Mayor venta con diferencia en joyas personalizadas.
- Ventas altas en: Compras en productos para bodas.
- Compras siempre para regalos.
- Venden mucho cuando hay acciones de influencers.
- Muchas personas no compran artículos de inmediato y los dejan en el carrito o quieren una lista de deseos.
BenchMark
Usé el análisis competitivo y comparativo para:
- Comprender qué características del sitio web estaban usando los competidores directos e indirectos actuales.
- Proporcionar inspiración que podría ayudar a informar el diseño más adelante.
Hice una lista de posibles funciones y comparé primero los sitios web de los competidores directos. Mirando tiendas como Singularu, Samsaru, Mi collar con nombre, e indirectos de e-commerce de joyas con mayor calidad en productos Tiffany´s, Bulgari…
Las conclusiones fueron:
- Todas tiene un producto similar
- Con los competidores indirectos de joyas de mayor calidad, se mostraban diferentes características que en el resto fallaban, a resaltar, un configurador eficaz (usable), que ni tenía la competencia directa, ni nosotros. Tenía que crear un gran experiencia enfocada a nuestros usuarios.
- Muchas empresas habían incluido funciones como una lista de deseos, la capacidad de crear una cuenta, barra de búsqueda, reseñas, filtros para buscar, precios claros, página de ayuda/preguntas frecuentes, redes sociales, navegación inferior y función de autocompletar para pagos y registro.
- La competencia directa tenía carencias a la hora de mostrar el producto, demasiada información sin clasificar y confusa a la hora de comprar, con flujos complejos a la hora de configurar.
Pensé en dar una vuelta a estas carencias que identifiqué en la competencia y llevarlas a implementar como mejoras a nuestra web, para así hacer un sitio más fácil de usar y diferenciar de la competencia.
Buyer Persona
Con los datos que obtenidos, la creación del cliente objetivo (Buyer Persona) es importante para visualizar y conocer sus necesidades, objetivos, frustraciones, etc. de cara y enfocar la mejora de nuestro producto centrado en nuestros usuarios, es clave para crear una experiencia plena.
Análisis heurístico
Este análisis es clave para el rediseño de la web, apoyándonos en el research realizado anteriormente, se obtiene una definición de producto final optima. Este análisis ayuda a identificar problemas de usabilidad en el diseño, y aquí es donde mejoraremos estos problemas. Peiné la web, realicé una lista separando las 10 reglas de usabilidad y puntuando cada caso que encontraba en un rango de 0 a 4 para enfocarme en el grado de gravedad con el fallo y la recomendación para mejorar la usabilidad.
Una vez realicé el análisis me centré en los casos graves de la lista y trabajé en ellos.
Ideación: Affinity Map
Una vez tenía los resultados de investigación y el análisis de usabilidad, organicé todas esas ideas en un board (affinity map). Con la matriz de elección obtuve los insights o conclusiones finales de los cuales obtuve muchas funcionalidades para implementar en la nueva web, apoyada en Features (historias de usuario, siempre funcionan para un e-commerce), ya que se centra en el objetivo del usuario, que quiere y ahí es cuando le ofrecemos la funcionalidad.
Arquitectura de la Información
Una vez tenía los resultados y soluciones o funcionalidades finales, me enfoqué en trabajar en la arquitectura de información de nuestra nueva web, para definir cómo se iban a distribuir los elementos en nuestra página.
Cuando ya se decidió la estructura junto al equipo de desarrollo, me dispuse a empezar con los wireframes a mano, mas tarde estos los trasladé figma en baja fidelidad (mobile first + desktop), y comprobar con cliente que esa iba a ser la estructura de toda la web. Se creó con interacciones para que este lo previsializara y asi se hiciera una idea.
Diseño final
Ya con la estructura creada, pantallas finalizadas, era el momento de crear un UI Kit, y dar el aspecto visual final (mockup) a las pantallas o wireframes que había preparado y dado el ok.
El cliente quería cambiar ligeramente los colores y tipografía de marca, este rediseño perseguía una mejora en la usabilidad y refrescar la imagen de la marca con un aspecto mas soft y limpio.
Conclusión
Una vez realizado este rediseño, aconsejamos al cliente a pasar a hacer un test A/B para comprobar si realmente había mejorado la usabilidad de la web y el usuario seguía los pasos adecuados para mejorar la conversión.
También que debería seguir analizarlo con google analytics, incluso incorporar sistema de mapas de calor (que este aún no tenía) y así ver dónde van los clics y si nuestro rediseño mejoró o no la experiencia.
