The problem: Japanese band directors, concert band musicians, and Sousa enthusiasts have a difficult time accessing the United States Marine Band (USMB) Sousa Project recordings, scores, and videos. While all of these are public domain and now made readily available to the public, the language barrier prevents users from accessing the resources.

The solution: In collaboration with The International Research Institute for Sousa (IRIS), I created them a fully responsive website available in both English and Japanese. The website includes easy access to all of the USMB Sousa Project recordings, scores, and videos, as well as some of the other most in demand and educational USMB videos available on YouTube. The primary user group of this website would be Japanese concert band musicians, band directors, and Sousa enthusiasts between the ages of 12-80.

Japanese band directors, concert band musicians, and Sousa enthusiasts have a difficult time accessing the USMB Sousa Project recordings, scores, and videos due to the language barrier

Research

Defining the Problem

When I was contacted by a member of IRIS to collaborate on a project for their organization, the original idea I was presented with was a broad one without defined parameters. They were excited about the release of the complete series of Sousa marches recorded by the USMB, and wanted to help promote the project. The stakeholders were considering creating apps to further their mission and asked for my help. To better understand their needs, I had to define the problem and find the current user pain points.

To achieve this, I asked several questions, and the stakeholders responded with the following:

What features would you like included in the app? “Music and English education for Japanese”.
How would you like the app to further the goals of your organization? What are those goals? “One of our aims is to promote the complete series of Sousa Marches recorded by the President's Own. In the future, we would also like to organize the New Japan Sousa Band under the management of the International Research Institute for Sousa, Tokyo. Inviting guest performers from veteran band players from the United States and singers is one of the 'wish lists'“.
What is currently preventing people from achieving these goals? “Japanese-friendly access to the President's Own recordings and videos on YouTube (the biggest challenge is the language barrier, but it can be removed as I have been learning English.) I can find translation support for this app as needed. My ultimate goal is to help Japanese people learn English with (or in) English.”
Who would be the main users of this app? ”Japanese band players (in school or community bands), college music majors, and school band directors in Japan.”

Presented with this information I then began brainstorming on solutions I felt would best fit their needs.

Understanding the Problem

To better understand the current pain points of Japanese users, I browsed the recordings, scores, and videos from the Sousa recording project. One of the big barriers became immediately clear, the marches are displayed via an image, making it harder for a browser to translate. If a user is trying to find one specific march among the 136 total, this would be extremely difficult

User Personas

User Stories

“As a member of the International Research Institute for Sousa, I am always looking for opportunities to grow and educate our organization. One of our greatest resources is the US Marine Band in Washington D.C., but the language barrier is difficult for many of our members and aspiring musicians. I want to find someone to help me create a Japanese-friendly app or website so local musicians can utilize the Marine Bands resources.”

Kenzo Takahashi, Stakeholder
“I am about to graduate from the Tokyo University for the Arts with a Bachelor’s Degree in Saxophone Performance. The Japan Force Self-Defense Band has an audition coming up and there are several marches by Sousa on the audition. The US Marine Band has released all of Sousa’s marches with scores, and recordings, but I have a hard time accessing them. I am not proficient enough in English to navigate the website, and it is really frustrating.”

Asai Fujiwara, Music Major
“As the conductor of the Kyoto Community Band, I always make an effort to program marches by John Philip Sousa. They are band repertoire standards, and both the musicians and audience members love them! When I heard the USMB released the complete marches of Sousa including recordings and scores with their interpretation, I was so excited! I was disappointed when I had such a hard time finding the marches I wanted, and had to get the help of a colleague who was fluent in English.”

Sakura Ito, Conductor

Journey Maps

I then created journey maps for two users, deciding to focus in on the personas who I felt represented the largest group of potential users.

Design

The Design Solution

After several meetings with stakeholders, and research that included empathizing with users via personas and journey mapping, I presented them with a design solution I thought best fit their needs and could further their goals:

A fully responsive website for the International Research Institute for Sousa.

The website would include the following:

A translation icon that would allow the website to toggle back and forth between Japanese and English.
The complete marches of Sousa with buttons that directly link to public domain USMB material.
Information about IRIS and a contact page.
A page that includes a curated selection of videos pertaining to concert band repertoire.

This solution also was appealing to stakeholders because I could build the entire website myself using Squarespace, so it was more cost effective then building an app. Stakeholders then also had the capability to manually change any translations they felt were not accurate, so the site would truly be user friendly for both languages. This toggle mode would also help achieve their goal of teaching English to Japanese users.

Site Map

With the new design approved by the stakeholders, I the moved onto establishing my sitemap

Ideation

After establishing my site map, I then sketched out some screen ideas, keeping in mind that the responsive design would toggle between two languages, and that it was important for users to easily access material on both desktop and mobile devices. I started with a mobile-first design approach, deciding what would be most important with limited screen space.

High-Fidelity Mockups

High-Fidelity Prototype

I then moved onto my high-fidelity prototype, where I built out enough screens for stakeholders to see what the flow and experience of the website would be. I included Volume 1 of the Sousa project, and the march “The Honored Dead”, so stakeholders could see how each button would take them directly to the recording, YouTube video, or initiate the download of the score/parts. In the final Squarespace site, all 136 marches would be built out in this way, and the search bar would be active.

CLICK HERE FOR HI-FI PROTOTYPE

Usability Study: Findings

After conducting a round of usability studies with stakeholders, one specific problem was expressed by several users:

Even if the language barrier is removed, it still takes a long time to find a specific march: currently the marches are organized by the date it was composed, in 7 different volumes (136 marches in total). If users don’t know the date the march they are looking for was composed, they need to go through additional steps. In response to this issue, I created a search bar.

Created a search bar so users can easily find a specific march.

Visual Design

For the visual design of the site I wanted it to have an old time feel, serving as a throwback to when Sousa directed the Marine Band. The color scheme is black and white with an accent color of red, an homage to the bands red coats. All graphics are from the Library of Congress archives.