Creating an AI-powered comments moderation platform for some of the UK's leading magazines.

Problem Statement

News and politics platforms often struggle with comments sections filled with bigotry and behaviour that does not align with community guidelines. How can AI create a moderation system that is contextual, non-deterministic, and flexible enough to be used as a plug-in by a wide variety of magazines?

The Solution

A plug-in connected to our internal platform that analyses comments against defined parameters and provides contextual feedback aligned with community guidelines. It helps maintain safety without heavy-handedness by automating the review process while keeping a human reviewer in the loop for final decision-making.

The Process

The team followed a standard UX process, from user flow mapping, workshops, and critiques through to wireframes and Figma designs. As the only designer on the project, I contributed across the full product journey: mapping the UX flows, shaping how the system would work alongside the backend context of an AI model, designing the UI, and creating CSS styling, animations, V0 prototypes, and other implementation resources to guide engineers beyond the design files.

The Non-Deterministic Nature of AI Output as a UX Writing Design Challenge

• This proved to be the most difficult part of the project: delivering AI-based feedback that was both contextual and non-deterministic, while still maintaining an empathetic tone across a wide range of publishers.
• There was significant stakeholder alignment around the prompt system and how the moderation feedback would work linguistically. The UX needed to feel neutral: clear enough to flag a problem, but never so final that it felt like the system had made an irreversible judgement. If a user felt the feedback was unfair, they needed a clear path to bring a human reviewer into the loop.
• The political context made the challenge even more delicate. The system needed to identify inappropriate comments without feeling like it was suppressing freedom of speech. This UX writing template became the basis for prompting how the AI would generally respond.

Introducing the Team to V0: A New Way to Prototype

• While working closely with the engineering team, my collaboration was called out during standup, particularly around the implementation resources I was providing alongside the design work. One of the ways I made the development process easier was by introducing V0 to the team. Because the project was built with Next.js, it felt like a natural fit for prototyping interface ideas in a format closer to the final product.
• I had initially been giving engineers small code snippets for specific pieces of the design, but V0 helped us move faster. It gave the team a source of truth that was closer to the material of software than a polished Figma file, making it easier to test ideas, discuss implementation, and translate design intent into production.

Designing System Feedback

We were moving quickly, and I wanted a loading state that felt unique but was still feasible to ship on deadline, with me as the only designer on the project. I started from an open-source loader and built on top of it to create a small visual system for the loading states.

The Loader

I began by editing the styles, turning the orb from dark mode to light mode to match the visual direction of the MVP's light-mode widget. This gave us a distinct, friendly loading pattern without starting from scratch.

The Loader States in Context

The idea for the loader was that it would move between states using colour as a visual signal: a classic set of colours for approvals and acceptances, and a pink-and-blue colourway for the primary loading state. This made it easy for users to read system status at a glance.

Then I Made a Business Tradeoff

The team was excited about the loader as a visual direction, but I realised it would not work in every context it needed to. The plug-in had to sit comfortably alongside the brand colours of any publisher using it, and the colourful orb risked clashing with existing visual systems. It looked strong when tested with the publishers we had in-house, but it did not feel built to scale, so I recommended moving in a more minimalist direction.

New Loader Animation

We shifted direction to something more neutral and flexible: a simple open-source search icon, with colours edited to better adapt to different brand environments. The animation and design felt more context-agnostic, something that could exist as a plugin multiple publishers could use without worrying whether it aligned perfectly with their visual language.

Success State

Approved comments display a clear message confirming that their comment had been successfully published, without unnecessary flourishes.

The Dashboard UI

The moderation dashboard is where moderators review comments that didn't pass the AI check, with enough context to approve, reject, or escalate quickly and confidently.

The Modal

Designing the moderation modal was my favourite part of this project: it had to surface the article, the comment itself, user details, and comment history in one compact, high-signal view, without drowning moderators in noise.

The Results

• The MVP delivered feedback that felt intelligent and contextual, even within the largely non-deterministic nature of AI output. Users of the tool reported that it helped publishing teams moderate more efficiently while maintaining safer communities.
• On the consumer side, we arrived at a solution that remained contextually impartial while giving commenters a clear way to bring a human reviewer into the loop. The system did not rely on AI judgement as the final say.