Public Site Redesign

Lloyds Commercial Banking underwent an exercise to ascertain the relevance and effectiveness of its unauthenticated website.

The hypothesis was that it had limitations in terms of structure and content that could impact negatively on engagement and, ultimately, sales.


Can one website service the broad range of customers that come under the Commercial Banking umbrella? For example, a small start-up could be more focused on a product while a large financial institution could be looking for industry insights as they already have a personal relationship with the bank.

Currently, Commercial Banking has a catch-all Business Banking public website with an internal focus.
It is unclear whether the current site meets the content and service needs of both existing and prospective clients.
Consequently, this may hinder engagement and ultimately impact sales for Commercial Banking.
Initial research shows that the site is under-utilised and does not have popular advocacy within Commercial Banking at Lloyds.


It was agreed with the business that we would focus on mid-market clients for the initial design concept. They have the biggest overlap within the Commercial Banking site’s client range, use a range of products and also have a need for industry insights.


I began by doing some research on who the mid-market users of the website were. Speaking with some of the key Relationship Managers within the business, I created a set of four personas which were assigned a set of individual goals, such as business prospects and financial requirements.

Journey mapping session

The personas were used to run a journey mapping session comprising a number of colleagues from mid-markets plus a client representative. The group was split into four and each was assigned a persona with the aim of creating a map and also a goal for each involving the public site (but not limited to this).

The journey maps were split into four steps in the customers’ journey: Awareness, Consideration, Engagement and Post-Engagement. For each of the steps, four processes were used to help trigger what would happen along each of the steps. These were Actions, Thoughts/Feelings, Pain Points and In Future.

At the end of the session we regrouped and summarised the results with a walk-through of the journey maps.


I evaluated the insights gathered from the journey-mapping session and defined three main pain points that would lead the design direction for the revised website concept. These were:

1. Surface relevant content for the user

The site has a lot of information that could be useful to lots of customers, but there are no clear ways to surface this information very easily for a user.

2. Revise the site navigation

The navigation is currently broken up by company turnover, which is an internally focussed approach Lloyds Commercial Banking has taken The majority of customers do not view themselves this way.

3. Quick eligibility tool for products

It could be very beneficial for customers and potential customers to have the ability to see if they could qualify for a product or service, from high level eligibility tool or calculator.



The Persona of Rosa at Treleavan was chosen to create a narrative that would illustrate a step-by-step journey of how the website could look in a best case scenario. Rosa was selected as this persona was the best representation of a mid-range customer at Lloyds.


Persona: Rosa. Financial Controller for 50-strong Hampshire-based luxury ice-cream manufacturer, Treleavan

Due to its continuing growth, there is a need for greater investment in Treleavan. However, its current bank is unable to provide data on its future borrowing needs. Rosa has been tasked with researching other banks and remembers seeing a promotion for a Lloyds business loan on the company’s Facebook feed.

Rosa will be the main contact and will need to report back at regular intervals to Treleavan’s Board/Ops Director with any progress/findings that are made.


Get a greater understanding of how Lloyds Bank works and how it can work for Treleavan.
Find the type of products on offer from the bank and check eligibility for Treleavan.
Start the journey of making contact between Treleavan and Lloyds Bank.
Produce regular data reports for Treleavan’s board of directors.

Journey Map

The narrative was worked up into a journey map. It was a good way to visualise the scenario for key stakeholders and illustrated the potential opportunities in the journey and how the new solution would make good use of them.

Card sort on navigation

One of the identified pain points in the current site was the navigation. It was divided up, as a starting point, by turnover: £0-£3m, £3m-£25m and £25m+.

Customers, however, did not define themselves in this way when navigating Lloyds’ Commercial Banking website. This applied in particular to smaller businesses whose turnover could change unexpectedly, and significantly. For example, through winning or losing a lucrative contract.

I undertook a card-sorting exercise with the Product Owner and Relationship Manager who had close day-to-day interactions with several different types of CBO customers.

The grouping of the navigation has changed to Banking with Lloyds, Products, Tools & Services, Sectors and Insights.


The next stage was wireframing. Working from the ideas I had sketched, screens and a prototype were created in Axure. The prototype can be found here.

Design Decisions

To address the issue of surfacing relevant content to a particular type of user, a set of filtering questions was added to the home screen. The answer the user gives to a question determines the one they’ll be presented with next.

Based on the questions answered, the user is taken to a personalised content page tailored to their company’s size, turnover and sector. It would include products and services available to them, case studies on similar businesses, Lloyds staff they could have contact with, and articles and insights for their type business.

A filter was also incorporated for products so the user is presented with the ones most suitable for them. They are also able to undergo a high-level eligibility check to see if they qualify for these.

Using a soft login feature, the results can then be saved by the user without the need to sign-up to anything or join Lloyds. They can also send the information gleaned about the products to an email address. The user can return to view this data at any point by using a soft login code provided in the email.

This also enables the user to make contact with Lloyds and begin a conversation. They can do this at any point through the journey.


Testing was undertaken using an online forum, consisting of 21 participants. All were financial decision-makers in companies across a mix of industries, with a turnover ranging from £1-£25m. There was a mix of existing customers and new ones to Lloyds Commercial Banking.

Each was given the same scenarios for testing purposes and was also asked to give their general feedback of the prototype.

Key findings

Understanding the audience: Financial decision-makers are looking for a quick, user-friendly and reliable online experience. The prototype performed well against these needs and signals a marked improvement on the current website.

Tailored content: Information, content and products tailored to individual business profiles are a key driver of positive perceptions of the site. The selector tool is felt to be unique and innovative, and positions Lloyds as a client-centric bank.

Layout and navigation: The box layout enables users to locate information quickly and the clear grouping of content facilitates quick and efficient navigation. The sooner businesses can find what they are looking for, the better.

Look and feel: The visual design feels modern and professional. The site strikes the right balance between text and imagery. The latter is felt to be strategically used to enhance perceptions of a personalised service.

Overall impressions of the proposed new site were positive

  • Many remarked that this signals a marked improvement on the current site: its layout is simple yet professional and concise.
  • The site recognises the fact that business decision-makers are time-poor and want to navigate through to relevant and tailored content quickly and easily.
  • Participants remarked upon the fact that much of their feedback from Stage 1 had been taken on board, which gave them a positive feeling about Lloyds as being a customer-centric bank that listens to clients’ needs.

“The site was like a bullet train I went on in Japan: fast, intuitive, easy to use and would help me and my business.”


Consistent customisation

The concept of tailored content on the site was greatly received, but several participants commented that there would be an expectation to have this customisation delivered across the site at all times. Once business parameters have been entered they should be “remembered” across all areas, unless the user edits them.

Minimise effort

Several participants commented on the some of the pages being too long. Users expect to find what they are looking for with the minimum amount of clicks / scrolling. A more compact interface is expected in order to maximise engagement with as many content areas as possible.


The question selector on the home page was a strong positive of this prototype, but the options available within each stage need to feel inclusive so as not to alienate prospective visitors. Several participants felt the sector question did not apply to their business. This leads on to the importance of these questions being evaluated at length to ensure the most accurate results for the user.

Reassurance and hand-holding

Info pop-ups in areas where business / personal information is required can reassure users about how Lloyds intends to use their data. A Contact option in Product sections can drive credibility and instigate a timely, active conversation.