UX / UI

Close Brothers Savings

Unifying personal and business savings sites under a refreshed brand.

Overview

Close Brothers Savings has been providing dedicated personal savings accounts to UK residents and businesses since 2008. They have an operating profit of £270.5m and total client assets of £13.3bn. In 2018, they were looking to build a new website under a refreshed brand, unifying the personal and business savings sites.

Team

Me – User Experience / Visual Design

Linden Dance – Visual Design

Coherence – Development agency

The challenge

Our goals were to increase conversion rate, attract new customers, entice existing customers to reinvest and to position the business competitively within the marketplace. The design of the website also needed to be flexible to accommodate Treasury’s growing product portfolio, as they looked to introduce Easy Access and ISA savings products in the near future.

Empathise

In order to understand how users interacted with the Close Brothers current website and competitor savings websites we carried out expert evaluations, web analytics reviews and user testing.

Research methods

Define

The key insights from the research included:

Navigation and comparison between products

Web analytics and user testing showed users were “pogo sticking” (switching back and forth between the product landing and detail pages). This indicated that users were unable to distinguish between the products on the landing page and viewing products not relevant to them.

Users pogo sticking between products

Further investigation through user research and remote testing showed that customers were trying to compare the different rates and features of the various products. This information was only accessible from the individual product pages.

Product landing and detail pages

We also saw that a lot of customers were entering the website directly into product pages from comparison websites or promotional links. This told us that we needed to ensure the other products were visible to customers to allow navigation between them easily.

Landing page statistics

Discoverability of key product information

Through user testing and competitor research we found that many users, on both the Close Brothers site and competitors, found it difficult to find key pieces of information about a product. This was mainly because this information was either hidden within long worded paragraphs or hidden behind accordions. This meant users blindly scrolled up and down the page trying to find information.

Long and obscured journey to self help and support

Customers coming to the site for help or information were being presented with a landing page containing a series of different topics. These child pages then consisted of further navigation in the form of dropdowns to find answers. This and obscured journey and gave a strong prominence to phone support rather than allowing them to self help / resolve.

User journey to find help

Promote featured products

Through internal stakeholder interviews we also identified that the business needed a way to promote the competitive rates that they offered as new customers landed on the site. This had to be scalable as new terms and product types were added.

Set a benchmark

We used our remote usability testing tool, TrymyUI, to conduct short user tests on the as-is site to gain further understanding of user pain points but also to provide a benchmark for testing our designs.

Remote user testing results of old site

The current site received a SUS score of 70.75, which is perceived as above average. Even though it is encouraging that users did not believe the site to be very poor there were some areas which did not perform well:

  • Time taken for users to find crucial information about the product such as the minimum and maximum deposit values;
  • Confusion around how a customer can contact Close Brothers to set up an account as a result of poor signposting of next steps.

“the site is nearly the same as expected as other banking sites.”

Our aim was to exceed users’ expectations to differentiate ourselves from competitors.

Restructure of site IA

We aimed to provide a flatter site structure within the products area for an easier browsing experience whilst merging the personal and business sites.

New sitemap

Wireframes

We broke the design up into five journeys

  1. Find and apply for a product
  2. Find a document
  3. Get help (self serve)
  4. Get help (customer services)
  5. Find an old interest rate

We then began to design out the user flows and wireframes for each journey, slowly building up detail as the designs were signed off by the business.

Wireframes of apply for product journey

Solutions

Featured products

To better promote the competitive rates Close Brothers offered, we added a featured rates components to the homepage. These would be controlled by the marketing teams to ensure the best rates were always shown as well as allowing them to add products in the future. The component also provided an accelerated route for customers looking to go direct to products.

Improved comparison of products

To help users compare the different product rates, terms and key information we restructured the site architecture for products so that the different product types were surfaced and displayed as tabs on the products page. The available terms were then listed under the relevant product type tabs. This allowed customers to see and compare the different rates for a product and quickly navigate between different types.

We then introduced a dynamic interest calculator which displayed how much a user would earn for the different rates and terms by allowing them to enter an initial deposit. This also allowed us to highlight the minimum and maximum deposits early in the customer journey to prevent user dissatisfaction.

We also looked at how we could aid the decision for customers by introducing an “Is this right for you?” comparison section. This aimed to humanise the product information and summarise into key benefits and limitations, allowing them to make a more informed decision.

Improved discoverability of key information and call to actions

On the individual product pages, we added a sticky on page navigation component which displayed the product terms in a question format which allowed users to quickly find key information.

One main issue on the old site was that users were required to scroll to the bottom of the page to find the apply now button, which resulted in high drop offs due to lack of visibility. We therefore moved the apply buttons to the header.

However, we continued to see that users who scrolled through the content then struggled to find the buttons in the header. To solve this issue, we created a transition that allowed the apply now buttons to stick to the top of the page and follow the user down the page.

FAQ buckets

One of the biggest issues of the old site was the structure of help and support and FAQs. We wanted to create a single help and support page which could accommodate the vast range of questions but also allowed users to find relevant help fast. A bucket pattern was selected which displayed the various topics and the top three questions in each topic in one view. Once a user selected a question they were presented with related question form that topic.

Accessible on all screen sizes

The site was designed to work across all screen sizes, with accessibility at the forefront.  

Results

Analytics reports taken showed both the number of visitors and conversation rates had doubled. We also saw that customers were finding relevant products and information resulting in a drop in calls to the customer service centre.