Rol: Product Designer

Rol: Product Designer

Herramientas: Figma / Maze / Optimal Workshop

Herramientas: Figma / Maze / Optimal Workshop

Plazo: 12 semanas

Plazo: 12 semanas

Inicio del proyecto: Marzo 2024

Inicio del proyecto: Marzo 2024

Project Overview

Project Overview

Contexto

Contexto


Con el avance digital y el crecimiento del e-commerce, los consumidores están cambiando sus hábitos de compra, prefiriendo hacerlas online y recibir sus productos en casa. Las aplicaciones de supermercados se han vuelto esenciales en la industria de alimentos y consumo masivo.

Con el avance digital y el crecimiento del e-commerce, los consumidores están cambiando sus hábitos de compra, prefiriendo hacerlas online y recibir sus productos en casa. Las aplicaciones de supermercados se han vuelto esenciales en la industria de alimentos y consumo masivo.

Problema

Problema


La aplicación actual de Carrefour se enfoca en mejorar la experiencia en tienda, pero no permite realizar pedidos online. Esto deja sin cubrir la creciente demanda de clientes que buscan la comodidad de comprar desde casa.

La aplicación actual de Carrefour se enfoca en mejorar la experiencia en tienda, pero no permite realizar pedidos online. Esto deja sin cubrir la creciente demanda de clientes que buscan la comodidad de comprar desde casa.

Solución

Solución


Este proyecto busca desarrollar una app de Carrefour que brinde una experiencia de compra online completa donde los usuarios puedan hacer sus compras desde su celular, alineada con las necesidades actuales del usuario digital.

Este proyecto busca desarrollar una app de Carrefour que brinde una experiencia de compra online completa donde los usuarios puedan hacer sus compras desde su celular, alineada con las necesidades actuales del usuario digital.

Benchmarking

Para comprender mejor nuestra posición frente a la competencia, analizamos reseñas de usuarios de las aplicaciones de supermercado más reconocidas a través de la App Store y Google Play. Esto nos permitió identificar sus puntos fuertes y áreas de mejora desde la perspectiva del cliente.

La navegación es poco intuitiva y requiere varios pasos para encontrar productos específicos.

Día Online ofrece descuentos y beneficios exclusivos para sus clientes online.

Mala disponibilidad

Usuarios frustrados


La plataforma es lenta y a menudo presenta errores durante el proceso de compra.

Coto tiene una amplia cobertura de entrega en varias localidades, lo que lo hace accesible para muchos usuarios en diferentes zonas.

A continuación, resumimos los hallazgos clave de cada competidor basados en nuestro research:

La navegación es poco intuitiva y requiere varios pasos para encontrar productos específicos.

Día Online ofrece descuentos y beneficios exclusivos para sus clientes online.

Mala disponibilidad

Usuarios frustrados


La plataforma es lenta y a menudo presenta errores durante el proceso de compra.

Coto tiene una amplia cobertura de entrega en varias localidades, lo que lo hace accesible para muchos usuarios en diferentes zonas.

A continuación, resumimos los hallazgos clave de cada competidor basados en nuestro research:

¡Hace click!

La navegación es poco intuitiva y requiere varios pasos para encontrar productos específicos.

Día Online ofrece descuentos y beneficios exclusivos para sus clientes online.

Mala disponibilidad

Usuarios frustrados


La plataforma es lenta y a menudo presenta errores durante el proceso de compra.

Coto tiene una amplia cobertura de entrega en varias localidades, lo que lo hace accesible para muchos usuarios en diferentes zonas.

A continuación, resumimos los hallazgos clave de cada competidor basados en nuestro research:

¡Hace click!

Proceso de diseño

Tomé la decisión de utilizar el Design Thinking como proceso de diseño, ya que me veo familiarizado con la iteración y la idea de ir y volver a distintas etapas del proceso cuando lo requiera

Empatizar

Empatizar

Nuestra primera actividad en el proceso de empatizar fue ponernos en contacto con los usuarios que hacen las compras de supermercado en sus respectivos hogares.

Entrevistas de usuarios

Entrevistas a usuarios

3 hombres y 3 mujeres

18-23 años

23-35 años

35+ años

Edades de participantes

Participantes que habían hecho sus compras virtuales

30 MINS

Duración de las entrevistas

¿Que nos dijeron los usuarios?

¿Qué nos dijeron los usuarios?

