Project Description  
Drum Corps 101 helps the newcomer to Drum Corps competition make sense of what is happening on the field. Once they understand, they become Fans and potential supporters. Why is this important? First, no one should have to sit and watch something that doesn't make sense. But secondly, each Drum Corp is a non-profit organization that needs to raise close to $1 million dollars each year and recruit dozens of volunteers so it is critical to convert newcomers into fans.
There’s a lot happening on the field of a Drum Corp performance: Drummers, Horns of various sizes, Marchers changing formation, Dancers with flags and props, Drum Majors on scaffolds, Marimbas and gongs and other stationery percussion instruments being played by another set of musicians, men in green shirts running around the field speaking into dictaphones. How does a newcomer make sense of it all?
In the 10 minute breaks between each Corps’ performance, many fans were observed searching the program for information, asking each other questions, or “playing on their phones.” It is the use of smart phones during this break that opens the door to giving new fans the explanation and fun facts that will make them feel “in-the-know.” Drum Corp 101 is a simple app that explains who is on the field and what they are doing through pictures and fun facts.
User Research 
The same questions were asked repeatedly. Many people were trying to understand who is on the field. They expressed frustration not being able to articulate the question because most everyone on the field is in constant motion. For example:
 •   “See that guy…not that one…over there…he just ran around that corner.”
 •   Other common questions – such as the name of the corps, hometown, music they were playing – were answered in the program or on the Jumbotron.
 •   Fans were very unlikely to ask for clarification from “strangers”; most conversations were restricted to the people they had come with.
 •   The newcomers’ attitude became much more relaxed and enjoyed the competition more when given explanation and “fun facts” such as “That tuba weighs 38 pounds.”​​​​​​​
I used Balsamiq to create two clickable wireframes, one with an Infographic approach and the other using Photos of the striking uniforms and flags. Balsamiq allows designers to quickly put a concept into a tangible form so that potential users and stakeholders can comment and help direct the development of the app. It is purposely “sketchy” because people feel more comfortable giving input than if the model is very polished.
I used Webflow to create a prototype. One advantage of Webflow is that you can easily share the clickable prototype or using Movavi Screen Capture you can record a sample session and save as a MP4. Or, if you make it short, you can save it as a GIF. 
1. To view working version, click here. 
(Resize your tab to mobile width.) 

2. To view of the video, click start arrow
Tools Used
 •   Webflow
 •   Photoshop CC
 •   Balsamiq

Back to Top