A music composition tool

Problem: Local Atlanta rockers Origin Mile found themselves in a rut.  To write new material, they had to use poster-sized post its to capture and communicate song structure.  This was tedious and wasteful, there had to be a better way!

Idea: digitize this process.  Make it easier, modifiable, and friendlier to the environment. 


To kick off the project, I conducted user interviews with the following objectives in mind:

  • gauge concept interest
  • uncover any frustrations
  • determine the most valuable tasks

Prior to meeting with my users, I conducted a quick competitive analysis.  The goal was to identify features, look at visual impact, and navigation.  I then brought one of those tools for the users to use.

 Competitor #1

Competitor #1

 Competitor #2

Competitor #2

Testing revealed that:

  1. The product needed to have a simple visual layout.  There was 'too much' going on in the current tool.
  2. The 'crescendo' function was not needed
  3. Simplify the background.  No graphics are needed.

From the interviews, there was definite enthusiasm behind the idea (good news!).  By prioritizing the data, the MVP's mission was realized:

  • show overall song structure (in a similar manner to the poster post-its)
  • communicate where and how each member should play in each section of the song

Two user archetypes seemed to emerge from the sessions, so those were captured in provisional user personas.  From knowing the users' goals, motivations, and fears, several user flows were drafted.

Example persona

Primary user in user flow #1


Upon entry into the design phase, the application's structure came to fruition with sketches.

In parallel with the sketches, I created a site map in Omnigraffle to a) envision how everything would tie together and b) document the final stages of the user flows.  The site map ended up being an experiment in combining a user flow and site map (one could argue the outcome!).

Several cycles of sketches supplied the mental images needed to create wireframes in Balsamiq.

Problem: the key challenge in wire framing came in determining the best layout for content heavy screens.  The users had voiced that they wanted to use the application in the rehearsal space, on their phones.

Solution: the users liked the idea of orienting the "define" view vertically, which allowed for phone-friendly use.

 "define" view wire frame

"define" view wire frame


Once the wireframes were complete with hotspots, I reviewed the deck with my team mate (a sr. javascript developer).  Over the coming months, we jointly developed the MVP using Angular(1.x), MongoDB, NodeJS, and Express.  I also wrote all unit tests in Jasmine and implemented continuous integration with Travis.