Transcribimos las entrevistas y recogimos las citas que nos brindaban los insights más valiosos.

Notamos que el tiempo, el dinero y la experiencia eran pilares fundamentales en las entrevistas, y sabíamos que ibamos a tener que responder a estas necesidades en el futuro.

“A veces uno se sorprende con lo que puede salir un changuito y si haces esa compra, queres que salga bien. Quizás no te asegura eso algo online hoy en día.”

“A veces uno se sorprende con lo que puede salir un changuito y si haces esa compra, queres que salga bien. Quizás no te asegura eso algo online hoy en día.”

“A veces uno se sorprende con lo que puede salir un changuito y si haces esa compra, querés que salga bien. Quizás no te asegura eso algo online hoy en día.”

“Me parece que lo mejor es que brinden un soporte.”

“Me parece que lo mejor es que brinden un soporte.”

“Mejorar la logística y a la coordinación de la entrega, del envío.”

“Mejorar la logística y a la coordinación de la entrega, del envío.”

“Mi mamá se fija muchísimo en los precios”

“Mi mamá se fija muchísimo en los precios”

“Me cuesta mucho llevar los gastos y esas cosas.”

“Me cuesta mucho llevar los gastos y esas cosas.”

“Depende de donde te quede el supermercado gastas nafta, eso es una gran contra.”

“Depende de donde te quede el supermercado gastas nafta, eso es una gran contra.”

“Hoy en día es ir por la opción más rentable para cada familia”

“Hoy en día es ir por la opción más rentable para cada familia”

“Mis papás hacían pedidos y no había nadie en casa para recibirlo.. muchas veces tuvimos lío en la coordinación de quién recibe el pedido”

“Mis papás hacían pedidos y no había nadie en casa para recibirlo.. muchas veces tuvimos lío en la coordinación de quién recibe el pedido”

“Muchas veces nos ha pasado que quizás llegaban abollados.. Me acuerdo que nos vinieron bolsas de arroz rotas”

“Muchas veces nos ha pasado que quizás llegaban abollados.. Me acuerdo que nos vinieron bolsas de arroz rotas”

Notamos que el tiempo, el dinero y la experiencia eran pilares fundamentales en las entrevistas, y sabíamos que ibamos a tener que responder a estas necesidades en el futuro.

Clustering

El siguiente paso fue encontrar patrones y tendencias dentro de las citas para así dividirlas en categorías.

Hábitos

"Me importa mas la calidad que el precio"

“Me cuesta mucho llevar los gastos y esas cosas.”

"Si voy y toco los duraznos o las peras y si están hechas una piedra, ni compro"

"No siempre voy necesariamente al que tengo más cerca, sino por donde ando"

“Una vez por semana solemos tener que ir porque a veces consumimos mucho”

Delivery

“Mejorar la logística y la coordinación de la entrega, del envío.”

“Mis papás hacían pedidos y no había nadie en casa para recibirlo.. muchas veces tuvimos lío en la coordinación de quién recibe el pedido”

“Te lo traen a tu casa y creo que es un proceso más rápido.”

"Muchas veces nos ha pasado que quizás llegaban abollados.. Me acuerdo que nos vinieron bolsas de arroz rotas"

Experiencia

“Odio comerme una fila larga de personas para comprar.”

"Lo que tiene también de desventaja la compra online es que capaz te dicen que llega en un momento específico y vos tenes que si o si estar en tu casa"

"Tuve una muy mala experiencia con la pagina web de Carrefour entonces no me quiero ni imaginar lo que debe ser la aplicación"

“El estacionar, entrar, buscar, hacer la cola para la caja, y volver toma mucho tiempo”

Decidimos categorizarlas en hábitos, delivery y experiencia porque vimos que dentro de estas categorías existen insights accionables que pueden aportar un gran valor en la etapa de prototipado para justificar nuestras decisiones de diseño.

Conclusiones: Empatía

Conclusiones: Empatía

Estamos satisfechos con el proceso de la etapa de empatizar, ya que logramos obtener insights que reflejan los puntos de dolor y las necesidades del usuario, lo que constituye una base fundamental para las siguientes fases del diseño.

Estamos satisfechos con el proceso de la etapa de empatizar, ya que logramos obtener insights que reflejan los puntos de dolor y las necesidades del usuario, lo que constituye una base fundamental para las siguientes fases del diseño.

