Music Ideas App

Music mobile application that gives ways to draft song, ideas for musician, producer, DJ.

Platform

Mobile iOS & Android

Tools

Pen/Paper, Sketch, Principle, Xcode

Role

UX & UI Designer

The Challenge

In this case study, the goal was to create a tool, that allow musician, producer, DJ to records music ideas in a most fluid and friction less experience.

User Behavior, Motivation, and Situation into Functional Needs

I’m designing a music mobile application that gives ways to draft song ideas for musician, producer, DJ.

Primary persona: Thom klangs

“Thom is a renowned electronic musician artist, traveling around the world to play in clubs as a DJ. But foremost he is a producer, we want to create tracks and transform ideas in their mind every-times he can.”

Empathy Mapping

Situational Mapping

“Thom is sitting at the airport listening to music with his smartphone and headphone. Suddenly, he has a sound idea in his mind. Now Thom would like to save his idea into his smartphone, translate from mind to concrete. The first thing, Thom should use a convenient app to records or write his idea before losing it.”

User story & contextual use scenarios

Thom wants to be able to create music when he travels, to achieve the goal of transform maximum spare time to make music and be able to do it anywhere. The current inability to do this is causing frustration about loosing idea, forget it after to be in front of the software in the studio. This solution would deliver a new area to create nomad music tools in correlation with existing products and increase sales.

Contextual use scenario
  1. Before leaving the studio, Thom bounces and sync his current project & files session on the cloud. On his smartphone, He opens his music app to sync everything before leaving. He makes his travel package for the show: MacBook, controllers, USB key, and iPhone.
  2. To go to the airport he takes public transport for 1 hour, He can’t stop thinking about the idea has begun before leaving. So, he takes his iPhone and opens the music app. App opened, he wants to listen to the draft he made earlier today, takes notes for future studio sessions,
  3. and make again music: create a melody, patterns, loops…
  4. Arrived at destination, go to the hostel, then to the club to play gigs. The next day flight back, the party give him a lot of motivation for future music, but too tired to create now, just check and listen easily to the previous draft.
  5. Back to home and studio, just time to synchronize all drafts he makes during the trip, use some and keep out other ideas.

Visual workflow scenario

Generate Contextual requirement

Functional workflow

Grab functional needs and elements, try to make the first workflow:

Sketch — Interface & Flow

The first sketch including functional elements generates in the previous contextual requirement section. I tried to create a different kind of interface for each specific view. I don’t implement the cloud feature in the following screens.

Records/Write note view

Big buttons, direct access to records or compose.

Idea list view

Area to view project list, a list view including: Title, keyword, waveforms, or global midi shape.

Detail Item view

After clicking on one item in the list view, the user can see more detail about it: listen, modify, share.

Wireframes low-fi

To get the user’s feedback as soon as possible, I selected from the user research and sketch, functional elements to build a testable prototype as soon as possible:

Low-fi prototype

A first low-fi prototype made in Principle software. Useful to create video and export prototype in app format:

First users feedbacks

I took a few friends and colleagues, asking us to accomplish specific tasks:

  • Card sorting: I print on paper each screen and made a card, randomly distribute, and ask users what is the order of screens makes sense for them. A simple test to ensure the reading of the app.

After user tests with different kinds of people (more or less musician), I get some interesting feedback. In resume:

  • Records Module: Split records module into two modules: Drums and Melody, it’s present on a lot of DAW & Apps. Show Drums view like drums machine with pads. And melody view with a classic piano roll.
  • Recording Audio: able to delete and restart records : add a clear button.
  • The details’ views were not clear for testers, also useless because that doesn’t add real benefit. I delete it and keep only one view to create/listen. Finally, that minify the width of the view.

High-fi user interface

Draw on paper news screen and finally design first views in sketch, in taking into consideration the previous users feedbacks. Now I can go further and create a beta app directly in Xcode.

High-fi prototype in Xcode & share

From this first shot of the user interface, I build a new prototype using the storyboard in Xcode. I use Xcode because it allows to build a real iOS app, and sharing easily with TestFlight or other. Because it’s a fast-prototype I only use an image, no coding yet.

From now, I need to get new user feedbacks, observe user using the app, iterate and rework until getting a product that meets expectations. Finally, made the alpha version.