App Blanc!
Unir a artistas y diseñadores centrando el foco en el talento emergente
Visión general
Blanc! es un festival de diseño, creatividad e innovación dirigido por y para diseñadores, que apuesta por el diseño emergente y en el que durante tres días, se dan conferencias, masterclasses y actividades alrededor del mundo del diseño. Partiendo de las necesidades planteadas en el briefing facilitado por el festival, se ha dado una respuesta de diseño teniendo en cuenta los requisitos de negocio y de usuario planteados en el informe.
Tipo de proyecto
Arquitectura de información, diseño de navegación y wireframes
Roles
- Diseñador UX
- Diseñador UI
Ámbito
Académico
Año
2020
Proceso de trabajo
Briefing
Requisitos de Negocio
Requisitos de Usuario
Fichas User Persona
Ideación
Conceptualización
Arquitectura de Información
Navegación
Prototipado
Sketchings
Prototipos baja fidelidad
Tipo de proyecto
Arquitectura de información, diseño de navegación y wireframes
Roles
- Diseñador UX
- Diseñador UI
Ámbito
Académico
Año
2020
Contenidos
Proceso de trabajo
Investigación
Requisitos de Negocio
Requisitos de Usuario
Fichas User Persona
Ideación
Conceptualización
Arquitectura de información
Navegación
Prototipado
Sketchings
Prototipos baja fidelidad
1
El problema
La filosofía de Blanc se basa en crear una experiencia única para los asistentes. Por eso, de cara a la edición de 2020, quisieron lanzar una app móvil que reflejase el espíritu del festival y que contribuyera a optimizar la experiencia de los asistentes al evento. El evento duraría tres días y su programación incluiría conferencias con más de 60 ponentes, masterclasses, exposiciones y stands de productos. Además, Blanc destaca por su carácter festivo, de ahí que la música sea un ingrediente fundamental en cada edición.
Objetivos del proyecto
Crear una App que sea realmente útil para todos los asistentes al festival:
- Debe reflejar el espiritu de Blanc: utilizar la creatividad y la innovación para crear una experiencia única.
- Analizar el potencial de la interacción mediante la voz para facilitar el uso de la App por parte del público.
Consideraciones clave
Es fundamental que la App sea coherente con el concepto del festival. En este sentido, la organización se encargó definir ese concepto realizando una investigación con usuarios incluyendo los insights en el briefing facilitado para el proyecto.
2
Los Usuarios
Definición de usuarios
El negocio facilitó junto al informe dos fichas User Persona fruto de la investigación con usuarios efectuada por la organización, estas fichas sirvieron como base a la hora de diseñar la solución. Del informe se extraen una serie de características de perfil de usuario, las cuales definieron nuestro público objetivo de cara al producto.
Grupos de usuarios
El perfil target son profesionales y/o aficionados del diseño y del arte, de entre 25 y 60 años. Podemos segmentar el perfil target en dos grupos principales:
- Diseñadores jóvenes que acuden al festival para conocer el trabajo de otros profesionales, así como para darse a conocer y crear una red de contactos.
- Diseñadores y artistas profesionales del mundo del diseño y/o del arte y que acuden al festival para descubrir tendencias, pero también para ampliar su red de contactos.
Requisitos de Usuario
- Contar con la aplicación algunas semanas antes del festival para planificar su visita
- Posibilidad de comprar entradas
- Información sobre los ponentes/artistas
- Información sobre las conferencias
- Información sobre obras expuestas
- Posibilidad de reservar plaza en las charlas
- Programación con los horarios y localización de los eventos
- Poder interactuar con la App mediante la voz para facilitar su interacción del mundo del diseño y/o del arte y que acuden al festival para descubrir tendencias, pero también para ampliar su red de contactos
3
Proceso e iteraciones
Flujo de trabajo
Conceptualización
- Análisis del briefing
- Escenarios
- User Journeys
Arquitectura de Información
- Inventario de contenidos
- Card Sorting
- Árbol de contenidos
Navegación
- Diagramas de flujo
- Sketchings
- Wireframes
Prototipo
- Prototipo interactivo
Conceptualización
- Análisis del briefing
- Escenarios
- User Journeys
Arquitectura de Información
- Inventario de contenidos
- Card Sorting
- Árbol de contenidos
Navegación
- Diagramas de flujo
- Sketchings
- Wireframes
Prototipo
Prototipo interactivo
Conceptualización
Partiendo de las fichas User Persona y de los requisitos facilitados por el festival, se desarrollaron seis escenarios ficticios en los que se narró la relación del usuario con el producto desde el punto de vista del usuario.
Se trabajaron una serie de metodologías englobadas en el marco del Diseño Centrado en el Usuario
Escenarios y User Journeys
Conceptualizar la interacción mediante escenarios ayudó a generar situaciones y contextos de uso del producto y con estos como base, se mapearon las interacciones de los usuarios con respecto al producto mediante User Journeys. Esto permitió obtener oportunidades de diseño, las cuales se tradujeron en una serie de requisitos de producto con los que tendrá que contar la App.
Se desarrollaron seis escenarios ficticios en los que se narró la relación del usuario con el producto
Se mapearon las interacciones de los usuarios con respecto al producto mediante User Journeys
Arquitectura de la Información
Una vez conceptualizada la interacción y tras definir los requisitos del proyecto se elaboró un inventario de contenidos del producto como fase previa al etiquetado.
Inventario de contenidos
El inventario recopila la información recogida en las fases previas de investigación y definición del problema y reúne las categorías, las páginas de contenido, así como las funcionalidades y herramientas con las que contará la App.
Los Card Sorting sirvieron para obtener un etiquetado y organización acordes con el modelo mental del usuario
Card Sorting
Los usuarios organizaron tarjetas en grupos lógicos para las categorías en pruebas realizadas de forma remota. Los pares de categorías con más afinidad se agruparon en tres zonas que corresponden a espacio personal, información sobre el festival y las personas que se reunen en él.
Las funcionalidades resultaron algo más difusas, pero se agruparon funcionalidades afines, como las de búsqueda y exploración y las destinadas a socializar. En el dendograma se identificaron tres grandes grupos que indican cómo los usuarios aglutinan herramientas.
Árbol de contenidos
Tras el análisis de los datos obtenidos con los Card Sorting y con el contenido del producto ya definido, se elaboró un árbol de contenidos como fase previa al diseño de la navegación. Se decidió que el sistema dispondría de cinco categorías:
- Mi espacio: espacio dedicado a la cuenta personal del usuario, sus feeds, agenda, contactos, etc.
- Blanc: información general sobre el festival, sobre la organización y sus otras actividades.
- Actividades: información sobre la programación del festival así como de los eventos.
- Social: espacio dedicado a la exploración de otros perfiles y a la interacción entre los asistentes y como galería de sus trabajos.
- Herramientas: set de herramientas de la App, principalmente herramientas de búsqueda y exploración así como la configuración del sistema.
Diagramas de flujo
Se realizó un diagrama de flujo por cada tarea planteada en los escenarios y User Journey. Esta metodología destaca por su utilidad a la hora de detectar errores en la navegación o en la estructura planteada en el árbol de contenidos. Se detectó que los procesos de más complejidad son aquellos que tienen que ver con el punto de entrada del usuario en el sistema, lo cual permitió poner especial atención en como trazar la navegación en este punto.
Se realizó un diagrama de flujo por cada tarea (…) Se detectó que los procesos de más complejidad son aquellos que tienen que ver con el punto de entrada del usuario en el sistema
Sketchings
Una vez definida la organización y navegación, se generó de una primera aproximación del aspecto visual de la aplicación mediante el dibujo de bocetos rápidos. Los bocetos a mano permiten hacer modificaciones rápidas en el diseño sin repercutir en costes o tiempo.
Los bocetos a mano ofrecen la gran ventaja de poder hacer iteraciones rápidas y de bajo coste
Wireframes
Tras el bocetado rápido realizado con los sketchings se obtuvo una aproximación del diseño, que posteriormente fue refinado mediante prototipos de baja fidelidad, en los que se definieron detalles adicionales en cuanto a diseño. Así mismo, mediante los wireframes se elaboró el flujo de navegación o wireflows, los cuales sirvieron para definir el prototipo interactivo.
Partiendo de los wireframes se elaboró el flujo de navegación o wireflows, los cuales sirvieron para definir la navegación del prototipo interactivo
4
Diseño final
Prototipo Interactivo
Encontramos un proceso de inicio de sesión y de alta como punto de entrada, seguido de un asistente de creación de porfolio y un sistema de navegación mediante una doble barra inferior fija, desde la que se pueden explorar las principales secciones y subcategorías.
También se ha implementado un sistema de agenda de eventos y otro de solicitud de contacto en los perfiles de usuario lo cual permite generar una red de contactos y poder conectar a artistas y diseñadores.
El prototipo recoge las tareas y funciones básicas planteadas a lo largo de la fase de generación
5
Resultados
Lo que aprendí
Tras realizar este proyecto aprendí varias lecciones importantes. En primer lugar, aprendí que la realización de pruebas con usuarios es fundamental para validar cualquier propuesta de diseño. El tree testing, en particular, es una técnica valiosa que me habría gustado haber incluido en una fase previa a los diagramas de flujo para asegurarme de que la estructura propuesta era la más adecuada.
También aprendí la importancia de mantener la coherencia visual y la simplicidad en el diseño, como se hizo en este proyecto siguiendo la línea de estilo del festival y tomando como referencia su página web.
Por último, aprendí la importancia de hacer pruebas de usabilidad antes de pasar a la etapa de prototipado en alta fidelidad.
Próximos pasos
Algunas líneas de trabajo que quedarían pendientes a la hora de seguir iterando con el proyecto serían las siguientes:
- Realizar pruebas de usabilidad con usuarios reales, para la identificación de fortalezas y debilidades del diseño actual.
- Iterar en el diseño para aplicar mejoras de usabilidad
- Prestar atención al feedback del usuario para mejorar continuamente la experiencia de usuario.