User Personas

Una vez que terminamos con las entrevistas, realizamos un total de 2 User Personas y sus POV's a través del clustering.

Ambas User Personas intentan agrupar las diferentes necesidades, frustraciones y hábitos que existen en las personas que entrevistamos.

Empatía: Conclusiones

Estamos satisfechos con el proceso de la etapa de empatizar, ya que logramos obtener insights que reflejan los puntos de dolor y las necesidades del usuario, lo que constituye una base fundamental para las siguientes fases del diseño.

Ambas User Personas intentan agrupar las diferentes necesidades, frustraciones y hábitos que existen en las personas que entrevistamos.

Definir

Definir

En la etapa de definir vamos a profundizar sobre el problema haciendo testeos de usabilidad morderados con participantes y con las 10 heurísticas de Jakob Nielsen.

Pruebas de usabilidad

Decidimos comenzar a evaluar a la aplicación actual de Carrefour, y para ello realizamos una prueba de usabilidad a cada uno de los 6 participantes.


Hipótesis: Creemos que los usuarios van a poder realizar las tareas que se encuentran dentro de la aplicación con facilidad, mientras que las tareas que redireccionan al usuario a la web van a tener una complejidad significante para los usuarios.

Objetivo: Revelar cualquier defecto en el flujo de las tareas principales de los usuarios en la aplicación de Carrefour.

Las tareas que le dimos a los usuarios:

¿Cual fue el feedback?

¿Cuál fue el feedback?

  • "Crearme una cuenta me llevó mucho tiempo."

  • "Hacer la compra del producto no fue fácil."

  • "Registrarme fue muy frustrante."

  • "Debería estar todo concentrado en la app."

  • "Loguearse. No por lo complicada sino porque provoca fastidio."

En base a esta prueba de usabilidad podemos destacar las innumerables fricciones que se le presentan al usuario al realizar las tareas principales de la aplicación. Tareas como la creación de la cuenta tardan en promedio 6 minutos y 45, lo que es suficiente como para que el usuario se frustre y Carrefour pierda a un potencial cliente.

En base a esta prueba de usabilidad podemos destacar las innumerables fricciones que se le presentan al usuario al realizar las tareas principales de la aplicación. Tareas como la creación de la cuenta tardan en promedio 6 minutos y 45, lo que es suficiente como para que el usuario se frustre y Carrefour pierda a un potencial cliente, lo cual se ve reflejado en el feedback, en donde los participantes expresaron su frustración.

¿La app ofrece una experiencia de usuario óptima?

Utilizamos las 10 heurísticas de Jakob Nielsen para evaluar la experiencia del usuario en la navegación de la app actual:

Resulta que hay varios aspectos de la app que se pueden mejorar para establecer una navegación fluida y accesible para todos los usuarios, esto se relaciona con las experiencias frustrantes que tuvieron los entrevistados, ya que la app no cumple con la mayoría de principios de accesibilidad y experiencia de usuario según Nielsen.

Problem Statement

Para hacer el problema más útil y práctico, optamos por formular tres problem statements basados en nuestras protopersonas, utilizando la metodología How Might We…? 

Preferencias del usuario

¿Como podríamos garantizar que el estado de las verduras y carnes sea de la preferencia del usuario?

Navegación fluida

¿Como podríamos construir una interfaz que sea intuitiva para que la puedan navegar usuarios de todas las edades?

Aumentar ahorro

¿Como podríamos optimizar el proceso de hacer compras para ahorrar tiempo y dinero?

Navegación fluida

¿Como podríamos construir una interfaz que sea intuitiva para que la puedan navegar usuarios de todas las edades?

Aumentar ahorro

¿Como podríamos optimizar el proceso de hacer compras para ahorrar tiempo y dinero?

Preferencias del usuario

¿Como podríamos garantizar que el estado de las verduras y carnes sea de la preferencia del usuario?

Conclusiones: Definir

Conclusiones: Definir

Definir: Conclusiones

Logramos capturar varios puntos de mejoras con los cuales trabajar gracias a las diferentes métricas que obtuvimos con las pruebas y el feedback cualitativo, creo que logramos obtener problemas bien definidos y accionables.

Logramos capturar varios puntos de mejoras con los cuales trabajar gracias a las diferentes métricas que obtuvimos con las pruebas y el feedback cualitativo, creo que logramos obtener problemas bien definidos y accionables.

