Musikaze Pro

+

Diseño UX + UI para Musikaze Pro

El reto

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 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.

La aplicación de Musikaze es tan completa que no resulta fácil ordenar toda la información que puede manejarse en esta plataforma para que su manejo 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 que ya utilizan la plataforma para ver su opinión sobre el flujo de interacción que esta permitía. También hice pruebas de usabilidad con usuarios del sector que podrían ser potenciales usuarios pero aún no la conocían.

Con toda la información recopilada en la investigación pudimos comprobar cuales eran los puntos fuertes y débiles, qué tareas solían realizar y qué partes podrían mejorar su trabajo en la plataforma.

Arquitectura de información

A partir de ahí, planteé una nueva arquitectura de información tratando de simplificar la navegación e intentando poner 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 visual

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, así como con uno estilo visual más actual y minimalista.

Para terminar el proceso de diseño creé una guía de estilos describiendo las pautas visuales para construir toda la nueva interfaz de la plataforma y definiendo los elementos más mínimos (átomos) y su unión en bloques más complejos (moléculas) que luego formarán las distintas pantallas de la plataforma.

Maquetación CSS

Con esta guía de estilos el equipo de desarrollo estaba listo para implementar la nueva interfaz de la plataforma.

Finalmente me pidieron también ayuda con la maquetación web y creé una maqueta estática en HTML y CSS de las principales pantallas, construyendo así los elementos descritos en la guía de estilos como elementos de interfaz de navegador listos para ser usados en desarrollo.

Algunas páginas de la guía de estilos que describe los componentes del diseño de interfaz de la aplicación Musikaze Pro. Varias pantallas diseñadas para la aplicación Musikaze Pro. En orden descendente:¡ pantalla de inicio (dashboard), listado de eventos, nuevo evento y login.