Barclays - Intermediaries site

Problem

Stakeholders

As this project was priority from the buisness, we have many stakeholders involved.

‍

Brief

The intermediary website (co.uk) has been neglected in recent years, leading to a poor experience for brokers who use it in conjunction with the broker hub. 

As part of this design brief, we would like to:

• Establish a clear vision and purpose for the website versus the hub
• Have UX/UI support to completely redesign the site so that it is targeted to the needs of brokers.

The website is typically used by brokers for research purposes to identify the right lender and product for the customer’s needs identified during initial conversation.

‍

Measure of success

How are we measuring success? We’ve selected a handful of customer engagement KPIs which we will monitor. These include:

• Bounce rate

• Positive broker feedback
• Core Web Vitals (page speed)

‍

Primary Research

We gathered some stakeholders to the redesign workshop. Through out the workshop, people used HMW's statement to help reframe the problem.
Using the existing design principles, people interrogated the redesigned screens. Also applied the Rose, Thorn, Bud method to generate insights of what was Positive, Negative and Opportunities.
Stakeholders also critiqued our competitors website to draw out the positives and negatives.


‍

Design System

As the design was originally been done in Adobe XD, I had to redesign the screens in Figma with the updated design components. The process of transforming involved many conversations with the developers about AEM (Adobe Experience Manager) components to make sure we are sync.

‍

First Design Iteration

After analysing the insights and existing research, we had many discussions with the stakeholders about the requirements and the goals for the design. The designs have been through some design crits and we validated the feedback in the design.Next are some examples of the first iteration design.

‍

Landing Page

✅ What's changed?

• Adding more images to visualise the page
• Showing the new updates feature
• Adding the news section to show the latest articles
• Adding a banner for the service levels

‍

Lending Criteria Page

✅ What's changed?

• Separated Buy to let and Residential categories with tabs
• Redesign the pdf from text to tiles design.
• Adding filter and search functions for the lending criteria
• Re-organised all the criteria with the new title

‍

Guides Page

✅ What's changed?

• Redesign the pdf from text to images. Visualised the pdf guides.
• Separate the how to guides section and the useful documents section by adding a new page.

‍

‍

User research

After the first design was done, the user researcher recruited some broker and did dome user tests with the prototype I've provided. The feedback was positive. However, we did get some advice including:

‍

🔴 Lending Criteria page - Brokers like the new filter and search options, however they would like to have the option to view the criteria from A-Z too.

🔴 Useful document page - Brokers had positive feedback on the design. However, they would like to order the tiles by popularity.


🔴 Latest news page - Brokers were asking to add publish dates for each articles, so they could know which articles are the latest.

‍

Second Design Iteration

We took the feedback from the researchers, and redesigned the screens. However, we discovered some problems through out the project. There were some issues with the production team, so we could not add some elements like filter and search functions to the project. 


To meet the requirement, we then split the project into multiple releases. And after many discussions, we came up with one design for the release one and thats currently live now.
We received positive feedback with the new design, and have been monitoring the site for the future updates.

✅What's different from the first iteration? Here's some examples:

• We added A-Z option to the lending criteria, as the brokers' feedback

• As the filter/search component isn't available now, we added the categories to the tab instead

• Reorganised the useful documents page based on the popularity, also add more tabs for the clarity

• Some of the design components were not supported anymore, I've changed the design elements for production

‍

Reflection

In this project, we have many stakeholders involved, which makes communication a key point. I've learned that:

• How to deal with conflict
• When there was some unexpected issues, how to find the best solution for the outcome
• How to communicate with the developers to make sure the designs are aligned
• The final design might not always be the same as the final outcome, some of the design components can be quite different

‍

Outcome

Help lowering the bounce rate from 65% to 45%, and increase 5% of our broker NPS. Also received great feedbacks from brokers

‍

View the live project here

‍

‍

‍

‍