Pública Reto 2
Análisis y Réplica (parte 1)
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
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
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.
Una vez definido el mapa de las funciones principales a incluir, comencé a bocetar posibles soluciones en un flujo completo que pudiese ser testeado
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.
Resultado
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
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
Resultado final
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
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.