Ultramarinos Zappa’s nº3. Rediseño de un eCommerce local

UX/UI Case study

9 min readJan 10, 2021

Durante la segunda semana del Bootcamp de UX/UI nos pidieron realizar la parte de UX del rediseño de un eCommerce local. Para ello disponíamos de 5 días y éramos un equipo de 3 integrantes: Clara, Mario y Andrea. Aunque algunas tareas fueron repartidas entre los distintos miembros del equipo, consideramos que todos seguimos el mismo rol, ya que en general realizamos el proceso en conjunto.

El proyecto fue retomado en la semana 6 del Bootcamp, en la que durante 5 días tuvimos que desarrollar la parte de UI del mismo proyecto. Sólo hubo un pequeño handicap, los grupos de trabajo se reorganizaron de forma que Clara tuvo que marchar a otro grupo y a cambio dimos la bienvenida a Laura al nuestro.

Presentación del proyecto

Briefing

Llevar a cabo el rediseño de la página web de una eCommerce local.

ECommerce seleccionada: Zappa’s nº 3

En primer lugar tuvimos que escoger una eCommerce local sobre la que íbamos a realizar el rediseño. En nuestro caso escogimos Zappa’s nº3, una tienda de ultramarinos situada en el barrio Salamanca, que se caracteriza por la venta de productos gourmet, de gran calidad y exclusividad: jamón, quesos, vinos, conservas, repostería…

Pensamos que sería buena idea escoger un comercio al que tuviéramos acceso y así poder entrevistar al dueño y observar al cliente de una forma más cercana.

En este enlace podéis acceder a su web actual para ponernos en situación como punto de partida del proyecto.

Problema

El usuario experimenta una falta de confianza y asesoramiento en la experiencia online, frente al trato en la tienda física.

Solución

Equiparar la experiencia física a la experiencia en la web.

Proceso de diseño

A continuación se desarrolla el proceso de diseño que hemos seguido, mediante la metodología del Design Thinking.

1. UX

Investigación

Comenzamos la investigación con la realización de un Lean Survey Canvas y generando las encuestas y entrevistas que lanzamos por whatsapp a nuestro entorno cercano. Necesitábamos conocer las preferencias del usuario cuando se decanta por este tipo de comercio para poder plasmarlo en la web y tener en cuenta sus necesidades.

Tras las primeras investigaciones ya teníamos una conclusión clara y es que el usuario tiene clara preferencia por la compra física en este tipo de comercios. A partir de aquí necesitábamos indagar un poco más y conocer el por qué.

Tuvimos la suerte de contactar con Ángel, el dueño del local, y Mario pudo acercarse y realizarle una entrevista como stakeholder, gracias a la cual obtuvimos información de primera mano. También pudimos hablar con el desarrollador de la web actual que nos aportó información desde su punto de vista.

Otra de las fuentes de investigación claves en este proyecto fue analizar sus redes sociales, ya que es muy activo en Instagram y Facebook. Publica contenido de carácter cercano y destinado directamente al cliente, en el que muestra algunos de los productos de la tienda; idea que adaptaremos e incluiremos en la solución de nuestra web.

Gracias a la realización del análisis DAFO, pudimos ver claramente nuestras fortalezas, debilidades, amenazas y oportunidades, y aplicarlo directamente en el diseño de la web, destacando por ejemplo las fortalezas que nos diferencian de otros eCommerce en la parte superior.

Usuario

Gracias a las entrevistas pudimos definir nuestro usuario tipo.

Es una persona “sibarita” que busca la calidad frente a precio, que se fija en los detalles y le interesa conocer bien cómo es el producto o de dónde viene, y descubrir nuevas opciones con las que sorprender a su paladar y a sus invitados.

Observamos que nos encontramos ante un tipo de e-commerce que entra en acción en momentos especiales, para ocasiones más exclusivas y no del día a día. Comprar los productos como regalo es otra de las situaciones en las que se ve envuelto este comercio.

El camino hacia la solución

Tras un brainstorming en el que volcamos todas las ideas que se pasaron por nuestra mente, con el Moscow pudimos ver nuestras prioridades y elegir las funcionalidades que implantamos.

Solución

Una página web en la que intentaremos equiparar la experiencia física a la experiencia en la web.

Además de estas funcionalidades, destacamos como característica importante de la solución la reestructuración de toda la arquitectura de la información de la web y la reorganización de las categorías, a la que he querido darle un apartado exclusivo:

Arquitectura de la información

A la hora de definir la solución, esta parte fue una de las más importantes y en las que invertimos más tiempo. Consideramos que necesitábamos una reorganización de las categorías para una experiencia más fluida e intuitiva, y que el usuario no se abrumara de repente con tal cantidad de opciones entre las que escoger (en referencia a este aspecto os comparto en este enlace una charla TED muy interesante sobre la elección del usuario entre múltiples opciones).

