Case Study

On the BuzzFeed Community team, moderating toxic comments/spam is one of the moderators' most important work. There were significant user experience and efficiency issues on this tool, which made their inbox queues never hit zero. By redesigning the comments moderation tool, I improved moderators' work experience and performance. At the same time, our Data Science team introduced an NLP algorithm to help the moderation work. So the new interface I designed communicated the Moderation team's new workflow after the NLP algorithm auto-hides/auto-flags some comments. By covering these two aspects, my design improved the moderators' work efficiency significantly.

I did one hour of Contextual Inquiry with three of our comment moderators. Here were my findings:

1. We discussed general information about the comment moderation work. In short, Buzzfeed has five moderators working at a given time on this issue. Each of them works 1-2 hours on their queues every week. With only this small amount of people and time, there have been thousands of unreviewed comments in their queues; some of them can date back up to 3 years old.

2. We discussed the workflow of comment moderation:

- Read post name (optional, only for understanding the context)
- Read each comment.
- Take action on each comment - hide/delete/dismiss-
- Confirm review.

Usually moderators don't look back at previously reviewed comments.

3. We then explored Usability issues. Moderators need to check a user's comment history sometimes, but the current tool does not support this very well. The search function was named "user comments." Some moderators never used it because they didn't understand its function by its name.

4. We also touched on the moderators' emotional needs. Reading toxicity/spam isn't a pleasant work; the emotional state and mental health of the moderators needs consideration.

I did the heuristic evaluation based on NNGourp's 10 Usability Heuristics for User Interface Design. Here were the issues with previous product:

1. Visibility of System Status: Current comments moderation tool doesn't show users their progress and the length of the queue. Recommendation: Show the amount of the queue and the status of progress to the users.

2. Match between system and the real world: The word "flag" looks vague to readers, it doesn't necessarily mean flag inappropriate content.

Recommendation: Use more specific wording to let users understand what is "Flag”; for example, “report an issue“.

3. Consistency and Standards: The comments moderation tool and post moderation tool are not consistent with each other, but their functions share a lot in common.

Recommendation: Since the users utilize both comments moderation tool and post moderation tool in their work, design the comment moderation tool with the same standards of the post moderation tool. This will help shorten the learning curve and increasing work efficiency.

4. Flexibility and Efficiency of Use: The users need to check someone's profile page for comment history very often in their work. Jumping between different pages can cost a lot of time.

Recommendation: Pull up this person's comments all at once if he/she has similar inappropriate comments before.

I then worked to craft multiple detailed User Stories to explore and envision the benefits of a newly designed comments moderation tool.

Ex: As a Buzzfeed Comment Moderator, Jane is responsible for monitoring and moderating the comments section on the website. She spends a significant amount of her time reading through comments and identifying those that are potentially offensive or inappropriate. The volume of comments can be overwhelming at times, and it can be difficult for her to keep up with the constant influx of new comments.

Recently, Jane has been hearing about the potential benefits of using a machine learning enabled comment moderation tool to assist in this process. She believes that such a tool would be able to quickly scan and flag potentially inappropriate comments, allowing her to more efficiently and effectively moderate the comments section. This would not only improve the user experience on the website, but also free up some of her time, allowing her to focus on other important tasks.

The flow before introducing the auto-flag/hide algorithm:

The flow after introducing the auto-flag/hide algorithm:

I worked together with the PM to define the scope and primary focus of this project.

1. Overall user experience improvements
‍
- Clearer navigational hierarchy.
- No more batching
- Moderate and dismiss comments individually.
- Indicate the size of the queue so that moderators can see progress.

2. Make frequent actions easier

- Shortcut link to view a user’s past comment
- Search for all comments that belong to a particular post (search was only by the user)

3. Integrate comment classification service

- Auto-hide comments with a high level of detected toxicity/spam
- Auto-flag comments with a medium level of detected toxicity/spam
- Visual cues to help moderators understand why a comment was moderated

A solution was to simplify the high level structure, and sitemap. Without formal training, non-tech background moderators had difficulty understanding the tool's mechanism. Showing too much detailed information of the backend mechanism would confuse the moderators, but showing too little information was not viable either.

Usability tests showed that the moderators followed the same working flow of moderating:
‍
1. Flagged (auto-flag+reader’s flag)

2. Auto-hidden Comments.

Moderators care about the comments' content rather than how, or why, they are added to the queue. Only having "unreviewed" and "reviewed" as categories seemed to be the best way to show the moderators thier unfinished, and finished, work. Usability tests showed that other categorized methods did not indicate that clearly.

I worked to redesign the comment format to make it easy to scan and take action

Reworking Moderating a Thread

Tracking an account's comments history

At the end of the design iterations, I conducted an in-person, moderated usability test with 3 participants.

I had 3 main insights:

1. Without training, users are not 100% sure about those comment status just by the tag names “Auto-hidden” “Flagged” ” Flagged by readers” “Auto-flagged”. In my test, I only told the participants we would introduce an auto-moderation tool which can auto-flag/auto-hide some comments without any training. With only this much context, usability testing reveals that the participants can not have a clear understanding of tags’ meaning and the relationship between each tag. And different participants have different mental models about the relationship of those tags.

2. The users' workflows of all those different tags are the same: read -> hide/delete/no action. They don't differentiate different tags very much.By observing and ask the participants to talk aloud their workflow, I can easily notice that the participants are not differentiating those tags (meaning “flagged” “auto-hidden”) too much. They just read the comments on the webpage one by one and then take actions.

3. General findings: Participants appreciate one thread on one page. Participants need to use the search function to be able to search by user name and post name.

I looked for feedback from users on the rethought comments moderation system. Quotes from the actual users:

“I do like the count of the queue.” — Kristen (Community Editor)

“I love the way it looks -- I like how clear everything is. Like flagged, auto-hidden, etc.” — Anna (Community Strategist)

“I like one thread per page. The older one (10 threads per page) sometimes gets overwhelming.” — Austin (Community Editor)

A Look at the Final Product

Design - This project involved visual design, interaction design, product thinking, typography, alignment, negative space, choosing the colors, and visual hierarchy. As well as utilizing usability tests, heuristic evaluation, contextual inquiry to keep my design consistent with BuzzFeed’s Solid Design System and make a considered contribution. I worked to share quickly, constantly sought feedback, and worked to learn from that feedback, through exploring and iterating as much as I could.

Communication - I met the actual users and connected with them, documenting my processes and sharing it the design team and the product team. I constantly sought and provided feedback, to learn from other designers. I worked to build trust with other designers and the product team, collaborating with all the stakeholders: PM, Dev, DS and moderators, while being flexible about the process.

Domain Knowledge - I worked to learn as much as possible about the Buzzfeed online community, while designing to communicate the use case and utility of a machine learning-enabled application with non-tech users, eventually gaining buy-in for an internal tool with the goal of greater efficiency.