Carnegie Hall and Synoptic Office

Timeline of
African
American
Music

Music / Nominee
Carnegie Hall and Synoptic Office

Music

Nominee
"This project is a prime example of the ways in which education, technology and design can be combined for the greatest possible impact." Carnegie Hall and Synoptic Office
image description
Q: Can you describe your project and the concept behind it? A: The updated Timeline of African American Music provides the next generation of music lovers with an interactive digital resource exploring the rich history and influence of African American music. It is based on the lifetime work of Dr. Portia K. Maultsby. Synoptic Office was tasked with making 400 years’ worth of essays, photos and audio easy and compelling to explore. To achieve this, we mapped broad humanities themes to learning goals.
image description
Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process? A: The timeline was initially launched in 2009 and built with Flash. It was a traditional horizontal timeline. When we reimagined this project, we rotated the timeline 90 degrees to scroll down from present to past to create an intuitive web experience. We brought in stories as a gateway to accessing the dense and intricate timeline content.
image description
Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: As a resource for the community, we made sure that the site could be open-sourced. We chose technologies with licenses that could allow for this to occur. Web technologies change very rapidly, and we wanted to ensure that the site could last as long as possible. With both open-source and sustainability requirements in mind, it was important for us to choose libraries that were well used and well supported by large communities of developers.

When did you experience a breakthrough or an "a-ha" moment during this project?

Midway through the project, we integrated the Apple Music API into the site. With the music embedded within the timeline itself, Carnegie Hall can tell the story of music in an innovative way — the history of music through music.

image description
Q: What web technologies, tools, and resources did you use to develop this? A: During the design phase, we used a variety of tools including Figma and Flinto to sketch and prototype. For the final build, we adopted a headless CMS approach with Twill as the CMS and React for the frontend. The visualization was built using D3.js while the audio experience was provided through Apple Music API.
Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand? A: Carnegie Hall has a strong and flexible brand, which was a joy to work within. We started with an overarching pedagogical and technological strategy, user journeys, and content types. Then, we merged these needs with opportunities to highlight Carnegie Hall’s brand and interweave it with holdings from their Rose Archive, which brought the past and present together.
Q: How did the final product meet or exceed your expectations? A: On the user side, it’s been great to see how the embedded music elevates the reading experience. The content of academic essays on jazz or gospel feels more tangible — it moves from the abstract to the experiential. It was also nice to see how the Rose Archives brought another dimension to the site with supplemental photos and historical assets that help tell the story of the artists behind the music.
Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: We live in a moment when free, accessible digital educational resources are more relevant and timely than ever before. This project is a prime example of the ways in which education, technology and design can be combined for the greatest possible impact.

Explore

MediaMonks

Netflix DARK

TBWAChiatDay LA

Behind The Record

Wild Forest

François Audouy

Zuleika Arroyo

Black Women Too

Sid Lee / DIgital Kitchen

The Joker’s Escape

NBC News

Trans, imprisoned — and trapped

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

AKARU

Avoriaz

GSD&M

U.S. Air Force ECHO

Animal

Life At Spotify

Center for Architecture

Visualize NYC 2021

HAUS

Tillamook

360 Design

Zoonomia

Wonderland

Wonderland

Gigarama

Sing, My District

Nightjar

Discovered Wildfoods eComm Experience

Dogstudio

ZOOX

MediaMonks

Maserati MC20

Cheil Worldwide, Inc

Samsung Galaxy S21 5G series

NYC & Company

The Black Experience in NYC

ESPN

ESPN College Football Tracker

Paradowski Creative

The Sheldon Website

Active Theory

CHILE20

Active Theory

Secret Sky 2020

Hook

YouTube Culture & Trends Report

Hook

Local Guides

Hello Design

The Marvelous Mrs. Maisel

Studio Airport

Emergence Magazine

Athletics

New York Review of Books

R/GA

ESPN House of 98

ThoughtMatter

CENTER Photography 2020 Compendium

Turbulent

Turbulent.ca

IntraCollaborative

Newest Americans

Rotate°

Big Green Egg

Wide Eye

WhiteHouse.gov

Swell Creative Group

Everyone In LA: 2020 Homeless Count

firstborn

Exo

GIPHY

GIPHY

Content Pilot LLC

Chambliss. Bahner & Stophel

Hello Monday

Bartlett Summer Show

Work & Co

Vistaprint Masks

Hello Monday

Virgin Hyperloop

Forbes

Forbes 30 Under 30 2021

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

Jam3

ComplexLand

Spring/Summer

Stykka

firstborn

The Leary Firefighters Foundation

Elephant

Elephant Website