Navigating Sound

Crafting user experience for a seminar on hearing and seeing at Harvard University.

“Sound, fleeting and immaterial, has long proved resistant to academic inquiry.” About the Sawyer Seminar,

Through a collaboration with goodgood, Zocalo crafted “Hearing Modernity”— a newly envisioned user interface and experience website for music scholarship at Harvard University’s Sawyer Music School.

When Ben Gaydos of the Boston/Detroit design firm goodgood approached Zocalo to assist in developing this media and scholarly focused website, we were instantly excited to collaborate. Many of us at Zocalo have experience in the higher education space - specifically in teaching the arts and working within university systems - and saw this opportunity to work on something that at its onset was a more a-typical approach to the standard university design and development practices.

We immediately began brainstorming on how to utilize sound and image within a content mangement system construct. What APIs could we utilize? How do we minimize loading time while delivering an immersive experience? What and how is the content integrated? Working with Ben at goodgood, we were able to deliver a stellar property for the Sawyer Music School at Harvard.

“People write papers, record and upload audio, and speak at events... which have presentations and galleries. How do we sort this all out in the back end - and still have it be easy to use?” Ben Gaydos, goodgood

We worked with the folks at the seminar to devise and organize four main content types: 1) Papers 2) People 3) Events and 4) Audio. WordPress, with its abilty to easily create custom post types and custom fields, made this a natural fit for this project. The real challenge came not in the content as individual assets, but how the content - and its meta data - can be interrelated yet still easily manageable for the site's content manager.

Using a customized system of post types and fields inside of the CMS, we were able to cross reference and relate content types with one another. Put simply, we could show to the end user a speaker’s biography, with related audio files and papers that were uploaded and added to their specific areas inside the CMS administration area. This information could then be displayed on the unique Paper page, as well as the Event page that related to the Paper and Speaker. We developed a way for one or more pieces of different content to have a relationship that can be customized and managed easily by the site manaager.

Responsive development and design is not an add-on
— it's part of the process.

If you think your users don't check you out on mobile - think again! We account for a variety of screen sizes when developing projects. For Zocalo, responsive design is not an up-sell - it's a part of the overall development and design process.

Since the Sawyer Seminar is an ongoing collection of events at Harvard, it was important for people to easily find locations, read event descriptions and speaker information on the go. With a site rich in audio and video this can lead to a diminished user experience over cellular connections.

Our challenge was to make sure loading times and bandwidth limitations were taken into account, so the users of mobile devices can have the best experience possible.

A combination of baked-in Google Analytics and device testing can help tremendously in tailoring the user experience for any project. The Hearing Modernity site has built in user tracking from Google that we can then use to track not only what devices and operating systems people are using to access the site, but also track which information is most frequented. This data is critical to improving the rich and valuable user experience on Hearing Modernity and will inform future and changes to be made to the site.

What are you looking to accomplish?
What’s your timeline?

Let's get talking and make something awesome!