Caso práctico UX/UI
BuenCafé
Saborea el mundo desde tu hogar
ROL: diseñadora UX/UI
TIEMPO: 4 meses
PROCESO: Design Thinking/Extremo a extremo
Proyecto UX curso en Coursera
¿Qué es BuenCafé?
BuenCafé es una nueva app que ofrece venta de cafés de especialidad y, como reclamo, riquísimos packs de desayuno o merienda con productos exclusivos.
Objetivo del proyecto
El propósito de BuenCafé es ofrecer una app donde se puedan realizar compras pensando en las necesidades del usuario, haciéndola inclusiva y accesible para el mayor número de usuarios.
El desafío
- Como nueva app de venta de café que se introduce en el mercado, debe hacerse con un puesto destacado entre sus competidores.
- Facilitar el uso de la app a cualquier tipo de usuarios.
- Llegar al mayor número de usuarios.
La solución
- Ofrecer packs de desayunos o meriendas como reclamo atractivo donde se pueda probar el producto principal, el café.
- Una app inclusiva y accesible rompe la barrera que algunos usuarios puedan tener, estando disponible para un mayor número de usuarios.
Mi Rol
Como diseñadora de UX/UI de extremo a extremo durante todo el proyecto, he profundizando en diversos procesos hasta llegar al diseño final.
Mis responsabilidades fueron
- Empatizar con los usuarios
- Encontrar los puntos de dolor
- Definir la declaración del problema
- Idear soluciones
- Crear la arquitectura de la información
- Prototipado en baja y alta fidelidad
- Testeo de los prototipos
- Iteración
Metodología
Utilicé Design Thinking por ser apropiado para crear soluciones en proyectos que parten de «cero» y aborden los problemas reales de los usuarios, siendo éstas funcionales y razonables.
EMPATIZAR
DEFINIR
IDEAR
PROTOTIPAR
PROBAR
1. EMPATIZAR
Empaticé con los usuarios realizando entrevistas primarias a 5 personas. Quería saber si habían tenido experiencias anteriormente con app similares. Para mi sorpresa, la mayoría ya habían probado y empezaron a contarme los problemas que habían tenido. Tras esta investigación detecté cuáles eran los puntos de dolor.
Puntos débiles
Alergias
Algunos usuarios tienen alergias y necesitan saber qué ingredientes contienen todos los alimentos dentro de los packs.
Gustos
Se mencionó que no a todo el mundo le gustan todos los sabores de los alimentos por lo que habría que dar varias opciones a elegir en los packs.
Seguimiento
El seguimiento es importante para algunos usuarios por lo que hay que incluirlo en la app.
Rapidez
Lo que más solicitan los usuarios es la simplicidad en los pasos a seguir para hacer un pedido.
2. DEFINIR
PERSONA
Para encontrar la mejor solución al problema, definí quién va a usar mi solución y quién sería el posible cliente de BUENCAFÉ. Silvia era la persona ideal ya que trabaja mucho y dispone de poco tiempo por lo que una app eficiente y funcional es lo que necesita.
“Tener todo controlado tanto en casa como en el trabajo me da tranquilidad.”
Silvia
Edad: 34
Educación: Escola Universitària Formatic Barcelona Ubicación: Barcelona
Familia: separada. Tiene una hija de 7 años
Ocupación: periodista
Silvia vive en Barcelona. Trabaja de periodista y es consumidora de café. A veces también suele encargar una merienda especial para ella y su hija. Su pequeña es alérgica a algunos alimentos y no le gustan algunos sabores como la vainilla o los cítricos. Silvia es una persona muy ocupada y le gusta relajarse y disfrutar con su hija de una rica merienda siempre que puede.
Objetivos
• Satisfacer a su hija tomando una merienda juntas.
• Disfrutar de un rico café.
• Descansar mientras me traen la merienda a casa.
Frustraciones
• Me preocupa no ver los alergenos de los alimentos.
• Me preocupa que a mi hija no le guste algunos sabores.
MAPA DEL RECORRIDO
Nuestro usuario Silvia realiza la compra de una merienda para tomar en casa con su hija.
3. IDEAR
Generé un amplio conjunto de ideas por diferentes medios. Primero realicé una auditoría de la competencia para conocer las fortalezas y debilidades de los competidores. Utilicé la lluvia de ideas sobre posibles soluciones utilizando el método How might we, haciendo una sesión Crazy 8’s y creando un guión gráfico y un flujo de usuario.
Competidores
Seleccioné a tres competidores directos y uno indirecto. Quería saber cómo enfocaban la web tanto en diseño como la arquitectura de la información.
En todos los competidores el producto estrella es el café que ofrecen para tomar en local. Tan solo uno de ellos tiene reparto a domicilio. Me pareció interesante la opción que tenía de realizar compras mediante suscripción mensual, siendo esta más económica.
Guión gráfico de primer plano
Esquemas de página
Para dar forma a las ideas obtenidas anteriormente, comencé por realizar cinco esquemas en papel de cada una de las pantallas que tendría la app, más un esquema final de los apartados que consideré más apropiados.
A continuación muestro los esquemas en papel de la página de inicio donde realicé 5 diseños diferentes y en el 6 reuní las secciones que me parecieron más interesantes:
4 y 5. PROTOTIPADO Y PRUEBAS
Prototipo en Baja Fidelidad
A continuación creé en Figma un prototipo de baja fidelidad de los esquemas finales obtenidos en el proceso anterior y lo envié a una selección de usuarios para hacer un estudio de usabilidad.
Entre los comentarios de los usuarios se habló de ofrecer más de una imagen del producto y que la página de seguimiento ofreciera información más detallada.
Prototipo en Alta Fidelidad
Posteriormente pasé a crear el modelo de alta fidelidad y realicé una segunda ronda de estudio de usabilidad.
Los usuarios sugirieron destacar el perfil de sabor de los cafés y que se pudiera elegir entre café molido o en grano.
Diseño final
Una vez pulidos los últimos detalles tras la investigación, el diseño final quedó así.
Próximos pasos
Ampliaría la página de inicio
Incluiría la opción de realizar suscripciones
Crearía una página de arranque de la app
Consideraciones de accesibilidad
Para la accesibilidad he tenido en cuenta la tipografía, su tamaño y el contraste entre colores.
La arquitectura de la información la realicé buscando la fluidez y sencillez de los contenidos.
El tamaño, distribución y espaciados, los creé pensando en la facilidad de uso para el usuario.
Diseño visual
Tipografías
Merryweather
Titular h1 / 39px
Titular h2 / 31px
Titular h3 / 25px
Titular h4 / 20px
Open Sans
Body grande / 20px
Body normal / 16px
Body pequeño / 12px
Colores
Botones y Enlaces
¿Qué he aprendido?
En este, mi primer proyecto, todo ha sido nuevo para mi. Aprendí a empatizar con los usuarios, a investigar siguiendo los pasos UX, a organizar la arquitectura de la información, a hacer esquemas de páginas, a crear prototipos en Figma, y un sin fin de pasos más para la creación de este proyecto.
¡GRACIAS!
Agracezco tu tiempo y atención para la revisión de este trabajo.