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.
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.
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.
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.
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 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.
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.
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.
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