Responses by Tarver Graham, CEO/executive creative director, Gladeye

Background: In 2017, a team from the online newspaper HuffPost went on a road trip through the United States. They interviewed about 1,700 people about their concerns for their communities, politics and economic future. In preparation for the U.S. midterm elections, HuffPost wanted to expose a cross-section of views and opinions from these interviews in an interactive online format.

Highlights: The design solution is an unbroken line that follows users down the page and draws the portrait of each individual, one at a time, as users listen to their thoughts. The line is a metaphor for both the road trip journey itself, and for the connections between people, places and ideas. Each person’s audio commentary plays as their portrait is animated onto the screen, and if users scroll quickly, users can initiate a kind of “town hall” chatter of many voices altogether.

Challenges: The interviews were recorded on video, but the picture quality was really poor. We wanted to retain the authenticity of the vox pop format, but we didn’t want to rely on this poor quality video material. That creative constraint actually led us to a solution, which was to animate each person as dynamic artwork instead.

Favorite details: That the idea is very sympathetic to the content. It’s clear, simple and carried right through the experience. It’s also an idea that came directly out of the creative constraints we had to work with.

Time constraints: We turned the site around in about six weeks. Because of this, we had ideas about navigation that didn’t get into production, like letting users define types of people they wanted to hear from.

Navigational structure: Hours of video interviews were transcribed and analyzed to discover common themes that would define the data schema and site navigation. We settled on topic navigation and a basic filter for geography instead. However, I would have liked to experiment more with navigation and filtering so users could customize the experience in a more original way.

Technical features: Listen to America uses the web audio API and animated SVG line drawings, as well as Next.js, which uses React. The benefits of using Next is that it pre-renders the pages and speeds up development. The idea was that there would be less to do, and more time to focus on the novel design and audio experiences.