Project description

I was the Lead designer for Clydesdale & Yorkshire Bank’s (CYB) brand new digital bank launch – B. The project included coming up for ideas for a pre-launch campaign, and website. A way to present the new world of B and encourage people to find our more. Some visuals for this are shown in the carousel above. The bulk of the project was creating and designing the the customer facing website.

The site and content was developed alongside the brand, which allowed a huge degree of freedom with the approach to the site’s look and feel, but also in how the brand, content and site structure could be used to attract customers. There was a huge amount of information required on this site, partly to inform, partly legal requirements. Creating a structure and sussing out just what information was required as well as how it all fits together to take customers on a journey from introduction through to application was a crucial part of the design process.

Designing and writing the application process found on the Get B page – a simplified one page interface with a very straight forward and conversational approach to the questions – was also an important and large part of this project.

The sites went through a lot of evolution as CYBs requirements changed as the project went on. To work with a 3rd party brand alongside the bank’s teams to design, write and build a site as big and complicated as this, site was a huge personal challenge and  achievement. To end up with a site that hopefully looks new, interesting and good and that has engaging and relevant content presented in a helpful way means this is a project of which I feel I can be proud.

Project details

  • Client: Clydesdale & Yorkshire Bank
  • Category: UX, UI
  • Data Created: March, 2016

The Money Page

An introduction and summary to the financial and practical aspects of the B account and it’s basic monetary features.

B Home

The way in to B. The home page summarises what B is all about –  as a combination of bank account and app packed full of useful features.

The Get B page.

This page was the way in to the application process. It summarises all the key information and features people need to know before applying.

2nd/3rd level pages

These pages are just a selection of some of the deeper level content pages going into more detail about the app and the bank account features.

The idea was to create pages that continue forwards and back to help people through the journey of information, until they’re ready to start the application process with Get B.

Blog & editorial pages

Another important part of the project was to help create a closer connection to B’s customers by using an editorial blog style section (alongside other social channels), that would include tips on using the app, help and ideas on how to spend, save and manage your money and more general concepts related to the brand’s ideology.

The blog landing page has 3 simple levels of content hierarchy, a constantly updating dynamic quote section, and related content area. The article template was designed to feature blocks of images or quotes in the appropriate vertical position alongside the relevant copy. On smaller screens, these images would appear directly before/after the text to keep the imagery and text all contextually related.