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.

Análisis de casos

Caso 1

Falta de Feedback en Sanduchera Oster

1. Descripción del Problema

El dispositivo presenta graves deficiencias en la comunicación de su estado. El botón de encendido ofrece un feedback táctil («click») pero no visual, obligando al usuario a adivinar si el aparato está operando. Adicionalmente, el indicador luminoso (borde blanco) es ambiguo: no cuenta con etiquetas ni cambios de color claros que indiquen si el dispositivo está «calentando», «listo» o «apagado».

2. Test Heurístico

Heurística 1 (Nielsen): Visibilidad del estado del sistema (Violación Crítica).
El sistema no mantiene informado al usuario sobre lo que está ocurriendo. Al presionar el botón de encendido, no hay una luz inmediata que confirme la acción. El usuario debe esperar a que la plancha se caliente (feedback retardado) para confirmar que el encendido fue exitoso.

3. Análisis del Triángulo de Norman

• Modelo de Diseño: El ingeniero diseñó un termostato interno que enciende la luz solo cuando alcanza X temperatura. El botón de encendido es un interruptor mecánico simple sin LED integrado para ahorrar costes.
• Modelo del Usuario: «Si aprieto el botón y hace click, debería encenderse una luz roja o amarilla para avisarme de que está funcionando (como en una plancha de ropa o un horno)».
• Imagen del Sistema: Es «muda». No proporciona Feedback inmediato. La luz blanca es un Significante pobre porque carece de etiqueta o código de color estándar (Rojo=Calentando / Verde=Listo).

4. Identificación de la Brecha

• TIPO: Brecha de Evaluación (Gulf of Evaluation).

  Explicación: El usuario logra cruzar la brecha de ejecución (encuentra el botón y lo pulsa). Sin embargo, cae en la Brecha de Evaluación justo después.
  El usuario se pregunta: «¿Ha funcionado? ¿Está encendido o lo he apagado sin querer?».

  El sistema no responde, obligando al usuario a poner la mano cerca (peligroso) para obtener feedback térmico.

5. Propuesta de Solución

5.1 Feedback Inmediato (Botón de Encendido)

La solución integra una luz luminosa (LED azul) dentro del propio interruptor.

Justificación: Actualmente, el «clic» mecánico es insuficiente. Al añadir luz, proporcionamos feedback visual instantáneo que confirma al usuario que el sistema ha recibido energía eléctrica. Esto elimina la incertidumbre inicial de «¿Lo he enchufado bien?».

5.2 Desambiguación del Estado

(Semáforo de Temperatura) Se sustituye el indicador único (luz blanca ambigua) por dos significantes separados con códigos de color universales (Mapeo Cultural):

Rojo = Indica el estado «Calentando» (Restricción: No tocar/Esperar).

Verde = Indica el estado «Listo» (Affordance: Ya puedes cocinar).

5.3 Conclusión

Esta propuesta elimina la Brecha de Evaluación porque el sistema comunica su estado de forma transparente en cada etapa. El usuario ya no necesita «adivinar» ni poner la mano cerca para comprobar la temperatura, alineando el Imagen del Sistema con el Modelo Mental de seguridad y uso del usuario.

Caso 2

Conflicto Topográfico en Control de Temperatura de Calentador

1. Descripción del Problema

El dispositivo cuenta con un único botón físico para controlar la temperatura, pero está serigrafiado con dos iconos contradictorios: una flecha hacia arriba (↑) y una hacia abajo (↓).

2. Análisis de Topografía (Mapping)*

• La Promesa Visual: La iconografía utiliza una referencia espacial bidireccional (Arriba/Abajo). Esto sugiere al cerebro una topografía de controles dobles (dos botones) o un interruptor basculante (rocker switch) donde presionar arriba sube y presionar abajo baja.
• La Realidad Física: Existe un solo punto de contacto. La topografía es Pobre y Confusa.
• El Conflicto: No existe una correspondencia natural entre «bajar temperatura» y la acción física requerida (que es seguir pulsando «subir» hasta dar la vuelta al ciclo). El mapeo natural está roto: para ir «abajo», el usuario está obligado a ir «arriba» repetidamente.

3. Conclusión

Es un caso de Mala Topografía (Poor Mapping). Los controles no están distribuidos espacialmente de acuerdo a las funciones que representan.

*(concepto que Donald Norman denomina originalmente Mapping o correspondencia espacial)

En este reto he trabajado en la deconstrucción y evolución de la interfaz de Headspace, abordando el proyecto desde dos vertientes clave: la sistematización visual y la exploración de nuevos modelos de negocio.

1. Sistematización con Atomic Design El primer objetivo fue analizar la aplicación actual para construir un UI Kit escalable. Aplicando la metodología de Brad Frost (Atomic Design), organicé los elementos desde sus cimientos (colores, tipografías, sombras) hasta componentes complejos interactivos. Este proceso implicó una reestructuración semántica de los estilos (pasando de definiciones por ubicación a definiciones por jerarquía) y la implementación de Variables y Variantes en Figma para asegurar la interactividad y consistencia del sistema.

2. Prototipado B2B: Headspace Partner En la segunda fase, exploré un escenario hipotético B2B para que empresas y profesionales puedan gestionar contenido de bienestar. Para ello, desarrollé un prototipo de baja fidelidad (Low-Fi) centrado en la funcionalidad y el flujo de usuario. Utilicé herramientas de IA Generativa (Vercel) para iterar rápidamente sobre la arquitectura de información, resultando en dos flujos complementarios:

• Onboarding: Un asistente paso a paso para nuevos registros.

• Dashboard: Un panel de gestión ágil para usuarios recurrentes
  

  Versión completa
  Mockups y Pantallazos
  Lo-fi Wireframe
  Vercel

Este proyecto demuestra cómo una base sólida de diseño permite escalar el producto hacia nuevas funcionalidades con coherencia y agilidad.

Puedes navegar por el prototipo interactivo aquí:

Headspace
Prototipo Reto 01

Enlaces del proyecto

Prototipo interactivo Figma: Link

Réplica de flujo + microprototipado de componentes

Este proyecto corresponde al Reto 1 de la asignatura Prototipado, dentro del trabajo con interfaz gráfica y diseño sistémico en Figma. El objetivo principal del reto es construir un prototipo interactivo de alta fidelidad replicando un flujo existente de la app móvil Headspace, acompañado de componentes con estados interactivos que simulan su comportamiento real.

Objetivos del reto

• Replicar un flujo funcional de navegación dentro de la app, comenzando desde el tab “Hoy”.

• Construir componentes interactivos con distintas variantes (hover, active, selected, disabled).

• Simular comportamiento real como:

  • Scroll vertical y navegación entre pantallas.

  • Tooltip al pulsar el icono de “Favoritos”.

  • Botones con múltiples estados.

  • Overlay de información («Sobre tu voz guía»).

  • Modales promocionales (oferta mensual/anual).

• Comenzar a construir un design system básico aplicando estilos tipográficos, colores y componentes reutilizables.

• Realizar la prototipación interactiva en Figma usando acciones, animaciones y navegación.

Herramientas utilizadas

• Figma – Diseño y prototipado

• Variants + Auto Layout para la construcción del sistema

• Prototipado con animaciones Smart Animate

• Captura real desde dispositivo para validar el comportamiento.

Trabajo sistémico (Design System)

Además del flujo, se creó un UI Kit basado en Headspace, con:

• Variables de color y texto aplicadas globalmente

• Botones con estados interactivos

• Tarjetas de contenido

• Chips

• Iconografía

• Componentes estructurales

• Organización en Atomic Design (Atoms → Molecules → Organisms)