From Users to Heroes

A Thousand Faces

I hadn’t heard of Beats Antique until Alec Steinfeld of C3 Presents introduced me to them by asking for my help on developing an online campaign to compliment their latest album A Thousand Faces: Act I and it’s successfully kickstarted tour.

I’m a big fan of structured creativity, and it appeared that Beats Antique took a similar approach on this new record by leaning on American writer, Joseph Campbell’s monomyth to devise a formula by which they could write and record their songs. Joesph summarizes the monomyth as follows:

A hero ventures forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man.

Beats Antique wants to take you on this journey through their music, and have done so tremendously on Act I and the upcoming Act 2 by creating an electronic sound that feels worldly in it’s fusion of different cultural genres.

Revelation #

Between the audio from the record and the production visuals being developed thanks to support from Kickstarter, we had a plethora of content to work with in developing a way for fans to become a part of this experience. Our goals were simple:

The consumption piece was easy enough, but developing a piece of content that is meaningful to both fans and non-fans alike takes a bit of thinking. After a lengthy call with the band, it finally hit me: Words. Not images. Not video. Not drawings or audio. Words. Blogs. Stories.

What if we could convince users to write their own stories in parallel with the one we were trying to tell? Joseph writes about a hero that follows the same general narrative path but has thousands of different faces. Could our fan become one of a thousand and would they share their own story?

Could they become a hero?

Call to Adventure #

I’ve developed campaigns that have subjected users to all sorts of interactive requirements. From tweeting to taking photos to recording audio. Hell, I even made them change their religion recently. However, I’ve never asked them to write… and I’m not talking about comments or tweets. I’m talking about sharing personal stories in a meaningful way. So I devised a three part strategy to get my users to contribute.

1. Involvement #

It’s very important to show users how others have already become involved because participation breeds more participation. We’ve done this by providing a prominent listing of the latest entries and by getting our writers to share their work socially. The band also contributed their own journal entries to get things started.

2. Inspiration #

Sometimes it helps to lead in creativity, and we’ve done this by providing a prompt to each phase of the journey directly to the user, beginning with the open-ended query: “What’s Your Story?” You’d be surprised how quickly your mind gravitates towards a thought after reading a simple question.

3. Incentive #

Meaningful prizing also helps maximize contributions without forfitting quality. The band chose to reward all fans who complete their Journal entries with a free download of the upcoming Act 2, and a chance to see the band on tour. Write a story and get the next record for free? Can’t beat that.

Unknown #

User Interface

Journeying into the unknown as a designer is one of the most exciting and challenging aspects of web development. I received many great assets from Beats Antique, but I needed to transform them into an interface and structure that would serve our campaign well. I kept an open mind throughout this process and really pushed concepts into some weird directions until I ended on the interface you see now. One important tactic was considering mobile throughout the entire process, as this allowed me to truly focus on solving the basic problems and not venturing too far off.

I gathered my thoughts and simplified the UX into three core features: Story, Map, and Journal. I figured these were the three things a hero would definitely need while on a journey.

Known #

Heroes #

Our heroes ventured forth from all parts of the web, including the provinces of Facebook, Twitter, and Google+. In order to prepare their identities for adventure, I was aided by the supernatural powers of Omniauth to craft a multi-authentication login system.

One interesting technique I’m using during the onboarding process is generating all ten of my heroes’ journal pages as blank entries in the database. This removes the need for me to see if entries exist as heroes contribute their thoughts and makes it feel more like they’ve been handed a blank journal which they need to fill in.

Story #

The first thing heroes see when they login, is the story portal which provides inspirational media and text related to each track or chapter and the ability to navigate from one to another. A question and quote was graciously provided by the Joseph Campbell Foundation for each chapter. From here heroes can choose to watch a Vimeo video showing raw visuals from the tour production or write an answer to the posed question in their journal.

Map #

A Thousand Faces Map

Heroes can pull out their map to see how far they have traveled and where they are headed next. While I initially looked into leaning on a tiled map framework for it’s development, I instead chose to build a simple zoomable and pannable map using Kinetic.JS.

Creating a draggable image using Kinetic is dead simple: = new Kinetic.Image
  draggable: true

And linking up the zoom actions, just required adjusting the scale.

when "Zoom In"
  map.setScale map.getScaleX() + 0.1
when "Zoom Out"
  map.setScale map.getScaleX() - 0.1

We’re currently under utilizing the map, but I plan on expanding upon it as the campaign evolves. Special thanks to Leighton Kelly for illustrating the map as he absolutely crushed it.

Journal #

One of the main inspirations for me beginning to write on this very blog was that Svbtle provides an appealing editor for compiling ideas and publishing posts. I brought in what I liked about our setup here as a base for designing the responsive hero’s journal used in our campaign. The key being jQuery Autosize written by Jack Moore which automatically sizes the borderless textarea for an optimal writing experience which grows seamlessly with your thoughts.

Epilogue #

This was one of those ideas where we truly didn’t know what to expect until we made it available to our fans, but then again, Beats Antique fans are no strangers to being creative and they immediately reacted positively and started contributing. I casually logged in to see how the campaign was going and read a few entries. What struck me is that these aren’t static pieces of content; they’re open-ended personal musings which will evolve as our heroes transform. You read someone’s overture and you can’t help but wonder what they’ll write next. Correction: You can’t help but wonder where our heroes journey will take them next.

Begin Your Journey


Now read this

Sim Bootleg

On the art of bootlegging live concerts and YouTube WebM video. This post goes out to all the bootleggers out there, sacrificing their own concert experience so we can relive our favorites moments on YouTube later. Their efforts, for the... Continue →