Design + Code

Anti-Defamation League.

Never again.

The Anti-Defamation League (ADL) is an international Jewish civil rights organization with over a hundred years of experience in raising awareness and fighting extremism. Since the 2016 presidential election, they grew increasingly concerned with the rise of hate crime reporting and the growing use of antisemitic language in the political and public spheres. To combat these alarming incidents, we worked with the ADL to create a comprehensive digital report on the history of antisemitism (both internationally and within the United States) as well as the seven most pervasive antisemitic myths.

While the ADL team had an eighty page base report, we wanted to create an interactive version that would allow for better social sharing of individual elements as well as visitors to carefully read all of the data, something that might be overwhelming if just presented with a wall of text. Starting with a series of interactive content concepts, we quickly narrowed down on a structure that had a base landing page, individual myth and history landing pages, and an interactive loading structure that could pull those separate pages into a single screen without the visitor having to navigate away or lose their place. Once we had the overall content structure in place, we worked to create a series of high-level modules that would build out the site, including embedded videos, image sliders, and interactive footnotes.

For the design, ADL wanted something striking and bold while still being easy to scan and read. Based on their stated inspiration and existing branding, we created a series of style tiles to hone in on the goal — one based on the current ADL web presence, one based on elements of the print styles, and one based on online longform journalism. With a final style and wireframes in hand, we turned the report into a visually gripping digital experience, with large full screen images, a sidebar navigation element, and striking deep reds and blacks. We worked hard to emulate the legibility and tangibility of the print medium while still creating something innovative for the digital space, all while encouraging the ADL team to layout their image and video assets in a variety of ways to best tell the story.

In the lead up to launch, we made sure the experience was smooth and consistent — lazy loading of all images and assets helped page speeds, JavaScript animations achieved consistent frame rates across all browsers and devices, and ajax loading of myth and history pages meant visitors would never be lost. Visitors could share not only pages of the site, but also selected quotes from within the stories on social media. Video hero areas on each myth page and bold hover elements reinforced the narrative and kept visitors engaged. Each page encouraged visitors to get involved by signing up with the Anti-Defamation League to join the fight against antisemitism and help them advocate for civil rights for all.

Agency: Friendly Design Co. Additional Design: Olivia Huffman.

All work was designed with Sketch and Illustrator. InVision was used to prototype interactions. The fully responsive site was built using JavaScript, GreenSock, Gulp, and Sass on the WordPress content management system.

Initial wireframe concepts explored content structures and interactions, from a single scrolling page to loading pages in an overlay to a narrative format.

Once the basic content structure was decided, we created a series of modules that would not only highlight their content but also provide visitors the best reading experience.

Alongside the content structure, we designed a series of style tiles (one based on existing ADL digital branding, one based on the print styles, and one based on outstanding longform journalism) to perfect the look and feel of the report.

Bold hover animations were incorporated throughout to reinforce the themes of the report and keep visitors engaged.

Interior myths and stories would load as an overlay element from the landing page but could also be loaded and shared via their individual URLs.

Flexible, reusable modules were created to build out the site, encouraging visitors to discover the content and share the myths and histories to social media.

The flyout navigation animation and structure was optimized to work smoothly and seamlessly across all browsers, devices, and screen sizes.

About

I fell in love with design and code in 7th grade when I built a webpage in Microsoft Word.

Hosted on GeoCities, it was a middle schooler’s dream of Star Wars: lightsabers, starfields, hyperspace, character profiles, and, of course, the Mos Eisley cantina band song playing in a MIDI loop in the background. Since then, I’ve grown up alongside the web — the introduction of CSS, the explosion of JavaScript, the death of animated GIFs, the birth of Flash, the death of Flash, the rebirth of animated GIFs, Web 2.0, and too many search engines to mention (along the way, I taught myself how to make websites a little bit better than that first one). Now I’m a designer for Friendly Design Co in Washington, DC — we’re friendly people doing important work with organizations to repair our world.

I live in Richmond, Virginia. I have a border collie named Logan (yes, after the X-Man). I’m a sneakerhead and font nerd. I organize my closet by color. I was born on a Friday. I’ve been to the emergency room in every place I’ve ever lived.

Do you have an awesome project that needs design, code, or identity? I’m available for very limited freelance work, so 
reach out.

Additional Clients: African Wildlife Foundation, AOL, Audi Financial Services, Clyde's Restaurant Group, Comcast, Custom Ink, Doubletree by Hilton, EVERFI, Habitat for Humanity, jQuery Foundation, Neustar, RAINN, Renaissance Hotels by Marriott, Sweetgreen, Volkswagen Financial Services.