Ideación: Conclusiones

Pudimos validar de una manera profunda la arquitectura de la información tendiendo en cuenta los insights que obtuvimos de los diferentes participantes, lo que nos aporta una base esencial para seguir avanzando en el proceso.

Idear

En la etapa de ideación, nos enfocamos en generar ideas para resolver el problema que definimos. Acá creamos el flujo de tareas de usuario y la arquitectura de información, organizando cómo navegan los usuarios por la aplicación.

User Task Flow

Decidimos plasmar el Task Flow para darnos una idea de los posibles puntos de fricción en el proceso de compra.

Arquitectura de la información

Arquitectura de la información

Es importante evaluar la arquitectura de la información para dejar en evidencia errores profundos en la navegación del usuario, para ello hacemos uso de Card Sorting la cual nos brinda la matriz de similitud y un dendrograma para finalmente armar el sitemap ideal.

Card Sorting

Hicimos un Card Sorting con los 6 entrevistados para evaluar la arquitectura de la información.

El card sorting no nos aportó insights muy valiosos, pero entendimos que funcionalidades incluir en la página de "Perfil".

Matriz de similitud

El dendrograma nuevamente nos ayuda a construir las funcionalidades incluidas en la página del perfil del usuario y al mismo tiempo nos ayudó a afrontar la granularidad de la arquitectura de la información, tomando la decisión de agrupar "Promociones", "Producto favorito del mes" y los cupones todo en una misma página llamada "Cupones".

El card sorting no nos aportó insights muy valiosos, pero entendimos que funcionalidades incluir en la página de "Perfil".

Dendrograma

El dendrograma nuevamente nos ayuda a construir las funcionalidades incluidas en la página del perfil del usuario y al mismo tiempo nos ayudó a afrontar la granularidad de la arquitectura de la información, tomando la decisión de agrupar "Promociones", "Producto favorito del mes" y los cupones todo en una misma página llamada "Cupones".

En base a los resultados del dendrograma y la matriz de similitud, nos imaginamos que el sitemap quedaría así:

Decidimos dividir el sitemap entre funcionalidades y pantallas para expandir nuestras ideas de lo que pensabamos que era correcto poner en cada pantalla en base a la información que obteníamos de los usuarios.

Conclusiones: Idear

Conclusiones: Idear

Pudimos validar de una manera profunda la arquitectura de la información tendiendo en cuenta los insights que obtuvimos de los diferentes participantes, lo que nos aporta una base esencial para seguir avanzando en el proceso.

Pudimos validar de una manera profunda la arquitectura de la información tendiendo en cuenta los insights que obtuvimos de los diferentes participantes, lo que nos aporta una base esencial para seguir avanzando en el proceso.

Prototipar

En la etapa de prototipado, transformamos las ideas en algo tangible. Creamos prototipos de baja y alta fidelidad, como también un UI KIT en el cual incluimos la paleta de colores, tipografía y espaciado para dar vida al diseño. Acá es donde el producto empieza a tomar forma.

En la etapa de prototipado, transformamos las ideas en algo tangible. Creamos prototipos de baja, mediana y alta fidelidad, como también un UI KIT en el cual incluimos la paleta de colores, tipografía y espaciado para dar vida al diseño. Acá es donde el producto empieza a tomar forma.

Crazy Eight (Baja fidelidad)

En el principio del proceso de la etapa de prototipado decidimos hacer un crazy eight con nuestras excelentes habilidades ilustrativas… Esto nos ayudó a poder iterar de manera rápida, haciendo Brain Storming de las diferentes pantallas y funcionalidades que nos gustaría ver en nuestro prototipo, algo así como fallar rápido y barato.

Mediana fidelidad

Desarrollamos el primer prototipo en media para darnos una idea de lo que queríamos que sea el producto final.


Tuvimos que ser muy creativos ya que la aplicación original de Carrefour no tiene un proceso de compra integrado en la app.

Alta fidelidad

El prototipo en alta es donde aplicamos el diseño estético gracias al UI Kit, utilizando los distintos colores, tipografías y componentes necesarios.

Prototipo en alta

El producto final ofrece una navegación híbrida, donde el usuario puede navegar con scroll horizontal y vertical, formando una experiencia del usuario ágil.


El enfoque esta en incrementar la interacción con el usuario de una manera intuitiva y dinámica.

