Cover image

Epochtalk Moderation System

Redesigning forum moderation

The Basics

A major feature of the Epochtalk forum platform is its robust administration features. Moderation is the most important actions that administrators and moderators perform—they must manage bad content and users to maintain the quality of the forum’s content.

The Problem

I spent several hours with the administrators to gain more insight into their workflows and needs. They revealed that the moderation and reporting features were used most often (multiple times a day), and were the most important (required their immediate attention).

Administrators and Moderators of large forums deal with a high number of reports for spam and bad content. In order to preserve the quality and integrity of the content on the forums, they must address these reports quickly. Admins and Moderators needed better visibility of the number of outstanding reports, and a more effective way to find, sort and act on those issues.

I prioritized these features for this phase of the Admin UX redesign.

Goals

  • Redesign the Epochtalk Admin views so users can more easily perform high priority and repeated actions
  • Highlight information that needs immediate attention / action
  • Allow users to easily find the actions they need

The Process

Wireflows

Epochtalk moderation user flows I created a simple wireflow diagram to show the Admin users’ path and actions while moderating content on the forum. The wireflow diagram shows what the user sees on each view in the flow, their possible actions, and their next step.

Our team reviewed the wireflow diagrams and agreed that these captured the main flow, as well as most edge cases we would encounter.

Design

I jumped straight into designing mockups of the views—I held off on reviewing the wireframes with the admin users in order to give them a more refined mockups to show the direction we are taking.

Mockups were created in Sketch and simple prototypes were created and shared in InVision.

Notification Badges

Notifications in the user menu Notifications in the main nav bar

I added a notification icon to the user’s avatar in the main toolbar. The icon indicates that the user has reports or issues that must be addressed. The notification icon is visible wherever the user is browsing on the site.

When the user opens the dropdown menu, they now see a badge with the total count of unaddressed reports. The count helps the admins and moderators quickly assess the scale of the issues they need to address.

Moderation View

Main moderation view I rearranged the layout so the first (default) view to appear is "Moderation"--making it much easier for admins and moderators to quickly view the reports that need their attention.

I also added a badge to the Moderation tab that shows the total number of unaddressed reports.

Notifications in the main nav bar and tabs Within the Moderation view, each tab shows the number of unaddressed reports for each type—Posts, Users, and Messages. This gives admins and moderators a glanceable overview to help them decide how they will distribute their effort.

Grouping Similar Reports

Grouping similar notifications Another problem the Moderators deal with is multiple reports (from many different forum users) against the same post. Some of the moderators built browser scripts for the old forum moderation views that grouped similar reports together—allowing the moderators to more easily deal with duplicate reports. I took inspiration from their browser scripts and designed that functionality into our new Moderation view.

Duplicate reports are grouped together (instead of appearing apart from each other in chronological order). The individual reports are still visible in the group, and easily selected to view report details.

Master / Detail View

Notification details view I noted that viewing report details was cumbersome in the existing design–moderators needed to select a row in the table, then scroll down to view the report’s details. If the moderator’s browser window was too short, the details panel would be hidden completely

I redesigned the view with the report details in a panel that slides in the right edge of the browser when a report is selected. This maximizes the space available for the report table—allowing moderators to scan more reports at a time. If the moderator needs more information on the report, they can select it to open the panel. Once open, the moderator can scroll through the details, take action and dismiss the panel. The moderator can also leave the panel open and select another report to quickly view its details.

The Results

The design was well received. We are currently building out the features needed to support the badges and grouping of reports.

Want to read more about building out the user interface? Check out Epochtalk Admin Redesign for more on the overall redesign of the Admin views.