UX design for Clydesdale & Yorkshire Bank

I helped Karmarama design and develop the user experience for Clydesdale and Yorkshire Bank's 'Let's Connect' campaign microsite.

CYB Project Hero


Clydesdale and Yorkshire bank conducted an extensive survey to gauge customers’ feedback about their banking experience. They received a large volume of helpful insights. The results of the survey were analysed and the bank developed a framework in which to action the most popular and pragmatic suggestions.

Karmarama worked with the bank to develop an integrated campaign, centred around communicating the improvements to the customer experience.


The objective of the website was to bring this story to life, by presenting sample questions from the survey, along with real customer feedback and examples of actions taken by the bank.

My Role

  • Requirements gathering
  • Defining key user journeys
  • Competitor and landscape review
  • Initial sketching of key pages
  • Axure prototype
  • HTML style guide
  • Presenting key UX deliverables to the client
CYB UX Process

Image courtesy of William Iven


I worked alongside the account, design and development teams at Karmarama to develop a responsive website experience that effectively showcased the campaign.

We adopted an iterative process that involved the development of an Axure prototype. Throughout the project we had regular calls with the client (based in Scotland and Yorkshire) and internal reviews for key deliverables to ensure the project met the tight deadlines.

CYB Requirements Gathering

Requirements Gathering

Capturing key requirements of the user experience during the discovery stage of the project helped us to define the scope of the webite early on in the process.

CYB Content Mapping

Content Mapping

Mapping key content types and groups enabled us to develop a clear content structure and hierarchy that would feed into both the sitemap and wireframes as well as define some of the project's technical requirements.

CYB User Journeys

User Journeys

Developing key user journeys through the experience helped us understand how to best design each screen and the wider flow through the website.

CYB Sitemap


The sitemap enabled to graphically capture and agree upon the structure of the website.

Initial Sketches

Example sketches showing the responsive layout for the website. 

CYB Rough UX Sketch

Axure Prototype

Video walkthrough of the Axure prototype. It was used to demonstrate key functionality to the client prior to design and build.

HTML Style Guide

I produced a basic HTML style guide to accompany the Axure prototype. This was used to communicate basic colours and typographic styles as well as interaction states for key components such as buttons. 

CYB HTML Style Guide

UI Design

Sample designs showing how the homepage looked on both desktop and mobile devices. The UI was designed by (then) Karmarama designer Ted Sterchi.


CYB Mobile UI Design
CYB Desktop UI Design

Client Testimonial

Anna Agapiou Profile Photo
Anna Agapiou
"Ben is a fantastic collaborator and creative thinker. He not only has the experience knowledge and skill set to deliver concise deliverables but he's a pleasure to work with and brings a wealth of technical expertise to the table. This in turn makes it super efficient to arrive at thoughtful solutions. I enjoyed working with ben very much and will always welcome him to my team."


  • Sketching
  • OmniGraffle


  • Content Model
  • Sitemap
  • User Journeys
  • Axure Prototype
  • HTML Style Guide
  • Low-fidelity Wireframes


  • Responsive website


  • Finance

Monthly UX Newsletter

Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.

Sign Up