NewsKit Design System

---

I was lead designer on the NewsKit design system. Here’s what the team and I worked on during the past year.

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

My contribution

I can’t take any credit for NewsKit’s early success, its strong brand and foundations are down to the efforts of 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 for the design systems team. We met regularly with the title teams that consume the system to prioritise the components that they needed which fed into a larger PI planning cycle.

I worked alongside our Head of Design Systems and Engineering Lead to triage new issues and prioritise work. We ran the design system project in GitHub Issues which fed into a weekly cycle of technical analysis and estimation with the design and engineering teams.

As a design team we met twice a week for a design review, to share work in progress and make decisions as a team. We regularly revisited the team’s objectives and ran workshops to ideate and prioritise initiatives that supported business goals.

☞ Accessibility foundations

News UK has no overarching policy for accessibility which made it difficult for product teams to enforce accessibility standards. During the past year with NewsKit I've worked on both compliance and education initiatives to help establish a shared standard and build an understanding of the importance of accessibility within the business.

To kick off an accessibility initiative we needed some support. I pitched to the News UK Investment Board alongside the Head of Diversity & Inclusion for funding for an accessibility specialist. We engaged an accessibility consultant for a 3-month contract who helped us draft an Accessibility Policy and an Accessibility Statement which we encouraged title teams to adopt. We formed some community initiatives like an accessibility working group, that I went on to chair.

I became recognised as the accessibility expert in the business and ran various projects to support education, including an accessibility hub on the NewsKit site. I spoke about accessibility internally and externally at events, the highlight being an accessibility panel and followup Q&A for Supernova. With an eye on the future, I did extensive research into WCAG 3.0 which I turned into a talk at WDC.

☞ Writing technical docs

During the past year on NewsKit I have written and edited A LOT of technical documentation. I love to write and am delighted that as I've become more senior, writing has become a large part of my job!

I worked with engineers to add new components to NewsKit, the most complex being pagination and accordion. As designers on NewsKit we are close to the code. Building a new component involves doing initial research and writing the technical specification including behaviours, states, ARIA tags and component API. We refine the spec with engineers while they build the component, test against coding and accessibility standards then finalise the technical docs. We support code with a design component in Figma to allow for UI layouts and UX prototyping.

The NewsKit site was recognised by the industry as having quality documentation but the copy needed a refresh. It had been written by various contributors over time, was verbose and lacked a consistent voice. We engaged a technical writer to revisit the copy and I worked alongside them to refine the component docs and guides, resulting in a more coherent docs site. The themable illustrations are thanks to our super talented junior designer!

☞ Storybook upgrade

NewsKit uses Storybook to expose components and their props to engineers. Stories had been built by engineering with no design input and lacked consistency.

I worked with our Senior UX Designer to bring Storybook on-brand, simplify the IA and introduce visual consistency. We specced out each story and worked alongside engineers to improve. This resulted in a more coherent set of component examples that were structured consistently, which themed correctly across brands.

☞ Advocacy, community engagement and mentoring

To help raise NewsKit’s profile I spoke about the system at various events including Converge in San Francisco and on podcasts like zeroheight’s Design Ops Island Discs. The NewsKit team hosted the YLD Design Systems London meetup at our offices in London Bridge which proved a successful community event. I also ran the NewsKit twitter account, alongside our engineer Luke Finch, where we endeavoured to grow NewsKit's audience through the medium of bad puns 😀

As a lead designer, I also did a lot of mentoring and cheerleading. I enjoy helping designers progress their careers and achieve their goals, whatever they might be: public speaking, blogging or contributing to open source projects. My NewsKit pompoms did a lot of cheering!

It's was a real privilege to work with such a talented bunch, to represent NewsKit and help bring awareness to the team’s achievements.

☞ We won an award!

I worked alongside our Head of Design Systems on a pitch for a RITA (Real Innovation Technology) Award. NewsKit was awarded Delivering Excellent Customer Experience for delivering excellent support to our design system consumers. A well deserved award for our very dedicated team!

---

---

Continue reading