Online music event management software
An overall event management application, from contracting to production, including ticket sales and all the steps and logistics involved in organising an event.
My functions:
- UX design
- Information architecture
- UI design
- CSS layout
Date of completion:
October 2019
Sometimes digital products are so extensive that it is difficult to make them usable and understandable for their potential users.
This was the case for Musikaze Pro, an application so complete that it is not easy to organise all the information that allows you to manage this platform to make its use smooth and easy.
And that was indeed the assignment I was given by the people at Musikaze: try to make the platform more understandable and easy to use.
User research
The process began with a user research to see how users interacted with the platform in its initial state.
Sessions were held with users in the sector who could be potential users but were not yet familiar with the platform and also with users who already use the platform on a regular basis.
With all the information gathered in the research we were able to make sure which were the weak points, as well as to verify which tasks and flows users used to perform most frequently within the platform and which pain points they encountered during their sessions.
This gave us a clear vision of which parts needed to be improved and how we could improve the workflow within the platform.
Information architecture
One of the main conclusions from the user research was that we should focus on improving navigation to make it more accessible and understandable for all types of users and tasks.
That is why I proposed a new information architecture, trying to simplify navigation by focusing on the actions that users perform on the platform, and not so much on the features that the platform offers.
UI design
With this approved architecture, I proposed the visual design of a new interface that would show a clearer, easier and more user-friendly navigation.
I also tried to give it a minimalist and more contemporary flat visual style, relying on design patterns that are already familiar to most users and playing with empty space to compensate for the amount of options that each of the screens and states of the platform host.
Style guide
To finalise the visual design process, I created a style guide describing the visual guidelines for building the entire new platform interface.
It defines all the elements of the interface with an atomic design approach: from the smallest elements (atoms), through their union in more complex blocks (molecules), the union of these in sets of components (organisms), up to describing some of the platform screens (layouts) as a reference.
With this style guide the development team had everything they needed to implement the new platform interface.
CSS Layout
Finally I was also asked for help with the web layout, so I created a static HTML and CSS layout of the screens defined in the style guide.
In this way, I generated the markup and styles to build the most common interface components and their variations, leaving them ready to be used in development.