Leeds Clinical Commissioning Group

How we built a new website with a clear focus on accessibility for the merger of the three existing Leeds Clinical Commissioning Groups (CCG) to become NHS Leeds CCG.

A new website to meet user needs

We have worked with NHS Leeds North CCG, NHS Leeds West CCG and NHS Leeds South and East CCG for the past 5 years and were thrilled to be able to work with them on this new project as they were preparing to merge and become NHS Leeds CCG. We were asked to design and build a new website, migrate content from each of the three existing sites and be ready for launch within eight weeks. At the same time, we were challenged with evolving the design and improving the user experience through a user-centered design process.

Defining success

We defined a shared understanding of the primary goals and success factors through a series of stakeholder workshops and facilitated a research phase that enabled us to capture and document user needs, requirements and problem statements. Ideas were generated quickly using concept sketches and we collaboratively defined the design vision together.

Information first approach

We took an information first approach to development which meant that, to a large degree, the content dictated the creative direction. Additionally, we updated the branding in line with the recently amended NHS brand guidelines and followed Government Digital Service Design Principles.

Accessibility for all

One of the main goals was to focus on accessibility. Developing a website that caters to users who may have visual and hearing impairments or users with limited mobility requires experience with interaction design.

One of the many challenges that we faced was providing descriptive text for icons used on the website. Users without visual impairment can quickly discern the meaning of a button that has a picture of a magnifying glass on it but for a visually impaired user, their screen-reader software will usually only tell them there is a ‘button’ with no further information. At worst it will skip over it entirely as there is no text to read.

Most developers know about ‘image alt tags’ which are used to describe an image to someone who may not be able to see it but in the context of icons, it isn’t always possible to use ‘alt tags’ so we took further steps to ensure all our users have an equally simple experience.

A common example of this being used with NHS Leeds CCG is with mobile navigation menus. We have become accustomed to the ‘hamburger’ menu for showing and hiding mobile navigation for many years, however, the hamburger menu doesn’t provide any description or instructions other than what is implied by the design pattern, making it difficult to use if you cannot see it. By using our ‘screen-reader-text’ class we are able to describe to visually impaired users that this is a button that, when clicked, will hide/show the webpage navigation.

It’s important to remember that there is a legal requirement to make websites accessible to all so it’s vitally important that accessibility is a core skill taught from the beginning. This is why we will be dedicating lecture time at next year’s Work In The Web workshops to educate students on the importance of accessibility.

Meeting a challenging deadline

We had just eight weeks to complete the website to ensure that the launch coincided with the public launch of the merger. It was challenging but we ensured that the project planning was meticulous and introduced paired work programming to improve our efficiency. Our agile approach, an iterative work process and working in sprints ensured that we didn’t drift from expectations and we could adjust quickly if any problems were to arise.

Tools and systems

We use a tool called Lighthouse by Google which analyses websites based on various important factors such as performance and accessibility. Lighthouse dictates that, when writing code, it is of the utmost importance that it is clean, lightweight and optimised. We utilised the tool as a way of indicating that what we developed was performing to the highest standards. Once we’d completed our development, tests showed that the scores for Accessibility and Search Engine Optimisation (SEO) were exceptional (100%).

We chose WordPress for the Content Management System (CMS). It is simple to use and our clients were already familiar with it as the previous websites were built on the same platform. It is the favoured CMS within the healthcare industry. In fact, WordPress holds 59.9% of the CMS market and powers 31% of all websites on the web.

The Accessibility and SEO score on the live website

The launch of the website

For NHS Leeds CCG we successfully launched the website in time for the public announcement of the merger. Working together, we have created a website which not only delivers on its design but has high regard for users and their experience and it has benefited the user in more ways than one. By making the design more streamlined, we made it easier to navigate around the website, enabling users to find the information efficiently. The improvements, with the specific focus on the accessibility, means that users with visual and mobility impairments can also benefit from a great experience.