Este proyecto corresponde al reto final de la asignatura y consiste en el diseño, evaluación e iteración de un prototipo de alta fidelidad para un marketplace B2B de Headspace. El objetivo de la propuesta es permitir que las organizaciones creen su propio espacio dentro de la plataforma y gestionen contenidos de bienestar para sus equipos, manteniendo el lenguaje visual y la experiencia calmada característica de Headspace.
A lo largo del proyecto se ha trabajado de forma progresiva el prototipado, la evaluación con usuarios y la mejora del diseño a partir del feedback obtenido, siguiendo un enfoque centrado en el usuario.
Prototipo inicial
En primer lugar, se desarrolló un prototipo inicial de alta fidelidad a partir del trabajo realizado en retos anteriores y del UI Kit previamente construido. Este prototipo recoge los escenarios planteados en el enunciado y permite navegar por los flujos principales de creación, organización y gestión de recursos dentro del entorno corporativo de Headspace.
A continuación se muestra el vídeo del prototipo antes de realizar las iteraciones, que sirve como punto de partida para la evaluación de la usabilidad.
Test de usabilidad de guerrilla
Una vez validado el funcionamiento básico del prototipo, se llevó a cabo un test de usabilidad de guerrilla con tres participantes. El test se realizó en dispositivos móviles, con el objetivo de evaluar la experiencia en un contexto lo más realista posible. Los participantes realizaron las tareas propuestas sin recibir ayuda, empleando la técnica de pensamiento manifiesto para verbalizar sus decisiones, dudas y expectativas durante la navegación.
Este proceso permitió detectar fricciones relevantes en la experiencia de uso, entre las que destacan la falta de claridad entre recursos en borrador y publicados, la ausencia de personalización visual de las carpetas y cierta confusión sobre las acciones disponibles dentro de la plataforma.
Iteraciones realizadas
A partir de los resultados del test, se priorizaron las fricciones detectadas en función de su impacto en la experiencia del usuario. El prototipo fue iterado para mejorar la jerarquía visual de los estados de los recursos, reforzar la comprensión de la estructura de la información y clarificar las acciones posibles dentro del entorno corporativo.
Estas iteraciones se orientaron a reducir la carga cognitiva del usuario y a facilitar una navegación más intuitiva, especialmente en un contexto de uso profesional donde la claridad y la eficiencia son clave.
Prototipo final
Tras aplicar las mejoras derivadas del testeo, se obtuvo un prototipo final más claro, consistente y alineado con las necesidades detectadas durante la evaluación. La propuesta resultante mejora la comprensión del estado de los recursos y refuerza la organización visual de los contenidos dentro del marketplace B2B de Headspace.
A continuación se puede acceder al prototipo final tras las iteraciones realizadas.
Para cerrar el proyecto, se ha realizado un vídeo de presentación en el que se expone de forma clara y concisa el contexto del proyecto, el proceso de diseño, el test de usabilidad realizado y el resultado final tras las iteraciones. Este vídeo está planteado como una presentación a cliente o responsable del proyecto.
Buenos días a todos, os dejo por aquí la primera parte del reto 2. En el Reto 1 tuve la oportunidad de observar una situación cotidiana pero cargada de significado: una madre que vigila a su bebé mientras duerme, utilizando una cámara conectada a una pantalla.
Para ampliar la mirada del proyecto hacia un nivel más analítico y holístico, consideré el servicio completo, que engloba la acción puntual de vigilar a la niña mediante una pantalla conectada a la cámara del vigilabebés. Este servicio completo corresponde al sistema de conciliación laboral y cuidado infantil que la madre lleva a cabo durante las primeras horas de la mañana. Observa a su hija durmiendo mientras ella puede estar tranquila trabajando.
¡Hola a todos! En este primer reto de la asignatura he trabajado en la recreación de un prototipo de alta fidelidad de la aplicación Headspace, aplicando los principios básicos del prototipado vistos en el cuaderno de la asignatura. El propósito principal ha sido llevar la teoría a la práctica, entendiendo cómo cada principio influye en la claridad visual, la coherencia del diseño y, sobre todo, en la experiencia del usuario dentro de una interfaz digital.
Durante el proceso, los principios aprendidos se convirtieron en una guía constante que me ayudó a tomar decisiones de diseño más conscientes. A continuación, resumo cómo los he observado o aplicado en mi trabajo con Headspace:
Jerarquía visual: En la app se percibe claramente cómo los tamaños, colores y espacios guían la atención del usuario. Al replicarla, entendí la importancia de ajustar los estilos tipográficos y los espaciados para mantener ese equilibrio.
Agrupamiento: Noté cómo la aplicación utiliza la ley de proximidad para organizar los iconos y las secciones, especialmente en las pantallas de meditación. Procuré mantener esas distancias para conservar el orden visual.
Consistencia: Headspace es un ejemplo de coherencia visual. Mantiene un estilo minimalista y calmado reutilizando colores, iconos y patrones. Al recrearla, aprendí cómo la consistencia genera confianza y una experiencia más fluida.
Economía y reutilización: Comprendí lo útil que es planificar una biblioteca de componentes reutilizables. Esto agiliza el trabajo y mantiene el diseño uniforme. Reutilicé algunos elementos en distintas pantallas, tal como hace la app original.
Affordance: Me llamó la atención cómo cada elemento comunica su función sin necesidad de texto. Los botones, las tarjetas o los iconos se entienden a primera vista, lo que evita confusiones en la interacción.
Reconocer antes que recordar: El diseño de Headspace es muy intuitivo: los elementos se presentan de forma que el usuario no necesita memorizar pasos. Esto me hizo ver la importancia de la simplicidad y de usar iconografía clara.
Este reto ha sido mi primer contacto real con la creación de un UI Kit completo y con un prototipo interactivo desde cero, y aunque ha sido un desafío, también ha sido una gran oportunidad de aprendizaje.
Al principio me costó entender qué información debía incluir en el UI Kit y qué partes iba a necesitar después. Crear los estilos, tipografías y componentes básicos me llevó más tiempo de lo esperado, pero me ayudó a comprender cómo se construye un sistema visual coherente.
También tuve dificultades con algunas interacciones en Figma, como el overlay o el gesto de pull to refresh, que no logré hacer funcionar correctamente. Aun así, el intento me sirvió para familiarizarme más con el panel de prototipado y con las distintas opciones de animación.
Lo más valioso de este proceso ha sido darme cuenta de que el diseño no se trata solo de estética, sino de estructura, orden y funcionalidad. Cada pequeño ajuste influye en cómo el usuario percibe la interfaz.
Enlace y vídeo de demostración
Aquí os dejo el vídeo demostrativo del prototipo interactivo, donde muestro los flujos solicitados en el reto, y el enlace al archivo en Figma para que podáis explorarlo:
Este primer reto me ha parecido una experiencia muy completa. Aunque ya había utilizado Figma antes, nunca lo había hecho con tanta profundidad. El hecho de tener que organizar componentes, crear interacciones y cuidar la coherencia me ha ayudado a mejorar mi forma de trabajar y a valorar más el proceso de diseño.
Sé que aún tengo mucho por aprender, especialmente en la parte de interactividad, pero me siento satisfecha con el resultado y con todo lo que he descubierto durante el camino. Mi objetivo para los próximos retos es planificar mejor desde el inicio y seguir perfeccionando el uso del prototipado para que mis diseños sean cada vez más claros y funcionales.
Este diseño parte del análisis realizado en el Reto 3, donde se identificaron múltiples dificultades en el uso de Microsoft Teams por parte de personas mayores en entornos intergeneracionales de teletrabajo. La plataforma, aunque funcional, no contempla de forma suficiente la diversidad de estilos comunicativos, niveles de experiencia digital ni las necesidades emocionales de los distintos perfiles de usuario. Esta falta de adaptación genera frustración, aislamiento o dependencia de terceros, especialmente en usuarios con baja alfabetización tecnológica.
Como respuesta, se conceptualiza una nueva aplicación colaborativa que mantiene funciones esenciales como las videollamadas y el chat, pero incorpora mecanismos clave para mejorar la accesibilidad, comprensión y acompañamiento entre generaciones. Entre sus funcionalidades principales se incluyen:
Un asistente guiado en tiempo real durante las interacciones clave (videollamadas y chat), que brinda apoyo contextual y reduce la carga cognitiva.
Ajustes de perfil personalizables, que permiten adaptar la interfaz y el lenguaje según el nivel de experiencia tecnológica y las preferencias comunicativas del usuario.
Recomendaciones de comunicación inclusiva, diseñadas para suavizar malentendidos generacionales sin limitar la espontaneidad.
A continuación os presento el storyboard que he realizado:
La siguiente secuencia representa una situación realista basada en los problemas detectados durante la investigación: una videollamada de trabajo entre una persona mayor y un compañero joven, y el posterior uso del chat para continuar la colaboración.
Notificación de reunión María, una profesional de 60 años, recibe una notificación en su ordenador con la opción de entrar a la videollamada con ayuda guiada. Esto le da confianza y autonomía.
Videollamada con asistente contextual Durante la reunión, la interfaz le ofrece explicaciones claras sobre funciones como subtítulos o compartir pantalla. María activa los subtítulos y se siente más cómoda.
Interacción emocional e interpretativa Carlos, su compañero joven, utiliza emojis y expresiones informales. La app sugiere a María una interpretación contextual, ayudándola a entender el mensaje sin sentirse fuera de lugar.
Transición al chat colaborativo Finalizada la videollamada, ambos continúan la conversación en el chat. María recibe sugerencias de respuestas claras y simples, que puede seleccionar fácilmente.
Evaluación de la experiencia Tras la interacción, la app le pide una valoración rápida sobre cómo se ha sentido. María indica que fue una experiencia positiva, sintiéndose acompañada y comprendida.
A continuación, se muestran los bocetos del prototipo, que representan visualmente estas pantallas clave e integran los principios del diseño centrado en las personas, la accesibilidad y la interacción emocional.
¡Buenos días! os presento la propuesta de valor del prototipo de la aplicación móvil de la Biblioteca de Catalunya.
Propuesta de valor
La propuesta para la nueva aplicación digital de la Biblioteca de Catalunya se construye sobre una arquitectura de la información clara, útil y centrada en las personas que realmente van a utilizarla. Desde el inicio del proyecto, el objetivo ha sido estructurar los contenidos y los flujos de navegación de forma comprensible, accesible e intuitiva, siempre basándonos en las necesidades reales de los usuarios.
El prototipo de baja fidelidad que hemos desarrollado no se limita a representar la interfaz visual; su valor principal reside en que permite validar la estructura informativa, la jerarquía de contenidos y los flujos de interacción que hemos diseñado. Esta herramienta ha sido clave para anticipar cómo navegarán los usuarios por la plataforma, cómo accederán a los contenidos relevantes y qué obstáculos podrían encontrar en el camino.
Gracias a esta fase temprana de prototipado, hemos podido:
Evaluar la jerarquía y la organización de la información, garantizando que lo más importante sea fácilmente localizables
Detectar posibles fricciones en la navegación, antes de invertir en desarrollo de alta fidelidad.
Optimizar tiempo y recursos, abordando mejoras críticas desde el principio del proceso de diseño.
En definitiva, este enfoque nos ha permitido diseñar no solo una interfaz funcional, sino una experiencia coherente, fluida y alineada con las expectativas del usuario final.
El punto de partida fue el briefing facilitado por la Biblioteca, junto con dos perfiles clave de usuarios. A partir de ellos creamos escenarios y User Journeys, que nos ayudaron a identificar momentos críticos y necesidades concretas en su interacción con la biblioteca digital.
Con esa base, definimos los requisitos funcionales e informativos necesarios para ofrecer una experiencia útil, ágil y centrada en la persona. Estos requisitos nos sirvieron como base para realizar un card sorting, que reveló cómo los propios usuarios agrupan y entienden los contenidos.
Esto nos permitió construir un árbol de contenidos estructurado y lógico, diseñado para reducir la complejidad, facilitar la orientación y dar visibilidad a lo más relevante según cada perfil.
Todo este trabajo estratégico se tradujo en bocetos y wireframes, que culminaron en un prototipo de baja fidelidad. Este prototipo nos permitió validar la estructura, la jerarquía y la lógica de navegación antes de invertir en desarrollo visual o técnico, asegurando una base sólida y coherente desde la Arquitectura de la Información.
Nuestro prototipo responde adecuadamente a las necesidades y expectativas de ambos usuarios puesto que incluye un buscador con filtros avanzados para localizar documentos, una sección de eventos y una zona personal llamada “Mi biblioteca”, donde se organizan todos los documentos.
Ejemplo de interacción: Escenario 1: Búsqueda rápida de documentos digitalizados para un artículo urgente.
Laia, una periodista cultural de 30 años, recibe un encargo urgente sobre la literatura medieval catalana. Aunque está fuera de casa, accede desde su móvil a la app de la Biblioteca de Catalunya, usa el buscador avanzado y encuentra rápidamente un manuscrito digitalizado relevante. Copia una cita clave, guarda y descarga el documento para consultarlo sin conexión, y logra redactar y entregar su artículo a tiempo gracias a la eficiencia de la aplicación.
Partiendo de esta información, presentamos el siguiente prototipo que responde a las necesidades y expectativas de Laia:
¡Buenas a todos! Os presento las dos referencias que he elegido, sus diagramas de flujo y su análisis crítico. Tras eso los insights claves y recomendaciones para aplicar a nuestra app de la biblioteca de Catalunya.
Las dos páginas que he analizado son la web de La Biblioteca Nacional de España (BNE) y la app de la New York Public Library.
Biblioteca Nacional de España
La Biblioteca Nacional de España (BNE) ofrece un fondo documental impresionante y acceso a catálogos, bases de datos y colecciones digitalizadas a través de su web www.bne.es. Pero… ¿qué tal es la experiencia para el usuario que intenta navegarla?
Flujo de navegación principal:
El recorrido más común para consultar documentos digitalizados sigue esta secuencia:
Acceder al menú “Catálogo”.
Seleccionar “Biblioteca Digital Hispánica”.
Introducir términos de búsqueda.
Aplicar filtros (tema, fecha, tipo de documento).
Revisar los resultados.
Abrir el visor digital.
Descargar el documento (si está disponible).
Diagrama de flujo:
Puntos fuertes
Búsqueda avanzada: potente y con múltiples filtros.
Visor digital: funcional y bien integrado.
Fondo documental: rico en contenido académico y patrimonial.
Principales limitaciones
1. Arquitectura de la información confusa
Separar “Catálogo” y “Biblioteca Digital Hispánica” genera confusión. Los usuarios deben navegar por secciones que no comparten diseño ni lógica estructural, rompiendo la coherencia esperada.
2. Sin área personal
La web no ofrece una biblioteca o perfil personal donde guardar documentos, seguir autores o crear colecciones. Esto penaliza al usuario frecuente que necesita trabajar con varios recursos.
3. Experiencia fragmentada
Los buscadores de distintas secciones funcionan de forma diferente, lo que aumenta la carga cognitiva y dificulta la navegación, especialmente para usuarios no expertos.
4. Móvil poco optimizado
Aunque es “responsive”, la experiencia móvil no está bien resuelta: filtros pequeños, clics excesivos y ausencia de navegación táctil fluida.
5. Visibilidad limitada del sistema
Los resultados no informan claramente si los documentos están disponibles en digital o si tienen restricciones, lo que genera incertidumbre y frustra al usuario.
6. Carga cognitiva elevada
Demasiadas opciones, sin jerarquización clara. El lenguaje técnico y la falta de rutas guiadas pueden alejar a usuarios casuales o nuevos.
Conclusión
La BNE tiene un enorme valor patrimonial, pero su interfaz necesita adaptarse mejor a los principios UX. Con una estructura más clara, navegación coherente y optimización móvil real, podría ofrecer una experiencia tan valiosa como su contenido.
New York Public Library
La New York Public Library (NYPL) ofrece una de las aplicaciones móviles más completas y reconocidas en el entorno bibliotecario. Disponible para iOS y Android, su enfoque está centrado en el usuario móvil, lo que la convierte en un referente frente a otras bibliotecas con presencia más institucional o limitada al entorno web.
Flujo de navegación principal: ¿Cómo interactúa un usuario típico en la app?
Accede a la app desde su dispositivo móvil.
En el dashboard principal, el usuario puede:
Usar la barra de búsqueda (siempre visible).
Navegar por colecciones destacadas.
Introduce un término en el buscador → aparecen resultados filtrables.
Puede guardar el libro para después o descargarlo si está disponible.
Desde el menú principal accede a:
Su biblioteca personal
Libros en préstamo
Historial de lecturas
Diagrama de flujo:
Puntos fuertes
1. Diseño centrado en tareas reales
La app no replica la estructura interna de la biblioteca: está diseñada para que el usuario actúe. Buscar, leer, guardar… todo en pocos pasos. Ideal para contextos rápidos y móviles.
2. Visibilidad clara de funciones clave
Desde el primer momento, el usuario ve qué puede hacer y cómo. El panel muestra accesos directos a funcionalidades como “Mis libros” o “Reservas”, en línea con las heurísticas de Nielsen.
3. Consistencia visual y usabilidad
Botones, colores, tipografías y flujos siguen un patrón claro. Esto reduce la curva de aprendizaje y genera confianza. Ideal tanto para usuarios casuales como frecuentes.
4. Personalización y biblioteca propia
El usuario puede:
Guardar libros
Crear listas
Consultar historial
Recibir sugerencias personalizadas
Función muy útil para usuarios como Marc, que consultan documentos frecuentemente y necesitan organización.
5. Accesibilidad optimizada
Diseño adaptado a uso táctil:
Botones accesibles con el pulgar
Menús sin sobrecarga
Compatibilidad con tecnologías de asistencia
Ideal para contextos como el de Laia, que accede desde la calle, transporte o cafetería.
Principales limitaciones
Algunas funciones más avanzadas están poco visibles, como la gestión de etiquetas o filtros académicos.
Está pensada más para lectura general que para investigación profunda o especializada, lo que puede limitar a usuarios expertos.
Conclusión
La app de la NYPL demuestra cómo una biblioteca puede ofrecer una experiencia digital intuitiva, moderna y centrada en el usuario, especialmente en entorno móvil. Aunque tiene margen de mejora en funciones académicas, su diseño funcional y su enfoque claro en la tarea la convierten en un referente UX para bibliotecas públicas del siglo XXI.
Tabla comparativa
Insights claves y recomendaciones
Tras comparar la web de la Biblioteca Nacional de España y la app de la New York Public Library, extraemos una conclusión clara: No importa cuánto contenido tenga una biblioteca, sino cómo lo presenta, organiza y facilita el acceso.
1. Diseñar para tareas, no para estructuras
La NYPL triunfa porque responde a acciones concretas del usuario: Buscar, leer, guardar, asistir a eventos. En cambio, la BNE sigue una lógica institucional que puede dificultar la experiencia.
Aplicación al proyecto: La Biblioteca de Catalunya debería guiar al usuario por flujos como:
“Buscar manuscritos”
“Ver agenda cultural”
“Recibir alertas de eventos”
2. Mobile-first, sin excusas
La mayoría de usuarios (como Laia y Marc) acceden desde el móvil. La NYPL lo entiende: botones grandes, filtros simples, navegación fluida. La BNE aún no.
Aplicación al proyecto:
Pantallas limpias
Navegación con el pulgar
Visores táctiles
Filtros desplegables cómodos
3. Personalización y espacio privado
La NYPL permite crear listas, guardar favoritos y recibir recomendaciones. La BNE no ofrece funciones para personalizar la experiencia.
Aplicación al proyecto:
“Mi biblioteca” para Marc
“Recordatorios culturales” para Laia
Favoritos, etiquetas, historial
4. Coherencia visual y navegación predecible
La app de NYPL mantiene un diseño estable. La BNE salta entre interfaces sin unidad visual.
Aplicación al proyecto:
Menús consistentes
Iconos claros
Filtros que se comporten igual en todas las secciones
5. Comunicación proactiva y feedback inmediato
La NYPL informa al usuario: notificaciones, mensajes claros, recordatorios. En la BNE, muchas acciones no generan respuestas visibles.
Aplicación al proyecto:
Alertas de nuevos eventos
Confirmaciones visuales
Animaciones suaves para guiar
Conclusión
Una biblioteca digital no debe limitarse a mostrar información. Debe ser una experiencia cultural viva y accesible. Para lograrlo, la Biblioteca de Catalunya necesita:
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.