Entrega del Reto 2

R2 – Prototipo Low-Fi y Diseño de un Sistema Básico

Sergio Daniel Bustamante Pedraza
Visibilidad: Pública - - comentario en R2 – Prototipo Low-Fi y Diseño de un Sistema Básico

R2 – Prototipo Low-Fi y Diseño de un Sistema Básico

Sergio Daniel Bustamante Pedraza
Visibilidad: Pública - - comentario en R2 – Prototipo Low-Fi y Diseño de un Sistema Básico
Para este segundo reto, el objetivo principal fue aplicar el marco metodológico del Cuaderno de Prototipado para crear un Design System limitado…
Para este segundo reto, el objetivo principal fue aplicar el marco metodológico del Cuaderno de Prototipado para crear un…

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.

UIkit

uikit

UiKit3

UIkit

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

B2B prototype

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.

Cargando...

 

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

Entrega del Reto 2

Debate

No hay comentarios.

Reto 2 · Modelo de Negocio B2B Headspace

Clara Manterola
Visibilidad: Pública - - comentario en Reto 2 · Modelo de Negocio B2B Headspace

Reto 2 · Modelo de Negocio B2B Headspace

Clara Manterola
Visibilidad: Pública - - comentario en Reto 2 · Modelo de Negocio B2B Headspace
Reto 2 Análisis y Réplica (parte 1)   Mejoras en el Design System Varios componentes fueron mejorados con el fin de optimizar…
Reto 2 Análisis y Réplica (parte 1)   Mejoras en el Design System Varios componentes fueron mejorados con el…

Reto 2

Análisis y Réplica (parte 1)

Archivo:Headspace text logo.png - Wikipedia, la enciclopedia ...

 

Mejoras en el Design System

Varios componentes fueron mejorados con el fin de optimizar y facilitar el uso compartido de ellos y sus variables, además de extender en todo el Design System tokens que puedan ser utilizados y escalados automáticamente para evitar errores.

Entre los cambios que se realizaron, están los siguientes:

  • Paleta de color. Variables intermedias para utilizar en estado de botones, como press status
  • Reagrupación de componentes. Con variantes adicionales para modificarlos bajo el mismo componente. Por ejemplo, las cards con variantes de Size (Med, Small), Type (Default, Skeleton, Compact), Format (Horizontal, Vertical)
  • Íconos. Con nuevas variantes de Size (Small, Med, Large), Type (Filled, Outline, OFF, ON)
  • Menues. Integrando el main navbar con el header de titulo y de favoritos/recientes
  • Avatars. Con variantes nuevas de tamaño (small, med) y estado (ON, OFF)
  • Spacing. Con variantes desde XXS=4 hasta XL=48 y Full=999

 

Previsualización del archivo original con las variantes en el panel de la derecha
Previsualización del archivo original

 

Link a Galería de Componentes

 

Prototipo en baja fidelidad (parte 2)

 

Proceso de Prototipado

Introducción

Tal como recomienda la Fase 1. Exploración Inicial, me enfoqué en entender
el contexto de Headspace como producto.

En el adjunto de Análisis de Headspace como marca, incluí detalles sobre su Guía de Marca, sus orígenes y un resumen que aborda:

  • Mensaje Central > Meditation Made Simple
  • Personalidad > Amigable, Empática, Cálida y Confiable
  • User Personas > Gente que quizás nunca meditó y necesita algo simple
  • Propuesta de valor > Saturación mental vs. Calma
  • Diferencial > Personalidad reconocible con ilustraciones y personajes además 
de lenguaje simple y accesible

 

Benchmarking

Utilicé plataformas como Mobbin o Pttrns para encontrar referencias de productos que sirvan como buenos ejemplos y así utilizarlos en mis bocetos. Ver Figma

 

Previsualización del archivo original de Figma

 

Un hallazgo muy útil fue encontrar el Flow Tree de la app de Headspace a lo largo de los años además de sus cambios en la UI

 

 

Iteración 1. Boceto a mano

Comencé ordenando y documentando todas las funcionalidades que debía tener el prototipo además de estados intermedios como creación de contenido y gestión del mismo.

 

Mapa de sitio para organizar las funciones básicas

 

Una vez definido el mapa de las funciones principales a incluir, comencé a bocetar posibles soluciones en un flujo completo que pudiese ser testeado

 

Bocetos originales preliminares

 

Del lápiz al mock-up
en baja definición

