My role
UX design intern
Team
Project lead
Editorial director
Wordpress development team
Policy expert
Legal expert
Timeline
8 months (January - September 2022)
During my time as a UX design intern at the Anti-Defamation League (ADL), I was part of a team that researched and built design patterns that aim to systematically mitigate hate and harassment on social media platforms. This collection of patterns, which we call a "library," are used to inform design and engineering teams that build social media platforms. The library is also used by ADL to inform policy-level decision-makers to make social media spaces healthier and safer.
My role was to interpret and transform the research insights into examples of implementable user interface demonstrations. I also assisted with writing instructions for each pattern of behavior, as well as refreshing the UI's design system for cohesion and scalability.
I designed the user experience flows and interfaces for these 25 patterns, which are all available on the project's official website.
I also assisted in drafting the written instructions for these patterns, as well as expanding the Figma design system.
I followed this process for each of the 25 patterns I worked on:
Consolidate design directions and research insights into written drafts for the proposed pattern, and assist with supplementary research as necessary.
Design and build UI demonstrations for how to implement the pattern.
Receive feedback and iterate on the designs, as well as package each UI as demo videos to be published on the project's website.
As the library of UI patterns grew larger, I noticed that the new and more complex interfaces were outgrowing its original design system. As a result, I offered to refresh the design system for cohesion, readability, and scalability.
Before: Multi-step selections were all made using dialog boxes, which made the task flows difficult to follow.
After: I turned all multi-step selections into pages for an easier-to-follow flow.
Before: Too many types of modals caused inconsistency and confusion in task flows.
After: 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.
Before: 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.
After: I added more contrast between the core pages so viewers can easily differentiate the interfaces. I also created a layout for settings and menu interfaces, as it didn’t exist prior.
This has been one of the most interesting and most difficult to explain projects I've worked on.
Explaining UI patterns of social behavior that mitigate hate and harassment of social media is not the easiest thing to do when you first meet someone :)
However, through this project, I found my passion for systems design and an interest in finding causality and order within complex systemic issues. I would love to take on more projects similar to this!
Want to connect, collaborate, or just get coffee? ☕️
