How we improved our design system delivery

Our journey on understanding how to build out a Design System has had many twists and turns. Through each learning, we have continuously reviewed, refined and streamlined how we work to provide components as quickly as possible while increasing the quality. If you’re not up to speed with what a design system is you can read one of our previous blog posts here.

We have learned a lot; from understanding the complexities in getting our theming and foundations right and implementing cross-browser visual testing, to our approach to building out components.

Early Engagement

As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.

Even if a brand has no immediate plans to use the component, we still engage with them early on so that we have recorded their input and ensured they are bought-in to the approach if they decide to integrate later on.

Despite this, we still need to ensure we’re delivering progressive enhancements. Initially, we tried to deliver a fully-fledged component in the first release, but we changed our thinking and now deliver what is needed first, even when we have a good idea of where a component should end up. Through trial and error, we now have a greater understanding of how to define what the MVP is for any new component we work on.

We also have a better understanding of which components need to be prioritised. In the early days, we took the approach of auditing the most common components and building those first. However, through close collaboration with the product teams that we support, we instead respond to what’s required based on their roadmaps. This allows us to deliver direct business value as we build out the system.

Engaging early has been a key learning for our Design and Engineering teams. For designers, engaging our Engineering teams in the specification stage of the design process and reviewing ongoing work before writing up the tickets significantly reduced back and forth; streamlining our development process.

The Right Tools

The introduction of Figma across our design teams improved collaboration, communication and workflow efficiencies. As well as consolidating multiple tools, we found Figma provided us with the flexibility to manage the UI libraries from a single location, cutting down maintenance overhead.

Figma’s Jira integration gives our engineers easy access to designs from the ticket they are working on and we’ve developed our own plugin, in-house, to manage different themes across our brands.

Similar ways of working

From the moment we came together as a team, we all agreed that our designers and engineers would need to work closely together. By bringing the Design team into the Scrum framework with our engineers, our collaboration and communication constantly flow. The design team have also introduced design ceremonies throughout the week to gain feedback on their work regularly.

Another area we focused on was improving our release process. When we started our journey, we had a lot to learn to understand the complexities of a Design System for multiple brands. Due to the number of breaking changes in our early releases we were reluctant to release regularly. However, over time we have become more stable, allowing brands to upgrade to the latest version of NewsKit more easily. The design team mirrors the code release cycle, releasing design changes to the UI Kit every two weeks.

Standardisation

Our initial time in design and engineering for delivering components took longer than we first hoped. However, with more experience in the team and better collaboration with our brands, we have seen the overall delivery time of our components reduce.

Over time, we have built up our codebase and domain experience within the team. Areas such as accessibility and SEO now require far less time spent upfront on investigations to understand the approach.

Checklist created by the Design team to ensure that nothing is missed and we meet the standards we have set for ourselves.

Checklists also now play a vital role in ensuring we meet the standards we have set and provide a starting point for anyone picking up a new piece of work.

To ensure we are not approaching our graphs and designs ad hoc in our UI library, our designers work through a checklist. Including having engineering design peer review, saving time on both sides going back and forth. Our engineers also use a checklist in their PR process which they constantly review and update when needed.

We have also improved through re-using other components. The Tab and Menu items we were able to base off the Button component. By doing so, it meant we didn’t have to build these again.

We have become quicker in the design and build process with each component we have worked on

Initially, we didn’t have any of the foundational components, but as we have progressed we have been able to reuse simple components to build more complex ones. For example, we can take our button off the shelf when building a component like the drawer.

Subsequent delivery of closely related components is significantly quicker

Another example of this is the banner, toast, and inline message. The banner was one of the first components built that required common functionality. By the time we built out the toast and inline message components our turnaround time significantly reduced.

Feedback

Finally, continuous feedback has been important to ensure that we have the right approach. The more frequently we gain feedback, the easier it becomes to resolve any issues promptly.

As brands started to pick up NewsKit we introduced regular drop-in sessions with our brands in the design and engineering teams. That two-way feedback has helped us to understand any issues they have using our Design System. We have also used those sessions to demonstrate any new components in the pipeline, allowing any feedback from our users before we release the initial MVP version.

There are other ways we have tracked feedback. We have introduced surveys with the users of the design system, setting product KPIs and NPS scores. We now set targets around components built, adoption and reviewing regular feedback from surveys — enabling us to ensure Newskit is as user friendly as possible.

We have put significant effort into understanding and improving our processes. The results are already showing in delivering key projects across NewsUK and NewsCorp. With more brands onboarding to use our design system, we are continuing to review areas such as:

  • How documentation fits into our overall delivery process.
  • Providing support without impacting the delivery of new components or enhancements.
  • Balancing delivery across multiple brands
  • Which KPIs are the right ones for us to demonstrate business value to our stakeholders.

If you would like to see what’s coming up, our high-level roadmap can be found on the NewsKit Website.

#designsystems #delivery #figma #react #publishing

--

--

A blog about anything relating to the NewsKit design system by News UK.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gill Bennet

“If you want people to join you on the other side of the river, build a bridge to help them cross. Don’t just expect them to jump in and swim.”