Interacciones

Pantalla de producto

Pantalla de inicio


Como vemos en el vídeo, el diseño está orientado a que el usuario tenga una experiencia interactiva, de manera que el usuario pueda, en la misma página del producto, guardar el producto con un like, compartirlo con su familia o amigos, ¡incluso interactuar con la comunidad a través de reseñas!

Como vemos en el vídeo, el diseño está orientado a que el usuario tenga una experiencia interactiva, de manera que el usuario pueda, en la misma página del producto, guardar el producto con un like, compartirlo con su familia o amigos, ¡incluso interactuar con la comunidad a través de reseñas!

Pantalla de producto


Como mencioné previamente, el enfoque en la pantalla de inicio es que el usuario pueda navegar de una manera que mejore su experiencia de usuario, a través de categorías nombradas, escaneando el contenido de la pantalla inicial de una manera rápida y eficiente.

Al mismo tiempo, incorporamos patrocinadores, como por ejemplo Bimbo, para generar una nueva fuente de ingresos para la app, a través de posicionamiento y exposición de marca, una decisión de diseño que aporta valor económico para la empresa.

Como mencioné previamente, el enfoque en la pantalla de inicio es que el usuario pueda navegar de una manera que mejore su experiencia de usuario, a través de categorías nombradas, escaneando el contenido de la pantalla inicial de una manera rápida y eficiente.

Al mismo tiempo, incorporamos patrocinadores, como por ejemplo Bimbo, para generar una nueva fuente de ingresos para la app, a través de posicionamiento y exposición de marca, una decisión de diseño que aporta valor económico para la empresa.

UI KIT

Paleta de colores

Tipografía

Ejemplo de paleta y espaciado

Ejemplo de paleta y espaciado

Estos ejemplos los hicimos como guías que pueden utilizar los desarrolladores para entender el uso de los colores y espaciados en las diferentes pantallas de los prototipos.

Ejemplo evolución de componentes

Ejemplo evolución de componentes

Conclusiones: Prototipo

Conclusiones: Prototipo

Hubo un enfoque muy grande en iterar constantemente en esta etapa más que en ningún otra, creímos que era de alta prioridad la experiencia del usuario en nuestros prototipos, intentando responder a todas las necesidades de los usuarios.

Hubo un enfoque muy grande en iterar constantemente en esta etapa más que en ningún otra, creímos que era de alta prioridad la experiencia del usuario en nuestros prototipos, intentando responder a todas las necesidades de los usuarios.

Testeo

En la etapa de testeo, ponemos el prototipo en manos de los usuarios para ver cómo interactúan con él. Realizamos pruebas de usabilidad una vez más y obtenemos feedback valioso, lo que nos ayuda a identificar mejoras y pulir detalles para asegurar una experiencia fluida y satisfactoria en el usuario.

Pruebas de usabilidad 2.0

Objetivo: Revelar cualquier defecto en el flujo de las tareas principales de los usuarios en el prototipo

Hipótesis: Creemos que los usuarios van a tardar menos en completar sus tareas que el primer testeo.

Hipótesis: Creemos que los usuarios van a tardar menos en completar sus tareas que el primer testeo.


Resultado:

Conclusiones: Testeo

Conclusiones: Testeo

Nuestra conclusión del testeo es que esta etapa nunca se va a cerrar, y que nos va a permitir mantener una relación con el usuario y evaluar sus experiencias en la app. Por otro lado, se puede ver que los resultados mejoraron a lo que era la app anterior.

Nuestra conclusión del testeo es que esta etapa nunca se va a cerrar, y que nos va a permitir mantener una relación con el usuario y evaluar sus experiencias en la app. Por otro lado, se puede ver que los resultados mejoraron a lo que era la app anterior.

Feedback final

"Incluye funcionalidades interesantes, complejas pero que suman mucho a la aplicación. Habría que encontrar la forma de explicarlas para que cualquiera las pueda aprovechar."

"El prototipo es muy intuitivo con colores coherentes a la marca"

"La navegación es completa y se puede completar el flujo principal con facilidad."

Siguientes pasos

Siguientes pasos

Muchas Gracias

Muchas Gracias

Muchas Gracias

Analizar feedback continuamente

Crear una guía detallada para desarrolladores

Iterar sobre los componentes existentes

Aplicar un proceso de onboarding