A Music Collaboration App

what it does

We Turned to People

The Team:

Olivia Brown: Interface Design & Logo
Cristina Keane: Marketing Site Design

We went out in the wild — we watched human behavior, took notes, and discovered patterns. We surveyed over 100 people ages 18-52 to learn about their music and entertainment preferences, and a few conclusions were drawn:


Listened to music for over 7 hours a week


Also used social media for at least that long.


Listen to music or audio on their phones during their commute

fannotate research fannotate ideation fannotate flowchart
β€œTo design an easy-to-use interface, pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior.” – Jakob Nielsen
user testing

Changing the Face of Music

This app provides an entirely new creation process. Artists provide music samples or graphics (t-shirt choices, band posters, etc.) to directly receive insight from fans. The entire process is driven by the power of communication, thus increasing the sample's popularity and 'amping it up' for release time. It's instant A/B testing — while making fans feel like a part of the band.

It's all about collaboration & discovery.

We did a lot of collaboration on the wireframes. Sorting out the exact user flow of this app is what took the most planning and teamwork. We drew a lot of mobile experience principles Josh Clark's book, Tapworthy. While the wireframes were being sorted out, I simultaneously worked on high level interactions such as screen swiping and menu options with jQuery mobile.

interaction gif interaction gif

Fun With Interactions!

Hands down my favorite part of this app are the interactions and little changes between states — essentially the animations. There is a lot going on here, so as I developed, I made lists:

  • Preference Configuration Form
  • Rearranging Artist Animation
  • Rearranging Artists with Drag
  • Dragging the Medal to Vote
  • Reading a drag and drop event
  • Creating a change on the event
  • Reading that all of the medals have been places
  • Animating the rotator to the timing of the music
  • Making music play and pause

The lists went on and on...

Luckily, I discovered pep.js, a small jQuery plugin for kinetic dragging and dropping on mobile and desktop. It helped a lot of the draggables, including the medals and home screen — accounting for little touches like momentum and assisting in the snapping-to-div feature. So, thanks Brian Gonzalez!

menu menu menu menu
Making fans feel like a part of the band. Giving artists instant feedback. Promoting the talent within a record label — That's Fannotate.