M4.356 - Prototipado - Aula 1

Pública

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