e-Commerce Practitioner Website
Mejorando la experiencia de usuario de Ratoncitos.
Intro
El pequeño comercio día a día observa como la demanda de sus servicios se reduce debido a la situación impulsada por el Covid-19 en todo el mundo. Esta situación afecta al mismo tiempo a las economías locales y a muchas familias que viven de este tipo de negocios.
Partiendo de esta base, como UX Designers, nos surge la oportunidad de apoyar a las empresas locales de distintos sectores.
La presencia online es una buena manera de atacar el problema. Observamos que cada vez más profesionales están al borde de su transición digital, por lo que vamos a ayudar a las tiendas y a los profesionales locales a mejorar su presencia online para que puedan ser más competitivos en el mercado real.
Empezamos! 🚀
Briefing
Proyecto en parejas, desarrollado durante 8 días junto a Víctor Martín. Durante la primera parte del proyecto, nos centramos en la fase UX y la segunda la dedicamos a la fase UI.
El objetivo del proyecto ha sido buscar un e-Commerce cuya interfaz fuese mejorable, estudiar cómo rediseñarla y a su vez aportar una propuesta de valor que diferencie a nuestro cliente de la competencia.
Trabajamos en remoto siguiendo la metodología Agile y Design Thinking. Entregable: MVP diseñado para desktop con Sketch.
El Cliente
Nuestro e-Commerce elegido es Ratoncitos, una tienda de productos de bebé especializada en sillas de auto y cochecitos.
Sus usuarios valoran sobre todo la atención personalizada que ofrecen en su tienda física. Hablando con el dueño, nos cuenta que atendiendo a sus clientes se gana su confianza y al final acababan saliendo de la tienda con más productos de los que pensaban que necesitaban.
Quieren hacer más atractiva su tienda online ya que, debido a la situación actual, muchos de sus clientes no pueden desplazarse a la tienda física y así potenciar esta parte del negocio pudiendo obtener mayores beneficios.
Os dejo el enlace a su tienda online actual: Ratoncitos
Planning
Fase UX
Fase UI
Empatizamos
Para poder empatizar con el usuario que acude a Ratoncitos a comprar productos para su bebé, trabajamos en primer lugar los cuatro primeros puntos del Lean UX Canvas. De esta manera, nos planteamos diferentes hipótesis que se verificaron con las encuestas y entrevistas que hicimos. Tras las hipótesis trabajamos las siguientes herramientas:
- Feature Analysis: realizamos un análisis de la web frente a su competencia.
- Business Analysis (DAFO)
Realizamos un análisis DAFO para hacer una introspección del negocio. Sus debilidades principales son un proceso de compra online anticuado que no está adaptado a la nueva situación y una pobre usabilidad web; sus fortalezas son la especialización en sistemas de retención y el asesoramiento que ofrecen en su tienda física.
- Encuestas y entrevistas
Para poder comprender las necesidades reales de los usuarios comprando productos de bebé online, sus metas, frustraciones, gustos y hábitos; realizamos un total de 10 entrevistas a personas cercanas y 90 encuestas obtenidas en el foro de mamás primerizas elembarazo.net.
- Entrevista dueño Ratoncitos
También tuvimos la suerte de poder entrevistar al dueño de la tienda; nos cambió el punto de vista que teníamos hasta el momento del mercado y del negocio.
Una vez finalizadas las herramientas de investigación sacamos una gran cantidad de información, desde el punto de vista de los usuarios y del dueño de la tienda.
De los datos obtenidos, extraemos la siguiente conclusión: los usuarios prefieren comprar online que en tienda física, pero echan en falta el asesoramiento que les ofrece una tienda física cuando compran por internet. Los usuarios valoran mucho la cercanía a la hora de seleccionar un producto para su bebé, es decir, prefieren las recomendaciones, valoraciones y opiniones de otros usuarios, más aún si son de confianza. Además los papás y las mamás tienen problemas a la hora de comprar productos especializados, ya que hay tanta oferta que muchas veces no saben qué elegir.
Definición
Finalmente, tras las encuestas y la entrevista al dueño de Ratoncitos, obtuvimos una conclusión principal.
El problema al que nos enfrentamos dentro de la web era el siguiente: los usuarios que necesitan comprar productos para su bebé, necesitan estar asesorados y nuestra web no proporciona este servicio de manera adecuada.
Finalizada la fase de investigación y recopilada toda la información posible, utilizamos la herramienta Affinity Diagram que nos ayudó a definir a nuestro User Persona y User Journey.
El User Persona nace de los datos más repetidos en nuestros usuarios encuestados y entrevistados. Gracias a ello, creamos a Sara, una mami primeriza.
Hace poco se enteró de que iba a ser mamá por primera vez y desde entonces no deja de buscar información para estar bien preparada cuando llegue el momento.
Necesita orientación ya que ella sola se pierde entre tantos productos diferentes (acaba agotada a lo largo del día, algo no aconsejable para su estado).
Es consciente del asesoramiento que le pueden proporcionar en tienda física, pero prefiere evitar desplazamientos innecesarios dada la situación actual.
Ideación
Una vez hemos empatizado con el usuario y definido el problema, comenzamos a idear las posibles soluciones, para ello trabajamos con las siguientes herramientas: Brainstorming y Mindmap.
Solución:
Como solución proponemos un rediseño de la interfaz centrado en el usuario. Para ello implementaremos una serie de funcionalidades básicas que demandan los usuarios:
Búsqueda rápida por categorías, filtros: sustituir el sistema de búsqueda actual por uno más sencillo e intuitivo para el usuario, así podrá encontrar antes el producto deseado.
Recomendaciones personalizadas: incorporamos un pequeño test al inicio de la web para poder conocer al cliente y ofrecerle lo que necesita con solo un par de clicks. Además le permitimos ver valoraciones de otros usuarios en cada producto.
Servicios que el usuario valora de la tienda física, adaptados a la tienda online: servicio de asesoramiento por videollamada, montaje a domicilio y talleres online.
Por último, implementamos la compra con tarjeta de crédito para cualquier producto ya que nuestro cliente no contaba con ello en su web.
Prototipado
Llegó el momento de realizar una buena arquitectura de la información para que la navegación fuese lo más sencilla e intuitiva posible. Utilizamos las siguientes herramientas: Card Sorting, Sitemap, User Flow y Crazy eight.
Comenzamos a trabajar en un Low-Fi, donde cambiamos algunas pantallas que descubrimos que eran poco intuitivas gracias al feedback, volvimos a iterar y corregimos errores. Una vez finalizados los testeos y habiendo mejorado la usabilidad dimos luz verde al Mid-Fi.
Proceso UI
En esta segunda fase empezamos definiendo los Brand Attributes, para ello realizamos un Moodboard y definimos los valores de Ratoncitos.
Comenzamos a definir el color; en esta ocasión nos encontramos con el primer stopper. Actualmente la web no tiene un color definido, se aprecian azules, rosas, morados… pero no hay definido un color corporativo. Revisamos referencias y seleccionamos una paleta de color neutra, que no hiciese distinción de género y que fuese a la vez accesible en un entorno digital.
Una vez seleccionado, definido y asentado el color que íbamos a utilizar, comenzamos a trabajar toda la imagen gráfica de la web, tipografía, alineación, consistencia, sombras, Style Tile, Style Guide y Atomic Design.
Definidas todas las herramientas mencionadas, llegó el momento de comenzar a pintar las pantallas y darle vida a nuestro Hi-Fi.
Tras finalizar el Hi-Fi testeamos y a nivel usabilidad no tuvimos ningún problema, el usuario conseguía realizar su meta. Pero tras presentar el proyecto y recibir feedback nos dimos cuenta de algunos errores de UI relacionados con los tamaños y el contraste que corregimos posteriormente.
A continuación, muestro algunas de las pantallas del prototipo en Hi-Fi y el vídeo animado para poder ver el MVP con más detalle.
Os dejo también el enlace a Sketch para poder ver el proyecto completo y probar el test.
Próximos pasos
Pensando en la escalabilidad del MVP, se propone como mejoras futuras implementar las siguientes funcionalidades dentro de la web:
Somos conscientes de que debemos seguir profundizando en la investigación y continuar iterando para conocer si realmente las nuevas funcionalidades establecidas en los próximos pasos serían aceptadas en el mercado.
Aprendizaje
De este proyecto he aprendido cómo funciona el negocio de las tiendas de productos de bebés. La entrevista al dueño de Ratoncitos nos dio un punto de vista muy interesante del negocio; además he aprendido cómo actúa el usuario y qué patrones sigue a la hora de comprar este tipo de productos. Por último, me he dado cuenta de lo complejo que es realizar una correcta arquitectura de la información para este sector.
Por primera vez nos enfrentábamos a un rediseño web. Realizar el diseño en Hi-Fi se convirtió en un auténtico reto, siendo necesario adaptar la estructura original y ajustar tamaños y márgenes.
👩🏻💻
Muchas gracias por tu tiempo si has llegado hasta aquí! Un feedback siempre es bienvenido 🐭
Nos vemos en el siguiente post!
:)A.
