Creating an MVP design system at Camden Council
Scroll established a set of reusable UI components, alongside up-to-date design standards and guidance for developers, content designers and external suppliers.
The challenge
On paper, Camden already had a front-end library of UI components. In practice, however, it was an undocumented repository, only usable by developers and designers with tacit knowledge from earlier projects.
A series of conversations with designers and developers along with an audit of the UI components revealed that there was no single set of guidelines for content, styles or UI elements.
We noticed a cycle of designers and developers wishing there was a single source of up-to-date documentation, frustrated by the condition of what existed and independently reinventing the same things.
Camden wanted to establish clear documentation alongside a code library that would be accessible for developers and designers at Camden as well as external suppliers.
What they say about working with Scroll
“It was great to work with Scroll to build the MVP of our design system. With Scroll’s content and design system expertise, as well as their collaboration and organisation skills, the project was in very safe hands, and delivered successfully.”
Sally Schafer, Lead Content Designer, Camden Council
The solution
Scroll set up regular weekly meetings with leads from experience design, content and software development to review the documentation and collaborate on the final structure of the design system.
This was an important part of the process, as it allowed the group to agree on how we might design a shared approach or system to meet the needs of users from across the organisation.
Scroll also:
rationalised UI components in Camden’s front-end library (for example, reducing the number of different variants of checkboxes from 37 to 8)
wrote the design documentation which includes usage patterns that sit alongside the relevant HTML and Nunjucks macros used to build the reusable UI components
worked closely with the lead content designer to write accessibility guidelines, content principles and a style guide that brings together different sources of documentation from across the council
The design system we helped create will:
promote consistency across the board, including in UX / UI of products, leading to an improved user experience
improve maintenance of components, by providing documentation and agreed standards
minimise the duplicated effort of designing and developing components for common use cases
decrease the technical debt caused by inconsistencies across the codebase
save time, as teams and individuals will no longer have to duplicate effort to solve the same design problems
provide centralised, up-to-date styles and principles
increase confidence in meeting accessibility standards
Results
Scroll created a design system MVP for Camden. This is a central hub for the base UI components (via Storybook), content guidelines and basic styling elements, like colours, typography and spacing.
We created a set of reusable UI components, alongside up-to-date design standards and guidance for developers, content designers and external suppliers.
We hope the design system will increase efficiency and value to the taxpayer through the use of common design patterns - eliminating duplicative design and development work.
The accessible and user-tested UI components (that can meet a WCAG 2.2 level AA standard) allow Camden to propagate accessible components at scale.