Tesco Bank Loans was a university project where Tesco Bank set a brief of improving the user experience of their 'loan journey', the process via which people apply for loans on their website.

When —

  • January 2014 – March 2014

Contributors —

  • Stephen Macvean, Interaction Designer


Tesco Bank Loans was a project designed in response to a brief given by Tesco Bank which tasked me with improving the user experience of the ‘loan journey’ through their website, with an emphasis on mobile users of their website. The brief given was fairly open and allowed me to explore myself as a designer and consolidate key skills in visual and information design as a way of improving the user experience of the loan journey.


The Challenge

With the brief having an emphasis on the mobile users of the Tesco Bank website, the main challenge was to create an experience for mobile users that would prove equal to viewing the website on a desktop browser and to encourage users to complete their loan journey through the untapped market of mobile users. One of the major constraints on the project was to retain much of the same content from the current site in order to show how a stronger interface and information design could improve the user overall experience for mobile users.

I reviewed the current Tesco Bank website where I identified and analysed various aspects that could be addressed through my project. Below are a few of the key issues with the website explained:

  • Jumbled Responsiveness: Not all of current the website has been built responsively, with several key pages jumping into a traditional desktop view when viewed on a mobile.
  • Bland/Uninviting Design: The overall design is fairly bland and uninviting for users, with numerical facts and poor stock imagery being two of the main culprits.
  • Navigation: On mobile sized displays the navigation is poorly thought out and takes up a large portion of the screen, forcing important content further down the page.

The Approach

In order to give mobile users of the Tesco Bank as enjoyable an experience as possible, I took the mobile-first approach to the project. Keeping the website’s existing content, I wireframed alternative layouts to the current website with an emphasis on an uncomplicated design of the information, making the website as easy as possible to navigate and with strong communication with the user.

Several new interactions were added in my design to improve the UX of the Tesco Bank website, including the following:

  • Off-Canvas Menu: An off-canvas menu was introduced to free up screen real estate at the top of the page, allowing the introduction of contextual imagery.
  • Progress Bar: On the current design the user is given little to no feedback as they progress through the multi-page loan application. Now as the user makes their way through the loan application they can track their progress through a progress bar and return to a previous stage if they feel they have entered any data incorrectly by clicking on the appropriate part of the bar.
  • Loans Calculator: The loans calculator has been re-designed to give added interactivity using sliders to calculate loans.
  • Accordion Style Content Revealers: Content revealers are used to restrict the amount of necessary scrolling required of a user before they reach their desired content.

The Outcome

The new interface designed in response to the brief has a very clean, contemporary and inviting feel to it for users. I have adopted the flat UI design principle, although a sense of depth has been retained through layering elements and subtle transparency changes on elements such as the menu, application progress bar and loan range tabs.

Users of the new design are welcomed to the site by a much improved user experience design that allows the user to know where they are, through subtle communication, and find what they need much easier. This encourages users to start and complete the previously frustrating ‘loan journey’ with ease.

Tesco Bank were highly impressed by the direction I took. I showed them how the same content from their current website could be re-designed in a manner that gives the bank a much more modern and sleek look and more importantly improves the user experience for mobile users. On the back of the project, a small selection of fellow students and myself were rewarded by being given the opportunity to present our projects to management within Tesco Bank.

Fancy reading another case study?

At a Glance

See all work