Software online de gestión de eventos musicales
Una aplicación para la gestión global de eventos desde su contratación hasta su producción, pasando por la venta de entradas y todas la gestiones y la logística que implica la realización de un evento.
Proyecto financiado por:
Tareas:
- Diseño UX
- Arquitectura de información
- Diseño UI
- CSS
Fecha de realización:
octubre 2019
A veces los productos digitales son tan completos que resulta difícil conseguir que sean usables y entendibles para sus usuarios potenciales.
Este era el caso de Musikaze Pro, una aplicación tan completa que no resulta fácil ordenar toda la información que permite manejar esta plataforma para que su uso resulte fluido y fácil.
Y ese fue precisamente el encargo que me hizo la gente de Musikaze: tratar de hacer la plataforma más entendible y fácil de usar.
Investigación con usuarios
El proceso comenzó con una investigación con usuarios para comprobar cómo interactuaban con la plataforma en su estado inicial.
Se realizaron sesiones con usuarios del sector que podrían ser potenciales usuarios pero aún no conocían la plataforma y también con usuarios que ya utilizan la plataforma habitualmente.
Con toda la información recopilada en la investigación pudimos asegurarnos de cuales eran los puntos débiles, así como verificar qué tareas y flujos solían realizar más habitualmente los usuarios dentro de la plataforma y qué puntos de dolor se encontraban durante sus sesiones.
Con esto obtuvimos una visión clara de qué partes debían mejorarse y cómo podríamos mejorar el flujo de trabajo dentro la plataforma.
Arquitectura de información
Una de las conclusiones principales de la investigación con usuarios fue que debíamos poner el foco en mejorar la navegación para hacerla más accesible y entendible para todo tipo de usuarios y tareas.
Por eso planteé una nueva arquitectura de información tratando de simplificar la navegación poniendo el foco en las acciones que los usuarios realizan en la plataforma, y no tanto en las características que la plataforma ofrece.
Diseño de interfaz
Con esta arquitectura aprobada planteé el diseño visual de una nueva interfaz que mostrara una navegación más clara, fácil y cómoda de usar.
También traté de darle un estilo visual plano minimalista y más actual, basándome en patrones de diseño que ya son familiares para la mayoría de usuarios y jugando con el espacio vacío para compensar la cantidad de opciones que alberga cada una de las pantallas y estados de la plataforma.
Guía de estilos
Para terminar el proceso de diseño visual, creé una guía de estilos describiendo las pautas visuales para construir toda la nueva interfaz de la plataforma.
En ella se definen todos los elementos de la interfaz con enfoque de diseño atómico: desde los elementos más mínimos (átomos), pasando por su unión en bloques más complejos (moléculas), la unión de estas en conjuntos de componentes (organismos), hasta llegar a describir algunas de las pantallas de la plataforma (layouts) como referencia.
Con esta guía de estilos el equipo de desarrollo tenía todo lo necesario para implementar la nueva interfaz de la plataforma.
Maquetación CSS
Finalmente también me pidieron ayuda con la maquetación web, así que creé una maqueta estática en HTML y CSS de las pantallas definidas en la guía de estilos.
De esta forma, generé el marcado y los estilos para construir los componentes de la interfaz más habituales y sus variaciones, dejándolos listos para ser usados en desarrollo.