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)
UX design intern
Project lead
Editorial director
Wordpress development team
Policy expert
Legal expert
Figma
Notion
Dropbox
8 months
(January - September 2022)
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.
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.
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.
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.
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.)
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.
