Proyecto: Marketplace B2B para Headspace

¡Hola a todos! Comparto con vosotros el resultado final del Reto 4, la culminación de trabajo del prototipado y diseño de experiencia de usuario para el ecosistema de Headspace.

 Sobre el Proyecto

La propuesta de espacio corporativo dentro del nuevo Marketplace B2B de Headspace. El objetivo es permitir que las organizaciones gestionen su propio contenido de bienestar (pausas activas, guías de enfoque y meditaciones) con la estética y filosofía de la marca.

 Resultados Clave

El proceso de testeo reveló que, aunque la estética de Headspace transmite calma, la precisión en las acciones de gestión (como guardar borradores o cancelar ediciones) es vital para el entorno corporativo. La iteración final optimiza la toma de decisiones del usuario, reduciendo el riesgo de pérdida accidental de datos.

Enlaces de Interés

• Vídeo de Presentación

• Enlace al Prototipo en Figma https://www.figma.com/proto/xoQ3HBtHvTtBXKBxDiSApP/R2_prototipo_Sergio_Bustamante?page-id=121%3A546&node-id=121-547&viewport=342%2C35%2C0.75&t=BOM8LLNYNvhae5dj-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=121%3A547

Espero que disfrutéis explorando tanto como yo he disfrutado diseñándolo. ¡Cualquier feedback es bienvenido!

Análisis de Objetos Cotidianos

Introducción

Este informe presenta un análisis detallado de dos objetos de uso doméstico bajo la lente de los principios de diseño de Don Norman y las heurísticas de Jakob Nielsen. El objetivo es identificar fricciones cognitivas y proponer mejoras que reduzcan las brechas de ejecución y evaluación, permitiendo que la interfaz «hable» el mismo idioma que el usuario.

Caso 1: Panel de Control de Secadora Doméstica (Beko)

Objeto: Panel con botones físicos y rueda analógica.

1. Análisis del Problema

Tras analizar el objeto, se detectan fallos críticos de usabilidad:

• Visibilidad del estado del sistema: El sistema viola este principio. Aunque la rueda marca un número, el tiempo real se dilata por pausas o giros extra. El usuario no sabe cuánto falta ni en qué etapa está sin interrumpir el ciclo abriendo la puerta.
• Coincidencia entre el sistema y el mundo real: La máquina utiliza lenguaje técnico (números 0-150 sin unidad e iconos abstractos como un gancho o un sol naciente). El usuario piensa en objetivos (seco, húmedo, para planchar).
• Reconocimiento antes que recuerdo: Los iconos carecen de pistas claras (affordances). El usuario debe memorizar significados arbitrarios en lugar de que el objeto ofrezca pistas intuitivas.

2. Aplicación del Modelo de Norman

• Imagen del Sistema: Confusa y deshonesta. Mezcla valores numéricos con iconos sin etiquetas textuales, creando controles «misteriosos».
• Modelo del Usuario: Espera introducir la ropa y saber cuándo terminará. Al no cumplirse los tiempos marcados, se genera desconfianza.
• Modelo de Diseño: El ingeniero basó el diseño en ciclos mecánicos internos, asumiendo erróneamente que el usuario leería el manual para descifrar la interfaz.

3. Identificación de Brechas

• Brecha de Ejecución: Ocurre al inicio. La falta de claridad en los iconos (¿sol naciente es calor alto o bajo?) obliga al usuario a elegir basándose en la inseguridad, optando a menudo por el «miedo a encoger la ropa».
• Brecha de Evaluación: El sistema no ofrece feedback tras la acción. No hay cuenta atrás ni señales acústicas claras. La única forma de evaluar el estado es interrumpir el ciclo físicamente.

4. Propuesta de Mejora

Se propone una transición de la «Caja Negra» a la Transparencia:

1. Detección Automática (Input): Al encender, el sistema detecta el peso y muestra la carga (ej. «Carga Media»).
2. Selector de Objetivo: Sustitución de la rueda por 4 opciones claras con etiquetas de texto:

• Listo para planchar (Deja humedad).
• Seco para guardar (Estándar).
• Extra seco (Toallas/Algodón).
• Aireación (Sin calor).

1. Feedback en Tiempo Real: Display digital grande con tiempo estimado en horas/minutos y sonidos de finalización («FIN – Ropa Seca»).

