Redesigning Brand Centre Platform Experience for 6M+ Users

Platform:

WebApp | Brand Site | Design System

Duration:

8 Weeks

Client:

Barclays UK

My Role:

Lead Product Designer

Introduction

Barclays, one of the world's leading financial institutions, recognised the need to revolutionize how practitioners perceive and engage with the Barclays Brand. The Barclays Brand Site, which supports over 6 million colleagues worldwide, had remained unchanged since 2014.

In this project, we did a complete overhaul of the site's functionality, revamped the user experience and fundamentally changed its engagement model. Previously serving as a mere repository for brand PDFs, our solution transformed Brand Site into an interactive tool for discovering, learning, trying, and using the Barclays Brand, both now and in the future.

This was one of the largest projects at Barclays since 2021.


My Role

I'm the lead product designer for this project.
I collaborated with product designers (Kay James, Chinmay K, Disha S) throughout this project.


The Problem

Since 2014, Brand Site experience has not been changed. Here are the key problems with the core experience.



Defining the Problem



Simply put, Our Goal was to…

To transform this vision into a real-life implementation, we devised a unique but practical approach.

Our Approach


With all this set, we kickoff with user Interviews to understand…

Since 2016, the Brand site experience has not been changed. In order to gather comprehensive insights, we conducted extensive interviews with stakeholders from various positions at Barclays. These sessions provided valuable perspectives on user aspirations, pain points, and areas where things could be done better. Below are the key findings from these interviews.










Our Users

Before we started designing, we deep dive into existing behavioral and usage data of our users to understand them better. We focused on identifying what is the job that our colleagues use the product for.

And based off these interviews and workshops, we segmented our users into 6 Archetypes and mapped them to their respective jobs-to-be-done.



A deeper dive into our users to understand their role, objectives, pains and ideas.


Finding Clues

Sifting through and combining all archetypes, clues began to emerge. These clues revealed the essential pathways defining how different user personas interact with the site to achieve their goals.

In hindsight, we realized these pathways were actually key user journeys, mapping out the steps, interactions, and touchpoints our archetypes encountered while using the product.

We defined 4 Key User Journeys which collectively form the complete Central Design Journey that helps to ensure a seamless and satisfying experience for every archetype.








All key user journeys collectively form the…


Key User journeys X User Feature Ideas helps us understand and make sense of all the ideas and valuable thoughts collected about the product at the User research stage. Here are the some of them-



We have identified what works and what doesn't for our users on the existing site. Additionally, we need to understand where the industry currently stands and what the best practices are. This will help shape our creative direction before we begin designing.



Key User journeys X Industry Study helps us understand and make sense of all the ideas and valuable thoughts collected about the product at the Best-in-class Benchmarking stage. Here are the some of them-




In today's connected world, users compare the experience of using the Brand Site to all digital experiences in the global marketplace. 

Users now expect digital experiences to mimic natural behaviors, be familiar, be responsive and give them the exact information they require at the opportune moment.

In 2022, the baseline aspirations for consumers are: 


Give me (some) control
Make it easy to find
Talk my language
Don't add unnecessary layers
Tailor to my needs

To successfully fulfill these aspirations, a prioritised set of functionality
is essential to deliver a product based on user goals and journeys.


Defining Success

The priortised list streamlines and provides clarity to clearly define what success looks like for the Product to WIN!
Here is what success looks like-


Architecting the Site

An effective product can only be crafted through a logical and goal-driven information architecture (IA). Hence for this we understood that this IA should seamlessly guide through the key-user-journeys, meeting user needs at the most opportune moments to provide moments of delight. By ensuring this alignment, we ensured that the product shall achieve excellent user engagement.


This exercise helped us to arrive on IA that is seamless and provides considerable reduction in the number of clicks.


Understanding the Levels of the Information Architecture, from L0 to L4.



Once the information was designed, we realized that excellent user engagement also required well-designed content. With the help of the internal Barclays Brand team, we reviewed every Master Brand Guideline to ensure our design aligned with today's user goals.



Implementing the Strategy- Early Designs

We also examined how each prioritised feature, ref the Master Prioritisation List, could be seamlessly incorporated into the design. This approach provided us with the maximum advantage to deliver a site that is on-brand, aligned with user goals, highly usable, and in line with industry trends.

Here are the illustrative example of one Feature-

and 25 other Features…



The story so far…

Then we created our Blue Sky Vision for the Group Brand Site...

Final Designs

Home Page


Element Page


Details Page


Complete Navigation Overhaul

The redesigned details page features an intuitive side navigation panel with clear section indicators, ensuring users always know which section they are browsing. It organizes subsections neatly for better content management. The logical information architecture enhances usability and facilitates easier navigation.


Revamped Details Page

The redesigned details page features a relevant and engaging banner with quick action buttons for improved task completion. It offers a clear and consistent page structure with visible navigation elements for enhanced usability. The content is well-organized, ensuring better visual hierarchy and user engagement.

Improving the Search

The rimproved search results page features larger asset thumbnails for better discoverability and quick filters for convenient sorting and refining of search results. It includes an intuitive navigation pane, helping users keep track of their location within the photo library. The overall layout enhances usability and visual balance.


Show vs Tell

This new engagement model presents guidelines as easily navigable web pages instead of PDFs, enhancing information accessibility. It features in-page tabs for better content segmentation and user convenience. Interactive and illustrative examples improve user engagement and comprehension.

Addition to the Barclays Blueprint Design System

Blueprint is a scalable design system that saves time, reduces technical debt over time. It solves the problem of inconsistent components and user experience.

Blueprint consists of 100+ components with properly defined typography styles, icons and illustrations. After the Brand Site exercise, we contributed 152+ components to the central Library. Everything on the site is made up of these modular components—this gives a unified, consistent, robust UI.

The design system is never final. It evolves as we go along.


What we learned


Adapt to the changing consumer behaviour.

We needed to stay grounded and focused on the goal, but also account for changes to the product to match the changed behavior of users during economic downturns.

Products don’t exist in a vacuum

With a major user experience revamp, our internal processes are affected. For example, the AEM team needs to change how they select search results choice chips . If we didn’t collaborate with these teams, listened to their concerns, and evolved the tools they worked with, our beautiful brand site revamp would look nice only as a prototype, but fall flat once implemented in production. Hence, we had a lot of alignment initiatives going on in the background.

Take it one phase at a time

We learned to break down complicated designs into small, manageable chunks. This eases development and handles bugs as we go along.

Future Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.‍

Post-launch optimization

This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.‍

Continue to design better experiences

To follow through our product roadmap and continue to stick to our design principles.

Thank you for reading through! Hope you enjoyed learning about my design and thought process. :)