Lynching in America — 

Google & Equal Justice Initiative 

Google and the Equal Justice Initiative joined together to tell the stories of families affected by the history of racial terror in America.

EJI-2EJI-2

Early flow option.

UX Challenges —

For 28 years, EJI has been conducting research and collecting data about the effects of lynching in America during the era of racial terror, from 1865 to 1950. During this difficult time in America’s history, over 4,000 people of color were lynched by white Americans and there has never been justice for the victims and their families. We turned this data into a collection of interactive maps and stories that greatly expanded access to EJI’s work. EJI wanted to bring this history back to the front of our collective political consciousness in a way that forces us to confront our country’s dark past and the legacy it left for so many families.

EJI-3EJI-3

Early flow option.

One of the many challenges of this project was the subject matter. We acknowledge that this isn’t easy for many users to face, which is why the content was presented through different mediums: audio stories, data on interactive maps and a short film. We needed to find a way to create a through-line weaving these three different storytelling media together to form a continuous narrative. Through the content hierarchy, we also needed to balance real, human stories with EJI’s data.

EJI-4EJI-4

Sketch of interactive map with number of lynching victims data. 

For this project, it was especially important that the content is as accessible as possible, which is why we worked from a mobile-first design perspective to guarantee an equally good experience on both mobile and desktop.

EJI-5EJI-5

Map flow options. Breaking down how overlays work and the content on each page. 

Additionally, we had to adapt the interactive map for touch display in the Brooklyn Museum and EJI’s own museum in Montgomery, Alabama, which will open in 2018. This posed additional UX challenges, because the same UI had to accommodate users on a mobile screen, desktop users and users on a 80-inch touch screen in a busy museum environment.

EJI-6EJI-6

EJI Museum table screens sketches. 

UX Solutions —

To ensure continued interaction with the site after acknowledgment of the subject matter, we let each user’s sense of exploration dictate the flow of the site. After the site’s intro resolves, the user is given the global menu. From there, they can travel to any section of the site. Once the user is in the site’s flow, they can scroll between sections to continue exploring the content or always return to the global nav to jump ahead. We wanted the user to make the choice on how they would explore this subject. Because of the analytics from our National Parks project, we knew that users like choice and they are more likely to stick with something if they choose it rather than getting pushed into a flow they didn’t select.

EJI-7-1EJI-7-1

Mobile wireframes. Top row, left to right- introduction/content warning, title screen, menu, audio stories thumbnails, audio stories player. Bottom row, left to right- short film thumbnail, short film player, interactive map with profile stories, migration map with slider. 

The site works on desktop and mobile, letting users have the same experience regardless of their device. The main change between desktop and mobile is the map. On mobile, we had to create a state list because the map would be too small for users to interact with. All of the audio content is available on popular music platforms such as Google Play Music, Soundcloud and iTunes, so users can listen to these stories off-line as well.

EJI-museum-1EJI-museum-1

Brooklyn Museum exhibit, "The Legacy of Lynching - Confronting Racial Terror in America" July 26 - September 3, 2017. Photography by Emily Kordovich.

To make sure the interactive map worked on the Brooklyn Museum touch screen and then later for EJI’s own museum, we tested the map internally multiple times before launch to make sure it would seamlessly on a huge display. For EJI’s museum display, we adjusted the UX to feature more profile stories, clear UI that users can easily reach on the touch screen table regardless of their height,  and the ability for the museum to update map data on the backend when they do more research.

 

View the project here →

EJI-museum-2-2EJI-museum-2-2

The interactive map from the site on an 80-inch touch screen in the exhibit. Users are invited to explore state data and listen to profile stories. Photography by Emily Kordovich.

EJI-museum-3EJI-museum-3

Users can click on states to explore each county's lynching data. Photography by Emily Kordovich.

EJI-museum-4EJI-museum-4

Users can watch short stories about lynching victims. Photography by Emily Kordovich.

EJI-museum-6EJI-museum-6

The audio stories and short documentary from the site were also featured in the exhibit. Photography by Emily Kordovich.

dailyshowEJIdailyshowEJI

Bryan Stevenson, founder and Executive Director of the Equal Justice Initiative in Montgomery, Alabama, was a guest on The Daily Show with Trevor Noah on August 23, 2017 where he spoke about the Lynching in America project.

Team —


Client - Google Brand Studios & Equal Justice Initiative
Digital Agency - Stink Studios
Executive Creative Director - Ben Hughes
UX Designer - Liz Wells
Lead Technologist - JP Gary
Developers - Mathias Van Impe, Manny Vivoda, RJ Kosineski, Tim Roussilhe
Backend Developer - Abhaya Rawal
Executive Producer - Erica Kung
Producer - Nickie Kuhn