Loading...

Camden UX Standards are the foundation for all experiences of Camden’s digital presence. The document defines the look & feel and the behaviour of all core UI elements and patterns. They are being used in conjunction with the Camden component library.

Project Details

Project Story

I joined the UX team at Camden council as part of the Customer Access Program (C.A.P.), a three-year initiative with the aim to improve the way Camden residents access and use the council’s digital services. My role was to improve existing online applications and to design new ones. Existing applications were designed and built in isolation over time. They lacked consistency in design, interaction patterns, and behaviour. For example, the same button looked different from page to page in a single journey. People struggled to understand and use the applications successfully.

Brief

Although there was no initial brief, I realised very quickly that a style guide with design standards was urgently needed in order to improve the overall experience and to help the team to work quicker. Upon my initiative, I was eventually commissioned to define these standards, compile them in a single document and to support design teams to apply them consistently in their sprints.

I formulated aims and objectives for the UX Standards as follows:

  1. Define and design re-usable and fully responsive UI components to be used as standardised patterns
  2. Consolidate and simplify according to best usability practice
  3. Meet AAA accessibility standards
  4. Introduce a coherent visual language
  5. All patterns should be based on functional requirements of existing pages, workflows and components

Actions

I took action by going through the following steps:

  1. I audited all published UX components and patterns in a catalogue. I identified the core elements in components, looked at their variants, and described where and how they were being used.
  2. In order to define minimum standards for browsers, devices, and user groups, I analysed how Camden Council users access the website. With Google Analytics I could see the variety of browsers being used, some of them were very old. From existing data from the business it became apparent that designs also had to work for less computer-savvy users.
  3. I reviewed a number of Web style guides to see what is best practice for both content and structure. The gov.uk and the recently redesigned tfl.gov.uk style guides were key examples for best practice and gave me orientation and inspiration.
  4. I defined all UI elements with accessibility in mind. After having tested several of our existing applications with accessibility tools like Wave, Site Improve, and colour contrast checkers, I was able to identify issues and amend the patterns to make them accessible.
  5. I designed all elements and patterns thinking mobile-first in order to work for all viewports from mobile to desktop.

Here is an example of the buttons.




On existing (desktop) applications the primary button was placed on the right and ‘Cancel’ on the left. A user filling out the form would see the Cancel button first and then look out for the continue button floating to the right. The scaled down version on a mobile screen would show Cancel as the first option and Continue as the second. In order to increase form completion times, I suggested to change the order and to place the primary button on top of the secondary button. On desktop, the primary button is now placed on the left, followed immediately by the secondary button.

My work included regular discussions with UX designers, developers, and the business. When we agreed on solutions that I had sketched out, I produced more accurate wireframes in Axure and designed them in illustrator.

Various sketches below




Eventually, I compiled everything in a single PDF document and made it available in Sharepoint for everyone to use. Whenever there was a need for new patterns or improvements, I updated the document and released a new version. At a later stage, the elements and patterns as defined in the UX standards were built as HTML/JavaScript building blocks into a pattern library. All elements were thoroughly tested for usability and accessibility before they were released to developers to help them build pages.

Results

Today, Camden UX Standards are the agreed style guide for Camden Council Web sites. The document is being used as a reference for both the UX team and developers. Both the UX Standards and the Pattern Library are publicly available and can be downloaded from gitlab.
Camden UX Standards have immediately contributed to a vast improvement in usability, accessibility, consistency and overall experience of the site.

In 2015, Camden scooped the Digital Engagement of the Year award at SOCITM, and took the Digital City Award at the Municipal Journal Awards.

Download UX standards

About Me

I am Creative

Being creative is about finding the right solution for a problem. I am a curious man, can’t help that, and I love challenges. That’s why I did a Phd after all. I love UX as it challenges my brain all the time. That's my secret: UX keeps me fresh!

I am Friendly

A good cup of tea and a friendly smile is a great way to start a project! OK add a few cookies in the mix. Great solutions come from good discussions and good connections and what better way to do this with a smilie face. Let’s do it!

Successful projects,happy clients and great results