ROAD CASE

by Skip Allums

This is a web-friendly version of the documentation for my thesis project for the MFA in Web Design / New Media program at Academy of Art University. You can play with the Road Case prototype on most web-ready devices by clicking here (no login id required). To keep up with the project's progress, please visit the blog or follow on Twitter.

Road Case was recently honored and featured at the Palace of Fine Arts in San Francisco, as part of the 2013 Spring Show, showcasing the best student work across AAU.

Feel free to browse the rest of my work in my AAU portfolio.


INTRODUCTION

Statement of Interest

I’ve been a performing musician since I was 17. Of the 8 bands I’ve been in, I’ve recorded 8 albums. I’ve played approximately 547 shows in 26 states and 2 countries. I’ve performed in all types of venues: from tiny downtown cafes to grand concert halls. All of this was done without outside help - only through a process of trial & error, persistence and faith.

In 2006, I quit live music. I felt that the “business” of playing music had taken all of the fun out it for me. Self-promotion, and event production requires so much time and attention... it began to wear on me. It felt like a job; not a pursuit of art and expression. If only I had access to a tool that could have helped keep me organized, I could have spent more time focusing on the music itself, rather than the logistics around live performance. As I talked with other independent musicians about this, it became apparent that I was not the only one who could have used a helping hand with band management.

I hope to create a dynamic, lightweight solution that would help musicians like myself and others get their music heard by new audiences. I hope to create an elegant application that makes tour planning seem painless. I hope to create a tool that is useful to artists of any genre, background or instrument… and allows them to focus on performing great music..



Me with my band at Great American Music Hall, San Francisco, 2012

Abstract

There are countless musicians in every corner of the world. Garage bands, hip hop impresarios, folk singers, DJs, jazz trios, improv ensembles… many of them working side jobs, and pursuing their passion for music in their free time. All of them have a common goal: to have their music heard by others. The average independent artist is just that – self-sufficient. They record their own songs in home-grown studios. They hand-make their own CD jackets. They upload their music to various web tools, and send these songs to friends, to music blogs and to industry prospects. They hope to grow their fan base by word of mouth, and by booking their own live performances.

All of these things are accomplished without the aide of managers, booking agents, promotional staff, or roadies. It’s not that they don’t have the talent and drive of big time platinum-selling artists; its that they don’t have the means to afford such a support system.

What is Road Case?

Road Case is a responsive web application, that helps independent artists plan their live performances, track their tour revenue, and evangelize their shows to their audience.

Concept Video

I shot this demo video initially as a proof of concept showing how users would involve the app in their daily tour routine, but it became a great instructional video which I have now included on the Home/Sign Up page.

Back to Top

RESEARCH

The Problem

Being an independent musician is not as glamorous as most people think it is. When someone says to you that they are a touring musician, you might have visions of luxury tour buses, grand ballroom concerts and raging parties. In reality, most independent artist must do an endless amount of behind-the-scenes “music business” tasks, before they even reach the stage to perform. A band on the road encounters a variety of environments, such as dark corner bars with beer-soaked floors, and jet-engine noise levels. Their accommodations are usually a sea of couches offered up by new & old friends. They don’t sleep well, and miles of hours in the van plus a steady diet of fast food makes the typical touring musician look & feel perpetually spent. The longer the tour, the more sensory deprivation takes in. Any tool that they might use during these nomadic periods must be familiar, simple and efficient, so that they can stay focused on doing what they love: playing music.

Musicians need digital tools that are:

Field Research

I had the opportunity to spend some time on the road with two bands, in order to gather feedback from musicians I encountered, and also put myself in the role of a tour manager. This enabled me to cognitively observe and record all the environmental stimulus and complex interactions that the average musician faces on tour. It was during these trips where I gathered much of the photographic collateral found in this report and the final presentation, but it was also where I conceived of many of the potential features sets that Road Case would offer.

I was the booking agent & road manager (as well as guitar/bass player) for the following tours:

The Shants tour van at load out, Los Angeles

Back to Top

Competitive Analysis

One joke about being a musician, is that it is very much like being a drug addict. To feed their need for innovation and musical exploration, musicians are prone to amassing a vast collection of gadgets, utilities, and aural ephemera. It is not un-common for a musician to have several instruments... they acquire whatever they feel is necessary to help them reach their vision.

To that end, I looked into the kinds of web-based and/or mobile tools that market to or provide services for musicians. While I did find a handful of fairly useful applications, I did not find one that fulfilled all of the needs of today’s independent musicians:


Back to Top


USER EXPERIENCE


Experience Map

To understand the needs of my users and their daily grind, I constructed a series of experience maps which helped me understand all the touch points that a digital road manager might intersect with the user’s pain points.

Before a musician even walks onto the stage and plugs in their instrument, they must first accomplish a Herculean set of “music business” tasks.


Back to Top

Personas

When developing my personas, I sought to base them off of real musicians that I’ve met on the road: either colleagues from my own musical experiences to artists I talked to during the user research process.

