sample high resolution screen for music compdefine section screen shotsample high resolution screen for music comp
Final designs

MusiComp

Songwriting and rehearsal tool for musicians
1.15.16 - 7.15.16

Problem

As a aspiring musician, I need to have a way to document my writing and share that document in a rehearsal setting so myself and others can understand (and retain) song structure.

Team

  • Designer/Front End Developer
  • Back End Developer/ Mentor

My Process

case study highlights are bolded

Discover

  • User Interviews
  • Journey Map

Define

  • Strategy Blueprint
  • Experience Vision
  • User Need Statements

Design

  • Competitive Analysis
  • Card Sorting
  • Ideation
  • Wireframing

Set Up

Bandmates in Origin Mile really looked forward to meeting once a week. It was a chance to escape routine for about an hour, make noise, and spend time with three good friends. There was a glaring problem - it was hard to get momentum. It was frustrating for all. About this time, I was learning how to write code and getting immersed in user experience design - I thought this would be a perfect chance to start applying my knowledge!

ernest playing guitar in cafe

Discover

I started by conducting user interviews with all of the band members with the following questions:

  • What was their role in the band?
  • What did they enjoy about being in the band?
  • What would they change?
  • What were their personal goals in being in the band?
discover illlustration

I also was able to capture the journey map for this scope: having a song idea to documenting that idea digitally.

journey map for music comp

Define

After ruminating on the research documentation, completing the competitive analysis, I completed a Strategy Blueprint. From this, our user need statements were derived:

  • As a band member, I need to quickly document song structure so that I can communicate my vision to the rest of the band.
  • As a band member, I need to see the song structure we are rehearsing so that I can know where and when to play.
define illustrationUX strategy blueprint

Design

The first step was to realize the tool’s structure. I set up a card sort with each band member, and then as a group to generate more ideas. This exercise was much more valuable than I anticipated. We were able to conceive a lot of product features that would not have been possible from me alone!

design illustration
card sort screen shotscard sort screen shots

There were many prototype tests to iteratively get to the finish line. Here are the assets from a lo-fi “first time visit” flow I had each band mate use and give feedback on. The big takeaways were:

  • The steps to get to the heart of the tool were about right, but the “giant block of colors” view was too “heavy”.
  • Try a show/hide function to lessen the cognitive load and put back some screen real estate.
create a song user flow

In parallel with all of the music making and design work, I also was learning how to create a MEAN app (Mongo,Express, Angular, Node). I was able to get a fully functional front end running in the browser to usability test with the band.

sign in page conceptsign in page conceptmusiComp sign in page concept
LogIn screen exploration
define section screen shotsample high resolution screen for music comp
Designs for creating and arranging sections

In Retrospect...

At the end of the journey, the band felt it was more feasible to go with giant post-its. But you know what? I found UX along the way, learned a ton, and found a new calling in life. I'd call that a victory, wouldn't you?

That’s it! I hope you enjoyed this quick tour. Please let me know if you would like to discuss my skills and experience a bit more.

Back to Case Studies