Publicado por

Headspace Air

Publicado por

Headspace Air

Headspace B2B Prototipado de Alta Fidelidad y Evaluación con Usuarios Reto 4   Introducción y Contexto En este último reto de la…
Headspace B2B Prototipado de Alta Fidelidad y Evaluación con Usuarios Reto 4   Introducción y Contexto En este último…

Headspace B2B
Prototipado de Alta Fidelidad y Evaluación con Usuarios

Reto 4

 

Introducción y Contexto En este último reto de la asignatura, he abordado la fase final del diseño para el módulo B2B de Headspace («Headspace Air»). El objetivo ha sido evolucionar la propuesta desde los wireframes estructurales hacia un prototipo de alta fidelidad funcional, integrando estrictamente el sistema de diseño de la marca (tipografías, paleta de colores cálida y formas orgánicas) para lograr una experiencia realista y empática.

Metodología de Validación Más allá del diseño visual, el núcleo de esta práctica ha sido la validación empírica. Para ello, realicé un test de usabilidad remoto no moderado utilizando la herramienta Maze con una muestra de 6 participantes.

Evaluamos tres flujos críticos:

  1. Onboarding y configuración de empresa.

  2. Arquitectura de información (Creación de carpetas).

  3. Conversión (Publicación de contenido).

Principales Hallazgos e Iteración Gracias al análisis de mapas de calor (heatmaps) y métricas de uso, detectamos oportunidades de mejora que no eran evidentes en la fase de diseño:

  • Eficiencia: Aunque la Tasa de Éxito fue del 100%, detectamos una alta carga cognitiva en la tarea de organización, con tiempos medios superiores a los 3 minutos.

  • Fricción Crítica (Visibilidad): En el flujo de publicación, registramos una tasa de clics erróneos (Misclick Rate) del 66.7%. Los datos revelaron que el botón principal de acción («Call to Action») quedaba oculto bajo el pliegue de la pantalla (below the fold), obligando a un scroll que los usuarios no anticipaban.

Solución Final Basándome en estos datos, iteré el diseño final ajustando la jerarquía visual e implementando un Sticky Footer para garantizar que la acción principal esté siempre visible, asegurando así la conversión y reduciendo la frustración del usuario.

Pero no quise quedarme con esta versión. Aprovechando las nuevas herramientas de prototipado con AI, decidí trabajar más en la aplicación y generar una v2 de la misma, con interacciones más reales en inputs, transiciones y creación de folders.

Debate0en Headspace Air

No hay comentarios.

Publicado por

R4. Prototipado y evaluación de la usabilidad y caso de estudio

Publicado por

R4. Prototipado y evaluación de la usabilidad y caso de estudio

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…
Este proyecto corresponde al reto final de la asignatura y consiste en el diseño, evaluación e iteración de un…

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.

Debate0en R4. Prototipado y evaluación de la usabilidad y caso de estudio

No hay comentarios.