They represent varying backgrounds, musical activity, and technological savvy. Keeping these personas in mind as I move through the design process will ensure that the interactions I create will align with their goals and needs.


Back to Top

Example User Flows


Adding a Show

ERIK: "Rad. I just got off the phone with a booking agent in Portland—my band is confirmed for August 22 at the Thirsty Tiger! I gotta record the venue info now, before I forget. I need to head to Lucky’s to get groceries for dinner this week."

Promote a New Show

CRIS: "Alright! My band just confirmed a gig in Chicago. I haven’t been back to the Windy City in years! I’m gonna let my friends know I’m gonna be in town next month... maybe we can catch some drinks after the show!"

View Financial Report

MEGAN: "Our summer event series is over. Now I can get some sleep! I love life on the road. I wish I could do this for a living. I wonder how much we made this tour... maybe I can quit my day job!”"


Back to Top


DESIGN PROCESS


Sketches

Most of my designs for applications start as simple sketches. I try to think not only of how the application will look and feel, but also the environment in which the user will be using the application.

With Road Case, I took some inspiration from walking through an urban environment, where one is often presented with large, easy to digest directional signage (“ONE WAY”, “RAMP HERE”).

Paper Prototyping

I spent a few months carrying around a paper prototype of the app on index cards, so that I could test it with any musicians I ran into on the street, at cafes, or at shows.

The off-the-cuff feedback I got from users on things like button labels really helped shape the design later on, and it also gave me a chance to test the inward and outward flows of each task.

Wireframes

This is a sample of about 40+ wireframe flows that I iterated against for Road Case. Because the app is responsive, I had to spec the layout and interaction patterns for web, tablet and mobile devices to give me a complete blueprint of how the user would view and edit their data. This process also included spec-ing out error cases and other negative paths, to make the sure the user would never get stuck.

Click to zoom in +


Back to Top

Inspiration

I looked to physical objects from the world of music to find textures and patterns that would be familiar to musicians. This included my own guitar (an Epiphone Dot, which directly inspired the color palette) and various amps and effects gear, as well as concert posters.

I also took cues from apps that I use most often and find highly intuitive and flexible. These included apps from the world of productivity (Evernote), money management (Mint) and travel (Jetsetter).


Back to Top

Logo Sketches

I particularly enjoyed cycling through a long series of sketches for the logo and branding. These varied from simple logotypes to rock iconography, like vans, guitars, wire cables, guitar picks, etc.

Styleguide

As part of the branding exercise, I established a styleguide for Road Case that would tie all the design element together, and aide in prepping assets for development. Note: The secondary font, Georgia, was later replaced with Helvetica Neue, at the urging of the review committee.

