Entre Col y Col. El ecommerce de tu comercio local.
UX/UI case study
En los últimos años los negocios que han decidido implementar un ecommerce han experimentado un mayor crecimiento en sus ventas. De este modo, la mayoría de nosotros vemos la tecnología como algo que facilita las cosas. Sin embargo, si la tecnología no está bien implementada y diseñada ¿qué es lo que sucede? Segunda semana en Ironhack con el rediseño de la web de un pequeño negocio por delante.
Mi papel
Durante dos semanas no consecutivas, la primera dedicada al diseño de la experiencia de usuario (UX) y la segunda al de la interfaz de usuario (UI), formé parte del equipo compuesto por Elisa Naharro, Juan Hernández y Nuria Gallego. En la segunda semana hubo un cambio de los acontecimientos y contamos con Nerea Amate como nueva integrante. El proyecto se desarrolló de manera remota a través de sprints y siguiendo el proceso design thinking.
El reto
Entre Col y Col es la tercera generación de una familia dedicada a la producción y comercialización de productos del campo. Situado en un puesto en el mercado Barceló de Madrid, venden productos orgánicos y gourmet basados en sistemas de agroecología, que garantizan la sostenibilidad de la producción de los mismos. Además, tienen muy presente que los productos, en la medida de lo posible, sean de proximidad.
Actualmente, Entre Col y Col no dispone de web propia y su ecommerce se encuentra alojado dentro de la plataforma mercado47, el mercado online de los mercados de Madrid. El objetivo: llevar a cabo un rediseño de la web del negocio para darle más visibilidad.
Capítulo I
Primeros pasos
Antes de lanzarnos a la aventura, al tratarse de un rediseño debíamos analizar y comprobar a través de un análisis de usabilidad los puntos de fricción del ecommerce ya existente.
Conocer a sus potenciales competidores a través de un análisis competitivo, sirvió de ayuda para localizar las principales funcionalidades y posibles mejoras de Entre Col y Col frente a otros comercios locales cercanos y similares.
Fase de empatización
Durante este periodo realizamos 8 entrevistas y 140 encuestas centradas en hábitos de compra online de productos de alimentación y focalizando la atención en productos frescos, ya que observamos que la compra de estos suponía un obstáculo para los usuarios.
Hablar con el stakeholder y dueño del negocio fue clave en el proceso ya que nos ayudó a encauzar el proyecto con una visión muy diferente a la que teníamos hasta el momento:
- El perfil de cliente son personas preocupadas por su salud que no escatiman en productos si saben que son de calidad.
- Los materiales utilizados para el embalaje son ecológicos.
- El 95% de los productos que vende son de origen nacional y de proximidad.
- Dispone de huerta propia.
- Recibe únicamente dos pedidos a través de la web.
El negocio contaba con muchos puntos positivos a destacar que no se veían para nada reflejados en el volumen de venta online. Sin duda, aquí se encontraba el reto al que nos debíamos enfrentar.
Capítulo II
Fase de definición
La recopilación de todos estos datos, cimento las bases para lanzar las primeras hipótesis y posibles soluciones en un lean UX canvas.
El sustento de este proyecto se basó en los principios del negocio valorados y por los que apuestan los clientes a la hora de comprar en la tienda física. Hacerlos coincidir con el comportamiento del usuario en la página web era la motivación y el objetivo del rediseño que íbamos a efectuar. Muchas personas no compran productos frescos online por el mero desconocimiento de cómo les va a llegar el producto. El equipo identifico esto como el principal problema que sumado al alojamiento de la web en mercado47, no beneficiaba en absoluto al negocio.
La experiencia de compra se encuentra dispersa en una plataforma ajena, haciendo que productos y stock no estén actualizados y traducido en dos compras diarias vía online, lo cual supone muy poco volumen de venta para el negocio.
El usuario ideal
Con la ayuda del stakeholder teníamos más claro el perfil de usuario al que nos dirigíamos. Crear el usuario ideal no fue demasiado difícil al contar con esta información. En un empathy map y un user journey plasmamos todas las preocupaciones y problemas con los que se iba a encontrar este al realizar un proceso de compra online en la web. Crear un scenario fue útil para observar en qué momento las mejoras de la página iban a empezar a formar parte de la trama.
Capítulo III
Fase de ideación
Haciendo uso de herramientas tales como un brainstorming y mindmap, volcamos todas las ideas extraídas de la fase anterior. Un MosCow nos ayudó a pulir las funcionalidades con las que iba a contar la nueva web del negocio.
La solución
Una página web propia, que permita al dueño acceder y tener control sobre la misma y a la que se le han añadido funcionalidades para controlar el stock, un buscador más accesible y nueva categorización basada en las necesidades reales del usuario que tiene muy en cuenta los productos de temporada.
Reflejar las fortalezas del negocio en el entorno físico y llevarlos al entorno digital era la clave del rediseño y lo que pasó a ser nuestra principal prioridad en la nueva web.
Con todas estas modificaciones en el diseño íbamos a llegar a obtener una serie de beneficios tales como una mayor visibilidad al dejar de pertenecer a una plataforma y pasar a disponer de una web propia. Esto derivaría en:
- Aumento de pedidos online
- Proyección del negocio
- Mejora del posicionamiento, por web propia y contenido extenso de calidad sobre los producto.
Estructurando la experiencia
Con ayuda de varios card sortings fuimos organizando el esqueleto de la web para acabar obteniendo un sitemap mucho más organizado que destacara nuevas secciones de interés para los usuarios.
Una vez que tuvimos una arquitectura de la información sólida y el userflow deseado, comenzamos a producir y reestructurar la web en múltiples wireframes mid-fi. Tras presentar los diseños a usuarios para que los probaran, recibimos comentarios que pudimos aplicar. Esto agilizó el proceso y nos ayudó a establecer un marco de diseño único y, por lo tanto, pasar al diseño visual.
Los wireframes se tradujeron casi a la perfección en el producto final, lo que demostró la solidez del trabajo inicial de investigación y diseño UX. Pero aquí sufrimos un incidente que la semana de UI nos iba a retrasar. Aunque en los testeos del mid-fi todo había ido sobre ruedas, la pasarela de pago no era todo lo intuitiva que podría ser y esto nos afecto en el hi-fi.
Capítulo IV
Rediseño
Adentrados en la segunda semana, ahora era el turno de diseñar la interfaz del usuario. Nuestro principal objetivo fue potenciar lo que hace diferente a Entre Col y Col del resto de sus competidores. Manteniendo la esencia de la marca, rediseñamos el logo e identidad adaptando los colores a un entorno más interactivo.
La creación de un moodboard y definición de los atributos de marca nos ayudo en la elección de los colores. Ahora ya podíamos plasmar todo en un style tile.
Fase de prototipado
Contar con una guía de estilo y un atomic design desarrollados anteriormente, agilizó bastante el proceso a la hora de realizar los wireframes en hi-fi. Aunque tuvimos que rehacer todo el diseño de la pasarela de pago, aún disponíamos de tiempo suficiente para realizar todas las interacciones las cuales disfrute muchísimo.
Un diseño vivo
Al tratarse de una web, el diseño necesitaba ser escalable, flexible y vivo. Esta es una de las razones principales por las que optamos por una estructura basada en cuadrículas. De está forma se escalaría bien en todos los dispositivos, el contenido podría cambiarse o moverse fácilmente, y las secciones clave se mantendrían.
Capítulo V
Fase de testeo
Ahora ya estaba todo listo. Con el hi-fi ya bien testeado, montamos el prototipo en Figma obteniendo el siguiente resultado:
Que aprendí
Aunque el resultado final fue exitoso, también hay que aprender de las cosas que no salieron tan bien. Apresurarnos a la hora de completar entregables, hizo que la segunda semana tuviéramos que rehacer partes a las que no habíamos dedicado todo el tiempo que requerían.
Quizás la parte más gratificante de este proyecto fue aplicar el proceso lean UX completo y ver el gran impacto que tuvo en el producto final que construimos. El equipo fue eficiente y trabajó bien (la segunda semana con menos estrés), los usuarios fueron la pieza clave durante todo el proceso y logramos un producto muy satisfactorio.
Una vez más,¡gracias por llegar hasta el final! Si tienes cualquier pregunta o sugerencia estaré encantada de leerte en los comentarios 📩
También puedes contactarme por LinkedIn:
