El usuario no sabe exactamente cuestiones básicas que lo ayudarán a guiarse antes, durante y después de la interacción con el objeto.
Además, hay que considerar varios casos de uso donde, por lo general, el usuario puede sentirse mal o la persona que interviene debe interpretar los resultados.
La interfaz no comunica la secuencia de acciones:
¿Presiono el botón y estará listo para empezar a medir?
¿Debo esperar un sonido antes de empezar?
¿Cómo sé que estoy haciendolo bien?
¿Cuánto tiempo tardará?
¿Se apagó o sigue midiendo
¿Tiene batería?
Evaluación Heurística
Priorización según severidad
Priorización según impacto
Propuesta de mejoras
Autoevaluación
Trabajar en este reto me ayudó a ver de forma más clara lo que dicen los capítulos 1 y 2 de Norman: muchas veces los problemas no están en las personas, sino en cómo los objetos comunican lo que se puede hacer con ellos. Al analizar un termómetro digital, me di cuenta de que algo tan cotidiano puede generar dudas muy básicas si su diseño no acompaña bien al usuario.
Lo que más aprendí fue la importancia de observar el entorno real en el que se usa el objeto. No es lo mismo revisar un termómetro tranquila en casa que usarlo con un niño enfermo, con poca luz o cuando uno tiene prisa. Entender estos contextos me hizo ver mejor dónde aparecen las brechas de ejecución y evaluación, y por qué es tan importante entender el problema real antes de buscar soluciones.
También me gustó aplicar la evaluación heurísticas a un objeto de forma práctica, aunque lo más difícil fue priorizar las mejoras sin dejarme llevar por mi intuición. Consideré varios criterios como la severidad, la frecuencia o el impacto, para tener una mirada más objetiva y poder jerarquizar mejor las decisiones.
En resumen, creo que la práctica me sirvió para mirar los objetos cotidianos con más atención y para valorar todavía más el rol del usuario en todo proceso de diseño.
Me quedo con la idea de Norman de que el buen diseño hace que las cosas “hablen” por sí mismas, y eso es algo que quiero seguir aplicando para que la experiencia de usuario sea “intuitiva”.
Varios componentes fueron mejorados con el fin de optimizar y facilitar el uso compartido de ellos y sus variables, además de extender en todo el Design System tokens que puedan ser utilizados y escalados automáticamente para evitar errores.
Entre los cambios que se realizaron, están los siguientes:
Paleta de color. Variables intermedias para utilizar en estado de botones, como press status
Reagrupación de componentes. Con variantes adicionales para modificarlos bajo el mismo componente. Por ejemplo, las cards con variantes de Size (Med, Small), Type (Default, Skeleton, Compact), Format (Horizontal, Vertical)
Íconos. Con nuevas variantes de Size (Small, Med, Large), Type (Filled, Outline, OFF, ON)
Menues. Integrando el main navbar con el header de titulo y de favoritos/recientes
Avatars. Con variantes nuevas de tamaño (small, med) y estado (ON, OFF)
Spacing. Con variantes desde XXS=4 hasta XL=48 y Full=999
Tal como recomienda la Fase 1. Exploración Inicial, me enfoqué en entender el contexto de Headspace como producto.
En el adjunto de Análisis de Headspace como marca, incluí detalles sobre su Guía de Marca, sus orígenes y un resumen que aborda:
Mensaje Central > Meditation Made Simple
Personalidad > Amigable, Empática, Cálida y Confiable
User Personas > Gente que quizás nunca meditó y necesita algo simple
Propuesta de valor > Saturación mental vs. Calma
Diferencial > Personalidad reconocible con ilustraciones y personajes además de lenguaje simple y accesible
Benchmarking
Utilicé plataformas como Mobbin o Pttrns para encontrar referencias de productos que sirvan como buenos ejemplos y así utilizarlos en mis bocetos. Ver Figma
Comencé ordenando y documentando todas las funcionalidades que debía tener el prototipo además de estados intermedios como creación de contenido y gestión del mismo.
Mapa de sitio para organizar las funciones básicas
Una vez definido el mapa de las funciones principales a incluir, comencé a bocetar posibles soluciones en un flujo completo que pudiese ser testeado
Bocetos originales preliminares
Del lápiz al mock-up en baja definición
Con el fin de poder trabajar mejor en el prototipo, digitalicé los bocetos a mano y comencé a diseñar en baja haciendo algunas modificaciones acorde avanzaba en el flujo.
En la foto de la izquierda, el boceto original. A la derecha, la misma pantalla diseñada en baja definición
Utilicé el siguiente prompt como instrucción en Figma Make para que generara el flujo completo de la aplicación:
Ayudame a crear en baja fidelidad un flujo completo para la app de Headspace que permita a usuarios B2B gestionar contenido en su propio marketplace para sus clientes. Debe contener las siguientes funcionalidades: Crear una cuenta B2B (profesionales) y completar el perfil de la organización (nombre, logo, descripción) Crear carpetas o secciones para organizar los contenidos publicados Publicar un nuevo recurso (por ejemplo, una meditación, un vídeo o un artículo breve) indicando título y descripción Subir archivos asociados al recurso (imagen, audio o vídeo) Asignar categorías o etiquetas al recurso para facilitar su búsqueda dentro del marketplace Definir el estado del recurso (borrador, publicado) y poder actualizarlo más adelante Editar o eliminar un recurso ya existente Consultar y gestionar la lista de recursos creados Guardar los cambios y confirmar la publicación del recurso en el marketplace El punto de partida estará en la pantalla actual de login donde si el usuario elige Registrarse con SSO, será dirigido a este flujo en particular que le permita elegir si es administrador de contenido de la empresa o usuario de esta empresa que quiere acceder a los recursos
Mantuve el foco en el ingreso con SSO para facilitar al usuario un rápido reconocimiento y acceso a la cuenta sin afectar el flujo de la app.
El SSO (Single Sign-On) permite que los usuarios accedan a varios sistemas con una sola cuenta, evitando múltiples contraseñas y pasos de inicio de sesión. Desde UX, mejora la experiencia al hacer el ingreso más rápido y sin fricciones
Gamificación
Dividí los pasos básicos de configuración de cuenta en 4 simples pasos para guiar y alentar al usuario a completarlos de forma efectiva y ludicamente
En la foto de la izquierda, el paso a paso completo de los objetivos a cumplir por el usuario. En la derecha, la barra de avance en el Tablero principal
A partir de la investigación sobre Headspace pude enmarcar el proyecto B2B dentro de una identidad clara, empática y accesible, y alinear mis decisiones de diseño con sus valores
Exploración Inicial
Los bocetos a mano me permitieron explorar rápidamente ideas y posibles flujos. Digitalizados en Figma en baja fidelidad, facilitó ordenar las pantallas y crear interacciones simples
Perspectiva de la AI
Utilicé Figma Make para generar la 2da iteración e incluir AI. Este enfoque me aportó un punto de vista diferente y me permitió considerar soluciones que no habían surgido en la fase manual
Resultado Final
En el tercer prototipo combiné las mejores ideas de los bocetos y de las propuestas generadas con IA. El resultado es una versión más clara y completa alineada con integrar el flujo de usuarios B2B
Pública 
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.