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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Webby - People's Choice for Best Cause Related Campaign
Cannes Lions - Bronze in Digital Design