Panap
App que busca promover la creatividad en la cocina, ofreciendo un espacio digital donde los usuarios puedan descubrir nuevos sabores, compartir sus propias recetas y llevar un registro ordenado de sus creaciones.
2025
Cliente: Proyecto final de Máster UX/UI, CEI, Madrid, España
Design Thinking
OBJETIVO
La app permite acceder a un conjunto de recetas predefinidas, creadas específicamente para la plataforma, además de ofrecer la posibilidad de que cada usuario pueda registrar sus propias recetas o guardar aquellas que encuentre en internet.
ROL
UX/UI designer
Observar
Sintetizar
Idear
Diseñar
DURACIÓN
Investigación y Prototipo: 1 mes
1. Observar
En esta fase se enfoca en analizar cómo las personas se relacionan con la cocina, la creatividad culinaria y el uso de plataformas digitales para descubrir, crear y organizar recetas.
A través de los siguientes enfoques:
Desk research | Netnografía | Research Questions | Benchmarking | DAFO | Cuestionario | Entrevista
Se recopilo información clave que permitió diseñar una experiencia intuitiva, inspiradora y alineada con las expectativas reales de los usuarios.
2. Sintetizar
A partir de los datos obtenidos se definen los principales problemas a resolver y se construye una comprensión más profunda del usuario.
A través de los siguientes enfoques:
User Persona | Mapa de Empatía | Customer Journey | Matriz de Necesidades
Al profundizar en el análisis, se identificaron diversos puntos débiles en la experiencia de los usuarios, quienes suelen utilizar múltiples aplicaciones y recursos con distintos fines: notas sueltas, capturas de pantalla de recetas, enlaces guardados, listas de compras y recetas en papel o anotaciones que con frecuencia se pierden.
Esta fragmentación genera desorden y dificulta el acceso a la información.
3. Idear
En esta etapa se exploran distintas alternativas para dar respuesta a los hallazgos obtenidos, definiendo el enfoque del producto y las funcionalidades que aportan mayor valor al usuario.
A través de los siguientes enfoques:
Findings & Insights | Matriz de Utilidad y Viabilidad | In-Out | MoSCow | Propuesta de Valor | Business Model Canvas
Como resultado, se planteó una plataforma orientada a reunir en un único lugar todo lo relacionado con la elaboración de pan casero: descubrir recetas, registrar preparaciones propias, guardar contenido desde la web y organizar los ingredientes mediante una lista de la compra integrada.
4. Diseñar
Esta etapa implica la creación de interfaces, flujos de navegación y estructuras de contenido que respondan a las necesidades identificadas, priorizando la usabilidad, la claridad y la coherencia visual.
A través de los siguientes enfoques:
Sitemap | Flowchart, recetas prestablecidas | Flowchart, recetas propias | Flowchart, recetas web | Wireframe, app | Wireframe, landing page | Moadboard | Branding | Sistema de diseño | Pantallas y secciones | Testing de usuarios | Análisis de accesibilidad
Durante este proceso, se desarrolló el prototipo interactivo que permitió representar de manera concreta las principales funcionalidades de la app, como crear recetas propias, guardar recetas desde distintas plataformas e incluir la lista de la compra.
El prototipo fue sometido a testeo de usabilidad utilizando la herramienta Maze, lo que permitió evaluar la comprensión de los flujos, la facilidad de uso y la eficiencia en la realización de tareas clave.
Moodboard
Branding
Panap surge de la unión entre “Pan” y su reflejo “nap”, un juego de palabras y sonidos que también evoca “Pan App”, la aplicación dedicada al pan casero.
Su isologo representa la unidad del proceso artesanal: la forma del pan, el bol donde la masa crece y la rebanada que se comparte.
Un diseño que transmite calidez, tradición y conexión, resumiendo en una sola imagen todo el universo del pan hecho en casa.
Sistema de Diseño
Foundations | Color
La paleta de Panap se inspira en los tonos naturales del pan y su entorno artesanal. Sus tonos evocan la harina, la madera y el dorado del horno.
El azul profundo (#083C76) es el color principal: transmite confianza, serenidad y tradición.
Se inspira en los manteles a cuadros azules y blancos que acompañaban las recetas de la abuela,
símbolo de hogar y de momentos compartidos en familia. El beige dorado (#E8D7AA) complementa con calidez y equilibrio, recordando al pan recién hecho.
Juntos crean una paleta armónica, accesible y cercana, que refleja la esencia artesanal de Panap.
Foundations | tipografías
La tipografía elegida para la marca es Sunday, una fuente con carácter desenfadado transmitiendo cercanía y naturalidad. Su trazo redondeado y orgánico refuerza la idea de una marca hecha a mano, vinculada al mundo artesanal.
En el diseño de la aplicación, se utiliza Alegreya para los títulos principales, aportando elegancia, calidez y personalidad.
Como tipografía secundaria, se emplea Roboto, una fuente moderna y legible que complementa el estilo principal, asegurando una lectura fluida y accesible en todos los dispositivos digitales a partir de los 17px de legibilidad.
Wireframe
Secciones y Pantallas
Splash screen | onboarding
La pantalla de inicio, Splash screen, presenta la identidad visual de la marca, dando la bienvenida al usuario con una primera impresión cálida y coherente con el universo de Panap.
A continuación, se desarrolla el onboarding, compuesto por tres pantallas explicativas que introducen las principales funciones de la app. Cada una combina ilustraciones y textos breves, diseñados para comunicar de forma clara y atractiva el propósito de cada herramienta, reforzando al mismo tiempo la personalidad y esencia visual de la marca.
Recetas preestablecidas
En la sección Panes Panap, el usuario puede explorar todas las variedades de pan disponibles junto con sus respectivas recetas.
Por ejemplo, en la receta de Baguette, se muestra toda la información completa: imagen, video y un menú dividido en Ingredientes, Pasos y Lista de la compra, facilitando una experiencia de cocina guiada y práctica.
Además, la app permite agregar anotaciones personales, así como comentar y valorar cada receta, fomentando la interacción y el intercambio de experiencias dentro de la comunidad Panap.
AÑADIR RECETA PROPIA
En la pantalla Mis Panes, el usuario puede agregar sus propias recetas siguiendo la misma plantilla de Panes Panap, manteniendo la estética y organización de la app.
Solo debe completar los campos paso a paso y guardar los datos.
Al finalizar, la nueva receta se incorpora automáticamente a su colección personal.
AÑADIR RECETA WEB
En la pantalla Mis Panes, el usuario puede agregar recetas desde la web completando los campos de título, descripción y URL.
Al seleccionar el botón “Insertar”, la receta se guarda automáticamente en la lista de Recetas Web, quedando organizada junto al resto de sus creaciones.
Lista de la compra y Perfil
En la pantalla Mi Perfil, el usuario puede acceder a distintas funcionalidades y visualizar su foto de perfil.
Entre ellas se encuentra la Lista de la compra, que se actualiza automáticamente al agregar una nueva receta mediante el botón “+”, facilitando la organización de los ingredientes de forma práctica y rápida.
LANDING PAGE
La Landing Page inicia con una sección Hero, que destaca el mensaje principal de la marca y una CTA central, “Descargar app” como única acción prioritaria.
A continuación, se presenta la sección de Funcionalidades, donde se explican las principales funciones de la aplicación de forma visual y concisa.
Finalmente, el footer incluye el logo, enlaces a redes sociales, y el acceso a las políticas de privacidad y cookies, completando la estructura de la página con claridad y coherencia visual.
Testing con usuarios
testing en maze | participan 10 usuarios
Análisis de accesibiliad
Panap ha sido diseñada con el objetivo de garantizar la accesibilidad para todos los usuarios, siguiendo las pautas establecidas por la Web Content Accessibility Guidelines (WCAG) 2.2.
CONCLUSIÓN
Trabajar en Panap mediante la metodología Design Thinking me permitió comprender la importancia de diseñar desde las necesidades reales del usuario y no desde una solución preconcebida. Cada etapa del proceso aportó una perspectiva diferente y me ayudó a tomar decisiones de diseño con mayor fundamento.
Uno de los principales aprendizajes fue entender que una primera idea no tiene por qué ser la solución definitiva. A través de las pruebas y del feedback de los usuarios, pude identificar aspectos que necesitaban ser revisados, replantear algunas decisiones y mejorar progresivamente la propuesta. Esto me permitió entender el valor de probar las ideas antes de dar por finalizado un diseño.
Este proyecto reforzó mi forma de abordar el diseño como un proceso de investigación, empatía, experimentación y mejora continua, donde el resultado final parte de comprender el problema y las necesidades de las personas para las que se está diseñando.
