CONDITIONS PAGES UX/UI
Background
The British Heart Foundation fund over £100 million of research each year into all heart and circulatory diseases and the things that cause them.
The brief
To create a new, variable website template for the health conditions pages on the British Heart Foundation website that:
helps users understand a condition and know where to find more information
empowers users to adopt healthy behaviours with a view to improving outcomes
promotes ways in which the BHF can help people with heart and circulatory diseases.
In the long-term, all pages on the BHF website will be migrated to the new templates. Conditions pages have been identified as content that should be migrated early because:
the pages are popular with users
this content is strategically important to the BHF
the pages need to be updated to reflect digital best practice
they are a possible trial for reusable components (a business objective).
Personas
Eight personas, representing the main British Heart Foundation audiences were created in collaboration with Sift Digital. The personas displayed below are our main focus for this project.
Persona 1: Person with cardiovascular disease
NAME: TONY
AGE: 64
JOB: RETIRED
LOCATION: CHELMSFORD
BHF familiarity: medium/high
“I know the British Heart Foundation are there for people like me, but I’m not sure of everything they do.”
SITUATION
Tony was hospitalised early last year with a racing heartbeat and faintness. He was diagnosed with an abnormal heart rhythm and had a catheter ablation. He now takes medication and feels that his situation is largely under control.
He was discharged after the operation and was told that if he had any questions or issues he should see his GP. He’s been to see her once, when he had side-effects from his medication shortly after he started taking it.
Tony’s condition came as a surprise to him as he’d never considered himself to be at risk. His job required him to be physically active and he’d never smoked. After his diagnosis he suddenly had to learn a lot about cardiovascular disease and lifestyle changes and turned to the internet. He also received BHF leaflets at hospital and is very aware of the organisation, but he does not know that much about what it does.
Top tasKS
At home after his diagnosis, Tony searches ‘arrhythmia’ online from his laptop. He visits a number of sites including the NHS, BHF, Wikipedia and WebMD, trying to learn as much about the condition as he can.
Tony looks up his medication on the BHF website and prints out a page on side effects so that he can remember to discuss it with his GP tomorrow.
Tony wants to know what else he can do to help his prognosis. He visits the BHF website and finds a page that explains what types of exercise people like him should do, and also sees stories relating to research successes.
Persona 2: Family member of a person with cardiovascular disease
NAME: RUSSELL
AGE: 47
JOB: surveyor
LOCATION: Coventry
BHF familiarity: medium
“I need help for my dad now, but I’m also worried about my children and me.”
SITUATION
Russell’s dad had a heart attack a couple of months ago. He’s recovering now, but he’s been told it’s a chronic health issue and Russell will need to help him monitor it and seek medical help when required. It also gave the family a big scare.
When his dad was in hospital Russell was given various leaflets from the BHF, among other organisations. The consultant also told Russell that the BHF would be able to help his dad with ongoing health advice and that he should look at their website.
Russell’s uncle has a heart condition too so Russell is beginning to wonder if there is a family link, and what this means for him and his children. He wonders whether there is anything he should be doing now to help him and his family avoid getting heart conditions in future.
Top tasKS
Russell wants to help his dad eat more healthily. He searches ‘healthy eating heart condition’ online and finds a section on the BHF website with information about diet and recipe ideas.
Although he feels selfish, Russell worries his dad’s condition is genetic. While on the BHF website for his dad he finds the page about the condition and reads a section on risk factors. Russell wonders if this condition will still be an issue when his children are older. He searches online for information about what research is being done and comes across an article on the BHF website about a new research project.
Competitor analysis
The Heart attack overview page begins with a list of the topics that will be covered. They appear as hyperlinks but actually direct the user to dedicated (similar-looking) pages which makes for a slightly confusing journey
A 999 message is prioritised on the page – the number is clickable on mobile
Symptoms, complications and prevention information are broken down into clear, digestible bullet points
The page links through to further information about specific symptoms
An informational video is featured at the end of the page
Last reviewed and next review due dates are presented here
The dropdown includes ‘Symptoms and causes’, Diagnosis & treatment’ and ‘Doctors & departments’
A heart diagram is prioritised on the page – the user is able to click the image for further detail
Supporting information including ‘Products and Services’ is highlighted throughout the page using a light blue box
Symptoms, risk factors and other sets of information are broken down into clear, digestible bullet points
A link to the subsequent section
Card sorting
A patient panel of people affected by heart and circulatory diseases participated in user research sessions. Card sorts were used to determine what type of information they would expect to see on the page, and what from this should be prioritised. They were also asked what information they would want to know next.
Feedback was remarkably consistent. Nearly all the groups put a short summary of the condition at the top, and symptoms, causes, tests and treatments all came next in slightly different orders. Information for family and carers was considered important – this could be written in a slightly softer, more personal tone. A short quote or case study nearer the bottom of the page was favourable, with a link to read more. None of the groups prioritised a strong research message or ways to donate to the BHF.
Component review
Based on the above findings, I made decisions as to what content would be featured on the health conditions pages, and in what order. I reviewed all existing/available web components, and considered some that may need to be built by our Developers.
UI design development
The pages were then mocked up in Sketch and an interactive InVision template was sent to the Healthcare Innovation (HI) team to collate feedback. Three rounds of designs were created in response to feedback from the business.
Draft 1
The order of the content is based on the research findings and prioritises symptoms, causes, diagnosis and treatment
It takes the form of a standard content page – we can reuse existing components to build the structure of the page
The design showcases information for family and carers – this is written in a slightly softer, more personal tone than the other content on the page so uses a grey component to stand it apart
It includes time stamps to ensure accuracy and legitimacy of the information
It includes links to other services
Draft 2
The proposed copy for the header component prioritises the ambulance service message
It includes a Health Unlocked community panel – the related links component has been redesigned accordingly
The copy now includes helpline opening hours to avoid out of hours calls
The heart attack booklet component has been prioritised over the case study feature
The case study quote has been shortened as users are able to read more about the case study on a separate page if they wish to
Draft 3
The copy has been finalised and approved by the Medical team
A video component now sits at the top of the page as it can get quickly explain complex information about the condition
The related links component will lead the user to more in depth content. I sent the team a list of every link on the page so they could indicate which ones they would like to include
UI for biometric lab testing
A high-fidelity prototype for desktop (designed in Axure) was used in biometric usability testing sessions run by UX agency Space Between, where I carried out note-taking and the mapping of key findings. The biometric tests included galvanic skin response (skin swear receptors), facial emotional analysis, mouse tracking, eye tracking and heart rate monitoring.
We tested the prototype and the surrounding user journey, alongside a competitor’s website, with six people directly or indirectly affected by heart and circulatory diseases.
Affinity mapping
I facilitated an exercise in mapping the key findings from the testing sessions. Clear themes emerged (shown below in orange) which included potential improvements for the website’s meganav, donate component, copy and photography, and highlighted the pros and cons of the competitor’s website.
Recommendations
The following recommendations were based upon feedback from the lab testing sessions and the mapping exercise above.
Heart Attack page
HI team to split copy into smaller, more digestible sections and cut down the amount of copy
HI to decide on whether to break up conditions page into separate, more detailed sub-pages
HI and UX/UI to discuss and decide on whether to use anchor points at the top of the page
UX/UI to move the video further down the page to give users a better indication that they can scroll
UX/UI to move up the 999 messaging from the ‘What should I do if I think I’m having a heart attack?’ section to the ‘Symptoms of a heart attack’ section and make the number active so the user can call it straight from their device
Cardiac rehab pagE
Imagery could include younger people with CVD
