Anti-Defamation League

Social Pattern Library Internship

My Role

UX design intern

Team

Project lead
Editorial director
Wordpress development team
Policy expert
Legal expert

Tools

Figma
Notion
Dropbox

Duration

8 months
(January - September 2022)

Overview

I interned as a UX designer at the Anti-Defamation League (ADL) and was part of the Social Pattern Library project. 

The Social Pattern Library is a database of anti-online hate best practices (or UX patterns) that stemmed out of the ADL’s ongoing anti-hate social media research. The UX patterns recommend best practices for promoting online safety to product teams who build social media platforms such as Twitter, Facebook, etc.

What is the Anti-Defamation League?
The Anti-Defamation League is an international Jewish non-governmental organization based in the United States specializing in civil rights law. I worked with their Center for Technology and Society, which specializes in fighting online hate.

My contributions

Project Outcomes

Framework that I followed to make each pattern:

Example Patterns

The "Misinformation Corrections" pattern proposes that social media platforms should have a built-in correction system to help people can correct their past posts and opinions in a sensible way.

As I wrote the draft, I took into consideration how this pattern can promote accountability, empathy, and forgiveness.

How does this pattern mitigate hate?

Studies show that repeating misinformation content alongside a corrected version doesn’t lead to stronger misconceptions about the subject but rather helps educate people on the differences between misinformation and fact. As such, this pattern can help people gain more context about the content.

How does it work?

Give users the opportunity to flag a piece of content as misinformation and provide links to evidence showing this to be the case (i.e. snopes, factcheck sites etc).

When flagged content is edited by its owner, the previous version should still be available to view. The previous version should be placed behind a warning or caution interstitial.

(Excerpts that I co-wrote. The live link to this pattern has not been released yet.)

I then created a Figma demonstration of how the pattern can become features and implemented them in ADL's fictional social media platform.

Another pattern I worked on is called "Machine-Learning Usage Indicator." This pattern proposes that when someone makes a report, the platform should indicate whether it will be reviewed by machine learning, a real person, or both.

While the visual implementation of this pattern is relatively simple, its underlying ethics is important in building trust and transparency between platforms and users.

How does this pattern mitigate hate?

By indicating to users whether their report will be reviewed by machine learning, a real person, or both, individuals can have clarity in knowing how their report will be handled. Also, this pattern gives platforms an opportunity to hold themselves accountable to uphold how they review reports. As a result, this builds more transparency and confidence in the reporting process.

(Excerpt that I co-wrote. The live link to this pattern has not been released yet.)

Design system expansion

As I worked on the project, I noticed that ADL's fictional social media platform was outgrowing its original design system. I found that many UI components were cluttered and difficult to understand, which overshadowed the UI's purpose of demonstrating the patterns.

In order to build clear and intuitive pattern demonstrations, I streamlined the fictional social media platform's design system for scalability and efficiency.

ORIGINAL DESIGN SYSTEM

Too many types of modals caused inconsistency and confusion in task flows.

Multi-step selections were all made using dialog boxes, which made the task flows difficult to follow.

UPDATED DESIGN SYSTEM

I turned all multi-step selections into pages for an easier-to-follow flow.

I reduced modals to only 3 types so they’re easier to understand and don’t distract from demonstrating the features.

Type 1: dialog boxes—only to be used for single-step selections.

Type 2: temporary notification banners—only to be used as feedback for a completed action.

Type 3: permanent notification banners—only to be used for indicating states.

ORIGINAL DESIGN SYSTEM

There was little contrast between core interfaces such as Feed and Post, which made it difficult for the viewer to tell where in the social media platform the UX patterns were being implemented.

UPDATED DESIGN SYSTEM

I added more contrast between different core interfaces so viewers can differentiate between different sections more easily. I also created a layout for settings and menu interfaces, as it didn’t exist prior.

Lastly, I updated transition and feedback animations to be more consistent to help viewers understand the relationships between features, pages, and flows with more ease.

You can find all of the patterns I contributed to in the Social Pattern Library.

View more projects