Creating an AI-powered comments moderation platform for some of the UK's leading magazines.
The Challenge
News and politics platforms often struggle with comments sections filled with bigotry and behaviour that doesn't align with community guidelines. We built this for some of the UK's leading magazines. The challenge was creating a system that could exist as a plug-in across different publishers, while still giving teams fine-grained control over the parameters of AI-moderated analysis and feedback.
The Solution
The platform analyses comments against defined parameters and provides contextual feedback aligned with community guidelines, aiming to maintain safety without heavy-handedness.
The Process
The team followed standard UX methodology: user flow mapping, workshops, critiques, then wireframes and Figma designs. I contributed CSS animations to guide engineering implementation, working as the only designer on the project.
CSS Animations
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.
Tradeoffs and Direction Change
The team was excited about the loader as a visual direction, but we realised it wouldn't work in all the contexts it needed to. The plugin needed to sit comfortably alongside the brand colours of any publisher using it, and the colourful orb risked clashing with existing visual systems.
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.
UX Writing Challenge
This proved most difficult: delivering AI-based feedback that is both contextual and non-deterministic, while maintaining an empathetic tone across diverse publishers.
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, enabling publishing teams to moderate efficiently while maintaining safe communities.