UX/UI & Interaction Design
App CCCB
«TecnosferaNow» Experiencias digitales del CCCB
Diseño de la Arquitectura de la Información para una aplicación de eventos, exposiciones, talleres, etc. virtuales.
Contexto inicial
Tras la pandemia del Covid-19, muchos eventos y exposiciones del CCCB fueron cancelados o sufrieron cambios en su estructura. Uno de esos cambios de estructura incluye migrar al mundo digital, u ofrecer experiencias híbridas. Es por ello que el CCCB desarrolló una nueva línea de exposiciones, conferencias y talleres basadas en experiencias interactivas, de realidad aumentada y realidad virtual, llamada TecnosferaNOW.
Descripción del problema
El CCCB necesita que se diseñe una app nativa para smartphones que además del contenido original de la web del CCCB, incluya la nueva experiencia digital de TecnosferaNOW.
Objetivos
De esta forma, los usuarios podrán acceder a la oferta cultural del CCCB, incluso en condiciones similares a las vividas durante la pandemia.
Requisitos y limitaciones
Se debe permitir a los usuarios tanto el acceso, como la participación. Las ofertas culturales del CCCB deben ser accessibles desde cualquier lugar.
Técnicas utilizadas
User Personas
Escenarios
User Journeys
Insights
Inventariado
Card Sorting presencial
C. Sorting telemático (Optimal Workshop)
Árbol de contenidos
Diagramas de flujo
Sketching
Wireframing (Figma)
El Proceso
Investigación con Usuarios
Definición de la organización y etiquetado
Diseño de la navegación
Wireframe
Investigación con Usuarios: Conceptualización de la Interacción
Generación de 2 User Personas para:
Definir usuarios ficticios que representen a algunos de nuestros tipos de clientes
Conocerlos detalladamente
Recordarnos durante el proceso para quién diseñamos
A partir de los User Persona, se han definido 6 escenarios que proyectan situaciones reales de uso del producto para:
Visualizar cómo utiliza el usuario el producto
Comprender las diferentes situaciones de uso
Conocer sus espectativas
Realización de 6 User Journeys, definiendo paso a paso la interacción del usuario con el producto, consiguiendo así:
Analizar detalladamente la interacción
Detectar de puntos de mejora
Detectar oportunidades de optimización del diseño
Tras analizar los resultados de las diferentes técnicas, se han extraído los Insights necesarios para compilar los requisitos que debe reunir el diseño:
Sintetizando la información extraída
Comprendiendo las necesidades de los usuarios
Definiendo cómo ha de comportarse el diseño
CONCLUSIONES
La información y conclusiones obtenidas en esta fase de modelado, se transforman en un listado de requisitos para el diseño del producto. Como ejemplo, sabemos que los usuarios necesitan: la vista resumida de todas las actividades, la adición de un guía virtual, información sobre accesibilidad para personas con diversidad funcional, posibilidad de personalización de eventos, de interacción con otros usuarios, tutoriales/instrucciones de las exposiciones en 3D y de realidad aumentada, etc.
Definición de la arquitectura de la información: organización y etiquetado
Realización de 2 tipos de Card Sortings (presenciales y telemáticos) para:
Entender cómo cómo clasifica y cómo nombra el usuario los paquetes de información
Estructurar un diseño desde cero
Añadir los nuevos contenidos (TecnosferaNOW)
Árbol de Contenidos para:
Organizar el contenido, la jerarquía y anidamiento de sus diferentes páginas
Representar gráficamente la estructura
CONCLUSIONES
En el análisis de los datos del Card Sorting telemático abierto (Optimal Workshop) se observan similitudes con el Card Sorting presencial: Clasificación de los eventos en virtuales y presenciales, presencia de un inicio, adquisición de entradas en el inicio, etc. También hubiese sido fructífero realizar el Card Sorting telemático en formato cerrado, para obtener una mayor participación y confirmar algunas deducciones. Tras los Card Sortings, se han realizado algunos cambios en la estructura, aplicados mediante el Árbol de Contenidos: la adición de información general en el inicio, se han añadido también botones de compartir en cada evento, se ha eliminado el espacio de «mi cuenta» al mantener la «zona de socios», etc.
Definición de la arquitectura de la información: diseño de la navegación
Realización de Diagramas de Flujo:
A partir de la información recogida (Escenarios, User Journeys y Árbol de Contenidos)
CONCLUSIONES
En un principio se realizaron varios diagramas, pero en el proceso de iteración se mejoraron para obtener mejores resultados. Con ellos se ha optimizado la experiencia de las diferentres rutas de los usuarios. Por ejemplo, se le han ahorrado pasos al usuario al añadir una página con resúmenes de las exposiciones de Realidad Aumentada, también se ha añadido confirmación al sistema, para darle más seguridad al usuario, etc.
Formalización de la arquitectura de la información: Prototipado
Con el Bocetado o Sketching se ha conseguido:
Generación rápida de ideas
Iteración rápida y efectiva
Ahorro en el proceso, debido a la rapidez y el bajo coste
Con el Wireframing o prototipo de baja calidad:
Se puede observar el funcionamiento de la app, ya que es interactivo
Todavía no incluye los elementos gráficos del diseño
Flujo 1: mirar rápidamente la oferta en la app de CCCB
Flujo 2: comprar entrada de Expo de Realidad Aumentada para ella y sus alumnos
Flujo 3: ver las instrucciones para la Expo
Flujo 4: comprar gafas de Realidad Virtual
Flujo 5: asistir a Conferencia en Streaming
Flujo 6: disfrutar con amigos de una Expo de Realidad Virtual
CONCLUSIONES
Tras el proceso llevado a cabo, se han plasmado los resultados obtenidos con las diferentes técnicas realizadas. Por ejemplo; la aplicación comienza con una página en la cual se dividen claramente los eventos presenciales de los virtuales. Esta separación está deducida a partir del Card Sorting realizado a los usuarios, también la adición de la info general en el Inicio, tienda, espacio de socios, etc.
Próximas acciones
Debido al tiempo limitado para este proyecto, cabe señalar que solo se ha realizado de una manera parcial, y en un caso hipotético de querer terminar el proyecto, sería necesario continuar el trabajo:
1. Validando las partes de la app que todavía no tenemos analizadas (antigua web) a partir del inventariado, y así completarlo.
2. Realizando otro Card Sorting, para completar el Árbol de Contenidos, y a partir de éste, confeccionando otros Diagramas de Flujo para completar el Prototipo, esta vez de alta fidelidad.
3. Evaluar y validar, por ejemplo mediante unos Tree testing, y unos Tests de Usuario, que nos proporcionarían información directa de mano del usuario sobre qué puntos mejorar, y así, de manera iterativa, ir perfeccionando la app.