Introducing NewsKit: A themeable design system for unique media brands
I’m going to tell you a quick story about why News UK decided to build a design system and why what we’ve ended up creating is so much more…
(if you’re not familiar with design systems, you can get up to speed here)
Why a design system?
News UK is one of the largest publishing companies in the UK. We own big news brands and publishers; The Times, The Sunday Times, The Sun, and Times Literary Supplement and we’re increasingly investing in broadcasting, since the acquisition of Wireless Group in 2016 (Times Radio, talkSPORT, talkRADIO and Virgin Radio). In recent years the shift towards the digital media space has become even more rapid and traditional newspaper sales have fallen amidst the general move towards ‘online everything’.
As one might imagine, these huge publishing operations are underpinned by a number of technology teams. Each publisher requires a number of performant, stable and customer friendly websites, built using a collection of interface components. When The Times decide they want to build an index page, that page will be constructed using a variety of article cards (see a card example on the left). The same need exists for The Sun, or indeed, any other of the many News UK publications. In the current world, multiple product teams will spend resources on building an article card component in their own unique way, to satisfy the needs of their business stakeholders. These components have traditionally looked and behaved a little differently but, in essence, are variations of a common, base component.
Auditing the sites and seeing how much was shared led to a simple question — “why don’t we build one, agnostic, themeable, high-quality component that will satisfy all of the requirements?”. And so the NewsKit Design System was born.
NewsKit
NewsKit, roughly 18-months old, is now maturing into a robust design system, adopting some of the latest technology to enable News UK brands to build better products, faster. We currently have around 29 high quality React components available to consumers with many more to come.
Our design system is much more than a component library. NewsKit is a family of toolkits that supports the whole process of building beautiful, scalable digital products. Like many others, we’ve recently migrated all of our design teams to Figma. This provides us with a collaborative space to help design and grow News UK’s offering, enabling us to keep our components in sync across multiple projects and simplifying the customisation of themes and components.
Using design tokens, our theming system allows designers to take an agnostic NewsKit component, apply a theme created in Figma, hand it off to an engineer and, in doing so, provide a fully publication-themed component ready to be used to build a product!
As we head towards the end of 2020, a momentous year for many reasons, the NewsKit team’s focus is gradually shifting. Our 2021 priorities can be outlined as follows:
- Support the adoption of our design system across News UK and, potentially, wider News Corp brands
- Build upon our component library and continue to drive efficiency for product teams in our technology department
Please do follow us for more, as we begin to tell you about the many technologies, successes, failures and pivots from our design system journey.
Forthcoming topics include:
- The story behind our unified content API and how we’re integrating that with our design system
- Taking the NewsKit ecosystem to the next level with our core render package, allowing prospective clients to spin up a highly performant, scalable and themeable website rendering solution
You can also take a look at exactly what we’re building by visiting our documentation site at NewsKit.co.uk.
If you have any questions for us or would like to share learnings, we’d love to hear from you. Follow us here, leave a comment below and we’ll get in touch.