Caso 2: Dispositivo de Presoterapia (Compresor de Masaje)

Objeto: Compresor doméstico para masaje de piernas por aire.

1. El Problema de la «Pierna Fantasma»

El error crítico aquí es de Topografía (Mapping). Mientras que el cuerpo humano es bilateral (pierna izquierda y derecha independientes), el panel de control utiliza una silueta única y genérica. Esto obliga al usuario a aceptar un tratamiento idéntico para ambas extremidades, ignorando dolencias específicas localizadas.

2. Análisis bajo los principios de Norman

• Mapping (Topografía) Deficiente: La disposición de los controles no corresponde a la disposición física del cuerpo. No hay distinción espacial (botones a la izquierda/derecha).
• Modelo Conceptual Erróneo: El diseño impone un modelo de «Cuerpo Unificado», cuando el modelo mental del usuario es de partes independientes (ej. dolor solo en el gemelo derecho).
• Acierto Parcial: Uso de «mapping cultural» correcto en las barras de intensidad (pirámide) y líneas de calor, donde más volumen visual equivale a más intensidad.

3. Propuesta de Mejora (Topografía Correcta)

1. División Espacial (Mapping Natural): Panel dividido en zonas IZQUIERDA (L) y DERECHA (R). La disposición física de los botones debe reflejar la anatomía.
2. Control Independiente: Permitir seleccionar zonas (Muslo/Pantorrilla) de forma independiente para cada pierna.
3. Información Precisa: Sustituir barras abstractas por valores numéricos (presión en mmHg y temperatura en Celsius) e incluir un temporizador visible.

Para este segundo reto, el objetivo principal fue aplicar el marco metodológico del Cuaderno de Prototipado para crear un Design System limitado (UI Kit) y un prototipo de baja fidelidad para un flujo B2B de gestión de contenidos, tomando como referencia visual la app Headspace. El ejercicio se enfocó en trasladar la lógica visual de una marca de consumo a un contexto profesional.

1. Identidad Visual y Narrativa de Headspace

La interfaz de Headspace destaca por su estilo extremadamente limpio, amigable y suave.

