PROJECT

Building banking mobile app for commercial customers.

SUMMARY

Lloyds Commercial Banking is online banking designed to meet the needs of small, medium and corporate businesses. To ensure they had the best product offering, Lloyds commissioned extensive research to understand customer preferences and how they would interact with a mobile app.

INFO

May - Sep 2022
Desktop, Mobile
Figma, Sketch
Incubator

TEAM

The cross-functional team consisted of a tech lead, a project lead, software engineers, a Product Designer, and the Lead Product Designer (me). On Lloyd's side, additional technical support and project managers were provided.

ROLES

Lead Designer
Product Design

Main goals

Identify and develop better digital solutions so that clients' needs can be met efficiently.

Close the gap between online and mobile propositions and improve clients' engagement.

Build an app that attracts new business, retains existing businesses, and makes clients want to bank with Lloyds and Bank of Scotland.

Home screen - Lloyds Bank

Home screen - Bank of Scotland

Main challenges

Complex CBO desktop application that is difficult to convert to a mobile app.

The authentication process with a card reader makes it difficult to log in and authorize payments.

CBO website platform does not have any cohesion with other bank products, such as retail and business apps.

The process

The incubator process has been planned for 12 weeks. As part of the incubator process, the team conducted various workshops, such as sailboat, KPIs, user personas, service blueprints, and story mapping.This has enabled us to validate our ideas and define the requirements for subsequent development work. We have also developed user flows, wireframes and produced clickable prototypesfor both Lloyds and Bank of Scotland.

SAILBOAT AND KPIs WORKSHOPS

The aim of these workshops was to define project goals, motivations, blockers and risks. To ensure those goals were achieved, we had to set measurable criteria so that progress can be tracked and results assessed. The end result was a clear roadmap of project objectives and measurable milestones for us to follow.

USER PERSONAS WORKSHOP

We identified 6 distinct profiles to gain insight into how to best aid them and what their requirements are. The questions we answered included: what is the average user's day-to-day job like, and where are they when using bank products. In order to understand their needs better, we delved into the different users' attitudes, behaviors, and motivations. We focused on exploring how the users interacted with their bank products, and how these interactions impacted the users' experience.

SERVICE BLUEPRINT WORKSHOP

The goal of this workshop was to discuss how key features could be implemented most efficiently. This was to make sure everyone’s expectations were aligned and establish a shared language and understanding of the user's experience.

UI BURNDOWN WORKSHOP

The aim of this workshop was to capture Lloyds' feedback on their current digital solutions. It allowed us to identify potential areas of improvement, which were invaluable in the development of the proposed solution.

STORY MAPPING WORKSHOP

Using the Must, Should, Could system we defined MVP features for all the user flows. This ensured that the most important features were delivered in a timely manner while still enabling further feature innovation in the future. We then used wireframes and clickable prototypes to refine the MVP features and ensure the user experience was successful.

User flows

Each user flow we produced was designed to capture the user's experience and guide them through the feature, from beginning to end. We ensured each flow was consistent, had a similar experience to the desktop platform and that no steps were skipped or overlooked. We then tested the flows to ensure they achieved the desired outcome and that users felt comfortable navigating the feature.

Wireframing

To ensure success, it was essential to identify which key features should be prioritized to create the desired user experience for MVP. A set of wireframes was produced based on the story mapping session and the user flows to help us better understand and test the user journey. The wireframes were then tested with Lloyds in order to validate the proposed user experience and gather feedback. The feedback was then used to refine and improve the wireframes prior to the start of prototyping.

Approve payments

Transactions

Building prototype

The wireframes were used as the basis for the development of the prototype, which was then tested with Lloyds and customers. The prototype was produced under both Lloyds and Bank of Scotland brand guidelines. The results from testing the prototype with Lloyds and customers were extremely positive, with many customers praising the user experience and design. The project was completed on time and was considered a success by Lloyds.

Get payment rate (Lloyds)

Account groups (Lloyds)

Payments approve (RBS)

Approval confirmation (RBS)