Carnegie Hall

Education that doesn't feel like a lesson

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
• Development

STRATEGY

Finding a balance

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

Adapting to the curriculum

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.

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

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

An ensemble

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.

• 1
• 2

Knowing your audience

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.

• 1
• 2
• 3

• 1
• 2
• 3

DEVELOPMENT

Big picture, small details

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.

Built to scale

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.

Accessible in more ways than one

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

The Orchestra Map and Musical Explorers are just two programs in Carnegie Hall's repertoire. They offer a range of activities for students, teachers, families, and brand partners. Our continued collaboration means more music to discover and more ways to support Carnegie Hall's educational and social impact initiatives.