• Estilo Reconocible: La identidad se construye sobre el contraste. Utiliza una paleta base minimalista (tonos claros de fondo) junto a colores de acción vibrantes (el naranja característico, como Primary Action, #F47E3D).

• Narrativa: La marca comunica una narrativa de calma organizada y accesibilidad. Las formas redondeadas y la tipografía geométrica (DM Sans) minimizan la carga cognitiva, permitiendo al usuario enfocarse en la experiencia, no en la interfaz. El alto uso de márgenes amplios (24px) refuerza esta sensación de calma y orden.

2. Lenguaje Visual: Origen y Funcionalidad

El lenguaje visual de Headspace tiene un origen estratégico: romper con el arquetipo. Se apoya en la sencillez para hacer la meditación menos intimidante.

Origen y Propósito: La sencillez y las formas suaves (ej. radio de 20px para tarjetas de contenido ) están diseñadas para reducir la carga cognitiva y la brecha de evaluación en el usuario. Esta decisión refuerza la usabilidad y la sensación de confianza.

• Aspectos Positivos: La coherencia visual es alta, lo que garantiza una Consistencia interna (principio de diseño) y una rápida familiarización del usuario con el sistema.

• Aspectos Negativos: El tono tan distintivo puede generar choques visuales al integrarse con sistemas externos más formales, como se observó al adaptar los componentes de gestión B2B.

3. Elementos Interactivos y Patrones

Los elementos se diseñan para la funcionalidad inmediata, priorizando el Affordance y la claridad de jerarquía:

• Patrones Clave: El prototipo utiliza la Barra de Navegación Inferior (Tab Bar) para las funciones principales (Inicio, Contenidos, Perfil), en lugar de patrones ocultos, priorizando la accesibilidad constante.

• Microinteracciones: Elementos como el botón de Toggle y el Active Check utilizan el color de acción (#F47E3D) y el color de éxito (#02873E) para ofrecer una retroalimentación inmediata al usuario. Esta coherencia de colores funcionales es clave para la Consistencia.

• Adaptación B2B: El prototipo introduce el patrón de Formulario Guiado por Pasos (visible en Crear Cuenta y Crear Contenidos) para gestionar tareas complejas de forma lineal y reducir la carga cognitiva en entornos de gestión.

4. Prototipo de Baja Fidelidad y Aplicación Profesional

A. Prototipo de Baja Fidelidad (Low-Fi)

Elaboré un flujo de baja fidelidad para la gestión de recursos B2B, permitiendo al administrador Crear y Publicar Contenidos.

• Metodología: El ejercicio me ayudó a aplicar la Modularización del Atomic Design. Construir primero los Átomos (colores y tipografía ) y las Moléculas (botones y campos de input) permitió diseñar las pantallas de baja fidelidad (Organismos y Templates) con una lógica de sistema clara.

• Beneficio del Low-Fi: El trabajo en papel y luego en Figma (baja fidelidad) permitió validar rápidamente el flujo de gestión y la estructura de información (ej. la jerarquía entre Recursos, Carpetas y Etiquetas) sin perder tiempo en detalles visuales aún no definidos (principio de Economía).

B. Aplicación Profesional

Este proceso es fundamental en el desarrollo profesional:

• Design System / Marca Blanca: Es esencial en proyectos de Marca Blanca (White Label), donde la creación de un UI Kit limitado garantiza que el producto sea escalable y se pueda personalizar rápidamente para múltiples clientes B2B (ej. cambiar logotipos y colores principales) manteniendo la coherencia funcional.

• Validación de Flujos: El low-fi prototyping es vital para la Validación de Flujos Críticos y la Alineación de Equipos, asegurando que la arquitectura de interacción funciona antes de pasar a la costosa fase de desarrollo.

Reflexión Final

Este reto me ha ayudado a comprender que el sistema visual no es solo estética, sino lógica funcional. Construir un sistema de diseño reducido me permitió avanzar con más seguridad y entender que la consistencia se planifica desde los Átomos. La exploración y el descarte de ideas son claves para evitar la sobrecarga cognitiva en el usuario final. Terminar de darle forma a un producto B2B bajo la guía de una marca de consumo me ha generado mucha más confianza en mis decisiones de diseño.

https://www.figma.com/design/xoQ3HBtHvTtBXKBxDiSApP/R2_prototipo_Sergio_Bustamante?node-id=0-1&t=VzMSuvVh5Ud3yaVw-1

Hola a todos,

Comparto con vosotros el prototipo de alta fidelidad que he desarrollado para el Reto 1, basado en la app Headspace. Esta experiencia me ha resultado muy enriquecedora, especialmente el aprendisaje de diseño, donde habitualmente se prioriza la creación desde cero. Considero que la imitación es una excelente herramienta de aprendizaje.  Este reto me ha recordado esa etapa y, pese a la dificultad inicial, ha resultado ser un ejercicio muy gratificante.

El proceso comenzó con el análisis detallado de la app Headspace a travez del video guia. Para el prototipo, me he guiado por el video proporcionado en el reto, reproduciendo las interacciones y el flujo de navegación,  he capturado pantallas para analizar elementos estructurales como tipografía, color e imagen.

La construcción en Figma me permitió profundizar en el diseño sistémico y el uso de componentes y variantes para mejorar la eficiencia. Encontré algunos desafíos en la búsqueda y adaptación de recursos gráficos, así como en la configuración precisa de interacciones y estilos, pero he aprendido mucho sobre la herramienta y el proceso de prototipado.

Adjunto el enlace al prototipo y el video, donde se puede visualizar el flujo completo y la funcionalidad del diseño realizado:

• Video del flujo:

• Cargando...

  Actualiza

  Sergio Bustamante_Headspace
• Sergio Bustamante_Headspace
• Prototipo en Figma:
• https://www.figma.com/proto/vFPpQI1RB0sYpPoOoGYPFy/Sin-t%C3%ADtulo?page-id=0%3A1&node-id=79-1451&viewport=-628%2C105%2C0.63&t=zTReQmoA4PKrqoiN-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=116%3A1531

Agradezco vuestros comentarios y sugerencias sobre el trabajo. Me gustaría recibir feedback especialmente sobre la fidelidad visual, la lógica de interacción y la sistematización de componentes y estilos.

Sergio Bustamante

(más…)