Disciplines: UX Design + UI Design + Analysis Data
Before a site re-skin, we had a development slot to work on a redesigned footer. It was an opportunity to soft-launch the new style guide and get feedback while optimising it for what our customers needed to see, remove redundant options, and make this future-proof for growth plans.
Why does this need to change?
The footer is a current red flag in accessibility. Customers struggled to see the links in the original footer against the dark background image which ironically goes against our green ethos and sustainability position. There are endless options where items have been added and never removed. There were many duplicate links which were getting little or no click-throughs adding to the customer’s hesitation on where they should click to find the information they need.
This has to be redesigned to address accessibility issues as well as optimise the content to the areas the customer needs and show only what is legally required.
Hypothesis
Having a cleaner and simpler footer will allow the customer to speed up the decision making on site and find where they need to continue their intended reason for visiting.
Research
Competitor Analysis
12 month Click-Through Rate
It was clear by the customer’s engagement click-throughs what they were interested in. It highlighted the options where we have kept adding items such as Tax Strategy and Section 172 Statement because there is no overall arching title to contain these subjects. We also duplicate links such as Competition Terms and Conditions and Terms and Conditions which led the customer to the same page. All of this adds noise to options and makes it harder for the customer to scan the options that they want.
Groupings
Style Guide Testing
I have been developing a new style guide which addresses accessibility issues and gives the FatFace website a unique and memorable branding experience. We did a simple test to see how these colours would resonate with the customer using the existing layout. I changed the email sign-up text to be a little more chatty and friendly.
The test ran for 3 months and we saw a +4.8% increase in email sign-up, and with new text, this increased to +10%. There was also a +13% increase in social interactions than the existing layout.
We tested a darker background version against the existing footer—as some of our competitors used this (White Stuff and John Lewis)—and the lighter colour background performed +2.65% better in interactions.
New Requirements
From looking at the competitor designs, it became apparent that we need to separate the email sign-up section. It’s better to give this its own space than being squished into a small area. We have plans where we want to allow the customer to select their sign-up preference—so we need to design this to be future-proof—allowing us to update this without changing the rest of the design.
Work with a design which has light background colours as this has proven to perform better.
Move the hierarchy of the social icons, it’s got significant engagement, but I feel in its current position it’s an obstacle the customer needs to go through to get to more delivery/returns information the customer is predominately after.
Initial Design
This was the proposed design. Condensed the number of columns to 3, moved corporate information under a new page and section called ‘Corporate Responsibility’.
We had been receiving excellent reviews on Trust Pilot—a feature that was added to the overall customer journey 9 months prior. I added this in an initial design option as it got a resounding response in design reviews. This was a little delicate situation—as the use of Trust Pilot scores are normally found on start-up business and we’re a 35-year-old business—but a 4.7 score is pretty impressive!
‘Pay Your Way’ divided our review
The consensus was that we were promoting these payment brands and we’ve passed the hesitation of shopping online especially due to the Covid pandemic. This led me to do a deep dive back into the research where I found a 50/50 split on payment brands showing in the footer. As part of customer purchase satisfaction survey, I added the following questions:
Does it reassure you to see payment logos on the website footer?
Radio Button Response—Yes: 49%, No: 51%.
Where do you feel its necessary to see the payment logos?
Radio Button Response—Product Page: 23%, Shopping Bag: 36%, Checkout: 41%.
Summary
After reviewing our position and future design plans, I removed the payment logos from our global site footer. Instead I ensured these were placed in key decision moments in the customer funnel—adding them to the shopping bag page and within the new secure footer during checkout:
Final Design
Analysis of the redesign saw an improvement in email sign-ups of +5.7% and an increase in social media interactions of +7%. There was no increase in customers reaching out for payment options we accepted. Customer Services saw no increase in contacts for other areas we had removed.
Final Design Decoded
New Email Sign-Up
The email sign-up has been given its own dedicated space in the new footer.
This will allow us to easily add new features and functions going forward without having to squeeze them into a small space—such as interest/gender selection and reCapture human verification.
Gives better hierarchy and prominence for email sign-ups—we have some ambitious targets to meet.
The blue background can be changed seasonally if needed to compliment on-site campaigns such as Christmas.
[Fast Forward to 2023]
In 2023 we added the preference options in the email sign-up form. Once the customer clicks into the text field it would expand to show the preferences and the compliance messages we’re legally obliged to show.
New Titles and Links
New category headings of ‘Let us help you’, ‘Shopping with us’ and ‘More from FatFace’.
These new headings allow us to direct the customer to the different aspects of their journey, with the aim of helping them troubleshoot much more easily.
A softer and chatty tone of voice has resonated with the FatFace customer.
We’ve removed repetitive links and bundled some links which were getting little or no clicks into a ‘Corporate Responsibility’ bringing us in line with industry competitors.
Trust Pilot
We’ve got a great Trust Pilot rating and we’re proud to show this!
Everyone’s hard work across the company has resulted in a 4.6 rating and we want to showcase this to the customer.
Our aim here is to help convince first-time shoppers that we’re a trusted brand with reputable products and services.
UI Changes
I’ve introduced new UI arrows that will be rolled out to other areas. They are much more directional and point the customer to the appropriate area.
On mobile, we’re using a left alignment to help with readability and discoverability.
Using more title case type makes it easier softer and calmer to read than all caps.
Where I’d love to take this concept
Incorporate a visual ‘catch-all’ to continue the customer journey.
If the customer has got to the bottom of the page without clicking on anything, our hope is the customer would click on one of the links rather than abandoning their journey.
The links would be customisable depending on which page you’re on.
© MMXXIV PARCA
