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:
¡Buenos días a todos! Os comparto un resumen del cardsorting realizado y del árbol de contenidos:
Como parte del proceso de optimización de la estructura de contenidos y su nomenclatura, se ha llevado a cabo una prueba de Card Sorting con usuarios reales. Esta técnica de diseño centrado en el usuario nos ha permitido comprender cómo los usuarios agrupan y etiquetan la información, facilitando una arquitectura de la información más intuitiva y funcional.
Se seleccionaron 8 usuarios representativos del público objetivo del proyecto, con perfiles variados en cuanto a edad, experiencia digital y conocimiento del sector, con el fin de obtener una visión diversa.
Se realizo un card sorting abierto, permitiendo a los usuarios crear sus propios grupos y etiquetarlos libremente. Esto ofrece mayor flexibilidad y revela el lenguaje natural que usan los usuarios. Se incluyeron un total de 20 tarjetas, cada una con un contenido único del inventario. Las sesiones se realizaron de forma individual.
Las sesiones se realizaron entre los días 18 de abril y 21 de abril.
Cada usuario completó la prueba de forma individual, en sesiones de aproximadamente 20 minutos.
Los datos se registraron automáticamente en la plataforma utilizada.
A través de una categorización libre, los participantes han reflejado su modelo mental y cómo estructuran de forma intuitiva los contenidos o funcionalidades del sistema. De los resultados del estudio, mediante la categorización de las tarjetas, la matriz de similitud y los dendogramas, se han obtenido los siguientes insights:
Unificar etiquetas repetidas bajo nombres intuitivos y validados:
Configuración” como paraguas para accesibilidad, seguridad, personalización.
“Documentos” o “Visor” como espacio único para gestión documental.
“Eventos” como agrupación clara para todas las funcionalidades temporales.
Tratar funciones transversales (búsqueda, favoritos, notificaciones) como elementos de la interfaz persistente, no como categorías en sí mismas.
Diseñar una navegación basada en tareas, no en estructuras técnicas: los usuarios piensan en lo que quieren hacer, no en cómo se implementa internamente.
Revisar etiquetas: algunas confusiones pueden venir del lenguaje. ¿Qué entienden los usuarios por “Centro de notificaciones”? ¿Es un histórico, una alerta, un panel?
Validar la arquitectura propuesta mediante un tree test, midiendo tareas concretas para asegurar que los usuarios navegan de forma eficiente con la nueva estructura
Partiendo de los resultados anteriores se realiza el árbol de contenidos que expongo a continuación:
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.