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)