Carnegie Hall

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.

The landing page for Musical Explorers opens the map in full view with a short welcome note. Then map displays all of the artists and can be explored as is — or filtered by program. Users have the ability to 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.

Like Musical Explorers, the Orchestra Map opens with a welcome note. The map shows the full orchestra and its separate sections, and we added a functionality that allows the map to be filtered by instrument or by family. Users can hover over each instrument and section, and 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.

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.

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.