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
Ámbito

Académico

Año

2020

Resumen

Investigación

Brief de negocio

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

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.

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

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.