Con el fin de poder trabajar mejor en el prototipo, digitalicé los bocetos a mano y comencé a diseñar en baja haciendo algunas modificaciones acorde avanzaba en el flujo.

 

En la foto de la izquierda, el boceto original. A la derecha, la misma pantalla diseñada en baja definición

 

Resultado

 

 

Ver prototipo

 

 

Iteración 2. Con AI (Figma Make)

Utilicé el siguiente prompt como instrucción en Figma Make para que generara el flujo completo de la aplicación:

 

Ayudame a crear en baja fidelidad un flujo completo para la app de Headspace que permita a usuarios B2B gestionar contenido en su propio marketplace para sus clientes.
Debe contener las siguientes funcionalidades:

Crear una cuenta B2B (profesionales) y completar el perfil de la organización (nombre, logo, descripción) 
Crear carpetas o secciones para organizar los contenidos publicados 
Publicar un nuevo recurso (por ejemplo, una meditación, un vídeo o un artículo breve) indicando título y descripción 
Subir archivos asociados al recurso (imagen, audio o vídeo) 
Asignar categorías o etiquetas al recurso para facilitar su búsqueda dentro del marketplace 
Definir el estado del recurso (borrador, publicado) y poder actualizarlo más adelante
Editar o eliminar un recurso ya existente
Consultar y gestionar la lista de recursos creados
Guardar los cambios y confirmar la publicación del recurso en el marketplace

El punto de partida estará en la pantalla actual de login donde si el usuario elige Registrarse con SSO, será dirigido a este flujo en particular que le permita elegir si es administrador de contenido de la empresa o usuario de esta empresa que quiere acceder a los recursos

 

 

Resultado

 

 

 

Ver archivo original

Ver Prototipo

 

 

 

Iteración 3: Prototipo final

Inicio de sesión con SSO

Mantuve el foco en el ingreso con SSO para facilitar al usuario un rápido reconocimiento y acceso a la cuenta sin afectar el flujo de la app.

El SSO (Single Sign-On) permite que los usuarios accedan a varios sistemas con una sola cuenta, evitando múltiples contraseñas y pasos de inicio de sesión. Desde UX, mejora la experiencia al hacer el ingreso más rápido y sin fricciones

 

Gamificación

Dividí los pasos básicos de configuración de cuenta en 4 simples pasos para guiar y alentar al usuario a completarlos de forma efectiva y ludicamente

 

En la foto de la izquierda, el paso a paso completo de los objetivos a cumplir por el usuario. En la derecha, la barra de avance en el Tablero principal

 

 

Resultado final 

 

 

Ver archivo original

Ver prototipo

 

 

 

 

Reflexión final

Comprensión de la marca

A partir de la investigación sobre Headspace pude enmarcar el proyecto B2B dentro de una identidad clara, empática y accesible, y alinear mis decisiones de diseño con sus valores

 

Exploración Inicial

Los bocetos a mano me permitieron explorar rápidamente ideas y posibles flujos. Digitalizados en Figma en baja fidelidad, facilitó ordenar las pantallas y crear interacciones simples

 

Perspectiva de la AI

Utilicé Figma Make para generar la 2da iteración e incluir AI. Este enfoque me aportó un punto de vista diferente y me permitió considerar soluciones que no habían surgido en la fase manual

 

Resultado Final

En el tercer prototipo combiné las mejores ideas de los bocetos y de las propuestas generadas con IA. El resultado es una versión más clara y completa alineada con integrar el flujo de usuarios B2B

 

 

¿Dudas o comentarios?

Escribeme a cmanterola@uoc.edu

 

 

Entrega del Reto 2

Debate

No hay comentarios.

Sistema de Diseño y Prototipado B2B: Headspace

Ivan Sierra Escobar
Visibilidad: Pública - - comentario en Sistema de Diseño y Prototipado B2B: Headspace

Sistema de Diseño y Prototipado B2B: Headspace

Ivan Sierra Escobar
Visibilidad: Pública - - comentario en Sistema de Diseño y Prototipado B2B: Headspace
En este reto he trabajado en la deconstrucción y evolución de la interfaz de Headspace, abordando el proyecto desde dos vertientes clave:…
En este reto he trabajado en la deconstrucción y evolución de la interfaz de Headspace, abordando el proyecto desde…

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:

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í:

 

 

 

Entrega del Reto 2

Debate

No hay comentarios.