The Telegraph’s Particles system has been alive for over a decade. When I joined Particles were an afterthought, a CMS system with less than 10 rigid templates into a sprawling strategic infrastructure that shape discovery and depth possible for storytelling in articles and across the homepage. The shift was cultural: teams now lead with Particles, from the largest Special Projects to live blogs, which has enabled a fluid and lively app experience for readers, resulting in the app dwell time increasing 17% and a 9.5% improvement to daily app users.
Project overview
What a Particle is
They are self-contained, responsive and interactive HTML modules – calculators, maps, charts, timelines, video players, audio embeds, live data widgets – that journalists create and manage through an internal CMS, adding everything they need and deploying in articles or on the homepage without additional oversight from designers or engineers; these are called templates. Data is dynamic or, to keep workflows simple, from Google Sheets allowing for real-time updates.
From the beginning I set out to design them with two guiding principles: be responsive from the start.
As they are used across the web and the app: on the homepage, Telegraph Life index pages, articles and even on social media posts at times, I knew I wanted from the start. The second was simplicity, combined with the responsiveness, ensured that as Particles scaled the skill needed to engage with them wouldn’t too, meaning journalists and juniors remained as my core end-users.
My role
Since the project started, from my very first week at the Telegraph, I have been the lead product designer on Particles. Championing them and facilitating their improvements through close collaboration across the newsroom, connecting engineering, product and editorial teams, while rolling them in the Design System and enabling designers of all kinds, as well as journalists themselves, to build and grow the eco-system.
This case study covers the progression of the Particles system over multiple years and all examples show feature work that I completed myself, led with others or had a significant advisor role; alongside it’s expansion in the Telegraph Design System. It showcases the vision that I’ve laid out and the plan to execute on, bringing Particles into the limelight. At the end is an appendix where you can explore some Particles I feel encapsulates its meaning the most.
The evolution of Particles
A largely ignored system
Work began inside articles, focusing on the most-used templates alongside an audit of article typography. I traced how journalists used them through the Particle CMS and examining countless articles across different devices, then collaborated with the Design System team, Graphics desk and Visual Journalism to map friction points. The goal was understanding the system as it operated, not theorising about what it could become.
Establish foundations
As a newspaper, typography is the bedrock to the experience. Two principles anchor Particles to this day: colour should be used sparingly and differences in hierarchy must feel intentional. Particles never live in isolation and need to compliment the surrounding furniture rather than compete.
Beginning with Breakout Boxes
Breakout boxes are the most essential, and basic, Particle type and was the first I looked at. By applying small changes that grounded everything going forward, it established rules that could be scaled throughout the Design System that would be later relied on for when overlaying on maps, incorporating data and graphs, and introducing inputs for calculators – creating a coherent transition from articles to the homepage and Special Projects.
Iterating without disruption
Rather than rebuilding workflows journalists had learned over years, I expanded functionality within familiar patterns. Improving richer inputs within the CMS that catered to how they were already using (jerry-rigging) Particles, adding flexible layouts for different desks and bettering animations so they felt lively alongside improving accessibility for readers through size, colour and navigation. For the first year, feedback was mostly qualitative from the journalists, before analytics was added to the CMS, as they were ultimately the end-user – they were the ones building and deploying Particles for readers.
Growing the library
The number of templates expanded strategically: when a custom Particle proved reusable by multiple desks, it went into the pipeline from bespoke to template. Many originated when editors saw a solution elsewhere and requested an adaptation – the best validation of utility. A single map template now serves elections, travel and major news coverage. Calculator and inputs templates define Telegraph Money. Deliberate reuse created breath without bloat.
In progress
Bridging to the the homepage
Up until this point, Particles only were deployed within articles and live blogs. There were no technical limitations but early Particles didn’t warrant precious homepage space. They reached the homepage through validation of data-led sports Particles that brought significant value to the sports desk and users alike. Originally used for the World Cup, and other major sporting events, they were later used each weekend for the Premier League becoming rituals for readers expecting live scores and lineups, familiar patterns allowed for transferable comprehension across templates.
Shifting the journalists' mindset
The moment the Particle system transitioned into the powerhouse it is came from two separate initiatives: the introduction of Particle as a lead asset (PALA) and the US Election. Instead of images leading articles by default, Particles could take the hero slot when they carried the narrative. The US Election’s tight deadlines and coin-toss result possibilities created the need for dramatic changes rapidly without developer involvement – using Particles instead. This came together at Trump’s inauguration. This ideology spread because it clarified editorial intent when interactivity was the story.
Empowering everybody
Success required organisational autonomy, not just designer efficiency. Figma libraries mirrored production code tokens, ensuring consistency from iconography to spacing and typography. Clear usage guidance helped teams select appropriate patterns. Junior designers and low-code contributors could build quality work from documented components. This standardisation extended beyond editorial – subscriptions inherited these patterns too, creating connected journeys rather than disjointed experiences.
Technical foundation
Not only was my focus on improving the connection between editorial, the Design System and developers; data-first architecture minimised hard-coded Particles. Accessibility compliance rose too alongside a streamlined developer handover and QA process leading to Particles being made in less than a week (even without a senior developer behind it). All of this was grounded through close SEO collaboration, performance retained as complexity scaled. A nice side-benefit was that as templates evolved, legacy Particles auto-updated keeping archived articles current without intervention.
Collaboration at scale
Particles are used by almost everybody at the Telegraph – it’s mentioned in most team’s onboarding – so there are many stakeholders and voices that want to help shape its future. Leveraging MVPs and an iterative cycle allows me to cater to as many as possible alongside detailed in-CMS analytics closed feedback loops guiding innovation through user action rather than assumptions. Building into the Design System allowed for platform-wide improvements.
Particles were used throughout the app leading up to, and on, results night. All anchored by strong navigation that linked users between key analysis, live blogs and real-time data. In the weeks leading up to the election these were heavily interacted with by readers.
Thinking about the future
Pushing boundaries
As Particles matured it allowed it to become an innovation playground, a ‘future-thinking’ collaboration between editorial, design and technology. Launching pilot programmes for artificial intelligence, from reading articles aloud to readings, giving readers new ways to engage on the go, and AI chatbots for Travel; alongside internal AI innovations inside the CMS that allow journalists to make Particles from a single prompt.
A recent and powerful tool added are floating elements that provide layered contextual information for readers, from live scores in football live blogs to navigation and item tracking in the latest list articles for Culture. The real innovation here is the ability for Particles to talk to one another, understanding where they are and offering users value in the background without their input.
What's changed and next up
Through the innovations over the years, editors now plan with Particles from the project’s inception and Particles act as a testbed for new ideas – bringing a start-up-like vibe to innovation to see what sticks. Product prioritise building reusable systems instead of one-offs and readers encounter value immediately upon arrival in-app or on the web. The goal remains constant: make the Telegraph immediate, useful and alive.