Responses by Callum Griffith, chief executive officer, Composite.
Background: The Black Music Project is an interactive exhibit celebrating, promoting and preserving the idea that the history of Black American music is the story of America. Content includes genres and artists from call and response of the pre–Civil War period through the end of the 20th century’s birth of hip-hop and Neosoul music with lesser-known stories and curated music playlists.
There is no story more compelling than that of African American music. It is a story born in bondage and pain but full of love, passion, joy and faith. The story of Black music can make you weep with sorrow one moment and sing with elation the next. It is not a fairytale story but always leaves you with hope.
The goal of the Black Music Project is to reach students of all ages, music fans, and appreciators of Black culture and its impact on the world stage. The exhibit offers a broad historical perspective, entertaining trivia and curated playlists.
Design core: A core feature of the website is its retro design style combining vintage display fonts and cartoon-style illustrations with a modern, minimalist card design. The style strikes a balance between the historic and timeless subject matter with museum-inspired minimalism and unbiased information presentation. The dark UI and white text on a black background are purposefully reminiscent of the Black Lives Matter imagery.
Challenges: The Black Music Project has been a labor of love for the past several years. Originally pitched as an interactive infographic microsite in 2018, it was initially just an infographic displaying the evolution of American music genres and their interconnectedness illustrated by founder and director Christopher Fuller. The illustrations would later become a prominent feature of the project alongside extensive research and content production by researcher and writer Marc Fuller. Even then, we saw the limitless potential of what it could become but did not have the time or resources to commit.
In 2020, the COVID-19 pandemic provided an opportunity to work on the project with an abundance of newfound time. Over two years, we built three different versions of the site, each time needing to scrap the design and development because the scope and magnitude of the project continued to grow. We began with 26 static pages that used an experimental horizontal scroll to show off the genres and eras in a linear, timeline-like fashion. Eventually, we decided that the project needed a more accessible user experience to have mainstream appeal and reach a larger audience. The site’s current version was built to support a limitless number of genres, artists and an ever-expanding library of content that will continue to be layered upon.
Navigation structure: There are several different navigation and filtering options on the site. The two main navigation structures are the eras and artist and genre galleries, which each needed to display information in a way that could help users navigate and understand where to find relevant content. For the era gallery, we wanted to display the content in a linear, chronological timeline that users would intuitively understand. For the artists and genres galleries, we needed a structure that could support more than 125 artists and still help users find content quickly. We designed the page with a filtering system inspired by e-commerce product galleries with categories that help users sort by era or genre and narrow down the number of results shown at a time. Alternatively, you can scroll through eras to find relevant genres and artists.
Technology: The entire website was built on Webflow using its CMS to manage the whole library of artists, genres and exhibits with a combination of Finsweet libraries, JavaScript and jQuery to make some of the filtering and sliders functional. We used the default Spotify API player to embed curated playlists with custom artwork as album covers to change the background of the Spotify player to match the artist or genre page.
