diseño ui
CookBook
Organiza, personaliza y comparte todas tus recetas favoritas en un solo sitio, retomar la tradición del recetario pero de manera digital para volver a la comida casera. UI design de una aplicación de recetas.
Resumen del proyecto
Proyecto individual
Diseño de la interfaz
Rol
Diseñadora UX/UI
Duración
8 semanas
Programas
Figma
DESAFÍOS
El desafío del proyecto es crear una interfaz para la aplicación de rectas CookBook, diseñada para que los usuarios puedan organizar y administrar sus recetas de manera sencilla. Enfatizando en el acto de compartir, CookBook permite publicar y compartir recetas inspirándose en la tradición de intercambiar recetarios y conocimientos culinarios.
OBJETIVOS
Aplicar conocimientos sobre composición y retículas
Introducir estilos, colores y tipografía
Tener en cuenta la estructura básica de navegación
BENCHMARKING
Falta un sistema simple y personalizable para organizar las recetas
Los competidores se centran en descubrir, valorar y compartir recetas de usuarios que tienen la opción de guardarlas.
Características teniendo en cuenta el mercado
Búsqueda mediante filtros para que el usuario pueda encontrar recetas a partir de sus características
Categorías para recetas ordenar recetas
Etiquetas, sistema no-exclusivo de organización
Sección de recetas favoritas
Recetas recientes
Posibilidad de escanear la receta en papel y pasarla a texto digital
Importar recetas de internet, redes sociales u otras aplicaciones
Publicar recetas en la aplicación
Opción de crear combinaciones de recetas y guardarlas para cuando sea necesario (ejemplo: Entrante, principal y postre). No es un calendario ni organizador de menús, es una agrupación de recetas independientemente de la categoría y etiquetas para tenerlo a mano
Link:
MOODBOARD
La cocina tradicional genera una sensación de comfort, inspirándome en colores terrosos y rústicos remito a la comida casera y la costumbre de guardar recetas para compartirlas con allegados
Tonos cálidos y acogedores combinados con elementos modernos y simples, buscan una estética relajada y organizada para la aplicación.
ESBOZOS
Generar composiciones y dibujar a mano para fomentar la creatividad durante la ideación de las pantallas clave
Esbocé diferentes variaciones de las pantallas de registro, inicio y una receta a detalle para luego trabajar sobre ellas en los wireframes de baja fidelidad.
Registro
Inicio
Receta a detalle
LOW-FI WIREFRAMES
CookBook: Organiza, personaliza y comparte todas tus recetas favoritas en un solo sitio
Cookbook es una aplicación diseñada para ayudar a los usuarios a organizar y administrar sus recetas de manera simple usando filtros personalizados. Una vez escaneada o importada la receta, se puede categorizar según las necesidades del usuario. Incluye una sección de favoritos y una sección para crear y personalizar combinaciones de recetas.
UI KIT
Invertir tiempo en crear un sistema de diseño ayudará en los siguientes pasos del proyecto
Para los wireframes de alta fidelidad, a parte de crear la guia de estilo, he diseñado todos los componentes con variantes para poder modificarlos con facilidad y asegurar la coherencia en la aplicación.
Link:
HI-FI WIREFRAMES FLOW
Todas las acciones son importantes
A partir de los wireframes de alta fidelidad he detallado las diferentes acciones de cada pantalla para asegurarme de que el prototipo contenga las diferentes tareas y flujos que puede realizar el usuario.
Link:
USER FLOWS
Diseñar de manera fluida, eficiente y lógica
He creado tres user flows los cuales mapean el recorrido que sigue el usuario al interactuar con la aplicación, éstos definen las acciones más frecuentes que se pueden hacer.
Link:
PROTOTIPO
El primer prototipo de muchos para asegurar una buena experiencia para el usuario
La vista previa de CookBook se puede ver en el video donde se pueden ver cómo se realizan las tareas definidas anteriormente, o clicando en el botón.
SIGUIENTES PASOS
Testear, iterar y rediseñar para mejorar
Testear
El primer paso sería testear cómo los usuarios interactúan con el primer prototipo para identificar áreas de mejora en usabilidad y navegación de la interfaz.
Iterarción de diseño
A partir del feedback y los insights obtenidos de las pruebas de usabilidad, ajustar el diseño para optimizarlo.
Diseño de animaciones y microinteracciones
Para aportar una mejor experiencia de usuario, se crearían animaciones para acciones clave haciendo la interacción con la interfaz de la aplicación más intuitiva y atractiva.
REFLEXIÓN
Enfrentarse al miedo del lienzo vacío
Este proyecto ha sido muy divertido y enseguida me he encontrado inmersa en el, ¡incluso diseñando más pantallas de las que tenia previstas en un inicio! Aunque empecé un poco reacia por el temido lienzo vacío, el proceso de ideación y creación me ha ayudado a soltarme y poder explorar con libertad estilos, colores, tipografías y composiciones.¿Qué mejoraría? Haber hecho wireframes de aquellas pantallas que no tenia previstas diseñar, al haberme dejado llevar por el proyecto quise hacer el diseño UI de toda la aplicación pero en vez de seguir el proceso planteado al inicio, decidí hacer los wireframes de baja fidelidad sin esbozar diferentes composiciones. Sin duda habría ahorrado tiempo haciendo unos sketches rápidos para tener una visión general que ir probando diseños y combinaciones sin una referencia clara. ¡Hay que ser más amigo del lápiz y el papel!
OTROS PROYECTOS UX/UI
Proyectos diseño de producto