En este segundo Reto de Prototipado, he profundizado en el análisis y construcción del sistema de estilos y componentes interactivos de la aplicación de Headspace.

Después de analizar detalladamente el uso y aplicación de los distintos elementos de Headspace en sus diferentes interfaces móvil y web, he creado un álbum de estilos y un Kit UI con varios de estos elementos.

En el siguiente enlace podéis interactuar con las instancias creadas a partir de los distintos componentes generados: Prototipo instancias

En la segunda parte del reto, he diseñado un prototipo de baja fidelidad, utilizando diversas aproximaciones, con el fin de ir iterando desde distintas perspectivas y tratar de ir puliendo poco a poco los flujos.

Podéis acceder al prototipo final en el siguiente enlace: Prototipo app

En el vídeo que encontraréis a continuación, se muestra el prototipo en acción:

Para esta práctica analicé la app Headspace centrándome en su estilo visual, su narrativa y la forma en la que guía al usuario a través de sus interacciones. A partir de ese análisis, elaboré un pequeño design system limitado y realicé varias exploraciones y prototipos de baja fidelidad, primero en papel y luego en Figma. El objetivo fue entender cómo funciona la app desde dentro y cómo se pueden adaptar sus principios a un nuevo proyecto sin perder su esencia. Durante todo el proceso fui afinando ideas, descartando otras y tomando decisiones que me ayudaron a construir una propuesta coherente y cercana al estilo de la marca.

– Primera parte

Link Del Prototipo: https://www.figma.com/proto/6wzuNq9tIS7q7hHz8CfSDH/R2_Headspace?page-id=156%3A454&node-id=157-516&p=f&viewport=-391%2C834%2C0.52&t=h6i6Q2fzZGbeNee9-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=157%3A516&show-proto-sidebar=1

– Segunda Parte

Link Del Prototipo: https://www.figma.com/proto/6wzuNq9tIS7q7hHz8CfSDH/R2_Headspace?page-id=181%3A102&node-id=181-103&p=f&viewport=194%2C85%2C0.31&t=RrVbLq1iCZL2nJf9-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=181%3A103

Reflexión

Headspace utiliza un estilo visual muy minimalista que desde el primer momento transmite tranquilidad. Sus tonos suaves, alejados de cualquier color estridente, y las formas redondeadas que aparecen por toda la interfaz refuerzan esa sensación de calma que la app quiere provocar en el usuario.

Todo esto encaja perfectamente con la narrativa del producto, ya que Headspace se centra en ayudarte a mejorar tu bienestar a través de la relajación y la meditación, ofreciéndote herramientas que puedas usar cuando las necesites y que te permitan rendir mejor reduciendo el estrés.

Su lenguaje visual viene claramente de esta intención de crear un espacio tranquilo y cercano. Lo positivo es que realmente lo consigue: la estética va totalmente alineada con lo que la app quiere ofrecer y con lo que promete.

Como punto negativo, creo que el modelo de pago no está del todo bien explicado. Es una app mayoritariamente de suscripción y no te da suficiente información sobre lo que incluye cada contenido premium. Aunque te diga que es un vídeo, no sabes exactamente qué te vas a encontrar. Creo que estaría bien ofrecer parte del contenido de forma gratuita, aunque fuese limitado, para enganchar mejor al usuario y que sienta más confianza.

En cuanto a los elementos interactivos, la app opta por una navegación muy sencilla y casi totalmente vertical. Esto tiene sentido dentro de su estilo, pero a veces echo en falta algunos movimientos horizontales o detalles que aporten un poco más de dinamismo. Incluso algún elemento que gire o se mueva suavemente podría darle vida sin romper la estética. Algo que me llama mucho la atención es cómo usan los colores para destacar lo importante: los tonos amarillos o azules suelen señalar las partes relacionadas con compras o suscripciones, haciendo que tus ojos vayan directamente a ellas.

El design system limitado me hizo ver que este proceso sería muy útil en proyectos reales, tanto para optimizar pantallas que no funcionan bien como para crear una web o una app desde cero. Tener esa base clara y coherente facilita mucho que la navegación sea más agradable y que la experiencia del usuario sea natural.

Las exploraciones y los prototipos de baja fidelidad también me ayudaron, sobre todo a imaginar cómo podría funcionar una interfaz en fases tempranas del proyecto. Aunque este proceso pueda ser más lento, a la larga resulta muy útil porque te obliga a clarificar ideas y a detectar posibles problemas antes de tiempo.

En mi caso, primero hice los bocetos en papel porque quería que el trabajo fuese más artesano y cercano, con trazos irregulares que me permitieran corregir elementos fácilmente. Después los pasé a Figma y creé las interacciones con botones transparentes. Decidí no utilizar IA porque prefería que el proceso mantuviera ese punto manual y más personal, y así poder ajustar cada detalle con más libertad.

En general, esta práctica me ayudó a entender mejor cómo una app trabaja su identidad visual para transmitir sensaciones concretas, y cómo esas decisiones afectan a todo lo que hacemos después como diseñadores. También pude ver de qué forma me organizo yo en las fases iniciales del diseño y qué métodos me ayudan más a mantener coherencia y claridad mientras voy construyendo la experiencia.