Entre Col y Col: Rediseñamos la web de una frutería local
| UX UI Case study |
Segundo proyecto grupal del Bootcamp de Ironhack 💪 Un proyecto en el que trabajamos duro durante dos semanas para alcanzar el siguiente objetivo: Ayudar a una tienda local a mejorar su presencia online para ser más competitiva en el mercado.
Lo hicimos en grupos de cuatro (Lorena, Juan, Nuria y en la segunda semana, Nerea) en un contexto de trabajo en remoto y organizándonos a través de Sprints. Seguimos la metodología Scrum y el proceso infalible de Design Thinking. El proyecto tuvo dos semanas de duración, la primera dedicada en exclusiva a la parte de User experience (UX) y la segunda semana al User Interface (UI).
El comercio local que elegimos fue Entre Col y Col, una frutería de barrio especializada en productos orgánicos y gourmets que se encuentra en el Mercado de Barceló de Madrid.
Adentrándonos en el corazón del negocio 🍅
Elegimos esta frutería porque tras echarle un vistazo a su web vimos que había mucho margen de mejora. Además, el Mercado de Barceló nos pillaba cerca, con lo cual no tendríamos problema en acercarnos a hablar con el dueño del negocio. Javier nos abrió las puertas de su establecimiento para que pudiésemos entrevistarle y su aportación fue, sin duda, esencial en el desarrollo del proyecto.
- Nos habló de su clientela, que se trata de personas que se preocupan por su salud, y a las que les gusta invertir dinero en la calidad de los productos que consumen.
- El 95% de los productos que tiene en su tienda son de origen nacional y de proximidad.
- Todos los materiales que utiliza para los embalajes son ecológicos.
- Dispone de huerta propia.
- Vende otros productos como aceites, chocolates, legumbres etc.
- Sólo recibe dos pedidos a través de la web.
Con esta información tan valiosa toca darle duro a la investigación. Entrevistas, encuestas, análisis competitivo…
3, 2, 1… ¡Empezamos!
Entendiendo el mercado
Para entender mejor el negocio y a sus potenciales competidores hicimos un análisis competitivo comparando las principales funcionalidades que tiene Entre Col y Col frente a las de comercios locales parecidos y cercanos.
También hicimos un análisis interno de usabilidad y encontramos fricciones que podrían estar afectando al funnel de conversión, especialmente en el proceso de compra de los productos.
El siguiente movimiento que hicimos fue preparar la entrevista para el dueño del local, Javi, que es quien gestiona la web de Entre Col y Col alojada actualmente en el portal de Mercado 47. Nos comentó que no tenía acceso a controlar todo el stock de productos publicados en la web. Esto hacía que la web estuviera obsoleta, que no contase con todos los productos con los que cuenta en el entorno físico, y esto hacía que hubiese una brecha gigantesca entre la experiencia física de ir a su frutería y la experiencia digital de comprar a través de su web.
Paralelamente y para entender mejor los hábitos de consumo de los clientes habituales de Javier, hicimos una serie de encuestas y entrevistas a usuarios. Nos interesaba mucho saber la opinión y los puntos de dolor las personas que habitualmente compran alimentos frescos a domicilio. Trabajamos con el Lean Survey Canvas que es una especie de guión que sienta las bases de lo que será nuestra encuesta y en gran medida, nuestras entrevistas.
Y estos fueron los resultados que más llamaron nuestra atención:
Hablando con Javi descubrimos que el número de pedidos a través de la web era de unos dos pedidos al día. Teniendo esta información en nuestra mano, y los resultados de las encuestas a usuarios, nuestro objetivo principal ya estaba claro: optimizar la página web y facilitar al máximo el proceso de compra para aumentar al máximo el número de pedidos online que hasta ahora era evidentemente muy escaso.
Ya teníamos algunas bases sobre las que empezar a construir nuestro Lean UX Canvas, así que empezamos a lanzar las primeras posibles soluciones y a formular las primeras hipótesis.
Definiendo el problema
Llegó el momento de definir el problema al que nos enfrentábamos, que conseguimos resumir en una sola palabra frase: la web genera desconfianza a la hora de comprar productos frescos a través de ella.
· El cliente no sabe si el producto le llegará en buen estado a casa.
· El stock de productos en la web está desactualizado.
· Hay una diferencia abismal entre la experiencia de compra física y la digital.
· El proceso de compra de compra a través de la web es lento y tedioso.
Para empatizar con el usuario de Javier hicimos un Empathy map, un Affinity Diagram y un User journey y obtuvimos un prisma más fiel de cómo es la persona que compra en este tipo de locales, de esta manera pudimos construir a Julia, el User persona ideal de Entre Col y Col, es decir, el cliente ideal de Entre Col y Col.
Buscando soluciones
Para la fase de ideación utilizamos algunas de mis herramientas favoritas de UX, porque dan mucha rienda suelta a la imaginación: El Brainstorming y el Mindmap. Aquí volcamos un montón de ideas y de posibles mejoras y funcionalidades que pulimos a través de la herramienta Moscow, que nos permitió discriminar qué funcionalidades eran imprescindibles para este MVP, cuáles podrían esperar y cuáles no llevaríamos a cabo.
¡Y por fin dimos con la tecla!
Como parte de la estrategia de rediseño, no sólo nos enfocamos en los aspectos puros de usabilidad y estética. Decidimos transmitir las fortalezas que identificamos en el entorno físico cuando fuimos a visitar la frutería al entorno digital para aumentar su propuesta de valor, diferenciar y posicionar al negocio en un lugar mejor respecto a su competencia. De este modo surgieron fueron las principales mejoras que incorporamos en la web.
· Sección de productos de temporada.
· Visualización del stock en tiempo real de los productos para acercar la experiencia física a la digital.
· Proceso de compra más ágil y sencillo. Reducimos número de clicks.
· Sugerencia de productos relacionados para aumentar el número de ventas.
· Sección “Cómo te llegará el pedido a casa” para paliar la desconfianza ante el cliente que duda de si los productos frescos llegarán bien
· Puesta en valor de factores internos (Huerta propia, embalajes sostenibles…)
Posteriormente realizamos la Arquitectura de Información de la web a través de un Site map en el que organizamos las nuevas secciones y las ya existentes para optimizar la navegación. Para realizar la arquitectura nos ayudamos de varios Card sortings, que consiste en darle las categorías de tu app o web sueltas y descolocadas en post its a una persona ajena al proyecto, para que de manera intuitiva las agrupe por similitud. Para este tipo de dinámicas utilizamos herramientas colaborativas como Mural o Miro, y es muy divertido ver a tus compañeros ordenándote los post its :)
¡Que comience el prototipo!
Con toda esta información lo que hicimos fue reestructurar la web en un wireframe de media fidelidad. Posicionamos el buscador en un lugar más visible dentro de la home ya que estaba poco accesible, hicimos un nuevo flujo de compra más sencillo y simplificamos la acción de añadir y quitar unidades de un determinado producto.
En el siguiente prototipo mostramos el flujo de compra de una persona que va a comprar plátanos porque va a hacer un banana bread, pero se da cuenta de que no hay, así que cambia de opinión y decide hacer una tarta de zanahoria, gracias a la nueva funcionalidad de productos sugeridos al usuario le resulta muy fácil y rápido realizar la compra.
Segunda semana: Le damos color al asunto
El siguiente paso fue renovar y reformar la identidad de marca de Entre Col y Col, para ello hicimos un rediseño del logo manteniendo y respetando la esencia pero adaptando sus formas y colores a un entorno más digital y modernizado.
Hicimos un Moodboard inspiracional del cual extraímos la paleta de colores. El moodboard es una especie de tablero donde volcamos imágenes, texturas, colores… que nos inspiren de cara a nuestro producto. En nuestro caso sabíamos que la web tenía que evocar a tierra, a huerto, a cercanía, a mercado…porque esa es la esencia del negocio, y eso es lo que buscan los clientes que acuden a él.
Y siguiendo con la parte estética, preparamos un Style Tile, que viene a ser una pequeña muestra donde aparecen los elementos principales de la web. La idea es que de un sólo vistazo cualquier persona pueda imaginarse qué estética seguirá el producto. Es muy útil de cara a la validación por parte de los stakeholders en las primeras fases y decisiones del proceso de UI.
¡Ya casi estamos! Por último, diseñamos las pantallas en alta fidelidad (High Fidelity Wireframes) en Figma y montamos el prototipo con interacciones en Figma.
Sin más dilación, os dejo con el prototipo:
“Un momento… ¿Y qué pasa con la versión móvil?”
Sí, lo sabemos. Hoy en día, si tu web no tiene versión móvil… ¡Estás perdido! Por eso, nuestros profesores nos aconsejaron como extra comenzar a trabajar en la versión móvil del proyecto. Os dejo con los primeras pantallas en Low Fidelity que iremos desarrollando en próximos episodios. :)
Moralejas y aprendizajes
He disfrutado muchísimo con este proyecto ya que soy una gran fan de los e-commerce, y si son de alimentación… ¡Ni te cuento! A principios de año trabajé en el rediseño de un e-commerce local a nivel de web y app basándome en el análisis de usabilidad de una gran CRO de la que aprendí muchísimo, y gracias a esta experiencia previa he podido aplicar en este proyecto lo que aprendí.
Como principal stopper, quizás destacaría la elección de la paleta de color, un proceso que nos resultó un poco complejo y para el que hicimos multitud de pruebas, pero… ¡Forma parte del proceso!
Ha sido muy enriquecedor empezar este proyecto desde cero y trabajar codo a codo con mis compañeros, y más haciéndolo para un pequeño negocio como es Entre Col y Col, sencillo pero con un gran potencial y con muchas posibilidades en el entorno físico y en el digital.
¡Pues ya estaría! Si tienes cualquier duda o sugerencia me encantará leerte en los comentarios. 🎉
