This is how I designed an app that brings the joy of making music to everyone.

Musitude

UX Design

The project

Musitude is on a mission to bring the joy of playing music to non-musicians. It allows users to use the most widely known interface - the QWERTY keyboard - to create beautiful music.

Musitude engaged with us to optimize the app by:
1. Ensuring users understood the purpose of the app
2. Introducing gamification3. Increasing engagement
4. Improving the visual appeal of the app

Musitude

UX Design

Research


This was a very unique project - creating what is effectively a digital musical instrument. The process involved a lot of usability testing on the current app which allowed us to understand the users' difficulties with the app and how we can improve it. We also conducted an online survey and domain research to understand what people liked and disliked about game and skill-building apps.

Below is a summary of our research findings:


We created an affinity diagram with our research findings to draw out key themes, which we used to decide on which features we should prioritise.

Below is the list of features we decided on.

Planning

Based on our research, we created three user personas to better understand our users. Our main user, which we decided to focus on, is ‘The Musician Wannabee’.

Based on this user persona, we created a user journey map and then moved on to create a user flow and site map, which gave us a structure to the app in which to build our designs.

Design

In order to create the best and most user-friendly screens, we conducted brainstorming sessions, where we set a time limit to come up with as many designs for each of the main screens as we could. We then collaborated on our designs and pulled out the best features from each. We mocked up digital wireframes and prototyped them. We used this prototype to conduct usability testing with our designs. Based on user feedback we simplified some of the aspects of the scoring and created a sleeker design which is more user-friendly.​

We then handed the wireframes over to the UI team who bought the app to life! Below you can see an example of the transition from first wireframes to high fidelity screens.

The final screens

Want to work together?

If you like what you see and want to work together, get in touch!