Lloyds Bank

Challenge

I was asked to help lead the design of their booking appointment system.

The project was part way through and it was struggling to get up and running. One of the biggest challenges I faced, was ensuring that I keep to the new Lloyds Bank visual language while also implementing (new or old) components that would help the process of booking an appointment.

Lloyds Bank

Since its foundation on 3 June 1765, Lloyds Bank has been serving the households, businesses and communities of Britain. It is the largest retail bank in Britain, with around 16 million personal customers and business accounts.

Background

Booking an appointment was complex at Lloyds Bank. There were many systems working separately, depending on if one tried to book an appointment in branch or on the phone. One of the huge tasks for this project was to bring all the systems together along with the interface. So everyone would get the same data and process.

Design

Lloyds Bank had spent a lot of time developing a visual language that would help push the bank into the era of internet of things. Considering how slow some banks are design-wise; it was refreshing to see how quickly the bank wanted to adapt to digital change.

One of my first steps was to establish the team structure, speak to everyone, and to see the current status of the project. From there, I was able to understand what the project goals were and how to best use my skills to help.

UX

I was initially introduced to all the user stories and development ins and outs. But I didn’t want to distract myself with all this . So I started by speaking to the UX designer already involved. I looked through her prototype of the booking appointment (created in Axure). This ensured I could tackle all the design tasks with a fresh perspective.

The full journey was a complex form, now spilt into separate and easy to digest forms while remaining on a single page. This would allow a user or a member of staff to clearly go through the process of booking an appointment without have to deal with too much data. There were also confirmation and error pages as well as emails to contend with.

Templates

After a couple of days, I began putting together a list of templates that I would deliver to the scrum team by going through their priority list with the scrum master. This was to ensure that when the dev team needed to do front-end work, they had the required templates available to them.

  • Page template
  • Home page
  • Appointment type
  • Location & date
  • Customer details
  • Check appointment
  • Appointment confirm
  • Cancel appointment
  • Error templates

Visual language

While I was working on this project, I had to familiarise myself with the very big Sketch libraries that covered not only Lloyds Bank, but also Bank of Scotland and Halifax as all of these are owned by Lloyds Bank and use similar templates.

It was important to find out what the differences were: visual elements such as the typography, iconography and colours needed to be completely understood before I could delivery any work.

Concepts

The main purpose was to bring as much of the current visual language into this project while bring new components that blended into the current style.

This project had to work on the iPad (in branch) and Desktop (computer at home or in a telephone centre). It was vital to check that each template worked well within both viewports.

Each page needed to work seamlessly across three brands (Lloyds Bank, Bank of Scotland and Halifax) as well as on an iPad and Desktop computer. That’s a lot of variations for each page: 
36 pages x 3 brands = 108 pages!

Appointment type, Location and date and Customer details.

Check your booking, Appointment confirmation and Appointment bookings home page.

Production

I kept things simple by allowing myself space to work on the initial designs. From there, I was able to split all the design work into manageable sprints, that were focused on delivering components within templates. This made sure that the developers could see the bigger picture of how everything fit together while being able to develop detailed components that worked across multiple scenarios.

Conversion sheets

During the process of trying to figure out how to deliver 6 variates for each page to developers without confusing everyone. I decided to give the developers one brand of templates, and then used conversion sheets to bridge between the other brands. This not only helped ensure the design was consistent across all three brands but also allowed the developers to work a lot quicker than expected.

Design-added value

The project wasn’t doing well, it was a red status, which meant they were very behind. When the UX designer joined the project, they automatically saw the value of design and their project went to amber status. Finally, when I joined the project, it added another layer of design: it allowed everyone to see what the final product would look like. My side interests in development also allowed me to think of innovative ways to help increase the devs productivity. The project went from amber to green status, which is the highest level that a project can be at.

By ensuring I kept a high-level of quality, it helped bring the team together and also allowed everyone to be on the same page during the whole process.

I always tell everyone that each layer of design is a layer of conscious thought. Each layer of fidelity adds more refinement to the project, getting it closer to being the product a customer wants to use and can use easily.

Credits

Company

  • Lloyds Bank
  • Finance

Devices

  • Computer
  • Tablet

Roles

Design Lead