Año
Julio 2025
Rol
UX/UI
Herramientas
Figma
Adobe Illustrator
Adobe Photoshop
Yee-Haul es un proyecto que surge del reto de desarrollar una aplicación desde cero, abarcando todas sus fases: investigación, diseño y prototipado.

En la primera fase, "observar", me dediqué a comprender el contexto y a explorar en profundidad las necesidades de los usuarios. Para ello utilicé técnicas como Desk research, Netnografía, Research questions, Benchmarking, DAFO, Encuestas y Entrevistas, que me permitieron recopilar y contrastar información valiosa sobre el mercado, la competencia y los hábitos de los potenciales usuarios. Todo este material sirvió como base para la posterior fase de síntesis, donde se organizaron y dieron sentido a los hallazgos. (Pulsar cada diapositiva para ampliar)
Desk research
Desk research
Netnografía
Netnografía
Research questions
Research questions
Benchmarking
Benchmarking
DAFO
DAFO
Encuesta
Encuesta
Encuesta
Encuesta
Entrevista
Entrevista
Tras recopilar toda la información en la fase de "observar", llegó el momento de darle forma y significado. En la etapa de "sintetizar" transformé datos y respuestas en una mirada más humana y tangible sobre los usuarios. A través del User Persona, el Mapa de Empatía, el Customer Journey y la Matriz de Necesidades, conseguí poner cara a los hallazgos, entender cómo piensan, qué sienten y qué obstáculos encuentran en su día a día. Este paso me permitió convertir la investigación en una base clara e inspiradora para avanzar con soluciones realmente conectadas con las personas.
User persona
User persona
User persona
User persona
Mapa de empatía
Mapa de empatía
Mapa de empatía
Mapa de empatía
Customer journey
Customer journey
Customer journey
Customer journey
Matriz de necesidades
Matriz de necesidades
En la fase de "idear", el foco estuvo en transformar la comprensión del usuario en oportunidades de diseño y propuestas de valor. A partir de los Findings e insights obtenidos, utilicé distintas metodologías como la Matriz de utilidad y viabilidad, la técnica In-Out y la priorización MoSCoW, que me ayudaron a filtrar y organizar las ideas más relevantes. Este proceso culminó en la definición de la Propuesta de Valor y el Business Model Canvas, dos herramientas clave para dar coherencia al proyecto y sentar las bases de un modelo sostenible y centrado en el usuario.
Findings e insights
Findings e insights
Matriz de utilidad y viabilidad
Matriz de utilidad y viabilidad
In-Out
In-Out
MoSCoW
MoSCoW
Propuesta de valor
Propuesta de valor
Business Model Canvas
Business Model Canvas
En la fase de "diseñar", el reto fue dar forma visual y funcional a la aplicación a partir de todo lo aprendido. El proceso comenzó con la creación del SiteMap y el Flowchart, que estructuraron la arquitectura y los flujos principales. Después, desarrollé wireframes y un sistema de diseño que asegurara coherencia y consistencia en todos los elementos visuales. A continuación, detallé las pantallas y secciones de la app y la web, siempre teniendo en cuenta la experiencia del usuario. Finalmente, realicé tests con usuarios y un análisis de accesibilidad, lo que permitió validar y mejorar la propuesta para garantizar que fuera clara, usable e inclusiva.
SiteMap
SiteMap
Flowchart
Flowchart
Wireframe
Wireframe
Explicación del sistema de diseño
Explicación del sistema de diseño
Explicación del sistema de diseño
Explicación del sistema de diseño
Secciones y pantallas de tu app y web
Secciones y pantallas de tu app y web
Testing con usuarios
Testing con usuarios
Análisis de accesibilidad del diseño
Análisis de accesibilidad del diseño
Así quedó finalmente el resultado del proyecto: una aplicación acompañada de su versión web en formato landing page, pensada para presentar la propuesta de manera clara y atractiva. La landing funciona como puerta de entrada al universo de la app, comunicando su valor, funcionalidades principales y estilo visual, mientras que la aplicación refleja todo el trabajo de investigación, síntesis, ideación y diseño realizado durante el proceso.

Pantallas de Yee-Haul

A continuación, se presentan dos videos demostrativos que permiten visualizar la experiencia de navegación tanto en la aplicación como en la landing page. En ellos se muestra cómo interactúa el usuario con las diferentes pantallas, secciones y funcionalidades, ofreciendo una visión clara del flujo y la usabilidad del proyecto.
La aplicación comienza con un onboarding de tres pantallas, que introduce al usuario en la propuesta y explica de manera visual sus principales funcionalidades. Después, se pasa al inicio de sesión, donde es posible crear un perfil personalizado añadiendo una foto.
Una vez dentro, se accede a la pantalla de inicio, en la que se muestran una pestaña de tiempo y una prenda recomendada del día, además de un acceso al perfil, desde el cual el usuario puede puntuar la app.
Desde allí, la navegación se ramifica en diferentes secciones:
Ropa: reúne todas las prendas del usuario, organizadas por categorías como partes de arriba, partes de abajo y favoritas. Además, permite añadir nuevas prendas y pulsar sobre cada una para ver detalles y descubrir ropa relacionada.
Explorar: un espacio de inspiración con outfits de famosos divididos por estilos. Al seleccionarlos, se pueden descubrir las prendas que los componen y cuáles de ellas coinciden o se parecen a las que el usuario ya tiene en su armario.
Estilo: concentra los outfits personales del usuario organizados por estilos, e incorpora el creador de outfits, una sección innovadora que genera combinaciones con coherencia estética según el estilo seleccionado.
De esta forma, la app integra gestión de armario, inspiración y creación de looks, ofreciendo al usuario una experiencia completa y personalizada.
La landing page tenía como objetivo presentar la aplicación de forma visual y atractiva, transmitiendo su esencia y principales funcionalidades de un solo vistazo. Su diseño buscaba captar la atención del usuario, generar interés y motivar la descarga de la app. En ella se explicaba en qué consiste la aplicación, destacando su propuesta de valor: gestionar tu armario, inspirarte con outfits y crear combinaciones personalizadas según tu estilo.
Por último, muestro cómo organicé el proyecto en Figma, estructurándolo de manera clara y funcional. El archivo se dividió en diferentes secciones: estilos, donde se definieron tipografías, colores y espaciados; el UI Kit, que reúne todos los componentes reutilizables; y finalmente el diseño y prototipado, donde se desarrollaron las pantallas y se construyeron los flujos interactivos de la aplicación. Esta organización permitió mantener coherencia visual, agilidad en el diseño y facilidad a la hora de iterar en el prototipo.
Estilos
Estilos
UI Kit
UI Kit
Diseño
Diseño
Componentes
Componentes
La realización de este proyecto me permitió recorrer todas las fases del diseño, desde la investigación hasta el prototipado, aplicando herramientas y metodologías reales del sector. Gracias a ello entendí la importancia de observar, sintetizar, idear y diseñar de forma estructurada, siempre con el usuario en el centro. Además, reforcé mi manejo de Figma y la organización de un sistema de diseño coherente, lo que me ayudó a transformar un reto en una propuesta digital completa, funcional y atractiva.
Back to Top