Immediate Media is the special interest content and platform company. They own and operate some of the best-loved brands in the UK. Their heritage as a leading magazine media company means they focus on creating high quality, valuable content and services for their customers and Buysubscriptions.com is at the heart of their subscription service.
Working with other designers, we completed a UX Review of the Buy Subscriptions checkout process. We delivered annotated wireframes for consideration that served to maintain conversion KPIs while decreasing negative customer feedback.
The suggested changes are based on UX and UI expertise as well as feedback from SessionCam – an optimisation tool that ran a review for the subscriptions team. Our aim is to create a clear and frictionless journey, and in doing so we can expect to improve brand perception while maintaining and supporting an increase in conversion.
How might we improve the checkout experience for subscribers?
Part 1: Test & Refine | Outcome: a feasible solution that has been tested with user
Run kick-off session with the dev team to check the technical feasibility of solutions, establish feasibility early to ensure fewer delays later in the project. Ensure all the requirements from stakeholders are covered. Such as: 3 types of checkout journeys, multi-currency, payment type, parameters & features.
Moderated user testing with 6 people with the test journey in the basic form (wireframes). Analyse test results to ensure we are meeting the aim of a clear and frictionless journey and literate solution based on tech and user feedback.
Part 2: Design & deliver | Outcome: a final design that is ready for development
Design to consider interface, interactions, transitions, patterns and accessibility. Create fully specified designs and work with the developers to deliver them.
Checkout Journey User Flow
Identify user struggles & insights:
We worked with Sessioncam to identify user struggles to highlight insights that will improve user experience. Sessioncam provide a general understanding on areas of visitor struggle, current UX issues, page errors and technical issues which all ultimately contribute to visitors leaving the site. The analysis also shows that the conversion rate is 36.17% and mobile users are taking the lead.
1. Basket page: During the analysed period, 965 visitors entered the basket page, 41.6% of visitors exit the funnel on the basket page. The desktop Mouse Hover heatmap shows that visitors on the basket page look through the item(s) and focus on the main body of the page. There is high heat on the text area of the page. The Click heatmap highlights that the most clicked elements on this page are the quantity, remove item and bottom CTA.
The mobile Scroll heatmap highlights that 90% of visitors reach the bottom CTA, but the majority of visitors did not need to scroll the page to proceed further. The Click heatmap shows us that visitors interacted with the remove item, quantity, and cookie message the most. There are also a few clicks on the text area of the page. 99% of visitors that exit funnel on basket page, do so without interacting with any elements on the page. The Basket page is often accessed multiple times during a session which affects the drop-off rate within the funnel. 16.68% of visitors exit the funnel and some exit the full site due to their basket being empty.
From the analysis we noticed that the technical errors are causing users to drop out from the basket page. Users might be confused about why it shows 0 when they have added a magazine to their basket. They do not amend the number, as they are not sure if it will order one or two magazines.
(To save users from confusion, we suggest to provide error messages on the page itself and improve the colour ratio of the error message and make sure that the Quantity shows the number of the magazine(s) they have.)
2.Checkout-login page: During the analysed period, 575 visitors entered the login page. 13.04% of visitors exit the funnel on this page. 48% of visitors exit the funnel on the Checkout-login page after interacting with the email input field. Click heatmap highlights that the Email input area has more interaction than the Password or main CTA. This shows that the Email input field has had more re-entries. In link analytics, the email input area on desktop devices, has a 77.95% click rate and on mobile devices it has 72.03%.
On the checkout page, 6.84% of visitors received the error ‘Login failed, please check you entered a valid username and password.’Visitors are seen to look through the error in the box and underneath the input field. After a couple of unsuccessful login attempts, visitors either leave the site or click onto the ‘No’ option to proceed without logging in. This behaviour highlights that visitors do not see the ‘Forgotten Password’ option.
We noticed that a number of visitors who reach the login page, scroll the page in full and even try to scroll below the footer. This behavior suggests that visitors might be expecting more on this page. They might be looking for an option to proceed as a guest or looking for the password field.
(In the wirframe, we suggest to make the ‘Forgotten Password’ more prominent and after the 2nd incorrect attempt add ‘Forgotten Password’ link into the error message and give one more options for login.)
3. Checkout-delivery address: During the analysed period, 469 visitors entered the deliver address page. 11.7% of visitors exit the funnel on this page. There are 18.2% of visitors who exit funnel on this page, do so after interacting with the ‘Select When Subscription Starts’ drop-down.
On desktop: visitors were seen to change their country whilst inputting their address. We noticed that the Order Summary did not change the currency to the country that was chosen. Visitors might have expected to see their currency at this stage if there was an option to change the country. On mobile devices: visitors were seen to fill out the form but after selecting when the subscription starts they went through the whole form one more time and left the site. Visitors most likely were expecting to see the Order Summary before proceeding further with the funnel.
(In the wirframe, we suggest to Show the Total Price in the correct currency when visitors change their country and provide the Order Summary on mobile not just on desktop.)
A: Visitors are seen to fill out the address field and scroll down the page, but mainly focus on the Delivery Details area. Afterward, these visitors leave the site and the funnel. B: We also noticed that this is the first time visitors are provided with information that the discounted price is only valid for the first 6 issues and afterward the price goes to normal. Visitors most likely were not fully aware of this due to the information not being so prominent on the product page. C: Visitors are also seen to struggle with the Address Search input field when they insert only a postcode or small part of the address. After inserting limited text, not all visitors get the address drop-down but they get the country drop-down. These visitors are based in the UK and should be able to proceed with the address search. D: On mobile devices, a number of visitors zoom in on the page, to be able to fill out the form and read all of the information. This suggests the fields and text are too small.
( We suggest to give more information about offers on the product page, to be more transparent with customers or on the delivery page provide some information if visitors can stop their subscription at any time. We are also going to provide the country option separate from the Address Search and ensure the input fields is at least 32px height.)
4. Checkout-pay by direct debit / card: 45.8% of visitors who exit funnel on the direct debit page, do so without interacting with any fields on this page. E: Visitors are seen to scroll very slowly through this page, with the main focus on the product subscription description. They also scroll the page a couple of times in full, which highlights that they are looking for something more. This behavior suggests that visitors might be looking for a final confirmation of when the direct debit will be taken out and how much it will be. F: 23.01% of visitors received the error regarding the unsuccessful payment and checking of the billing address. After the error appeared and visitors got to the Delivery step, all the information that visitors has inserted beforehand, has been removed and they have to re-enter all the information from the start. This will add to user frustration, as they already have filled out all the information earlier on and expect it to be saved.
( We suggest to provide information on when the direct debit will be taken out of their account and provide a clear Total price for the first direct debit, that will be taken from their account. Also, we will ensure when visitors go back to the previous step, the information they have inserted is saved.)
Workshop & Sketches
Typography & colours:
We continually use the current Buysubscriptions.com brand visual and introduce a new blue colour as a secondary colour for highlight purpose.
Product page improvement:
G: The way our eyes read a web page is like a Z pattern. Not every time a cover image gives a clear information about a product; in the new design, we make the product title lead the page instead of the cover image to help the user instantly know what they are subscribing. I: The purchase CTA is overloaded on the current site, we should be cautious how many CTA we are using to avoid page being too shouty. H: To make the offer more transparent with the subscribers, we bring the hidden information to the top level so subscribers could instantly know what they are purchasing.
Subscription offers card design:
In testing 1: All users are confused about offer pricing. They are not sure if the offer is £1 for 6 issues or £1 per issue. In testing section 2: We highlight the offer title; the users are still confused by the pricing. Most of them are not aware the offer is an introductory offer. Some users want to know more information about this offer and how to cancel it. In testing section 3: We change the wording slightly; users are getting the offer title and think the bullet points provide clear information about the offer, but some are not aware this offer is a direct debit only offer and some think explaining too much about how to cancel a product is a trap. In testing section 4: We add direct debit to be part of the offer title and create a hyperlink for subscribers to click on if they want to know how to cancel this product. In the last testing section, all users are happy with the way we change the offer card, they think it is clear and make them feel secure and trustful to go further.
J: We make error messages more prominent, disable Buy Now CTA if user has not yet selected an offer.K: We fix the error, when a user selects an offer, the default quantity number is 1 instead of 0. L&M: We introduce checkout steps and add check out as guest as an option for those who is not keen on creating an account N: Give subscriber option to review their order summary before checkout and default the order summary tap as closed. O: In our testing section, we default the tap as open and it confused our user. P: When a user completes a step, the number in the circle will become a tick, it creates a statistician feeling to encourage users to go further.
Click here for Prototype to experience Buysubscriptions checkout journey