Making health publications more accessible for heart patients and healthcare professionals.

British heart foundation
Product & Graphic designer
Mar 2016 – Oct 2020

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

Persona 2: Person with cardiovascular disease

Persona 3: Family member of a person with cardiovascular disease

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 do not adhere 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 and H&M.

Zalando

1. When items are out of stock, there is a clear ‘Notify Me’ button alongside an envelope (email) icon

2. When stock levels are low, the remaining quantity is shown in red

3. The user is asked to input their email address to receive an email notification

4. A confirmation message appears. This uses the word ‘hopefully’ in case the item is taken off the website

5. There is a clear call to action to continue shopping

6. The user receives a confirmation email

7. The email cross-sells other items that may be of interest to the user

Farfetch

1. When stock levels are low, the remaining quantity is shown in gold

2. Sizes are only listed when in stock. The ‘Size missing?’ link appears when sizes are unavailable

3. The user is asked to input their email address to receive an email notification. Farfetch takes the opportunity to promote their email mailing list

4. The user receives an email when the item is back in stock. They also promote their email mailing list again

H&M

1. 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

2. Users are required to sign in or create an account to set up an email notification

3. H&M promote their membership

4. The email address associated with account is referenced

Sketching

I then sketched out key user journeys, noting any areas that required further investigation. The sketches were 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

1. 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

2. From this (basket) page, how would you add the ‘Cardiac rehabilitation’ booklet to your basket?

3. How would you then go about deleting this booklet from the basket?

4. How would you add a £25 donation to the order?

5. Explain to me how you would then complete your order

TEST 2: Stock levels

1. Explain to me how you would know if the publication was low in stock

2. If you want to order more of this item than is available, what would you do?

3. If you tried to add 10 items to the basket, what would you expect to see next?

Test 3: Maximum order

1. What is the maximum number of copies you can order for this publication?

2. How would you order a higher number of copies?

3. If you tried to add 210 items to the basket, what would you expect to see next?

Test 4: Basket in header

1. 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

Generally they found the process easy to use but I noted down feedback and any indication of struggle.

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:

1. A twenty minute run-through of how the healthcare professional normally orders BHF publications, highlighting any frustrations involved

2. A ten minute usability testing session using the publications prototype (see ‘Publications test scenarios’ above)

3. 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

1. If you were searching for a publication about heart attacks, what would you do?

2. If you were looking for publications aimed at parents, what would you do?

3. If you were after a popular publication about smoking, where on this page would you look?

4. How would you stay up to date with the BHF’s latest publications?

Test 2: Search functionality

1. How many search results are listed for Health in total?

2. 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?

3. What do you expect to see when you click publications?

4. You are specifically looking for health-related publications aimed at children and young people. Show me how you would see listings for this audience

5. ...And how you would filter these further for publications aimed at 6-11 years old

6. 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

Part 1: Bio, behaviours and frustrations

Bio

“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