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.

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.

After completing the Lynching In America site and Brooklyn Museum exhibit, EJI reached out to Stink to adapt the map experience to work on touch screens for The Legacy Museum in Montgomery, AL. This required evolving the site UX to work for a different audience, specifically elderly museum visitors, in the space and on large touch screens.

EJI EXPORT MUSEUMEJI EXPORT MUSEUM

Wireframes for the Legacy Museum installation.

 

To do this, I simplified the UI along the bottom of the screen to improve access for users standing or sitting at the screen during the experience. To optimize the map for a touch-based experience, we removed all hover states — users would have to click counties within the state view to see the data. Removing the hover states subsequently altered the way users accessed profile stories from the US map level. To accommodate this change, we removed the thumbnails from the map itself and placed them in a left-hand column that the user could use to separately scroll through from the experience. Because of the museum’s target audience, we also added a persistent Help button. Using images and text, this overlay would explain how to interact with the different levels of content.

EJI-12EJI-12

Leading user testing during museum installation development with EJI’s team, including founder, Bryan Stevenson, and the museum’s target audience: elderly visitors.

 

During the development phase, we user tested with the museum’s target audience and the EJI team. From testing, we found that users enjoyed the option of reading stories rather than listening or watching, in the case they had audio or visual impairments. Users also understood the help button and referenced it if they did not know what to do next after visiting a state.

 

View the project here →

EJI-13EJI-13

Installations in The Legacy Museum in Montgomery, Alabama.

EJI-14EJI-14

Map state of the installation. Users can explore profile stories and state detail pages.

EJI-15EJI-15

From the state detail page, users can explore the names and number of victims by state and county.

EJI-16EJI-16

Profile story from each state, accessible from the detail page.

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