Unir a artistas y diseñadores centrando el foco en el talento emergente
Diseño de App
Blanc!
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
- UX designer
- UI designer
Ámbito
Académico
Año
2020
Resumen
Investigación
Brief de negocio
- Requisitos de negocio
- Requisitos de usuario
- Fichas User Persona
Objetivos
Unir a artistas y diseñadores
Destacar el talento emergente
Crear una App creativa y útil
Interacción mediante la voz
Acciones
Análizar los User Persona
Conceptualizar la interacción
Definir el
contenido
Diseñar la navegación
Diseñar la interacción
1
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
Anterior
Siguiente
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
2
Etiquetado
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.
Card Sorting
Categorías
Para las categorías los usuarios organizaron las tarjetas en grupos lógicos. Las pruebas se realizaron en remoto. Los pares de categorías con más afinidad se agruparon en tres zonas que podrían corresponder a un espacio personal, información sobre el festival e información sobre las personas que se reúnen en él.
Funcionalidades
Las agrupaciones de las funcionalidades resultaron algo más difusas, pero sí se puede ver como algunas funcionalidades afines quedan agrupadas, como las de búsqueda y exploración y las destinadas a socializar. En el dendograma se identifican claramente tres grandes grupos que proporcionaron indicadores de como el usuario aglutina las herramientas.
Los Card Sortings sirvieron para obtener un etiquetado y organización acordes con el modelo mental del usuario
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.
Los Card Sortings sirvieron para obtener un etiquetado y organización acordes con el modelo mental del usuario
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.
Card Sorting
Categorías
Para las categorías los usuarios organizaron las tarjetas en grupos lógicos. Las pruebas se realizaron en remoto. Los pares de categorías con más afinidad se agruparon en tres zonas que podrían corresponder a un espacio personal, información sobre el festival e información sobre las personas que se reúnen en él.
Funcionalidades
Las agrupaciones de las funcionalidades resultaron algo más difusas, pero sí se puede ver como algunas funcionalidades afines quedan agrupadas, como las de búsqueda y exploración y las destinadas a socializar. En el dendograma se identifican claramente tres grandes grupos que proporcionaron indicadores de como el usuario aglutina las herramientas.
3
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.
Árbol de contenidos
El árbol de contenidos es útil para esquematizar la organización de la información así como para jerarquizar apartados
El árbol de contenidos es útil para esquematizar la organización de la información así como para jerarquizar apartados
El árbol de contenidos ofrece una aproximación visual de los contenidos del sistema y es útil a la hora de diseñar la navegación mediante los diagramas de flujo.
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
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”
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”
4
Prototipos I
Una vez definida la navegación llega el momento de prototipar, empezando por bocetos rápidos a mano para terminar con prototipos de baja y alta fidelidad.
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
Anterior
Siguiente
Wireflows
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
5
Prototipos II
Tras tener claros los wireframes y sus flujos de navegación, se tomaron como base para generar un prototipo interactivo de baja fidelidad.
El prototipo recoge las tareas y funciones básicas planteadas a lo largo de la fase de generación
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.
Conclusiones
Resultados
Cumple los requisitos de negocio
La App es útil para el usuario
Permite formar una red social
Diseño simple y minimalista
Tras el proceso de trabajo se obtuvo un artefacto que cumplía con los requisitos de negocio y con las necesidades de los usuarios. Se echó de menos la ejecución de más metodologías con usuarios implicados, como por ejemplo los tree testings, pruebas que yo habría añadido como fase previa a los diagramas de flujo, ya que permiten validar si la estructura planteada en el árbol de contenidos es la más adecuada, pero por razones de tiempos de entrega no fue posible su realización.
En cuanto a lo visual, se optó por un diseño simple y minimalista, siguiendo con la línea de estilo del festival y tomando como fuente su página web. Cabe decir que el diseño en alta fidelidad (que no forma parte del proyecto) debería contar con detalles sutiles de apariencia, efectos o sombreados, puesto que la intención sería la de mantener la sobriedad y la limpieza en el diseño.
El siguiente paso lógico una vez realizado el prototipo en alta fidelidad sería el de evaluar la propuesta con usuarios mediante tests de usabilidad, y con los datos cualitativos y cuantitativos en la mano, iterar en el diseño a fin de implementar mejoras de usabilidad.
