TSB banking landing page

Bringing a visual design identity to life for TSB

Foolproof helped TSB to translate their distinctive brand positioning into a front-end reality which delivers their customers the experience they desire.

The challenge
  • Immersion into the organisation - including stakeholder interviews complimented by qualitative research with a wide range of customers.
  • Sprint based iterative design and development which maintains the integrity of the brand’s visual identity.
  • Optimisation of business-critical areas of the site to fine tune the experience further.

A leading UK financial provider.

Project type


Our client wanted to maximise the impact of their new brand identity to help them differentiate in a crowded sector. The challenge was to create a distinctive visual style and tone-of-voice whilst providing a simple, intuitive, and usable customer experience across all touchpoints. 

TSB landing page with a bespoke illustration of a lady walking multiple dogs

The project objectives included: creating a coherent multi-device experience through responsive design; applying TSB’s new brand identity into digital channels; and radically reducing the amount of content – much of which wasn’t adding to the user’s experience.

TSB current account mobile screens

We followed an evidence-driven design approach gathering insight from the bank’s digital team, customers, and the branding agency, which informed our design process. Early rounds of user research highlighted that people find it difficult to differentiate between banks, and banking products.

We knew that customers had difficulty differentiating the look and feel of banks. Our research gave us insight about why this was, and where we could create distinctive visual elements without damaging usability and user experience.

TSB design styles including colour pallet, fonts and logos

With the insight we gathered we created a clickable prototype before translating that detail into interaction design for desktop, tablet, and mobile. To complement our visual design and iconography we defined visual design guidelines which help our client to maintain and extend the experience we delivered. 

Extending programmes of work

After the completion of the initial project, we were asked to apply our evidence-driven design approach to optimise the performance of twelve business-critical areas of the TSB site.

“The result of Foolproof’s work is a digital experience which places our customers’ needs right at the heart of what we do.”
Lorraine DonningtonHead of UX, TSB

Our objectives were: to deliver a world-class customer experience across all channels; to make products easier to understand and buy; reduce reliance on telephony; and better communicate the product and service offering of the brand.

We continue to work with TSB’s wider product teams by deploying our design and development expertise.

  • Activities

    Qualitative research, stakeholder interviews, information architecture, iconography, visual design, interaction design, front-end development.

  • Delivery

    Four-week agile sprints.

Get in touch

We'd be very happy to talk through more examples of our work.

Contact Ed Walker, Business Development Director on ed@foolproof.co.uk.

Related case studies

View All
Post Office
Our landing page design for Post Office Mortgages

Post Office

Our digital design of two new products for Post Office brings to life their innovative new mortgage propositions. As part of the deliverable we produced a pattern library that can be re-used across their digital estate.

Suzuki cars, bikes and marine together


We designed and built the end-to-end customer experience across Suzuki’s product lines. This resulted in an impressive increase in core sales indicators across each of the four sites we designed.

Sony PlayStation
PlayStation video streaming service entry point

Sony PlayStation

We helped get more customers to use Sony PlayStation for content-on-demand services. Diary study research informed the prototype of a new user experience.