A design system for transformational change

Most of these projects have involved building new front ends for Hackney that would stand the test of time. After doing this from scratch more than once, improving Hackney's design system was our next priority. Designing a fresh new system creates an easier and more joined up tool for staff and a more consistent experience for residents.

A fresh, new design system

A design system means different things in different places. We use it to mean a set of researched, well attested guidance and resources for designers and developers, in the style of the GOV.UK Design System.

On paper, Hackney already had a design system but in practice, it was an outdated Github repository that developers had lost some confidence in as it wasn't actively supported. We noticed a cycle of designers and developers wishing there was a better system, frustrated by the condition of what existed and independently reinventing the same things.

Simpler documentation

Well written, simple documentation is vital for any software project and especially for design systems. The state of the current documentation was a blocker for staff. Designers saw it as a highly "technical" resource purely for developers, and developers saw it as disconnected from the technology stack they tended to use on projects.

We considered just improving a few "landmark" pages, but eventually decided that the volume of content was small enough to justify a complete rewrite, which took about three weeks.

Along with rewriting the words themselves, we used Docusaurus to build a static website to host the docs. The previous version of the design system used a custom built docs website that was poorly understood. Docusaurus, by contrast, is one of the most common tools for building docs sites. We wrote a whole new starter kit and code samples for Next.js, the framework Hackney uses for most new front ends — along with other popular frameworks. That means developers can copy and paste example code that they just weren't able to before.

Practical transformation to support staff

Many Hackney projects right now are focusing on building tools for council officers, designed to ultimately give staff a wider view of residents’ lives and more time with the families they support.

Staff facing tools tend to require many patterns that aren't well documented in the GOV.UK design system, and creating them from scratch every time was a big challenge. And so we recently codified and published a collection of components and design patterns specifically intended for staff facing tools, including:

• timelines for showing the progress of a case or resident within a process
• pagination and filtering for navigating dense tables of data
• dialogue  for staff to confirm an action or "peek" at details without losing the context of the page they were looking at

This new batch of components makes the design system a much more attractive offering for teams focusing on staff facing challenges. It acts as a very practical transformation that supports staff as they contribute to making sustainable change in people’s lives.

Improved tooling

Hackney has a growing community of front end developers and a number of contractors. This means the onboarding process for contributing to the design system has to be fast, so new frontend developers feel confident enough to make contributions. Automated tooling can help solve this problem. We replaced a large amount of custom code with popular "convention over configuration" tools like Parcel. Removing all that custom code and replacing it with a ready-made tool makes it much faster for novice developers to get familiar with the design system codebase.

Simple steps like this allowed us to shrink the size of the codebase by nearly half without losing any components or features. Ultimately, encouraging a new way of working through a simple technology solution, building on the momentum from new starters and contributing to a supportive culture that uses tools to support staff.

A new community of practice

The word "system" in design system doesn't just refer to technology. It refers to the people and processes the technology supports. Improving the tooling and documentation helps, but it will still fail unless it’s implemented alongside new conversations between designers and developers.

So with that in mind, we've helped Hackney reboot their design community of practice. The main forum of this community is fortnightly meetups for everyone working on frontends in Hackney, regardless of whether they’re permanent staff, contractors or working for an agency.

Keeping these conversations moving forward is the most consistent way we can ensure the newly revamped design system succeeds. It’s where staff can discuss practical solutions that will impact outcomes for residents while supporting one another and developing the practice in Hackney.

Technology that supports change

Designing this fresh new design system gives staff the tools and resources they need to fully support residents across the borough. They can now continue to make practical changes to residents’ lives, leaning across services and taking into account the complexities of modern social challenges, with systems that work with them, not against them.

Underpinned by this new technology, the council has the capability to secure its place as a platform for change, tapping into its ambition for truly transformational work that operates across services and places.