Este proyecto corresponde al reto final de la asignatura y consiste en el diseño, evaluación e iteración de un prototipo de alta fidelidad para un marketplace B2B de Headspace. El objetivo de la propuesta es permitir que las organizaciones creen su propio espacio dentro de la plataforma y gestionen contenidos de bienestar para sus equipos, manteniendo el lenguaje visual y la experiencia calmada característica de Headspace.

A lo largo del proyecto se ha trabajado de forma progresiva el prototipado, la evaluación con usuarios y la mejora del diseño a partir del feedback obtenido, siguiendo un enfoque centrado en el usuario.

Prototipo inicial

En primer lugar, se desarrolló un prototipo inicial de alta fidelidad a partir del trabajo realizado en retos anteriores y del UI Kit previamente construido. Este prototipo recoge los escenarios planteados en el enunciado y permite navegar por los flujos principales de creación, organización y gestión de recursos dentro del entorno corporativo de Headspace.

A continuación se muestra el vídeo del prototipo antes de realizar las iteraciones, que sirve como punto de partida para la evaluación de la usabilidad.

Test de usabilidad de guerrilla

Una vez validado el funcionamiento básico del prototipo, se llevó a cabo un test de usabilidad de guerrilla con tres participantes. El test se realizó en dispositivos móviles, con el objetivo de evaluar la experiencia en un contexto lo más realista posible. Los participantes realizaron las tareas propuestas sin recibir ayuda, empleando la técnica de pensamiento manifiesto para verbalizar sus decisiones, dudas y expectativas durante la navegación.

Este proceso permitió detectar fricciones relevantes en la experiencia de uso, entre las que destacan la falta de claridad entre recursos en borrador y publicados, la ausencia de personalización visual de las carpetas y cierta confusión sobre las acciones disponibles dentro de la plataforma.

Iteraciones realizadas

A partir de los resultados del test, se priorizaron las fricciones detectadas en función de su impacto en la experiencia del usuario. El prototipo fue iterado para mejorar la jerarquía visual de los estados de los recursos, reforzar la comprensión de la estructura de la información y clarificar las acciones posibles dentro del entorno corporativo.

Estas iteraciones se orientaron a reducir la carga cognitiva del usuario y a facilitar una navegación más intuitiva, especialmente en un contexto de uso profesional donde la claridad y la eficiencia son clave.

Prototipo final

Tras aplicar las mejoras derivadas del testeo, se obtuvo un prototipo final más claro, consistente y alineado con las necesidades detectadas durante la evaluación. La propuesta resultante mejora la comprensión del estado de los recursos y refuerza la organización visual de los contenidos dentro del marketplace B2B de Headspace.

A continuación se puede acceder al prototipo final tras las iteraciones realizadas.

Enlace a Figma

Vídeo de presentación al cliente

Para cerrar el proyecto, se ha realizado un vídeo de presentación en el que se expone de forma clara y concisa el contexto del proyecto, el proceso de diseño, el test de usabilidad realizado y el resultado final tras las iteraciones. Este vídeo está planteado como una presentación a cliente o responsable del proyecto.

Muchas gracias a todos.

¡Hola a todos! En este primer reto de la asignatura he trabajado en la recreación de un prototipo de alta fidelidad de la aplicación Headspace, aplicando los principios básicos del prototipado vistos en el cuaderno de la asignatura.
El propósito principal ha sido llevar la teoría a la práctica, entendiendo cómo cada principio influye en la claridad visual, la coherencia del diseño y, sobre todo, en la experiencia del usuario dentro de una interfaz digital.

Durante el proceso, los principios aprendidos se convirtieron en una guía constante que me ayudó a tomar decisiones de diseño más conscientes. A continuación, resumo cómo los he observado o aplicado en mi trabajo con Headspace:

• Jerarquía visual:
  En la app se percibe claramente cómo los tamaños, colores y espacios guían la atención del usuario. Al replicarla, entendí la importancia de ajustar los estilos tipográficos y los espaciados para mantener ese equilibrio.
• Agrupamiento:
  Noté cómo la aplicación utiliza la ley de proximidad para organizar los iconos y las secciones, especialmente en las pantallas de meditación. Procuré mantener esas distancias para conservar el orden visual.
• Consistencia:
  Headspace es un ejemplo de coherencia visual. Mantiene un estilo minimalista y calmado reutilizando colores, iconos y patrones. Al recrearla, aprendí cómo la consistencia genera confianza y una experiencia más fluida.
• Economía y reutilización:
  Comprendí lo útil que es planificar una biblioteca de componentes reutilizables. Esto agiliza el trabajo y mantiene el diseño uniforme. Reutilicé algunos elementos en distintas pantallas, tal como hace la app original.
• Affordance:
  Me llamó la atención cómo cada elemento comunica su función sin necesidad de texto. Los botones, las tarjetas o los iconos se entienden a primera vista, lo que evita confusiones en la interacción.
• Reconocer antes que recordar:
  El diseño de Headspace es muy intuitivo: los elementos se presentan de forma que el usuario no necesita memorizar pasos. Esto me hizo ver la importancia de la simplicidad y de usar iconografía clara.

Este reto ha sido mi primer contacto real con la creación de un UI Kit completo y con un prototipo interactivo desde cero, y aunque ha sido un desafío, también ha sido una gran oportunidad de aprendizaje.

Al principio me costó entender qué información debía incluir en el UI Kit y qué partes iba a necesitar después. Crear los estilos, tipografías y componentes básicos me llevó más tiempo de lo esperado, pero me ayudó a comprender cómo se construye un sistema visual coherente.

También tuve dificultades con algunas interacciones en Figma, como el overlay o el gesto de pull to refresh, que no logré hacer funcionar correctamente. Aun así, el intento me sirvió para familiarizarme más con el panel de prototipado y con las distintas opciones de animación.

Lo más valioso de este proceso ha sido darme cuenta de que el diseño no se trata solo de estética, sino de estructura, orden y funcionalidad. Cada pequeño ajuste influye en cómo el usuario percibe la interfaz.

Enlace y vídeo de demostración

Aquí os dejo el vídeo demostrativo del prototipo interactivo, donde muestro los flujos solicitados en el reto, y el enlace al archivo en Figma para que podáis explorarlo:

Enlace al prototipo interactivo

Conclusión

Este primer reto me ha parecido una experiencia muy completa. Aunque ya había utilizado Figma antes, nunca lo había hecho con tanta profundidad. El hecho de tener que organizar componentes, crear interacciones y cuidar la coherencia me ha ayudado a mejorar mi forma de trabajar y a valorar más el proceso de diseño.

Sé que aún tengo mucho por aprender, especialmente en la parte de interactividad, pero me siento satisfecha con el resultado y con todo lo que he descubierto durante el camino.
Mi objetivo para los próximos retos es planificar mejor desde el inicio y seguir perfeccionando el uso del prototipado para que mis diseños sean cada vez más claros y funcionales.

Un saludo,
Jessica