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…)