NHS Blood and Transplant
Client
National Health Service Blood and Transplant (NHSBT), 2020
Brief
Provide a new data capture, tech and design solution for a seamless end to end blood donor registration pathway, providing bespoke journeys for different priority blood groups, to be educated and informed as they register to become donors.
Challenge
With an unforeseen surge in users registering to help the NHS by donating blood during the Covid 19 outbreak, the increase in activity was causing performance issues on NHS back-end systems. This resulted in poor user experience, increased drop rates and in some cases crashing the system altogether, a system that also enabled operation theatres across the NHS to order the blood types they needed for surgeries. The NHS also struggled to harvest enough of the rare and in demand blood groups required to meet demand, and needed a way to ensure donors with these blood types could be prioritised for donation.
Solution
A microsite hosting a new user donation sign up journey that captures additional user data such as gender, ethnicity and blood type, creating a highly personalised journey away from the NHS back end system to gently push those with rare blood types to appointment booking, whilst educating and managing the expectations of those with less urgently needed blood types.
Duration
Six weeks total (Three weeks for design)
My Role
Lead UX Designer - My responsibilities included research analysis | User flows | Facilitation of design meetings with internal design teams | Wire flows | Wireframes | Content management | Design iterations | CRO and AB testing recommendations
Tools
Zoom | Mural | Miro | Lucid Chart | Paper sketching | Sketch | Slack | Trello Kanban board | Google Drive | Invision
Methodologies Used
Daily standups | NHS research documentation | Stakeholder meetings | User flows | Low fidelity sketches | Wireframes and sketches | Clickable prototypes
Team
Claire Donohue (Lead UX), Simon Kinslow and Eden Allen (UI) and Gareth Alexander (Tech)
NHS Give Blood
New Blood Donor Registration Live Site
Journey through the donor registration process
The Project: How can we Help the NHS Harvest Urgently Needed Rare Blood Types?
In the midst of the Covid 19 outbreak in early 2020, Cohaesus were approached by the NHS Blood and Transfusion team to help create a way for new donors registering on the NHS give blood site to be funnelled into four main priority group categories. This was to ensure that those with rarer and in demand blood types would be prioritised and given an appointment slot to make a donation, and those with less in demand blood groups to be kept warm until such a time that their blood type be required by the NHS.
The Client: NHS Blood and Transplant (NHSBT)
NHS Blood Donation Team
NHSBT was formed in 2005 when the ‘National Blood Service’ and ‘UK Transplant’ were merged. The NHSBT (National Health Service Blood and Transplant) now provides a lifesaving service to the NHS 365 days a year, with dedicated staff working day and night to process, test and distribute donated blood and organs. This includes managing the donations themselves, storage and transplantation of blood, organs, tissues, bone marrow and stem cells, and researching new treatments and processes.
Where blood donations are concerned, every year around 135,000 new donors are needed to ensure the right mix of blood groups are available to meet patient needs and each day around 5,000 donations are required to meet the needs of patients across England. Which is why there is always a need for blood.
The Kick Off Meeting: Discussing Existing Research, Assumptions and Desired Outcomes With the NHSBT Team
Following an internal briefing call between the Cohaesus design and tech teams and using the collaborative tool Mural. We highlighted any assumptions, items to query with the client and discussed the brief itself. The project then kicked off with a call between the NHSBT marketing teams and Cohaesus design and tech teams, where we were educated on how the blood donation process was currently being handled, and also discussed the findings of the internal research carried out by NHSBT in the previous year. Some of the key takeaways from the meeting were as follows:
Key Takeaway One: Misalignment of User Expectation and Donation Process
Because the NHS pride themselves on carefully balancing supply and demand to ensure not a drop is wasted due to its limited shelf life, a newly registered donor (following a blood typing test, where a donor will have their blood type confirmed, but no blood taken) might not be called upon for a few months until their blood type is actually needed by the NHS. The existing blood donation process was running an average of around three months from the point of donor online registration to an actual donation being made. Research conducted by NHSBT research teams had uncovered a number of inconsistencies in the mental model of new donors signing up to donate blood and the length of the existing process. This long timeline to donate was leaving users disappointed, and in some cases losing the user’s interest along the way resulting in the NHS never receiving the blood donation when it was called upon.
Key Takeaway Two: Surge of New Donor Registrations Crashing Existing System
The current system was being overloaded from the recent surge in new donors. From a technical standpoint, the registration process was housed on the same NHS back end system that enabled operating theatres to place orders for urgent blood deliveries, and that when unforeseen surges in donor registrations occurred, this had the potential to crash that system. In order to avoid this, the NHS had been temporarily closing the new donor registration process to users, turning new donors away and therefore missing potential opportunities to collect rare blood type donations.
Key Takeaway Three: Blood Types Were Broken Down Into Four Main Priority Groups
We also learned that the eight different blood types are often broken down internally by the NHS into four different prioritisation categories depending on demand at the time. Category one being the most in demand and rare of blood type donors down to a category four where a particular blood type might not be in urgent demand but useful to be kept on standby until required. An example of this would be donors with blood types such as O negative which are of extreme value to the NHS. Type O negative being the only universal blood type that can be used on patients of any blood group which made it the blood type carried by air ambulance paramedics to treat patients when they first arrive on the scene of an incident.
The Four Categories of Donor
Category 1 - Target blood type (target demographic and blood type urgently needed by the NHS)
Category 2 - Target demographic (unknown or no target blood type)
Category 3 - Non target demographic, unknown blood type
Category 4 - Non target demographic, known blood type (non-target blood type)
The demographics of the donor also had an effect on the priority of the blood type. For example, blood from a male donor was more successful at treating patients suffering from severe burns or patients with cancer than that of a female donor. Blood from donors of black or mixed black heritage could treat those with sickle cell disorders.
The Existing Journey
It was clear that the current process was heavily geared towards extracting eligibility criteria from the user to find out if the user was eligible to donate blood at all, blocking anyone with a history of cancer, blood transfusions, inappropriate age or weight. The user would then be prompted to open an account and could then attempt to find an appointment on the NHSBT site. This existing journey resulted in every new donor’s experience being treated the same past this point, regardless of how much of a priority blood type they might have behind the scenes.
The current two step registration process.
Step one (Left): Eligibility questions
Step two (Right): Account registration request
Our Approach: A Microsite, Maximising Personalisation Opportunities Through Additional Data Capture, and Realigning User Expectation and Donation Process With Personalised Content
After the client kick off meeting, the team walked through the current registration process using the online team collaboration tool ‘Mural’ and began to look at ways to improve the experience for both the user and NHSBT. Partnering the information we had read and absorbed from two years worth of NHSBT research documentation and the additional information provided by the NHSBT teams during the kick off meeting, we would create a solution based on the following:
Keep in mind that the user expectations on how blood donations were taken versus their actual experience were strongly misaligned; we would need to find a way to manage expectations through key messaging across the journey for any new registrants registering to give blood
Unlike the existing journey, we would design a way to collect additional demographic data such as gender, blood type and race to help funnel users into four key user journeys, and display appropriate messaging for a category one (high demand/ rare type) versus a category 4 (low demand) blood donor
To alleviate the burden on the NHS’ back end system, discussions with our tech team would lead us to explore the creation of a separate microsite, accessible via the NHS Blood and Transplant home page, which would sit this outside of the NHS legacy system, store patient information and feed this back into the back end as and when appropriate
Mural board screen grab from the Cohaesus team internal briefing call
User Flows: Exploring new Data Collection Methods and Personalisation Based on Donor Blood Type
In order to start proceedings and armed with the necessary information to extract from potential donors from NHSBT, the Cohaesus design team set out to create three user flow options to present to the client. These flows would need to take into consideration ways in which to collect profiling data from new donors. At a minimum this would include, demographic information (gender, ethnicity etc) and with NHSBT research suggesting that 46% of the UK population already know their own blood type we would also include a blood type question in our form.
We could then use this profiling data to personalise the donor journey for the different levels of priority, which could in turn offer opportunities to free up more appointments to higher priority donors and personalise messaging and manage expectations for those whose blood types were not as urgently needed, offering alternative options for those seeking ways to help the NHS.
The three user flows presented to the client
User Flow One: One Form Data Capture With Personalised ‘Thank you’ Page
The first of the flows collected all information in one form, allowing for personalised messaging and imagery across the resulting thank you page.
Pros
Allows user a clear view of all questions required
Allows early identification of high priority target groups in the process
Content can be personalised and expectations managed in the thank you page
Cons and trade offs
Longer form could see early user drop-off due to the perceived usability of the form
Requires all questions to be filled before submission, wasting the time of those unable to donate due to a negative entry to any of the eligibility questions
User Flow Two: Front Loaded Qualifying Questions to Avoid Displaying Full Form to Those not Qualifying for Donation
The second user flow would see those same questions split across two pages and meant that the first set of eligibility questions would let noneligible participants know earlier in the process if they were unable to donate without the need for them to needlessly fill out an entire form.
This flow would also prioritise in-demand blood types; displaying personalised content and imagery to excite those in priority ethnic groups and in-demand blood types. It would allow fast tracking of those users to a larger variety of booking slots. Whilst those not falling into in-demand groups could have their expectations managed with relevant content and personalised messaging.
Pros
Shorter questionnaires (Five questions) displayed to qualify the user in step one
Step-by-step process lessens the load on user
Eligibility confirmation for pre-registrants identified earlier in the process
Cons and trade offs
High priority donors (based on ethnicity, age group) only identified at the end of registration
Content cannot be personalised until the ‘thank you’ page
User Flow Three: Three Step Form to Implement Deeper Levels of Personalisation and Manage User Expectations Across the Journey as Additional Data is Entered by the User
The third user flow which proved to be the most well received design, presented the form questions across three easily digestible steps, which would create more opportunities to display personalised messaging across the journey depending on previous selections made and tell the user a story as they clicked through the remaining questions.
Pros
Step-by-step grouped questions could feel less daunting to complete
Flow can identify users who do not fit donation requirements after each question and avoid wasting the users time unnecessarily
More opportunities to personalise journey with bespoke messaging
Cons and trade offs
Additional development costs of adding logic into the form
Early Design Sketches: Using Best Practice Form Design and Sketches for Quick Feedback Loops
Once the client had been presented all three user flow designs, and had selected flow three due to its ability to offer more opportunities to personalise the journey earlier in the registration process, I began using the NHSBT design systems and patterns to build out pages from the chosen user flow design and create some early paper designs.
Form Questions to Educate and Empower: Designing Content to Funnel Eligible Donors Through Personalised Pathways
Early designs were based on the three step form design from user flow three. Step one would identify if the user was able to donate at all, funnelling those who could and couldn’t into separate journeys. Eligible donors would be displayed step two, where unsuccessful users would skip these steps and be brought to a page outlining other ways to help the NHS, managing any disappointment brought on as a result of not being able to donate. Step two would collect vital blood profiling data such as blood type (if known) ethnicity and gender, with step three collecting the basic contact details needed to plan the next steps with that user.
Step One Questions
1. Date of birth*
2. Do you weigh less than 50kg? (7Stone 12lbs)*
3. Have you received blood or blood product transfusion since 1st January 1980?*
4. Have you received donated eggs or embryos since 1st January 1980?*
5. Have you ever had a cancer other than basal cell carcinoma or cervical carcinoma insitu (CIN)?*
Step Two Questions
1. Ethnical group*
2. Your gender at birth? *
3. Please select blood type (if known)?
4. If known, how do you know your blood type?*
Step Three Questions
1. Your full name*
2. Email address*
3. Your post code*
Low Fidelity Wireframes: Clickable Prototypes for Internal Testing and Feedback
Low fidelity wireframes were created to display content and give a feel for the flow. These screens were placed in a click through Invision prototype which was sent to the client for comment. Once the content was refined, the designs were cleaned up and matched with the NHSBT style guidelines and branding.
First draft of low fidelity wireframes
NHSBT Brand and Style Guides
Mid Fidelity Wireframes: Tightening up the Design to NHSBT Brand Guidelines and Design Libraries
As the designs and amendments started to take shape, we began to clean up the designs to keep within the NHSBT style and brand guidelines.
Donor registration wireframes in mid fidelity
Design Iterations: Implemented Changes From Feedback Cycles
Because of the short design timeframe of three weeks, we were unable to test the designs with users. Iterations to the designs and content came from internal discussions and testing with the NHSBT teams and suggestions from the Cohaesus design team which were based on previous experience in form design, content design and human behaviour studies.
As the wireframes began to take shape and the click through prototype was viewed across the many desks within the NHSBT marketing and design teams, iterations and suggestions were implemented across the journey. User feedback would be made retrospectively using on site surveys such as Hotjar at a later stage and we would ensure that the content on the site be kept highly editable for the NHSBT teams to make changes internally as and when needed. A few of the evolving changes are listed below:
Iteration Example One
Adding External Charity Links on Rejection Pages to Offer Additional Support to Vulnerable Users
When exploring ways to support users rejected from becoming blood donors, several iterations were made to soften up the messaging and to also show the appreciation of the NHS for those coming forward. In absence of user research to support changes, we guided some of our decisions with user scenarios, such as the one below:
Sarah’s best friend was fatally stabbed three months ago. She’s been absolutely devastated by it. After going through the grief process, she wants to do something that might help someone else live, where her friend didn’t. After a lot of thought, she decides to give blood, even though she hates the sight of blood and can’t stand needles. She works up the courage to apply. Nervously, she reads about the process on the NHS website, fills in the application and then gets rejected. She feels useless and powerless, and now all of the emotions of the past three months come flooding back to her. She’s alone and desperate.
Based on the user scenario above, the final rejection pages would offer alternate ways to support the NHS for those wishing to help, additional support links for some of the more vulnerable users, such as a link to ‘YoungMinds’ the UK's leading charity for children and young people's mental health on the rejection page where a user is rejected based on being under the age of 17 as seen in the wireframes below.
One: Original design showing a generic rejection page
Two: A further iteration of the rejection pages personalised by reason, suggesting other ways to help the NHS
Three: The final wireframe design showcasing additional ways to help the NHS, and keeping the user engaged by telling the user that they will be able to donate soon when they come of age, we also added a support link to a leading children’s mental health charity and images to give life to the page and show some of the NHSBT teams in their environment
Four: Final design in colour
Iteration Example Two
Tailored Content for Those Falling Into Multiple Priority Groups to Further Engage Users and Increase Form Completion Rate
When exploring ways in which personalised content could keep users engaged and therefore more likely to complete the process. I wanted to ensure that the displayed content became more and more tailored and relevant to the user as they completed the steps, especially in the case of the third step where the user would be asked for their contact details.
During that process, it became apparent that when a user had made selections that might put them into more than one priority category, for example being of black heritage and also male, the content for each of these selections should merge to form one flowing paragraph rather than two pieces of content for each selection. In order to simplify this, I created a content matrix to cover all possible combinations of users to ensure that messaging did not sound wooden but natural and conversational. This would also later serve as a guide for the tech team to refer to during the build stages, as it provided a detailed guide of the different types of form logic to be implemented and what content should be displayed to those users.
Left: Screen shot of full content matrix
Right: Zoomed in section of content matrix showing combinations of priority groups and their tailored messaging
An example below shows the early content displayed to an O negative, male donor of black heritage, and the final tailored messaging following several iterations:
Original early content
Your NHS needs people like you.
Male blood is particularly effective at treating victims of burns, car crashes and treating patients with cancer.
As the only blood type that can be used on on patients of any blood type, air ambulance and emergency response vehicle crews rely on O negative donations to give life saving treatment to patients at the scene.
The NHS needs more black donors to provide life-saving treatment to sickle cell patients.
Final design with tailored content
Your NHS needs people like you.
O negative blood can be used on patients of any blood type. Air ambulance and emergency response vehicle crews rely on O negative supplies to treat their patients at the scene. The NHS also needs more black donors to provide life-saving treatment to sickle cell patients. Male donors are also able to donate more frequently and have higher iron levels.
The image below is an example of the evolution from the first to final design for an O negative, male of black heritage all of which are high priority selections from the previous step in the form.
One: Early designs showing three separate pieces of content to match selections made on the previous step
Two: Final design combining the content into one flowing piece of content and bespoke imagery
Iteration Example Three
Introduction of Bespoke Rejection Pages with Softened Content, and Guidance for Rejected Users Seeking Alternative Ways to Help the NHS
First draft of wireframes showing generic rejection message
In early designs, all users who were not eligible to donate based on their selections on step one were taken to the same generic rejection page, in later iterations these were personalised by reason for non eligibility, managing any disappointment, thanking them for coming forward and providing them with other ways to help the NHS.
Further iterations would change the design to consider all six personalised reasons why someone might not be able to donate to manage expectations and in the case of an underage user, keep them engaged so that they will come back when they are 17.
From top left: Bespoke messaging for users who are underage, over age, have received blood transfusions, have previous history of cancer, have received donated embryos or are under or over weight.
Iteration Example: Four
Keeping User Focused on Completing Form, by Bringing External Help Information Back onto the Page and Streamlining Content With Expandable Display
Due to some of the more sensitive and personal questions across the form involving gender, ethnicity and the user’s general health, we felt it was important to keep the users informed as to why NHSBT needed this information.
In the existing forms on the NHS site, the form contained highlighted help text which when clicked took the user away from the form altogether to a separate area of the site containing a detailed and lengthy explanation. This method risked losing the user’s interest and possibly leading them to abandon the process altogether. After all, we couldn’t rule out the possibility that a user might click on this out of curiosity rather than them not being an eligible donor. We decided to implement help text that would open a pop up window within the page and keep the user focused on completing the form.
The blue help text displayed on the page itself also underwent a couple of transformations. In order to help those users requiring the use of screen readers, the phrase ‘why do we ask this?’ when taken out of context would be very unclear. So in later designs these were replaced with more specific help text such as ‘why we ask about your age’ and ‘why we ask about your weight’
Original help text
Screen reader friendly help text
These pop ups underwent a number of iterations before we felt satisfied with both their content and functionality. The first designs saw lengthy explanations brought directly from those external pages which required scroll bars in order to view the entire text, which would not meet the required accessibility standards needed. After refining the content within the pop ups, further iterations of the design would see this scroll bar dropped in favour of an expandable window which would offer the user both a quick summary of why the information was required and through the use of a ‘find out more’ link also expand to display a further in depth explanation.
One: Early designs showing lengthy explanation for exclusion based on weight
Two: First iteration showing refined explanation and a downloadable blood volume chart within the pop up
Three: First of the expandable pop ups, offering both a brief and longer explanation for those wanting more detail without having to leave the form
Four: The final design showing both condensed and expanded versions of help text
Final design of help text and expandable text pop up windows
Below are three images of step one and the pop up window versions for the weight question when the help text is clicked.
Left: Step one of form with blue help text displayed next to related questions in form
Middle: Condensed summary help pop up for weight question with blue ‘find out more’ link displayed to expand the content
Right: Pop up expanded with full explanation and downloadable blood volume chart visible
Creating a Design Across Different Devices
Due to the high number of different device types used when accessing the site, Simon and Eden from our design team created mobile and tablet designs based on my desktop wireframes to ensure that all device types were covered in the designs.
Final designs across laptop, tablet and mobile
The Final Award Winning Design: A New Donor Registration Microsite Showcasing Personalised Journeys, Curated Imagery and bespoke Content for a Donor Registration Journey as Individual as the Donor Themself
The final designs proved extremely successful for the NHS, with the designs winning a coveted ‘Tech for Good’ partner award from Acquia. The new design allowed easy identification of all four categories of donor. Funnelling high priority donors through to select available appointment slots on the NHSBT main site and managing the expectations of those whose blood types are not in high demand through messaging that they are part of an important donor community which can be called upon when needed. Those unable to donate through a selection made in the first step were offered alternate ways to help the NHS, making the most of the population’s good intentions during the Covid 19 outbreak and beyond.
Early results show that the new registration page is helping things run more smoothly; with initial numbers showing the form receiving an average of 25,000 daily visitors whilst providing an improved user experience.
Final Desktop Designs
Final Mobile Designs
Next Steps
As with every short design stint to create an MVP, there are certain features I would have loved to have added to our design if we had additional time and budget available. These ideas are a few of the additional steps presented to NHSBT team as possible out of scope pieces of work to improve the journey even further.
Data transference across forms - Currently there are repeat questions when the user goes directly to the NHSBT site from our registration form when they are a high priority user. Eventually we would want to implement a way in which this information from our microsite is transferred across, removing the need for any duplicate data input from the user. Data should pass across from external microsite form to the main site for creating an account and booking an appointment.
Postcode data usage - Currently in step three the user is asked to enter their postcode, currently this information is being used internally for research and pin pointing areas where high numbers of high priority donors, but this information is not used for any type of personalisation across the site. Putting this information to better use could point donors to their nearest donation centres.