NHS website

Print function project

Design and creation of new element for an NHS website

The context

Executive summary

A request was made by stakeholders to create a 'print this page' CTA for use on long information pages of the children's hospital

With a ticket already raised for the developer to deliver within the sprint, my task was to support with my UX skills to design and create an new icon.

Discovery Process - Interview

Before beginning, I needed to understand why and how does the proposed solution of an extra button benefit the primary user, what specifications did the stakeholder have for the button, and why.

I conducted an 40 minute meeting with the stakeholder.

Discovery

As-is scenarios

Jenny: secondary user of website

Jenny works as a nurse at a children's hospital and she is rushed off her feet. Today she was tasked with updating the website content about severe combined immunodeficiency. Jenny does not have time to go through editing old content and she is not a tech-savvy person who is comfortable with the CMS. She creates a word doc instead, and puts that up as a PDF.

Geetha: primary user of website

Geetha's son, David, has severe combined immunodeficiency. Geetha is visually impaired and uses a screen reader. She has an appointment coming up with David's doctor and wants to read up on David's condition. She goes on to the hospital website and when she does, the information is in a PDF. She used the 'find' keyword command on her keyboard to target specific information, but it did not work on the PDF. She prints the document to take to the appointment, as planned, but has not yet been able to read the content herself.

User stories

Patients: primary user

As a visually impaired patient/parent of a patient, I need to use the search toolbar to navigate to information regarding my child’s medical condition and be able to use my screen reader to read it as well as print the information off, so that I can make the most of my hospital appointment.

Researchers and lab staff - primary users

As a researcher, I need to use the 'control & find' function on my keyboard to index information about the hospital research and print it off to study it on the commute to work

Staff (printing info for patients) - secondary users

As a member of staff at the hospital, I need to print information about a child’s medical condition to give to the parents on diagnosis.

CTA requirements

The CTA must:

be at the top / not too much scrolling on long pages of information
not take up too much space on an already long pages
be easy to find, without confusing information hierarchy
be in keeping with the style of the webpage (size, colour palette)
be accessible (colour contrast)
have silent, hover and clicked states
have easy specifications for the developer to action within the 2 week sprint

First mock-ups

Desktop

The stakeholder requesting the CTA requested the button to fit on the left hand side, underneath the side bar. I mocked up what this would look like, and whilst offering alternatives outlining the pros and cons for the user.

I was careful not to over-engineer the button, as the CTA was required to fit in to the understated style of the NHS website without confusing the information hierarchy.

In my mock-ups I note the specifications for the developer.

I presented the mock-ups with my recommended option first, outlining the rationale, before providing alternative placements and colours, for visibility of options.

Recommendation

I presented the mock-ups with my recommended option first, outlining the rationale, before providing the alternatives.

Iteration: Mock-ups

Additional requirement

Key stakeholders had been discussing on which pages the new print button would feature. It was requested that the CTA not affect the layout of the page if the sidebar was not used.

My recommended option was agreed upon by the stakeholder and developer.

The CTA must:

allow editors to use print button without using the side bar

Mobile Mock-ups

The original recommended option was a perfect square, the UI of which were not favoured by stakeholders. They agreed on my following option of a square with rounded edges

Creating bespoke icon

Once colour schemes, specifications, placements and functionalities were agreed, I created an SVG in Figma, for the developer to use on the website.