Carnegie Hall

Building engaging platforms for educational programs

Carnegie Hall Hero

Overview

Carnegie Hall has been a fixture in the music world for the last 130 years. But alongside amazing performances by the greatest artists, the non-profit concert venue has long been equally committed to creating education and social impact programs for students, teachers, community members, and budding young musicians in New York City and beyond.

The famed institution asked for an interactive website to complement Musical Explorers, a free curriculum that connects students in grades K-2 to diverse musical communities. The architecture we built for Musical Explorers set the stage for another site: an Orchestra Map to pair with Link Up, a participatory orchestra program for students in grades 3-5.

Our Role

  • Strategy
  • UX/UI Design
  • Web Development
  • Product Design

Strategy

Finding a balance and adapting to the curriculum

Musical Explorers and Orchestra Map are both part of Carnegie Hall's curricula for elementary school students, but they each needed to feel unique.

Just like students, we had to understand the lesson before we could apply its teachings. Musical Explorers highlights various musical genres and cultural traditions all over the world, from American Bluegrass to South African Zulu. The site had to act as a glossary for each distinct community, so a world map was the best fit.

The Orchestra Map is exactly what it sounds like — a map that details an orchestra's anatomy and familiarizes students with the different instruments.

What is Musical Explorers?

The site's landing page opens the map in full view with a short welcome note

The map first shows all of the artists and can be explored as is or filtered by program

Users can hover over an artist's 'pin' and a label appears with their name and genre

If artists are featured in multiple regions, a dotted line shows the connection

Clicking on an artist prompts a panel to slide in on the right with introduction videos, audio clips, links to related artists, and lesson plans

What is Orchestra Map?

  • Like Musical Explorers, the Orchestra Map opens with a welcome note

  • The map shows the full orchestra and its separate sections and can be filtered by instrument or by family

  • Users can hover over each instrument and section, even the conductor's

  • Clicking a section or instrument reveals a side panel with full instrument details, links to other instruments in the family, and videos of National Youth Orchestra members playing those instruments

Design

The importance of knowing (and understanding) your audience

We married the elegance of Carnegie Hall's established style guides with the playfulness of the Orchestra Map and Musical Explorers' existing print styles. Clean typography, vibrant colors, and unique illustrations make it childlike, but not childish.

The idea was to show younger kids how diverse — and fun — music can be. Both maps called for accuracy without complexity. We kept text minimal but upped the videos, illustrations, and photography. The content is graphically engaging but also organized. Streamlining the structure added levels of depth and made the information accessible to users with zero familiarity.

And what if the teacher assigns some homework? Or the students want to explore on their own? The maps are optimized for every device, complete with animations and effects.

"Clean typography, vibrant colors, and unique illustrations make it childlike, but not childish."

Development

Built to scale, and accessible in more ways than one

Again, simplicity was key when developing both sites. But even with a basic framework, the sites still needed to be performant and handle memory well. We used the JavaScript animation library GSAP to control the animations on the maps.

The maps are visually driven with particularly illustrative interfaces, so we needed to compress several high resolution images. This helps the sites load quickly, and smoothens the animations and effects.

Each module on the page generates a unique URL, allowing teachers to share a specific artist or instrument, or focus on a particular program.

We built the sites in a modular way, so the framework could be reused and reworked with other base images and panels. In fact, the Musical Explorers Map and Orchestra Map interfaces leverage the same framework although they're visually different. They're easy to manage and update, but offer a dynamic experience every time.

Content for both sites would expand over time so we planned for site growth, too. They needed to accommodate new artists and programs, and support different file types: video, photo, and audio.

All of the maps' conventional functionalities, like zooming and panning, are available to all users — those with keyboards and those on mobile or tablet devices. Media files are supplemented with captions that describe what's seen or heard, and navigation is clearly labeled.

Results

An encore

Our continued collaboration means more music to discover and more ways to support Carnegie Hall's educational and social impact initiatives.