I also explored how the branding might be extended to merchandise (like a rock band's branding) like t-shirts and hats, as well as placement of Road Case NFC tags.


Back to Top


IMPLEMENTATION


Front-end Code

The front end UI of Road Case was coded entirely in HTML5, augmented by bits of javascript and jQuery in places. In particular, Road Case makes use of the newest elements of HTML5 that allow for more dynamic and consistent performance across browsers, such as lightweight form fields validated without the need for PHP or javascript, and forms that make use of a mobile device’s native UI components to make take entry for dates and numbers much easier than relying on a QWERTY keyboard.

Road Case uses 4 primary screen templates:

  1. Home / Sign Up page (+logged out view)
  2. Shows / Venues grid
  3. Show / Venue Detail page
  4. Financials graph page

These are accompanied by CSS with unique classes for things like containers, buttons and unordered lists, so that they can easily be re-used and maintained across the experience.

In some cases, I used simple javascript functions to provide things like dropdown menus for date selection, or view filters to allow the user to more easily control what they are seeing on screen. There are also javascript functions in the header of each page that scroll the view of the site on iOS devices, so that the browser chrome is minimized.

For the Financials section, I used a line graph powered by javascript and jQuery that allows for interactive data points with callouts, so that the user doesn’t have to rely on the graph hash schema itself to interpret the data visualization.

Responsive Design

One key aspect of Road Case is its flexibility. The users I talked to had a range of technology, from PC laptops running Ubuntu to older Android phones to the latest new iOS gadget. This mandated the use of a responsive CSS framework that would allow the app to contextually scale to the device it is being viewed on. This is accomplished primarily with the use of CSS media queries, which have defined the breakpoints of screen elements on the HTML templates I have used so that they will adjust to the browser size. The media queries I have used have also allowed me to provide one style of navigation to desktop and tablet users (large touch/click targets with icons and text labels) and a slightly smaller nav bar for mobile phone users (icon bar only).



Back-end

Road Case was built to be a fluid, dynamic web app that can be viewed in a variety of contexts: on desktops, laptops and mobile devices. The content of the site is unique to each artist. Their Shows screen is populated with images and places they have been, or places they are going. Most of the data is entered by the user, and so Road Case would be powered by a MySQL database to contain tables of meta-data, such as:



This data is delivered back and forth from the web browser to the database via screens powered by PHP. Because Road Case can be used on mobile phones and tablets, the user doesn’t need to be near a full computer to make changes on the fly or take their itineraries with them on the road.


Back to Top


USABILITY TESING


Objectives and Planning

Though Road Case is a fairly simple application, the tasks that musicians can accomplish using the site can be quite complex and profound. A usability study will help vet the user experience with target users, and reveal any weaknesses in the system’s structure and presentation.

  1. Confirm that the navigation patterns are familiar and efficient
  2. Validate the taxonomy with users, to ensure that the labels resonate with them
  3. Compare the app’s adaptive patterns when moving between web or mobile web paradigms
  4. Analyze the results of each user’s experience with the prototype and implement any changes that will optimize the app’s ease of use

For testing stimulus, I used the working HTML5 prototype of Road Case in a sandbox (Dropbox), which can be accessed from any web browser remotely or for moderated testing sessions, as well as most mobile devices.

A testing session at the AAU UX Testing Lab, SOMA, San Francisco

Timeline

At various points in the development & design cycle, I would stop to test the design with users, employing various stimuli to vet the app's design with users' expectations.

Testing Observations

In the last semester, I conducted three remote user tests with a few musicians via Google Hangout, as well as moderated sessions in the AAU UX Lab. The remote participants were each at home on their laptops, while 2 of the users were able to use the site on their mobile devices. I moderated by reading from my test script for each use case, while the user shared their screen in Hangout so I could observe their actions.

For documentation, I captured video from my screen. This method worked great for 2 of the sessions, but on the first one I forgot to record-enable the audio channel, rendering my video documentation useless for that particular session. Live & learn!

For the moderated Lab sessions, users were observed using the site on a Mac desktop computer, and the session was captured in Silverback. Overall, I received generally positive feedback from the 3 users, with moments of delight and enthusiasm for the product. Each user also had great suggestions for future enhancements, some of which I have already begun to implement.

The patterns of pain points I observed included:

  1. Problems associating the taxonomy of the primary navigation, ie. Shows versus Tours, Reports versus Financials
  2. Graph-averse users preferred to see a text view of the Financials screen
  3. Users wanted to include show posters for each performance, rather than rely on venue imagery

I got lots of great feedback from my subjects. Here are some samples:


Randy
“Our recent tour in Southern California & Pacific NorthWest was kinda messy and I know it would've been 100% easier and less of a headache if we were able to use your app.”
Michael
“I would be more likely to use it at home on my laptop when I am planning the tour, then use it on my phone to make last minute updates when I’m on the road.”
Sam
“The buttons and the general look is very polished... But I wasn’t sure if I was on the Tours tab or the Venues tab because of the shading.”
Eliot
“The sign up and show adding process was easy. I would definitely recommend this to other musicians I know.”

Back to Top


CONCLUSION


End of the Road...

In the course of this project, I picked up a robust toolset that I bring to my day job as an interaction designer and builder-of-things. I learned how to incorporate user centered design principles into all aspects of my work. I even picked up some tech chops that allow me to quickly prototype my designs on a variety of devices, as well as understand the underlying technologies powering the devices that bring my designs to life.

I hope that Road Case will enable the scores of independent musicians who are out there on the road alone more productive, more connected to their fan base, and reach new audiences. I hope to provide them with a seamless, fulfilling experience, while simplifying the haggard routines that go into event management and promotion.

There are so many struggling artists out there, clamoring to be heard, I can’t count how many nights I have seen excellent, groundbreaking new artists performing impassioned live sets... to an audience of two. Hopefully, with the help of Road Case, these artists can reach their goals and fulfill their dreams.

Thank You

I would like to extend my gratitude to all the musicians I encountered during the course of researching and building Road Case, who offered their time and thoughts to help me create a great little tool for them. I would also like to thank the following for their help and support over the last 3 years: my beautiful wife Sabrina (and our little dude Miles, who should be here any day now) for your endless support, encouragement and for keeping me sane, my family back home in Louisiana for believing in me enough to let me go to California, my boss Stuart Cook for inspiring me with his unwavering pursuit of great product design, my bandmates The Shants for listening to me complain about this project at practice and for being occasional guinea pigs, to my best friend Erik Hanson for letting me use the Stragglers’ tour as field research, Mr. Paul Irish at Google Dev Relations for educating me in the wild wonderful world of HTML5 and web apps, my mentor and friend Evan Gerber for teaching me everything I know about good UX design, and to the music of Wilco and Alabama Shakes for keeping me awake on those late nights.

From the AAU community and my professors, I would like to give many thanks to Dave Kanter for helping me define a technical vision and approach to Road Case that was the key to its success (both for me and its users), to Ryan Medeiros for helping me find a holistically and aesthetically appropriate look & feel through methodical experimentation, to Kathleen Watson for offering helpful feedback and UX direction in the last few weeks of development, to Martha Breen for introducing me to jQuery Mobile, to the helpful interns at the AAU UX Lab for suffering through testing a product that isn’t exactly flashy or entertaining, and finally to my classmates who inspired me & challenged me on a daily basis.


Back to Top