Brief

To create a new, scalable 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 disease

In the long-term, all pages on bhf.org.uk will be migrated to the new template. 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 test for reusable components for business objectives

Personas

Eight personas, representing the main British Heart Foundation audiences were created during earlier Information Architecture work, the personas displayed below are our main focus for this project.

Persona 1: Person with cardiovascular disease

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 so 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 reads stories relating to research success.

Persona 2: Family member of a person with cardiovascular disease

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 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 also has a heart condition too so Russell is beginning to wonder if there's 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 at risk himself, 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.

Research

Card sorting exercise

We invited a panel of people affected by heart and circulatory disease to come to our office and complete an in-person card-sorting exercise. The main aim of the exercise was to determine what type of information they would expect to see on the page, and what order this should be prioritised in. They were also asked what information they would want to know.

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 near the top of the page was favourable, with a link to read more. None of the groups prioritised a strong research message or way to donate to the BHF.

Competitor analysis and layout work

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 is a slightly confusing journey.

1. A 999 message is prioritised on the page — the number is clickable on mobile
2. Symptoms and other sets of information are broken down into clear, digestible bullet points
3. The page links out to further information about specific symptoms
4. An informational video is featured halfway down the page
5. Last reviewed and next review due dates are presented here

1. The dropdown includes 'Symptoms and causes', 'Diagnosis & treatment' and 'Doctors & departments'
2. A hero diagram is prioritised on the page, the user is able to click it for further detail
3. Certain information is highlighted throughout the page using a light blue box
4. Symptoms and other sets of information are broken down into clear, digestible bullet points
5. A link to the subsequent action

Based on the card sort and competitor analysis, I worked with the Healthcare Innovation team to decide what content would be featured on the health conditions pages and in what order.

UI design development

I reviewed all of our existing web components and considered what may need to be built by our developers. The pages were then mocked-up in Sketch and an interactive InVision prototype was shared with our Healthcare Innovation team for early 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 priorities — symptoms, causes, diagnosis and treatment
• The header takes the form of a standard content page — we can reuse existing components to build the rest of the page
• The design showcases information for family and carers in a slightly softer, more personal tone than the other content on the page, so uses a card component to set it apart
• Includes timestamps to ensure accuracy and legitimacy of the information
• Includes links to other services

Draft 2

• The proposed copy for the header component prioritises the ambulance service message
• Includes a HealthUnlocked community panel, so the related links component has been simplified as a result
• 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
• The case study quote has been shortened so 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 so it can quickly explain complex information about the condition
• The related links component will lead the user to more in-depth content

UI for biometric lab testing

A high fidelity prototype for desktop (designed in Axure) was used in biometric user testing sessions run by UX agency Space Between.

We wanted to understand how users respond emotionally to the page. The biometric tests included galvanic skin response (skin sweat sensors), facial emotional analysis, mouse tracking, eye tracking and heart rate.

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.

Mapping key findings

I ran an exercise in mapping the key findings from the user testing sessions. Clear themes emerged (shown below in orange) which included potential improvements to the website's mega-nav, donate component, copy and photography, and highlighted the pros and cons of the competitor's website.

Amendments

The following amendments were based upon feedback from the lab testing sessions and the mapping exercise above -

Heart attack page

• Page copy was split into smaller, more digestible sections and generally reduced
• The video component was moved down the page so more key information could be presented beforehand
• The 999 messaging from the 'What should I do if I think I'm having a heart attack' section was moved to the preceding 'Symptoms of a heart attack' section and the number was made clickable for quick access on mobile

Cardiac rehab page

• Imagery was changed to include some younger people with CVD

Final designs