El usuario no sabe exactamente cuestiones básicas que lo ayudarán a guiarse antes, durante y después de la interacción con el objeto.
Además, hay que considerar varios casos de uso donde, por lo general, el usuario puede sentirse mal o la persona que interviene debe interpretar los resultados.
La interfaz no comunica la secuencia de acciones:
¿Presiono el botón y estará listo para empezar a medir?
¿Debo esperar un sonido antes de empezar?
¿Cómo sé que estoy haciendolo bien?
¿Cuánto tiempo tardará?
¿Se apagó o sigue midiendo
¿Tiene batería?
Evaluación Heurística
Priorización según severidad
Priorización según impacto
Propuesta de mejoras
Autoevaluación
Trabajar en este reto me ayudó a ver de forma más clara lo que dicen los capítulos 1 y 2 de Norman: muchas veces los problemas no están en las personas, sino en cómo los objetos comunican lo que se puede hacer con ellos. Al analizar un termómetro digital, me di cuenta de que algo tan cotidiano puede generar dudas muy básicas si su diseño no acompaña bien al usuario.
Lo que más aprendí fue la importancia de observar el entorno real en el que se usa el objeto. No es lo mismo revisar un termómetro tranquila en casa que usarlo con un niño enfermo, con poca luz o cuando uno tiene prisa. Entender estos contextos me hizo ver mejor dónde aparecen las brechas de ejecución y evaluación, y por qué es tan importante entender el problema real antes de buscar soluciones.
También me gustó aplicar la evaluación heurísticas a un objeto de forma práctica, aunque lo más difícil fue priorizar las mejoras sin dejarme llevar por mi intuición. Consideré varios criterios como la severidad, la frecuencia o el impacto, para tener una mirada más objetiva y poder jerarquizar mejor las decisiones.
En resumen, creo que la práctica me sirvió para mirar los objetos cotidianos con más atención y para valorar todavía más el rol del usuario en todo proceso de diseño.
Me quedo con la idea de Norman de que el buen diseño hace que las cosas “hablen” por sí mismas, y eso es algo que quiero seguir aplicando para que la experiencia de usuario sea “intuitiva”.
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
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
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
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
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
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
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.
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.
Paleta de colores
Construcción de la barra de navegación y overlay menues
Carrousel para la sección de «Sobre tus guías»
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.
En la parte superior, las capturas originales de la aplicación y por debajo el espejo con mis diseños
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 previzualización de las interacciones en el archivo
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.
En el prototipo, el panel de la izquierda contiene los puntos de ancla con una descripción acerca de las funcionalidades
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.
Especificaciones en la animación compleja del inicio
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
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
Screenshot
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
Como parte de la segunda parte de la entrega del PEC 5 Diseño de interacción: Videocomunicación, se genera un sketching con las funcionalidades básicas previamente analizadas en las entregas anteriores y basadas en el Storyboard de la primera parte.
Como parte de la primera parte de la entrega del PEC 5 Diseño de interacción: Videocomunicación, se plantea un Escenario junto a la definiciómn de un usuario para generar un storyboard que nos permite visualizar el journey que realiza un usuario para interactuar con nuestra aplicación de videollamadas
Al finalizar con todas las etapas referentes al proceso de la materia, se realizó la elaboración de un prototipo interactivo de una aplicación móvil para Art Photo BRC. Considerando toda la información obtenida y el análisis correspondiente, se utilizaron técnicas de sketching, low-def mockups y la elaboración de un prototipo interactivo para ver cómo funciona el flujo propuesto.
Como parte del PEC4 centrado en el análisis, comprehensión y exploración de un objeto de uso cotidiano no tecnológico se toma como objeto un cargador de móvil de tipo carga rápida a conector lightning y adaptador con enchufe
Partiendo de esta base, se desarrollan los siguientes módulos en un único informe en PDF:
Póster Académico. Basado en las Relaciones metodológicas entre el diseño especulativo y el diseño centrado en las personas
Prototipo de interacción. Incluyendo una infografía con las affordances, desventajas, detalle de la interacción actual
Video del prototipo en acción
Posibilidades de Interacción tecnológica. Análisis de las nuevas funcionalidades del prototipo
Análisis heurístico, Análisis crítico y Diagramas de Flujo
Como parte del PEC4 centrado en el sitio de Photo Art BCN como cliente, se desarrollan los siguientes módulos:
ANÁLISIS HEURÍSTICO. En referencia de 2 competidores (benchmarking), Meetup y Photo Forum Fest, se desarrolla uno a uno los principios de heurística con ejemplos visuales
ANÁLISIS CRÍTICO. Con los resultados obtenidos del benchmarking, el análisis heurístico y aplicando criterio de análisis de diseño, se elabora un informe detallado. Además, se integran otros referentes que sirvan como complemento
DIAGRAMAS DE FLUJO. En base a la información de los PEC previos, se desarrollan 4 diagramas de flujo para Photo Art BCN referentes a cada una de las tareas especificadas para los usuarios. También se elaboran diagramas de flujo para los competidores incluidos en el benchmarking con el fin de obtener una comparación y validación de nuestra propuesta en el árbol de contenidos (PEC2)
Como parte del PEC 3. Diseño Centrado en el Usuario: Interacción y videocomunicación, se elaboraron distintos reportes respecto a tres aspectos principales.
ENCUESTAS. Luego de realizar un relevamiento de todo el material brindado acerca de la elaboración de encuestas y cómo los factores de diseño afectan en la interacción con los usuarios, se crean encuestas para tres sectores específicos de relevancia: las videollamadas de uso Educacional, Empresarial y de Ocio
BENCHMARKING. Para poder analizar las funcionalidades comunes a herramientas existentes que nos ayuden a parametrizar las necesidades de los usuarios y las barreras que enfrentan en sus tareas, se analizan varias plataformas con el fin de obtener datos nos acerquen a diagnosticar, validar y acercarnos a posibles soluciones. Se toma de referencia Zoom, Google Meet, Microsoft Teams, Facetime, Slack y Whatsapp
VALUE PROPOSITION CANVAS. Mediante el uso de algunas de las herramientas que facilita la obtención de información relevante para completar el canvas y teniendo en cuenta toda la información obtenida en los puntos anteriores, se elaboran: los Value Proposition Statements, Value Proposition Canvas y el Customer Profile
En este artículo, se profundizará en el tercer punto relacionado al Value Proposition Canvas.
Tomando como referencia el Documento de Requisitos de Diseño de la entrega anterior, se elabora un mapeo del sitio actual y se agregan como funcionalidades nuevas los siguientes puntos:
Pública 
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.