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

Project Overview

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 Challenge

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

Process

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

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

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
DIGITAL DESIGN DIRECTOR

"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."

Tools

  • Sketching

  • OmniGraffle

Deliverables

  • Content Model

  • Sitemap

  • User Journeys
  • Axure Prototype

  • HTML Style Guide
  • Low-fidelity Wireframes

Type

  • Responsive website

Sector

  • Finance

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Download CV