PUBLICATIONS AND SEARCH 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 redesign a new and improved end to end publications journey on the British Heart Foundation website including:
a basket in the header
search filtering functionality and search results
publications pages
adding/editing/removing items to a basket
adding/editing/removing donation to a basket
maximum quantity messaging
low stock levels messaging
proceeding to checkout.
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: Healthcare professional
NAME: Ana
AGE: 28
JOB: Cardiac nurse
LOCATION: london
BHF familiarity: HIGH
“I always want to help, but there’s so little time. I need support.”
SITUATION
Ana works long hours as a nurse in a busy hospital. She recently specialised in cardiac nursing as she enjoys having the opportunity to discuss ongoing healthcare with her patients, for example diet and lifestyle changes. Her work involves assisting with emergency treatments, as well as running routine clinics with outpatients.
Ana’s number one problem at work is a lack of time. There is always something else she could ask about or discuss with a patient, but there are simply too many other people to see. It takes time to understand each person’s situation and gauge how informed they (or their family) are, but this is a luxury she usually doesn’t have. Ana finds herself discussing the ‘headline’ issues, then trying to equip patients with enough information to help themselves afterwards. Online and offline material from the BHF are vital for this.
Top tasKS
A patient has reported a side effect which is quite rare, but Ana remembers there is an information page about it on the BHF website. She suggests they search for the side effect plus ‘BHF’ online when they get home, as this will give them all the information they need to manage it.
A number of patients have begun asking about a controversial new treatment that has been reported in the press. Ana searches on her mobile for a position statement on it from the BHF, so that she can give her patients a consistent, informed answer.
Persona 2: 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 3: 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.
User goals
The main goals of our users are:
to clearly navigate to relevant publications
to be presented with similar publications that may be useful to them
to easily download publications and order physical copies through basket functionality
to be informed when publications are low in stock or out of stock
to be informed of the maximum order quantity and to be able to order more if required
to easily access the basket when navigating the entire website.
The top three pain points
What we know about the current designs from previous user and business feedback and observing struggle in SessionCam:
A Disappearing basket
Currently the basket only appears in the publications area of the website which leads to a disjointed journey if this area is left temporarily.
UNCLEAR Maximum order quantities
To get around maximum order quantities, users are cheating the system by placing multiple orders. This is a frustrating process for healthcare professionals who regularly order large quantities of publications. Processing multiple orders for the same user is also expensive for the business due to transportation costs and additional administrative processing.
LACK OF INFORMATION SURROUNDING STOCK LEVELS
Currently stock level information is not shown and users are confusingly placing orders on stock that isn’t available. The business then receives calls regarding the status of deliveries which take time that could be better spent elsewhere.
Website template migration
Additionally, the existing journeys surrounding search and publications have been built in the website's legacy template and need to be migrated to the new template to align with our updated digital guidelines.
The IMPACT on mobilE EXPERIENCES
The legacy template was primarily designed for desktop and this dictated the experience on mobile. Consequently, the layout currently appears muddled on mobile devices:
Elements are too closely arranged and font sizes have not been optimised
Text fields and button sizes are not adhering to usability standards
In some cases, images are stretching to the full width of mobile screens, taking up unnecessary screen depth
‘Similar publications’ and publication search results have no supporting images on mobile
Competitor analysis
I used Miro to collate and review various competitors’ basket journeys, focusing on adding items to basket, stock level messaging and notification functionality. These included Zalando, Farfetch, H&M and Vinterior:
When items are out of stock, there is a clear ‘Notify Me’ button alongside an envelope (email) icon
When stock levels are low, the remaining quantity is shown in red
The user is asked to input their email address to receive an email notification
A confirmation message appears. This uses the word ‘hopefully’ in case the item is taken off the website
There is a clear call to action to continue shopping
The user receives a confirmation email
The email cross-sells other items that may be of interest to the user
The user receives an email when the item is back in stock
The email promotes other items that may be of interest to them
When stock levels are low, the remaining quantity is shown in gold
Sizes are only listed when in stock. The ‘Size missing?’ link appears when sizes are unavailable
The user is asked to input their email address to receive an email notification. Farfetch takes the opportunity to promote their email mailing list
The user receives an email when the item is back in stock. They also promote their email mailing list again
When items are out of stock, there is a clear ‘Notify me’ button alongside an envelope (email) icon. H&M don’t state when items are low in stock
Users are required to sign in or create an account to set up an email notification
H&M promote their membership
The email address associated with account is referenced
There is a clear call to action to continue shopping
The basket icon in the header is grey when empty
When the basket is empty, a 'Continue shopping' CTA is displayed
Vinterior use this space to highlight key offerings including secure payments, return guarantee and support
A 'Successfully added to basket' modal appears every time the user adds an item to their basket
The modal features key information including the product name, price, delivery information, service fee and total price
The user is then able to close this modal, view their basket or check out directly
The basket icon in the header is red once items have been added (however the number of items are not stated)
The 'Go to checkout' CTA is prioritised on the basket page
Product information is displayed on the left, whilst pricing information is shown on the right
An urgency message in blue
A 'Remove' link is listed below the item information – there is no confirmation modal when clicked, but this may be useful here
Sketching
I then sketched out key user journeys, noting any areas that required further investigation. The sketches were then used to inform a working prototype created using Sketch and InVision.
Guerrilla testing
I carried out ten minute guerrilla testing sessions with ten colleagues from across the business using an InVision prototype.
Publications prototype
The prototype covers:
Search results page (Publications)
Basket in header
Publications page
Adding items to basket
Removing item from basket
Adding donation to basket
Maximum quantity modal
Low stock levels modal
Proceeding to checkout
Publications test scenarios
Test 1: Basket
Show me how you would add the ‘Angina and living life to the full’ (regular print size) booklet to the basket and review this booklet in the basket
From this (basket) page, how would you add the ‘Cardiac rehabilitation’ booklet to your basket?
How would you then go about deleting this booklet from the basket?
How would you add a £25 donation to the order?
Explain to me how you would then complete your order
TEST 2: Stock levels
Explain to me how you would know if the publication was low in stock
If you want to order more of this item than is available, what would you do?
If you tried to add 10 items to the basket, what would you expect to see next?
Test 3: Maximum order
What is the maximum number of copies you can order for this publication?
How would you order a higher number of copies?
If you tried to add 210 items to the basket, what would you expect to see next?
Test 4: Basket in header
You have added one item to the basket and decide to do some research into heart attacks mid-way through processing your order. Show me how you would return to the basket
Click to see the prototype
Generally they found the process easy to use but I noted down feedback and any indication of struggle.
“Deborah provided a really simple and clear testing format for which I was asked to navigate to various areas on the website. The test format and questions were self-explanatory.” — Jat Bains, test participant
Affinity mapping
I mapped the key findings from the guerrilla testing sessions and clear themes emerged (shown below in orange). Feedback included emphasising the maximum order information, giving ‘Back to search results’ more prominence, and referencing the number of publications left in stock on the ‘Notify me’ modal for clarity. I then revised the prototype designs in accordance with the feedback that was given.
Interview and usability testing with a healthcare professional
Interview structure
The interview was made up of three parts:
A twenty minute run-through of how the healthcare professional normally orders BHF publications, highlighting any frustrations involved
A ten minute usability testing session using the publications prototype (see ‘Publications test scenarios’ above)
A ten minute usability testing session using the redesigned search pages (see ‘Search test scenarios’ below). These pages will function as the primary route to searching for publications
Search test scenarios
Test 1: PublicationS landing page
If you were searching for a publication about heart attacks, what would you do?
If you were looking for publications aimed at parents, what would you do?
If you were after a popular publication about smoking, where on this page would you look?
How would you stay up to date with the BHF’s latest publications?
Test 2: Search functionality
How many search results are listed for Health in total?
Say you have entered Health in the search bar but you are looking for health-related publications specifically – before you click, explain to me how would you look at results for publications only?
What do you expect to see when you click publications?
You are specifically looking for health-related publications aimed at children and young people. Show me how you would see listings for this audience
...And how you would filter these further for publications aimed at 6-11 years old
You are now specifically looking for health-related publications aimed at teachers and school staff. Show me how you would see listings for this audience
Click to see the prototype
Part 1: Bio, behaviours and frustrations
Bio
NAME: YVONNE
LOCATION: LONDON
HOSPITAL: ST GEORGE’S
DEPARTMENT: CORONARY CARE UNIT (CCU)
Responsible for: ordering publications for the ccu and other wards
“We give patients physical copies of the publications because we don’t think they will download them. We’re trying to make sure they don’t come back again”.
Behaviours
Information packs
Yvonne assembles her own information packs for adult heart patients. These include five publications created by the BHF which she orders online in bulk, plus a three-page A4 advice sheet that she prints herself (see photo below). The advice sheet features an introduction to the supplied BHF booklets and includes a link to our publications landing page.
Could the BHF pre-package the booklets into branded information packs, making our brand more visible to customers and saving healthcare professionals time and effort?
Physical copies are favoured
Nurses take 15-20 minutes to read through the booklets with their patients to make sure they understand the information they’ve been provided with. The nurses favour physical copies of publications because:
they can easily run through the content with patients before they leave the hospital
they are easy for patients to refer back to
they don’t believe that patients will download copies once they’ve left the hospital
many patients are elderly and are not competent in using the internet. They may therefore struggle with downloading copies.
Interruptions
Yvonne sits in a busy office and so during the interview, was interrupted by phone calls and questions from other staff members. Because her time and attention are constantly divided between important tasks, our processes need to be as seamless as possible to avoid frustration.
Storage
Yvonne orders 100 copies of each publication when she places an order – which she does regularly. She does not order more than this due to limited storage and because the boxes become heavy to lift.
Donations
Yvonne has never added a donation to an order but was conscious that it must be expensive to print and deliver publications. She said she feels guilty that she doesn’t include a donation but that the hospital didn’t have a budget for this.
New and discontinued publications
Yvonne only discovers newly released publications by chance. Sometimes she processes an order but then finds that a printed publication has been discontinued. She would like to be told when new publications become available and to be able to stay up-to-date when printed publications are discontinued.
Ordering through the ‘my account’ area
Yvonne starts the process of ordering publications by logging into the ‘my account’ area on the BHF website. She orders this way because it saves contact and delivery details. She mostly makes repeat orders.
Frustrations
She finds the current process frustrating as there is a lot of back and forth between the ‘my account’ area and the basket
She doesn’t need to see all the (intro copy) information when re-ordering publications — “I know what I want and I just want to order it”
The ‘my account’ area lists every order Yvonne has ever made – a very long (and unhelpful) list with repeating publications. It would benefit her to be able to re-order more simply, or save publications to favourites
Part 2: Publications tests
Test 1: Basket
Yvonne liked that ‘large print’ was clear within the publication title – she sometimes gets confused between regular print and large print options when browsing publications
She liked being offered similar publications at the bottom of the page
She found this task easy to complete
TEST 2: Stock levels
She easily spotted the ‘low in stock’ link
Test 3: Maximum order
‘Maximum order quantity’ within the ‘Further information’ section went unnoticed. She said she would type in the amount she wanted in the quantity field and wouldn’t order more than 100 copies due to storage limitations
Test 4: Basket in headeR
It took her some time to find the basket in the header as she expected to find it in the far right corner, “like other sites”
Part 3: Search page tests
Test 1: PublicationS landing page
She instantly clicked the ‘Search publications’ button before scrolling
After scrolling, she found the ‘Parents’ link easily and said links listed by category were useful on this page
Test 2: Search functionality
She discovered how many ‘Health’ listings there were quickly
She found the filtering system easy to navigate – she didn’t have any trouble using the radio buttons and check boxes
Recommendations
Based on feedback, the proposed designs for a ‘My account’ publications area specifically aimed at Healthcare professionals includes the following features:
Recently ordered publications that appear once – the current ‘My account’ area lists a publication as many times as it has been ordered which is not a helpful experience and the page becomes very long
An ‘Add to basket’ button for every recently ordered publication – the default quantity will be the amount ordered in the previous order. Users will have the option to update the quantity in the basket
A link to order history
Stock levels information
Maximum order quantity information
The ‘Order history’ area includes the following features:
Total order quantity
Delivery address – healthcare professionals may order on behalf of different departments so address may vary
A list of the publications ordered
A ‘Repeat order’ button
UI designs
Click to see the prototype
