The Brief
Our client came to us with the idea of a mobile app that allows non-musicians to make music with their QWERTY keyboard. The concept was great and he had a few pages of the app done, but the UX and UI weren’t fleshed out and users were struggling to understand what the purpose of the app was and how to play. The app only had the music-playing page and lacked on boarding pages to explain the app, tutorials to instruct users how to play, or things to keep them engaged, so our job was to:
Create on boarding, tutorials, gamify the app, create search functionality, and revise the musical interface for making music to make it more intuitive.
Usability Tests & Interviews of Current App
We began by conducting usability tests of the current app to see what was working and what wasn’t. This would help us identify pain points with the app and, later on, create features that could solve them.
The usability test revealed 3 key problems with the app:
Users weren’t sure of the purpose of the app — they weren’t aware it was an app meant to make music.
Users couldn’t figure out the music-playing interface and therefore couldn’t play music.
With no progress-tracking or gamification, users weren’t compelled to come back to the app.
Surveys
With surveys, we wanted to understand the following:
Since we wanted to add a skill-building and gamification component to the app to give it more purpose and stickiness, we needed to know what users think of skill-building apps and gaming apps; what encourages them to download these apps; and what keeps them going in the app.
Since this would be an app allowing users to actually make music with a keyboard, we also wanted to gauge whether respondents play — or want to play — musical instruments, and if not, what their barriers are to playing them.
The results regarding playing a musical instrument were positive: respondents want to be able to make music, but they don’t want to buy an expensive instrument and can’t read sheet music. This app could potentially fill this gap by providing an experience in which users can make music with a device they already own: their phone.
In terms of understanding what users like about skill-building and gaming apps, surveys showed that users like the satisfaction of achievement and progress, as well as rewards. What they dislike about these apps is the sometimes childish feel, having to pay for functions, and notifications.
Competitive Analysis
Analyzing competitors revealed that there really isn’t an app like the client’s out there. We mostly found a dichotomy between, on the one hand, apps that teach users to read traditional music, and on the other hand, apps like Smule or Guitar Band where users use finger dexterity to touch notes on their phone and therefore create sounds. The planning stage consisted of collating all our research into insights that could guide us as we started actually building the app. We started with generating personas.
Personas
We identified a few personas based on interviews and competitor research, and discussed the idea of one day developing this app for children to use in schools to facilitate learning the basics of music. However, to build the MVP and main functionalities, we decided to focus on a primary user: The Music Wannabe.
Customer Journey
We then mapped the customer journey, outlining users’ needs, pain points, and touch points with the app, as well as opportunities for the app to both satisfy needs and alleviate pain points. The journey began with customers searching for an app that allows them make music, not finding apps that suit them, seeing a Facebook ad for this app, going through on boarding to learn how to use it, and finally becoming a habitual app user through gamification.
Affinity Diagram
In order to tease out our main features, we wrote down all our insights from testing and research onto Post-It notes and grouped them into an affinity diagram.
Feature Prioritization
Based on the affinity diagram, we were able to boil down features and group them using an axis of “Value to Users” and “Difficulty to Implement.”
Site Map
We also created a site map and identified the key areas that needed to appear on the tab bar, which would allow users to quickly switch between various sections of the app. They were: Play, Browse, Train, Favorites’, and Profile — everything users needed would be accessible in these areas and a quick toggle away.
User Flow
The user flow we decided to focus on was based around the main components of the MVP:
On boarding and the initial tutorial for a new user before sign up
Sign in
Home & browsing for a song
Adding a song to Favourites
Playing a song (and the tutorial that would explain the interface to the new user)
Seeing progress on the profile page Mid-Fi Wireframes
As we moved to mid-fidelity, we began to flesh out concepts further and incorporate copy in on-boarding and tutorials to ensure that users truly understood what the app purpose was and how to use the interface.
Usability Testing
Image for post Image for postWe then prototyped using Invision and began testing mid-fi designs on users to assess what needed tweaking. While watching a target user, Martin — a late-20s lover of skill-building and gaming apps — interact with the app, we realized that the entire app needed more clear gamification, so we chose a star-based points system, in which every song is worth 3 stars — and users get either 1, 2, or 3 stars after playing a song, based on how well they performed. This would encourage them to re-play songs to master them and is more fun than the previous percentage-based system of feedback we had previously, which we moved to the “training” section, which I’ll explain below. The star-based rewards system was also designed to allow users to redeem rewards to unlock new features of the app, like new songs or instruments, which would give them tangible rewards. We also incorporated “missions” that would allow users to rack up more stars and stay engaged in the game. Testing also revealed a need to separate the “training” section from the “play” section for users who don’t want to train and simply want to enjoy the game. To reflect this, we broke up the data on the Profile and created a 3-segment tab system, showing users their 1) overall achievements, 2) missions, and 3) training progress to help them better visualizes their progress throughout the app. To sprinkle gamification thoroughly throughout the app, we added a “Song of the Day” to the home page, which allows users to rack up more points, and added a brief snapshot of the user’s progress to help them immediately visualize where they’re at in the game and be compelled to earn more stars. We also added the ability for users to invite friends from Facebook to the app to start a “jam sash” with someone they know.
CONCLUSION
The key part of this brief was finding a way to make the music-playing interface much clearer to users, which we believe we solved with a tracker, as well as lit up and grayed out notes. Beyond that, it was important to show users what the app is immediately and how to use it with on boarding and tutorials, as well as gamify the experience to keep users coming back. We believe that our solutions have helped to achieve this.
T H A N K Y O U !!