Una de las ideas claras fue colocar las categorías principales y más representativas de una tienda de ultramarinos (despensa, charcutería, conservas…) de forma muy accesible directamente en la barra de navegación.

A partir de esto, una vez lanzado el cardsorting y obtenidos los resultados, pasamos bastante rato iterando entre nosotros, testeando y reflexionando sobre cómo quedarían finalmente las categorías, las cuales reagrupamos y creamos nuevas subcategorías.

Sitemap final con la estructura de la web

Userflow del proceso de compra de un aceite

Prototipo

Una vez definida la estructura de la web mediante el sitemap, y definidas las funciones que implementaría el rediseño de la misma, se desarrollaron una serie de wireframes representando el flujo de la compra de un producto.

Se realizó un prototipo en baja fidelidad para comenzar a testear el rediseño.

El flujo representado en el prototipo fue desde que un usuario entra en la web y selecciona una serie de productos hasta que finaliza la compra.

El usuario entra en la web y se encuentra la home.
Quiere comprar un aceite, por lo que acude a la categoría “despensa”.
Dentro de “despensa”, selecciona “aceites y vinagres”. Le aparecen las cards de todos los productos (tendría opción de filtrarlos para encontrar uno en concreto).
El aceite que busca aparece agotado, pero ve otro que también le convence. Podría comprarlo directamente mediante el botón “añadir”, pero entra en el producto para conocer más detalles.
Le gustan las características y lo añade a la cesta.
En la sección de “y para acompañar” ve unos espárragos que le llaman la atención. Entra en el producto y decide añadirlo también a la cesta.
El usuario se percata que quizás una botella de aceite no sea suficiente, por lo que decide añadir una botella más editando directamente la cesta.
Finaliza la compra.

Prototipo Low-fi del rediseño de la eCommerce Zappa’s nº3

A continuación procedimos a realizar el prototipo en mid-fi para tener una mayor definición de todos los elementos. Para ello utilizamos un sistema basado en columnas, que nos permite tener una estructuración más potente y facilitar el diseño responsive de la web.

A continuación se muestra una comparativa entre la página actual y el rediseño en la que podemos observar los principales cambios.

Categorías actualmente / Categorías rediseñadas

Página de producto actualmente / Página de producto rediseñada

2. UI

Durante esta semana, como hemos comentado al inicio del artículo, trabajamos con un intercambio de integrante en el equipo, por lo que en primer lugar destinamos una hora a explicarle el proyecto a la nueva compi, Laura. Necesitábamos que se empapara de todo el proceso y las decisiones tomadas para que conociera realmente bien el proyecto. La experiencia fue muy satisfactoria, y durante la primera tarde de trabajo ya parecía que lleváramos trabajando juntos desde el inicio. Además, gracias a su perspectiva externa, pudo aportar interesante feedback que fue aplicado en el hi-fi.

Y ahora sí que sí, comenzamos con el UI. En primer lugar nos replanteamos si la imagen utilizada actualmente transmitía los atributos que Ángel, el dueño de la tienda, quería transmitir con su e-commerce. Pretendía alejarse del concepto de producto gourmet súper exclusivo y se definía más como una tienda de ultramarinos de toda la vida, con los productos de siempre de gran calidad. “El mismo bacalao que compraban nuestros abuelos hace 50 años”.

Con los valores que queríamos transmitir en mente, tradicional, familiar, cercano, retro y natural, elaboramos el Moodboard:

Pese a no querer alejarnos de la marca actual debido a su popularidad en el barrio, consideramos un necesario un pequeño rediseño de la marca.

Simplificamos el logo para que se adaptara mejor a un entorno digital, pero mantuvimos su esencia.
Se mantuvo el color azul pero bajamos su intensidad para conseguir un tono mucho más cálido y cercano.
Creamos un patrón geométrico inspirado en las baldosas hidráulicas típicas de la tiendas de ultramarinos de toda la vida. De esta forma conseguimos darle mayor personalidad al e-commerce y un factor de diferenciación.

Destacar la elección de los colores y la aplicación de los mismos al hi-fi como uno de nuestros mayores stoppers. Tras multitud de pruebas y combinaciones, por fin llegamos a un equilibrio que funcionaba correctamente en la home. Definimos el estilo y posteriormente fue aplicado al resto de pantallas.

Además del Style Tiles también se llevó a cabo el Style Guide del proyecto y el Atomic Design. Os dejo los enlaces a ambos por si estáis interesados.

A continuación mostramos algunas de las pantallas finales, en las que podemos destacar las siguientes características:

Contenido multimedia con recomendaciones semanales.
Etiquetado de los productos recomendados, nuevos y en oferta.
Creación de cards para los productos, permitiendo una visualización ordenada y fácilmente identificable.
Gran peso visual de las imágenes de los productos.
Etiquetado visual con sellos de denominación de origen.
Proceso de pago sencillo y rápido. Feedback en todo momento del paso del proceso en el que se encuentra el usuario y de su cesta de la compra y el importe total.