A new design system at Brighton & Hove City Council

bhcc-patternlibrary

Hi, I’m David Hampton, the User Experience Designer at Digital First. You can call me ‘Design Dave’, as the team do for short.

I joined the team about a year ago. My brief was to build on and improve the online identity of Brighton & Hove City Council, with a focus on designing and documenting standards for re-usable design. We call these ‘web patterns’.

Our overall goal is to provide Brighton & Hove residents with a consistent, friendly and familiar website, whether they need to find and read about a service, report a problem, or browse news.

What we’ve achieved in 2018

Over the past year I’ve been working closely with Product Managers, Content Designers and web developers at Digital First, re-designing and launching website sections.

Improving website accessibility has played a key part. We’re making sure our new design and code is in compliance with accessibility guidelines. This will help improve usability for residents who may access the website in non traditional ways, for example using screen readers.

If you’re a Brighton & Hove resident you may have noticed some of these new designs coming into effect, with some highlights in 2018 being:

How we’ll stick to our own guidelines

I’m excited to share our Website Design Guidelines and Pattern Library. Here you can find references to all new designs and patterns created since January 2018.

At first the pattern library was used internally to communicate new design standards and patterns amongst the team. Today we’re opening it to everyone. We hope this will be a useful resource across departments and teams for referencing new design, and offering solutions to reoccurring design challenges. It may even be useful for other councils and public sector organisations – we’ve built on the experience of others and are delighted to contribute for the greater good.

Our plan is to continually improve the library through ongoing testing and research with actual users. We’ll be including version releases so we can track design progression.

bhcc-pattern-example
Above: An example website pattern with usage notes.

Over the coming weeks I will be blogging in more detail about some of the new designs and pattern library features. If you have any questions, please post below or get in touch.