Reto 1

Prototipado interactivo de la app de Heaspace

 

 

Headspace es una aplicación de meditación y bienestar que ofrece guías para reducir el estrés, mejorar el sueño y fomentar la atención consciente.

Como parte de la entrega del reto 1 para Prototipado, he trabajado en replicar la aplicación de Headspace de la forma más realista posible.

Para ello, he elegido la versión para iOS en un iPhone 14. Por defecto, la aplicación reconoce la apariencia por sistema, así que es la versión ‘dark mode’.

 

 

Paso 1. Mapear la aplicación

Como punto de partida, descargué la aplicación y comencé creandome una cuenta para tener acceso a todas las funcionalidades. Grabé la pantalla para poder tener registro de todo y también hice capturas de pantalla para replicar luego.

Ordené las pantallas horizontalmente de forma que el recorrido sea lógico: primero la animación de splashscreen, el inicio de sesión, la pantalla de inicio, etc. para que sea más fácil seguir el recorrido.

 

 

 

Paso 2. Reconocer átomos del sistema

Una vez finalizado e identificado todas las funcionalidades a incluir, me enfoqué en reconocer patrones que se repitieran a lo largo de la aplicación.

Algunos elementos atómicos como paleta de color, tipografía y botones; y otros moleculares como cards, paneles y menúes.

 

 

Paso 3. Construir el Sistema de Diseño

Después de haber analizado los elementos básicos, comencé creando variables para la paleta de colores y la tipografía. Elegí una librería de íconos o avatars que se adaptaran a mis necesidades para no tener que crearla desde cero y comencé a diseñar uno por uno los componentes del diseño.

Utilicé Coolicons para los íconos y UI Faces – Free AI avatars como plugins de Figma

Este paso me demandó tiempo y dedicación pero trabajar con variables bien nombradas y también hacer uso del autolayout me permitió implementar cambios rápidos masivos e ir corrigiendo desde el componente principal.

 

 

 

 

Paso 4. Diseñar las pantallas

Tomé como referencia pantalla por pantalla para ir construyendo en orden las funcionalidades que deseaba incluir en el prototipo. Esto me ayudó a identificar estados intermedios que debía tener en cuenta, así como también ir agregando elementos a mi Sistema de Diseño que eran necesarios para continuar construyendo.

La reutilización de componentes adaptables me sirvió para hacer de esta etapa un trabajo ameno y avanzar a pasos agigantados.

 

 

Paso 5. Crear el prototipo

Una vez creadas todas las pantallas, comencé a crear interacciones que permitieran generar un prototipo interactivo. Algunas fueron simples, sólo de transición; y otras incluyeron micro-interacciones más complejas como la animación del inicio, los push-to-refresh o los skeleton y loaders al cargar contenido.

 

 

Una mejora clave fue agregar punto de ancla en el prototipo para tener un listado de todas las funcionalidades en el panel de la izquierda, además de comentarios descriptivos.

 

 

Paso 6. Testear, testear y testear

Al finalizar el prototipo, comencé a testearlo para encontrar posibles errores o mejoras. Me aseguré que las funciones básicas estuviesen alcanzadas pero también agregué nexos internos para enriquecer la experiencia y hacerla lo más real posible.

 

 

---

Fundamentos para la generación de una interfaz gráfica

Otro de los puntos de desarrollar en base al diseño, era la reflexión de los Seis Principios Básicos que integran composición, percepción visual o psicología cognitiva.

En mi caso, encontré ejemplos de los siguientes principios:

 

Jerarquía

Página Hoy con scroll


La estructura utilizada en las páginas de Meditaciones, tienen una clara jerarquía que se repetirá como patrón en otras parte la aplicación.

Una imagen de portada ocupa la atención primaria, seguido del título principal, el botón y el resto de los elementos.

El espacio entre el bloquen de texto y el CTA hacen más obvia la acción principal: Reproducir la meditación

 

 

 

Agrupamiento

Ley de Continuidad

En el scroll de la página de Hoy, se puede ver un claro ejemplo de continuidad en el grupo de tarjetas del catálogo de material.

Al hacer ‘push to refresh’, todo el conjunto se mueve en bloque indicando que es parte del mismo grupo

 

 

Ley de Semejanza

Si bien cada tarjeta tiene su propia imagen, título y elementos gráficos, se puede reducir a una estructura base para todas por igual.

Este ejemplo se ve reflejado en el skeleton al cargar la página de Hoy

 

 

Consistencia

Coherencia interna

Utilizar decisiones consistentes a lo largo de la aplicación, genera un mejor aprendizaje del usuario al momento de tomar decisiones.

Los botones de acción o CTAs, por ejemplo, se ubican por lo general en la parte de abajo de la pantalla para facilitar la llegada con los pulgares

Ver zona confortable de interacción en móviles

 

 

Economía y Reutilización

Paleta de color

Dentro de las distintas áreas del Sistema de Diseño creado, se puede encontrar la paleta de colores que permite construir rápidamente con variables cualquier elemento a incluir en la aplicación.

Esto agiliza el diseño, evita el trabajo manual y crea el mínimo de variables para estandarizar visualmente el diseño y economizando recursos que pueden adaptarse a distintos escenarios

 

 

 

Affordance

Carrousel

Dentro de la aplicación, es posible encontrar un carrousel cuando el usuario expande la información de los guías de una meditación.

Se muestra la primera tarjeta, pero también se deja ver el inicio de la siguiente a su derecha. Sumado a ello, los puntos debajo dejan intuir que es posible hacer una interacción horizontal para ambos lados

 

 

---

Prototipo Interactivo

Experimenta la interacción por tu cuenta

 

---

 

Video del Prototipo

Mira un video de cómo se ve el diseño

 

---

¿Dudas o comentarios?

Escribeme a cmanterola@uoc.edu