Leaving NewsKit Design System
I was lead designer on the NewsKit design system. Here’s the awesome stuff the team and I worked on.
So, what’s NewsKit?
NewsKit is a design system that feeds media and broadcast brands across News Corp. In the UK that’s brands like The Times, The Sunday Times and The Sun. In the US, NewsKit provides the foundations for Dow Jones on sites like the Wall Street Journal.
The system’s design and code is open source if you want to check it out:
- Components are on GitHub and exposed in Storybook
- Design libraries and theme are on the Figma Community
- The system is documented on the NewsKit website which is dogfooded from NewsKit components
Our assets received a lot of shares from the design community, it was great to be able to contribute to ongoing good practices.
My contribution
I can’t take any credit for NewsKit’s early success — its strong brand and foundations are down to the talented design and engineering team. Here’s what I’ve contributed during my year on the system:
☞ Planning and roadmapping
As design lead I pitched in on roadmapping and prioritising deliverables. We met regularly with title teams to identify component needs which fed into the PI planning cycle.
I worked with the Head of Design Systems and Engineering Lead to triage issues and prioritise work. We used GitHub Issues and ran weekly tech analysis sessions with the team.
We held twice-weekly design reviews, shared WIP, and made decisions collaboratively. We also ran workshops to define and prioritise team goals.
☞ Accessibility foundations
News UK had no overarching accessibility policy, so I helped launch an initiative to create one.
I pitched to the News UK Investment Board with the Head of Diversity & Inclusion for funding to hire an accessibility specialist. We brought on a consultant who helped us draft an Accessibility Policy and accessibility statement. I chaired our new accessibility working group.
I was recognised internally as the accessibility lead and created an accessibility hub on the NewsKit site. I spoke at internal and external events, including a Supernova accessibility panel and Q&A, and gave a talk at WDC about WCAG 3.0.
☞ Writing technical docs
Over the year I wrote and edited a lot of technical documentation — a part of the job I really enjoy!
I worked with engineers to add new components like pagination and composable card. We start with research and a spec covering behaviour, states, ARIA tags and API. Then we refine, test, and finalise both the code and Figma design assets.
The NewsKit site already had good docs, but the tone was inconsistent. We brought in a tech writer, and I worked with them to polish the copy. The themable illustrations are thanks to our brilliant junior designer!
☞ Storybook upgrade
NewsKit uses Storybook to expose components to engineers. The original stories lacked visual consistency.
I worked with our Senior UX Designer to improve branding, simplify IA, and spec consistent stories. We collaborated with engineers to roll this out.
☞ Advocacy, community engagement and mentoring
To raise NewsKit’s profile, I spoke at events like Converge and on podcasts like Design Ops Island Discs. Our team hosted the YLD Design Systems London meetup at London Bridge.
I ran the NewsKit Twitter account with our engineer Luke Finch, growing our audience with bad puns 😄
As a lead, I mentored designers across the business. Helping others speak, write, and contribute to OSS is one of the best parts of the job.
☞ We won an award!
I worked with our Head of Design Systems on a pitch for a RITA (Real Innovation Technology Award). NewsKit won in the “Delivering Excellent Customer Experience” category — a well-earned win for our dedicated team!