Skip to content

Russell Webb Design

Experience DesignEnhance user satisfaction, improve business outcomes, and contribute to positive social change. A powerful tool that can be used to create products and services that are user-friendly, culturally relevant and impactful.
CV
Contact
Blog

Search

Category: Fintech

In today’s crowded financial landscape, branding is more than just an edge, it’s the difference between survival and success. With a plethora of options, discerning customers in developed markets demand compelling narratives to guide their hard-earned investments. This challenge intensifies in emerging markets, where trust and familiarity with traditional banking are scarce. Deep-dive-in…

Real-World Messiness of Product Design
The commercial mindset of a UX designer ensures outputs aren’t just blue-sky, but shippable. Here I demonstrate how complexity is a daily occurrence, how a proven track record in parallel industries handling multi-layered data and regulatory standards can translate.

With 15+ yrs exp. I showcase technical fluency with Design Systems, with developer handovers, and platform-specific patterns. Lets dive in…>
Contents

What I personally designed
A Portfolio of Reality
Engineering Constraints and Design Trade-offs
The Data-Informed Designer
Career Growth within Design Teams
How to hook new customers
Fine tune the results
Conclusion and Impact
What I personally designed

Shifting the focus from what I’ve built to how I think:

Shipped product design work

what I personally designed.
- Problem & Challenge: Senior user groups face significant barriers to mobile adoption, esp. with Payment flows.
- Obstacles: Fear of fraud | High cognitive load | Digital literacy gaps.
- What I personally designed: Complete mobile framework, from multi-use Figma DS components within the List View (iOS & Android, Light and Dark) through to: Transaction parameters i.e the amount to and from, date inputs, source account(s), and other dynamic fields.
- Mobile native components follow their OS.
Realising the final UI

Transfer To – Searchable with swappable source functionality, configurable icons and/or avatar in a scrollable list

Payment details – To and From Card UI, configurable currency incl. ISO 3-letter currency identifier

Review – Available Balance, Current Balance (uncleared funds), Transfer fees typical for Intl. Payments, Business Calendar integration and CoP

Transfer to

Solving Step 4 ‘Locating Information’ Highlight CTAs, account numbers, due dates, with responsive labelling

Destination of the funds.

Payments Details

iOS Dark Mode is as important as ever. Ensuring the Design System operates with the appropriate Variables is key to efficiencies.

Primarily the amount to and from.

Review

Android and Google’s Material Design, although occupying a smaller space in HNW UK fintechs, globally is a recognised and must-have part of your DS.

Summary screen.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.
Russell Webb | Shipped Product Design Work
A Portfolio of Reality

messy

unclear

complex Problems

constraints

Post release updates

While defining a real-world business problem, I was able to use UX tools to uncover pain points to inform an initiative UX wireframe flow that in turn, informed the final UI.
🚀 From Discovery to Design and Solution

01 Problem Statement: Create a user-friendly and simplified mobile journey that helps seniors mitigate their fraud anxiety, meet financial regulatory standards and ultimately manage their finances i.e. improve their financial wellness.

This was further expanded with the study into;

Low-anxiety mobile payment – Seniors face challenges with mobile payments due to fear of fraud, cognitive load, and digital literacy. Designing a system that addresses these concerns while maintaining security is crucial.

Business problem | Design challenge – The challenge is balancing a simplified flow with a robust, secure multi-step flow to mitigate fraud anxiety and meet industry standards.

02 Segmentation: Identify distinct segments within the aging parent demographic. Target a segment that can most benefit from the UK Payment process. Accessibility, personalisation, security, and financial wellness are key considerations.

03 Research & Strategy: Use quantitative data with qualitative insights to inform a Customer Journey Map. Visualise the financial and emotional challenges faced by each segment, across a given scenario.

I prioritised accessibility and task-oriented patterns. Personalised guidance, and minimising cognitive load were also key considerations..

04 Wire framing Design Decisions: Making trade-offs and delivering a justified UX solution. Simplified to the “What”, the “Who” and “How Much” before a final check then execution. I limited one screen to have one single, clear primary action. Components were dual functioning for Existing Beneficiary and New Beneficiary reducing two mini journeys to one.

05 Conclusion & Outcomes: How my decision’s successfully translate a complex real-world business problem into an initiative UX wireframe and Final UI flow.

Key highlight
- Key stakeholders audience established 2-months before proposed Sprint through workshopping and client relationships.
- Pain points highlighted early, including CoP, Secondary payment reference and scope (i.e Feed and FX was descoped)
- Cross platform UX and UI for Alpha release delivered and demo’d in 3-months
- Developer and BA handover, Design System integration scheduled early for estimation and to provide clarity
- Design System integrated and UX Copy Check signed-off
- No deadlines missed 🙂
Russell Webb | A Portfolio of Reality
Engineering Constraints and Design Trade-offs

engineering constraints

Technical realities

trade-offs

final outcome

International Payments

International payments is a complex animal. There is a fine line between delivering pixel-perfect cross-platform consistent UI and balancing that against commercial and technician reality. Recently I was in Bug Triage to get this sophisticated and geographically dependent piece of functionality across the line. Lets dive-in ->

SWIFT/BIC, when connected to an API returns a Bank name, think of it as a post code. While the end-user has the ability to edit this code for new payees, they cannot edit the bank name [engineering constraint]. For a more harmonise UX, new and existing payees should be displayed in a consistent and non-jarring format. So I made the decision to use input fields throughout, in various states.

My design then changes From > To :

AI generated: For NDA reasons, I have fast-tracked these Input Fields to rapidly visualise these engineering constraints.

The Trade-Off

This manifested itself from an arguably more elegant From execution, to the multi-platform but feature parity To solution following both a trade-off contributing to a non-jarring, smoother, and Input field led consistency experience.

To give context, this attention to detail was part of a much wider delivery. For NDA reasons, the forms in its full extent (1 of 3), have been altered.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Russell Webb | Engineering Constraints and Design Trade-offs
The Data-Informed Designer

Design intuition

qualitative or quantitative signals

Post launch

Retrospective improvments

How I value results just as much as pixels.
Dashboard UX to business UI

Catering for demanding clients requesting instant advice, competitive quotes and investment strategies requires tailored tools, especially within a sensitive client-data environment – Welcome to the a Customer Meeting App Dashboard

Through team interviews, ad-hoc surveys and gorilla research I defined three “must-have” features early on, so pre-launch the business needs and UX goals were transparent;

Single point of access for disparate data – Five-second insight

Broad overview with drill-down capabilities – Inverted pyramid

Fill other process gaps easier and faster – Champion the brand | DS achievability
Problem and Opportunity

The existing offering had become redundant. Integrating data from third-party repositories was a priority, to achieve an improved user journey. This presented an opportunity to re-imagine the complete ‘Create a Customer Meeting’ user journey.

There was another further top-level requirement; Funding.

People management point: When competent business executives are supported by UX leaders who articulate good design, bridging the gap between vision and execution, this can build confidence across the entire team to get product delivery across the line.

See: Career Growth within Design Teams

Reimagining Client Meetings

Step 1

Start with the user needs

Streamlining the preparation of a meeting, and principally future proofing the Create a Meeting process with a scalable UI that can seamlessly integrate new data repositories, ensuring long-term flexibility.

Step 2

Segment in to ‘zones’

The on-screen real estate delivers a quick look experience prioritising top from bottom.

Step 3

Test and Challenge through Prototyping

Visualising up to 12 users’ journeys leads to better understanding and smoother development. Boxed development will not impact working code.

Early sketches reveal the potential of a dashboard, emphasising hierarchy through top-down, LTR user scanning patterns, pushing a hierarchical arrangement that guides the user’s eye. Data is prioritised with glance-access to preview Meeting Name top-of-mind expanding and collapsing information depending what is scope.

A conceptual dashboard with multiple layers

The final solution solved both the scalability problem, providing easy access to account numbers, the ability to add other account numbers, visibility on the meeting date and time, and the meeting status and who is the meeting organiser. Complete transparency on meeting detail, including location, meeting language and notes format with extra features like Meeting Packs.

190 offices | Growth from 8% to 56% | 1.5 years

Quantitative Signals

The quantitative metric as a single-source-of-truth of unifying insights speak volumes: 56% iPad growth in just 1.5 years over 100K client meetings in 40 countries with approximately half of their approx 85 offices in western Europe,

From business problem to an Enterprise-level, real-time data dashboard from multiple sources, instantly accessed, no more hunting.

Qualitative Design Trade-Offs

On reflection post launch, one key factor in the development (and acceptance) of this new radical design was achievability. Funding is also a key developmental constraint so designing with business realities is key. This inevitably constrains blue-sky thinking, a real change outside of budget and possibly a missed opportunity was to re-pitch this design for responsively iPad (landscape and portrait) or to expand on the ‘mini’ and ‘maxi’ concept from full disclosure down to dashboard snippets. Maybe in Phase 2!

Russell Webb | The Data-Informed Designer
Career Growth within Design Teams

management style

Improved Performance

tangible results

Scaling & Mentoring

Hybrid working has its pros and cons. For remote teams often populising your name and skills sets is a challenge. While leading a small creative pod of 1 junior and 1 middleweight designer at Sportingbet, I introduced a global initiative to assess the visibility of UX initiatives. I set broad battleplan headlines, including defining a visibility index, what surveys and Focus Groups could look like, then allowed the individual to gather and analyse results and set targets.

This was an initiative to allow junior and middleweight designers to step-up, to formulate action plans and drive improvement strategies. This was coupled with a growth theme, for the individual to demonstrate they could deliver with autonomy and without clear structure but define specific long-term and short-term objectives.

Outcomes

This resulted in very positive improvements in quality, improved attention and adherence to written instructions, and was backed-up by positive feedback from the stakeholders engaged in the initiative (surveys, focus groups and workshop).

Finally, this set the consistency bar very high enabling individuals to take full ownership and leadership with a process they define.

Russell Webb | Career Growth within Design Teams

How to hook new customers

Ambiguity

Ownership

Resourcefulness

When customers make a product selection there is a lot going on behind the scenes. Desktop new product onboarding carries a lot of functional weight, it is a prime candidate to wireframe. Capturing a large selection of unique steps requires enterprise-level wire framing skills.

Defining the Problem

Imagine a new or existing customer discovering your product. The onboarding process can often feel like a daunting maze. This is where detailed wireframes step-up, transforming a journey into a smooth, secure and clear experience. Early decisions were made to leverage a pre-existing Design System. High fidelity wireframes became the way forward with Figma as the wire-framing tool of choice.

Onboarding Flow & Development Preparation

Process flow diagrams were thin on the ground, little research was available and there was a lot of ambiguity. This was an opportunity! I took it on myself to deeply understand how personal details were collected, how email and SMS validation data flows worked, understand business goals and success metrics, so the technical team can move forward. This was a calculated risk!

Segmenting the UX Wire-framing Process

1 – Guiding the First Steps

Personal details

Pre-registration

The process begins the moment a product ID is entered as the customer clicks a product. These wireframes propose a gentle walk-through, hand-holding the customer and setting clear expectations. As personal details are collected, the system identifies pre-registrations, streamlining the experience. For unrecognised products, the UI gracefully handles the situation, preventing frustration.

2 – Building Trust and Security

KYC process

Tax jurisdiction

GDPR

IDV

Next, the validation screen requests a unique member ID, followed by a secure OTP process. This includes both email and mobile verification, paving the way for a robust KYC process.

The customer identifies their tax jurisdiction, providing identification proof, as part of a seamless IDV (Identity Verification) experience. To ensure compliance with regional regulations, the system also gathers marketing and accessibility permissions, adhering to GDPR guidelines.

3 – Personalisation Meets Regulation

Investment pledge

NI (UK)

This joined-up onboarding process seamlessly transitions the customer from initial product selection to specifying their investment pledge. Furthermore, their National Insurance ID is verified, ensuring 360˚ compliance.

4 – A Smooth Conclusion

Confirm Message

Next steps

UAT Testing

Prototyping

Finally, once all data is collected, it’s securely transmitted to the BE. The FE then provides clear messaging, confirming a successful onboarding experience. This leaves the customer feeling confident and ready for next steps. Wires were shared for feedback across the team, including stakeholder, technical leads and PO’s.

Fine tune the results

Sneak preview of the final delivered User Interface (UI)

The process is still fresh, typically next steps are Usability Testing and Heuristic Evaluation. Prototyping, with QAs on standby, is another option to verify and test stakeholder feedback.

Conclusion and Impact

Ambiguity

Clarity

These wireframes don’t just showcase a process; they tell a simple story of a complex customer experience.

By prioritising clarity (onboarding steps) and security (verification and OTP) this onboarding journey fosters trust and loyalty from the very first click.

Russell Webb | Shipped Product Design Work
01/05/2026
Redefining Consent Mngt
Turn regulatory complexity into a human-centered experience, showing enterprise-level strategic thinking across three touch points.

Contents

The Challenge
Prototyping & Flow Design
Lessons Learnt & Outcomes
The Challenge

Section 1

Dashboard UX

Front End UI

Back End Data Systems

Take a cluttered data dump and re-org with applied IA principles to prioritise key metrics.

Understand API constraints and latency through the developers eyes, ensuring the UI is designed gracefully while loading large datasets.

Goal

Implement the Account Information Service Provider (AISP) flow for Open Banking on desktop. Provide users with aggregated financial insights within a complex data Dashboard from multiple sources.

Secondary Goal: Demonstrate strong understanding of FE interactive design solutions for BE data systems.

The Problem

Open Banking consent is inherently complex and intimidating, leading to high drop-off rates and regulatory fines.

Strategic Opportunity: Design a Consent Management Dashboard that not only meets legal requirements (i.e. PSD2, CMA) but also builds trust, by making the flow transparent and effortless.

Business & User Goals

User Success Metric: Allow users to manage their third-party connections with confidence and clarity.

Gathering the principal players

This case study hinges on transforming a fragmented jigsaw of data into cohesive, high-trust UX that fosters familiarity and security.

UX Writing

AI UX Designer

Data Points

Thinking entity to symbolise Open Banking

This AI-UX designer employs the hybrid model:

Human

Journey designing, API and BE driven integrations, and user needs

A simple AI prompt

Create an abstract amorphous image, a ‘thinking’ entity for a financial dashboard using gradient blues and green

Navigation

An action-oriented, collapsible side nav needs to balance financial utilities (i.e. linked accounts and permission-driven consent) while managing who has access to what.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Defining the Gold Standard Row Content

API > Actionable

Prompt; Nano Banana

Shift the data from static information to high-trust insights. By balancing security indicators (timestamps, verified credit boost), the interface transforms complex Open Banking API calls into a true financial dashboard.
Prototyping & Flow Design

Section 2

Active consent

Data transparency

Design to steer strategy and make complexity feel simple.
Revoking Permissions

Progressive disclosure

Dashboard UX

Iconography

Financial dashboard

This Linked Accounts UI moves beyond a simple list of connections, transforming a technical req. into a high-value financial dashboard.

Revoking Permission
Revoking Permissions
Get started

Design Solution

Revoke: A two-step confirmation modal

Clearly show what is next

Demonstrate consequences (i.e. “You will lose access to X)

Keep the user informed

Prototyping

Goal

Introduce a clickable mid-fidelity prototype to define a concise, step-by-step journey, using a Just-in-Time disclosure model to manage information overload.

Introduced a concise, step-by-step journey summarising the revoke flow, using a Just-in-Time disclosure model to manage information overload.
Re-connect (or re-authorise)

AISP Flow

ACCOUNT Sharing

Micro-interactions

The Off-Ramp

Simplifying the renewal process with an option to “Revoke” with a single click.

Revoking Permission
Re-connect
Get started

Design Solution

What data is being shared

Which account

Confirmation

Consolidate Account Identity with real-time Transactional Intelligence. Transform fragmented data into a clear feedback that surfaces categorised spend and Live Balances for smarter budgeting.

Prototyping

Goal

Discover unwanted connections, show transparency by surfacing shared information
and provide control by allowing for a clear account selection process.

The goal is a clickable mid-fidelity prototype designed to test the clarity of the pre-consent screen, specifically the messaging around account selection (i.e. allowing multi-account selection vs. single-account).
Open Banking doesn’t have to feel like reading a terms-and-conditions doc. 😴 I’m obsessed with turning "The Gold Standard" of finance into human-centered UI. Think: ✅ Frictionless consent flows ✅ Trust-first UX patterns. Read the breakdown; https://t.co/dlw8TMU2Si #Hiring pic.twitter.com/eD8UAmPwP8
— Russell Webb (@russellwebb) March 30, 2026
Lessons Learnt & Outcomes

Section 3

DATA retention

Human-readable insight
The Just-in-Time Model

Cognitive overload

Data retention

Revocation & Renewal

The Takeaway: The “Off-Ramp” (revocation) is just as important for trust as the “On-Ramp” (onboarding). A Progressive Disclosure model for revoking permissions prevents information overload.

Outcome: A two-step confirmation modal for revocation.

Opportunity: Separating expired consents (< 90 days) from older data (> 90 days) could better inform users about long-term data retention policies.

High-Trust UX

Dashboard UX

Security

Using IA to instil trust

The Takeaway: Consent shouldn’t feel like a legal hurdle. It should feel like a security feature. By moving away from a data dump to applied IA, the complexity of PSD2/CMA requirements is rebranded as a transparency benefit.

Outcome: Gold Standard Row Content model that translates technical API calls into human-readable insights.

Opportunity: Logical Chunking can reduces cognitive friction, adding a I do not recognise flow with Fraud warning capability goes that extra step.
Figma Tip: Vertical v Horizontal

Component variants: Designing a data-rich responsive Figma table row and cell components with auto-layout should be set-up with component variants, giving the flexibility to swap in complementary formats for differing data points.

Cell Design: For the ultimate flexibility, component cells should be stacked in a vertical AL column, set to (W) Fill.

Outcomes

The project proved that prioritising transparency and control in regulatory design is the highest leverage move. Focus on clear FE design, BE clarity, and the details (i.e. 90 day consents) to transform a legal requirement into a trust-building feature.

Go Beyond the Screenshot

Static frames only tell half the story. To truly understand the user journey, to feel the interaction several high-fidelity Figma prototypes are available for walkthroughs.

Advanced prototyping

Auto Layout

Microinteractions

Design Systems

Please get in touch and request access

Get in touch

Revoke | Re-connect
10/03/2026
Solving complex user problems
💳 This Case Study focuses on Payments.

🧠 This Case Study uses AI: For corrective grammatical tasks, to verify facts and corroborate Journey Mapping insights.

🔒 Details are protected by NDAs – Customer outputs have been disguised. UX best practices remains.

My E2E Design Process

ENTERPRISE

automny

🚀 From Discovery to Design and Solution

01– Problem Statement: Create a user-friendly and simplified mobile journey that helps seniors mitigate their fraud anxiety, meet financial regulatory standards and ultimately manage their finances to make informed financial decisions within the ecosystem of UK Payments (i.e. improve their financial wellness).

02 – Segmentation: Identify distinct segments within the “aging parent” demographic (e.g., healthy retirees, chronic conditions, single parents). Target a segment that can most benefit from a mobile journey, particularly the UK Payment process.

03 – Research & Strategy: Use quantitative data with qualitative insights to inform a Customer Journey Map. Visualise the financial and emotional challenges faced by each segment, across a given scenario.

04 – Wire framing Design Decisions: Making trade-offs and delivering a justified UX solution.

05– Conclusion & Outcomes – Key takeouts on why this case study successfully translated a complex real-world business problem into an initiative UX wireframe and Final UI flow.
Problem & Challenge

01.01

Complex

Regulatory

Senior user groups face significant barriers to mobile adoption, especially with the complexities of a Payment flow.

Obstacles: Fear of fraud | High cognitive load | Digital literacy gaps.

Design challenge: Create a simplified and intuitive Payment journey, incorporating robust security and multi-steps required to meet regulatory standards.

Current flow: High transaction abandonment and increased financial stress.
Low-anxiety mobile payment

01.02

Financial Fears

Map out a diverse range of seniors’ on a specific financial journey.

Identify recurring frustrations and unmet needs to form themes.

Design System: Execute a learned solution to solving senior financial wellness for this highly complex task.

My experience consistently highlights that fear of fraud, cognitive load and digital literacy are major barriers to successful task completion for seniors. These fears are amplified during critical tasks like payments with multiple cognitive and security demands.

Teams struggle to create a mobile payment flow that simultaneously meets modern security standards (e.g. multi-factor authentication, biometric prompts, COP) that minimises transaction abandonment, locked accounts, and user financial anxiety.

Business problem | Design challenge

01.03

Robust

Multi Step

Unclear Alerts

Balancing the need for a simplified flow, with the need for a robust, secure multi-step flow – required to mitigate fraud anxiety and meet industry standards – is the biggest challenge.

Simplify complex tasks

Prioritises key information while safeguarding users from fraud

Offers context-sensitive, proactive (not crisis-driven) support tools

Pain points: Unintuitive interfaces, difficulty with small text/controls, fear of scams/fraud, loss of control, and lack of support, unclear fraud alerts, and difficulties with two-factor or biometric authentication.

👉 Complex flows increase cognitive load
Segmentation

PERSONAS

🧠 These Personas use AI: To qualify primary and personal experience, to generate profile photography and clarify vocabulary.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Tech-Savvy

02.01

Retired professor of English Literature

“I’m not afraid of technology, but I want it to be simple and intuitive. I shouldn’t have to read a manual to figure out how to use something basic.”

Tech-Wary

02.02

Retired accountant

“I’m old-fashioned. I don’t need all these fancy gadgets. I get by just fine with what I have.”

High-Net-Worth

02.03

Integration with existing financial accounts, personalised recommendations, and proactive alerts.

Focus: User-friendly interface, advanced features like budgeting tools, investment tracking, and retirement planning calculators.

Caregiver-Dependent

02.04

Problem Framing: Defining the business problem and the user needs.

Focus: Features that enable family members or caregivers to assist with financial management, such as shared access, bill pay assistance, and alerts for suspicious activity.

Single-Senior

02.05

Location: Independent living community in a suburban area.

Characteristics: May face unique financial challenges such as navigating retirement income on a single income, planning for long-term care, and estate planning.

“Sandwich Generation”

02.06

Design Decisions: Trade-offs, justification and Insight.

Characteristics: Still providing financial support to adult children while managing their own retirement needs.

Personas Take-outs:
- Accessibility: Visual impairments, cognitive decline, and physical limitations. i.e larger fonts, high-contrast colours, and voice-activated controls.
- Personalisation: Adapt to individual needs and preferences.
- Security: Prioritise security and privacy, protecting seniors’ sensitive financial information. i.e. reduce anxiety
- Promote financial wellness and stress management: Offer tools and resources to help the Sandwich Generation manage stress and prioritise their own financial well-being.
Research & Strategy

Journey Mapping User Profile

03.01

Explore the specific scenario for a Tech-Wary senior, with a lack of support, and simple banking needs:

Mrs. Evelyn Davies, 78 years old, needs to pay her monthly electricity bill.

Journey Mapping Scenario: She receives a paper bill in the mail. She has a basic current account with a local bank branch, but prefers to handle her finances in person. However, the nearest branch is now closed, and she has limited access to reliable internet.

Lack of digital literacy | Limited technological access | Reduced physical branch access | Lack of support

‘Make a payment’ Journey Map

03.02

Cognitive decline

Reduced steps

Fraud anxiety

Design Decisions

Making trade-offs and delivering a justified UX solution.

04.01

Peronalisation

Agile mindset

Make a Payment

UX designers are re-writing their playbook when creating the UK Payment digital experiences. Using native mobile patterns that provide a white glove experience, reacting to task-orientated user needs.

1. The Accessibility-First Mindset

Inclusive Design from the Start: Not just meeting legal standards incl. WCAG, but ensuring it’s a shared team responsibility to implement descriptive alt text for images and proper and strong visual cues (colour, icons, etc) for assistive technologies.

2. ‘Hand-Holding’ experience

Mobile patterns are evolving, guiding users through their tasks with minimal friction, Personalisation and Progressive Disclosure all reduce the cognitive load.

3. Task-Oriented Patterns

The goal is to help users complete their objectives as efficiently and effortlessly as possible. Push-back on nice-to-haves
The ‘Make a Payment’ Journey, simplified

04.02

Business logic

Data
From 13-Steps;

Start – Presenting the primary task. Establish task focus.

Select payment type – Define the transaction context to enable contextual filtering.

To > From – Source and destination mapping.

Existing or New Beneficiary – Slightly prioritise recall (existing payee) over data entry (new payee) to reduce user effort.

Confirmations of Payee – Critical security check. Provides reassurance.

Payment details – Ensure the payment’s purpose is accurately communicated.

_^[Optional]Select currency – Presented only when relevant

_^[Optional]International payment – Trigger specialised fields and disclosures, only when the system detects an international need.

_^[Optional] Fees – Ensure transparency by proactively disclosing all costs at the point of decision, building user trust.

Scheduled – For future payments as a secondary payment path.

Fraud Warnings – UX mechanism to initiate a Reason for payment.

Review – Single-screen summary allowing the user to execute the F-pattern check.

Authorisation – A strong authentication layer (e.g., biometric, PIN) to prevent fraud.

To 4-steps;

The What – Initiation and Context

The Who – Beneficiary and Destination

How Much – Transaction Details and Customisation

The Final Check – Execution Preparation
Wire Framing Design Decisions

04.03

From 13 > 4

Simplified: The “What” – Initiation and Context | The “Who” – Beneficiary and Destination | “How Much” – Transaction Details and Customisation | The Final Check – Execution

Wireframes opportunities

One Action Per Screen

04.04

DEVELOPMENT ALIGNMENT

To avoid overwhelming the user, limit a screen to have a single, clear primary action only. This approach reduces cognitive load.

Input fields with dual functionality

04.05

DUAL FUNCTIONLITY

While active, focused and error states are expected these components should be default for both Existing Beneficiary and New Beneficiary reducing two mini journeys to one i.e. no read-only state for Existing Beneficiary.

Realising the final UI

04.05

SNEAK PREVIEW

From defining a real-world business problem, in one of the most complex ‘Make a payment’ journeys, I was able to use UX tools to uncover pain points and leverage touch points to inform an initiative UX wireframe flow that in turn informed the final UI.

Transfer to

Solving Step 4 ‘Locating Information’ Highlight CTAs, account numbers, due dates, with responsive labelling

To identify the destination of the funds.

Payments Details

iOS Dark Mode is as important as ever. Ensuring the Design System operates with the appropriate Variables is key to efficiencies.

Transaction parameters: Primarily the amount to and from, the date, source account, and other dynamic information.

Review

Android and Google’s Material Design, although occupying a smaller space in HNW UK fintechs, globally is a recognised and must-have part of your DS.

Summary screen: User interaction is minimal, usually a Confirm or Back.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.
Conclusion & Outcomes

This case study successfully translated a complex real-world business problem into an initiative UX wireframe and Final UI flow.

By using research and design tools to uncover critical pain points, I designed an E2E ‘Make a Payment’ journey with feature parity, respect to development needs with native patterns integration within a comprehensive Design System, balancing security standards with essential user simplicity.

05.01

Enterprise UX UI

Delivered in 3 Mths

Key stakeholders audience established 2-months before proposed Sprint through workshopping and client relationships.

Pain points highlighted early, including CoP, Secondary payment reference and scope (i.e Feed and FX was descoped)

Cross platform UX and UI for Alpha release delivered and demo’d in 3-months

Developer and BA handover scheduled early for estimation and to provide clarity

Design System integrated and UX Copy Check signed-off

No deadlines missed 🙂

AI Experiment

More Case Studies
14/10/2025
Raising the bar for customer-facing support UX
TLDR: An AI-Powered Customer Service Revolution – AI is transforming customer service by offering personalised solutions, and UX plays a crucial role in creating intuitive and engaging CX.
Contents

Revolutionising Customer Service

User Research and UX Design

Developing a user centred mode

My UX Process and Impact

1. Self Service and Hyper-Personalisation

2. Conversational Interface with Human Handoff

3. Unified Customer History

Outcomes, split by discipline
Revolutionising Customer Service

AI-Powered Solutions for Financial Institutions

AI revolutions

Personalisation

Discover how AI is transforming customer service in the financial industry. Learn about personalised knowledge bases, integrated chatbots, and unified customer histories that enhance customer satisfaction and operational efficiency.

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Imagine a world where customer service is not just efficient but truly personalised.

The Challenge: In today’s fast-paced digital age, financial institutions face the challenge of providing exceptional customer support while maintaining operational efficiency.

Traditional customer service UX often falls short in meeting the diverse needs and expectations of modern customers.

The Solution: This case study explores how AI can revolutionise customer service by creating seamless support and behind-the-scenes tools that put people and businesses in control of their money.

User research and UX Design

Ability <> Access <> TIME

Quick

Facts

HIstory

What the product needs to accomplish.

Evidence informs that Customer Service Representative (CSR) typically operate on multiple panes of glass. Extracting snippets of information to help customers, within the guardrails of their abilities, their access and a timeframe (a phone call). How can this be combined, for the CSR, and potentially for self-serving customers?

Three persona-types, three outputs;

1. Mr ‘Self-service’; They need a tool highlighting quick-and-easy answers to their questions, without having to contact a CSR.

CSR can also provide support and is able to troubleshoot issues and resolve customer problems to deeper issues.

2. Mrs ‘To-the-point’; Some customers want only the facts, escalating issues to a human CSR when necessary.

3. Mr ‘Analytical’; CSRs need to have a complete understanding of a customer’s history in order to provide effective support.

Developing a user centred mode

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Machine learning

Self-Service

knowledge Hub

Chatbot

Chatbot

Personalised recommendations, automating routine tasks, (like FAQs) and predictive analytics are just some of the benefits Machine Learning has in the field of UX Customer Service.

It was clear for this project there was no one silver bullet. Providing a suite of support from self-service to employing Natural Language Processing (NLP) can all contribute to improving the overall customer experience. Understanding the wealth of possibilities Artificial Intelligence can provide, there was a focussed on three key areas:

1. Personalised Knowledge Base

1 – Start – Wireframe

2 – Knowledge Hub – User Accounts + Proactive Suggestion

3 – Knowledge Hub – Credit Card Wireframes

An AI-powered knowledge base that proactively suggests relevant articles or FAQs based on the customer’s specific query. More about ‘Proactive Suggestion’ later.

2. Integrated Chatbots with Human Handoff

An AI chatbot that can handle simple inquiries but seamlessly transitions to a human agent when the conversation becomes complex or requires personalised assistance.

Allowing the AI to analyse customer sentiment enables the bot and the CSR to tailor their responses to better meet customer needs and improve satisfaction.

3. Unified Customer History

A centralised platform that provides agents with a complete view of a customer’s interactions, including past inquiries, support cases, proactively alerts, and account history.

Interlude

History

Trends

knowledge Hub

Proactive Suggestion

AI can anticipate customer needs and offer solutions before the customer even asks through machine learning algorithms (customer’s history, product information and industry trends ) to predict proactively.

For example: recommending accessories to recently purchased items, offering troubleshooting tips if a customer has contacted support multiple times, etc.

Here the AI recognises this customer has recently been the victim of fraud (see Account Overview note). The right sidebar offers a platform for the UI to proactively generate helpful links to the CSR before they have even asked.

***AI-Powered Customer Service Revolution*** – AI is transforming customer service by offering personalised solutions, and UX plays a crucial role in creating engaging CX. A satisfying customer experience. https://t.co/hVRFcxgYHj pic.twitter.com/iEsD3nxO1V
— Russell Webb (@russellwebb) October 16, 2024

Self service

conversational UI

Unified History

Process and Impact

Refined wireframes, optimise self-service and conversational AI

Starting with several wire-framed directions, then through osmosis filtered down concepts to self-service, a conversational UI and omnichannel integration within the form of a centralised platform. Based on experience and number of assumptions, wireframes were generated to bolster clarification.

Variants evolved in parallel that merged into a winning model for all three proposals;

Self Service and Hyper-Personalisation

Proactively suggestion, relevant articles and FAQs

A Personalised Knowledge Base empowers customers to self-serve, with dual-function to help CSR agents to provide targeted support. Aligned to business objectives, these external and internal tools thrive on individual customer data, preferences and behaviour.

A Personalised Knowledge Base empowers customers to self-serve, with dual-function to help CSR agents to provide support.

The Customer

Customers are presented with a user-friendly interface to reduce wait times. Empowered customers can self-serve by searching for documents, tutorials (or anything), related to their query. They have prompted categories to help with Discovery and personalised topics that are trending today.

On login, the user is greeted with an app-like interface. This contemporary approach guides them through top-level categories, i.e. Personal and Business finance, then using a navigation as a signpost they are able to drill-down on an Account Overview and User Guide. Tailored topics are surfaced (based on search and account history) within the sidebar quick links.

The interface has push-points throughout all sections both introduce AI recommendations and provide personalised AI financial insight.

The CSR

Using the same B2C interface, CSR agents can access and add-to content, generate most frequently asked self-service tutorials and use the Knowledge Base to improve their own skills.

Conversational Interface with Human Handoff

Human-AI Hybrid

A smooth transition from AI chatbot, with ‘sentiment analysis’ baked-in, to a human agent

An AI chatbot that can handle simple inquiries but seamlessly transitions to a human agent when the conversation becomes complex or requires personalised assistance. This hand-over reduces agent workload for routine queries which improves customer satisfaction with faster responses, but also ensures a smooth transition to human support when needed.

Chatbot Journey

From Start through Engagement to Conclusion

1 – Start – Lower right AI Chatbot provides permanent support.

3 – Engage – Once the customer interacts, the AI Chatbot comes alive with prompts and transitions.

5 – Conclude – Provide a summary and ask for feedback

2 – Expand – On hover, the customer enjoys a short introduction

4 – Transition – Seamlessly transitions to a human agent when the conversation becomes complex.

NLP

Natural Language Processing (NLP)

Gauge customer emotions from an AI-Chatbot that uses sentiment analysis baked-in.

Properly trained, the AI can recognise the underlying intent behind customer queries, even if expressed differently and provide the right hand-off to the right CSR.

NLP – AI – Expanded – Ask the AI anything, it can even suggest informed prompts.

NLP – AI – Transition – The right Saving Expert CSR provide the right rates and the right links
Unified Customer History

360˚ View

A centralised platform | An assistant that proactively spot patterns to anticipate customer needs

A centralised platform that provides agents with a complete view of a customer’s interactions, including past inquiries, support cases, account history and proactively alerts. For example, if a customer is nearing their contract expiration and has a high purchase frequency, the platform could proactively offer renewal terms or upsell opportunities.

A single platform to access all customer interaction data:
- Reduces the need for customers to repeat information
- Enables agents to provide personalised and informed assistance
- Spot patterns and insights that might inform business decisions
- Anticipate customer needs and provide timely solutions with proactive support
A 360˚ view that reduces repetition, provides informed assistance, and delivers insights that inform business
To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Reduce workload

Data Insight

Personalisation

360˚

Outcomes, split by discipline

It is clear that AI enhances personalisation, efficiency, and problem-solving. But how can UX leverage these to create a more human experience.
Business Outcomes:

Operational Efficiency: AI streamlines processes and reduces agent workload.

Data-Driven Insights: AI provides valuable customer data for informed decisions.

Cost Reduction: AI automates tasks and reduces operational costs.

UX Outcomes:

Personalisation: AI can tailor the Self-Service experience, and brings Hyper-Personalisation to individual needs.

Seamlessness: AI integrates chatbots and provides a unified customer view.

Proactive Support: AI anticipates customer needs to find answers fast and can provide that 360 view at-a-glance.
UX & AI | Future-proof partners

Overall, UX and AI empowers businesses to deliver exceptional customer experiences, improve efficiency, and gain that competitive edge.

Want to discuss more?

How AI is transforming CS
Empowering users with the financial tools they deserve

Mastering Design Theory and Lean Agile

Solve big problems, fast.

How delight and speed are rewriting our UX playbooks

More Fintech Case Studies
16/10/2024
Using proto-personas to Know your user – Pt I
Execute a Content Audit using proto-personas to gain a deeper understanding of user needs. Consolidate personas, communicate findings, to achieve a deeper understanding of all users.
_{Empower UX to move forward with experience maps to uncover user behaviour and emotions.}
Contents

Design with the dark mode trend front-of-mind
Gather the troops
Conduct extensive desk research to develop a deep understanding
Dig deeper to understand your users problems, needs and goals
Common Thread and Outcomes
Next steps
Please note; for client confidentiality sensitive parts of all imagery has been pixelated. All work is copyright ©RussellWebbDesign 2024

Hard Skills:

Design Process

Service Blueprint

Proto-Personas

Soft Skills:

Service Design

Journey Mapping

Customer Experience Design

Full List →

Limited Data, Maximum Impact

Delivering with resource constraints and tight timeline, this Content Audit / Inventory Battle Plan leverages the power of proto-personas as the primary intel.

Gather the troops

Assemble all content audit data

Regulated design environments are often constrained – it is important to offer agility and be resourceful. This level of Service Design would benefit from ;
- Customer surveys
- Stakeholder interviews
- Analytics (rationalised down into meaningful chunks)
…and additional data. For this UX project the starting point was an extended collection of unverified proto-personas. These were then rationalised in to bucketed or grouped personas.

Navigating the complexity of proto-personas

Proto-personas: Adaptability in the face of organisational inertia and provide clarity to maintain stakeholder engagement.

Adapt UX to audience and personas

Larger organisations, often new agile methodologies, may still be in the early stages of embracing lean UX, so adapt your approach to your audience is a key skill.

When personas are agreed and validated as the only ‘source of truth’ – there also must be alignment that these refine and adapt personas over time, ensuring that they remain relevant.

Overly detailed personas can dilute effectiveness, especially for large organisations. This task focused on consolidating personas for greater clarity.

Focussed personas work well. Larger organisations multiply these audience types and their impact is reduced. This task looked at grouping and sorting by commonalities

Conduct extensive desk research to develop a deep understanding

Embark on a deep dive of user research to become the brand’s go-to expert on your target audience.

Absorb insights

Take the time to listen and absorb – Become the brand’s knowledge hub.

Absorbing insights and data is vital. Time spent at this stage of your research is key for informing a future IA.

Dig deeper to understand your users problems, needs and goals

Experience maps are your tools to excavate the nuances of user behaviour, emotions, and motivations. Use this to win over their hearts and minds.

Empathy-driven UX; Personas and experience maps

By delving into the emotional landscape of proto-personas, designers can gain a deeper user understanding. This insight fuelled the development of a clear and empathetic experience map.

Understand your audience types ; Their needs, aspirations, and behaviours. Commonalities and patterns will surface.

Common Thread and Outcomes

By selecting the most crucial key phrases from the workshop discussions, I was able to distil the essence of each audience type and crafted them into a call-to-arms that galvanised the mapping stage

Expertise within the team distilled the most essential insights (i.e. OUTCOMES), transforming them into powerful ‘calls to arms’ that served as the foundation for the mapping stage.

Next steps

By consolidating vast amounts of data into prototype persona groups, this Service Design approach conveys insights for stakeholders to digest, leading to deeper user understanding for all involved. This then informs the next stage, ‘Using Experience Maps to uncover user behaviour and emotions.’

Please note; for client confidentiality sensitive parts of all imagery has been pixelated. All work is copyright ©RussellWebbDesign 2024

Pique’d your interest?

This is but part of a selection of design information russellwebbdesign generated for the creative community out there. Please contact me further to discuss how your brand can benefit from the new channel: info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.

CASE STUDIES

Design with the dark mode trend front-of-mind

Delight, speed and satisfaction are rewriting our UX playbooks in finance

Find out more
14/12/2023
Dashboard UX to Business UI
Enterprise-level, real-time data from multiple sources, instantly accessed, no more hunting.
—
A single-source-of-truth of unifying insights speak volumes: 56% iPad growth in just 1.5 years over 100K client meetings

Contents

The Problem Statement
Achieving speed, clarity, and brand harmony
Reimagining Client Meetings
Sketching a tailored experience
Realising a final solution
Design Trade-Offs
Global Digital Shift
The Problem Statement

Problem framing

Best practices

Design principles

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.
Within a strictly regulated financial environment my clients use dashboards data every day.

Users

Advice

Quotes

Investment

As the world’s largest wealth manager, catering to affluent clients requires exclusive online services like advice, quotes and investment strategies, delivered digitally. Internal systems application empower the two principal user groups;

Customer Consultant Associates

Customer Consultant* (CCA’s/CC’s),

Assembling these customer meetings takes time, accessing strictly private data to provide a complete, competitive and professional service requires a tailored and specialised tool – of which the Customer Meeting App* is the bank’s primary channel.

What are the driving factors for developing a dashboard?

Strategic insights

Information architecture

Single source

Imagine client meetings where crucial information is instantly accessible, scattered data unified, and time spent hunting replaced by strategic insights. This is the potentially transformative power of the Customer Meeting App’s dashboard, built around three “must-have” features:

Single point of access for disparate data
Instead of opening various applications, interfaces, or online databases, the CCA’s/CC’s have a real-time dashboard.

Broad overview with drill down capabilities
A dynamic dashboard, digital documentation and secure access.

Easier, faster, sign source of truth
Consolidated statistic, statues displays, contextual information, and ‘Edit’ functionality placed intelligently for quick consumption.
Achieving speed, clarity, and brand harmony

Journey

Processes

Re-imagine

Problem and Opportunity

The existing offering had become redundant, with processes and previous ways of working no longer relevant or appropriate. The client required the seamless integration of data from third-party repositories and a significantly improved user journey. This presented a clear opportunity to re-imagine the complete ‘Create a Customer Meeting’ user journey.

Users do drive requirements, but in business there is another controlling factor. To sync the ‘Create a Customer Meeting’ , the ‘Adding account numbers’ journey there was a further requirement;.

Funding

Dashboard design best practice

There are 3 dashboard design principles that are drove decisions and are considered best practice:

Personalisation, speed and convenience will drive any functional improvement and this project was no exception

1. Five-second insight

Funding was a principal driver for this project. Empowering a more intuitive process to adding customer data (account numbers, quote links, investment profile links, and upcoming future services) at a glance was key to the baseline UX.

2. Inverted pyramid layout

The inverted triangle displays the most significant insights on the top, trends in the middle, and granular details towards the bottom.

3. Brand champion and ensure DS achievability

Championing UCD principles for both organisation’s values and consistency was a challenge. Without a dedicated UX stakeholder, negotiating a new global Design System, within budget and development constraints proved demanding.
Reimagining Client Meetings

Scalability

Visual Hierarchy

Visual Design

To reiterate the design process, I went through the following:
1. Step 1 – Start with the user needs
  The foundation of successful design. Streamlining the preparation of a meeting, and principally future proofing the Create a Meeting process with a scalable UI that can seamlessly integrate new data repositories, ensuring long-term flexibility.
2. Step 2 – Segment the experience in to ‘zones’
  The on-screen real estate delivers a quick look experience prioritising top from bottom.
3. Step 3 – Test and Challenge through Prototyping
  Visualising up to 12 users’ journeys leads for better understanding and smoother development. Developers also need reassurance that this would be a boxed development and will not impact working code.
Familiar web tab patterns are used as quick-links behind drop-down.
Driving Discovery UX within a challenging Agile environment

Hierarchy

F-Pattern

Low-fidelity prototyping

Early sketches are crucial: They reveal the potential of a dashboard, emphasising hierarchy through top-down, left-to-right user scanning patterns. Grouping key data, utilising white space, and enabling light touch drill-down are key drivers.

Scope and hierarchy: Initial sketches focus on what’s important, pushing a hierarchical arrangement that guides the user’s eye. Data is prioritised with ‘glance-access’ to preview Meeting Name at the top, followed by Last Modified and owner information.

Chain of command flow: Expanding on the ‘Mini’ concept, this ‘Maxi’ Dashboard version offers the full experience. Enabling the CCA’s/CC’s to very quickly assess top level meeting status and drill-down to Privacy Setting, customer ID photos, and Mode of Contact.

Sketching a tailored experience

Early sketches are invaluable when demonstrating the power of a dashboard. Hierarchy is brought to the forefront as we know users organically scan top-to-bottom, left-to-right, so grouping what’s important, employing white space and allowing light touch drill-down are all key drivers.

What is in scope: These initial sketches start to show the power of a dashboard. Pushing the hierarchical arrangement, the user’s eyes organically concentrate from top to bottom, left to right. We have the data, so embracing the Meeting Name and grouping the Last Modified through to the Meeting Owner data just makes sense.

Expanding on the ‘Mini’ concept, this ‘Maxi’ Dashboard version offers the full experience.

Estimation sketches

In Agile, pre-estimation is an important ceremony before sprinting. An efficient method of conveying your UI is to sketch and quickly map out the flow, the user interactions and where the final CTAs might be..

Great for conveying ideas, great for providing developers with top-level UI when it comes to their estimations

In Agile, pre-estimation is an important ceremony before sprinting.
Realising a final solution

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

Here we can see a Customer Consultant Associates (CCA’s) in the later stages of processing the outcomes of the meeting ‘New Economy Efficiencies’. The status of the meeting is highlighted Published and ready to be sync’d with the customer advisors iPad.

A conceptual dashboard with multiple layers.

The final solution solved both the scalability problem, providing easy access to account numbers, the ability to add other account numbers, visibility on the meeting date and time, and the meeting status and who is the meeting organiser, all there front-of-stall for the user. Complete transparency on meeting detail, including location, meeting language an whether the meeting has typed notes and freehand notes plus special features including packaging the meeting contents ready to send the customer and associating the meeting with a customer ID.

A new dashboard suite is here;
- Highly Readable
- Inherently Scalable
- Data-Driven
Conceptual dashboard design revolves a rationale of multiple layers, user actions reveal more or less of those layers depending on their needs and wants.
Design Trade-Offs

Business Reality

ROI

Inverted Pyramid

One key factor in the development (and acceptance) of this new radical design was ‘achievability’. Funding in a key developmental constraint with financial services, without it a project will not leave the ground – designing with business realities is a UX key skill.

Account number drill-down

Deal breaking UX: Leverage real-wold feedback and user needs from complex requirements to simple solutions: Multi-account number functionality

The UX was sold into the business as streamlining the ‘Create a Meeting’ user flow at a single glance, adding value at the advisory level.

There are four (4) account numbers associated with this meeting. The user is able to hover, edit or launch a pop-over dialog box to create an account specific meeting from this functionality.

Hierarchical details

From ‘inverted triangle’ concepts, to hover state ‘tooltip’ functionality.

Providing a tiered ‘inverted triangle’ proved to be an excellent facilitator for the single-point of truth concept. Employing hover state ‘tooltip’ functionality allowed for a broad overview with drill-down capabilities.

Global Digital Shift

Adoption

Impact

Massive UX Reach

To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 10K plus HNW users.

190 offices | Growth from 8% to 56% | 1.5 years

40

Countries

190

Offices

100k

100,000 Meetings

48%

8% to 56% Worldwide Growth

The bank is present in more than 40 countries with approximately half of their 190 offices are in western Europe, where half of the Customer Meeting App meetings are delivered on the iPad. This is a phenomenal growth from 8% to 56% worldwide in the last 18 months.

100,000 meetings prepared and delivered via the application each year. A true revolution!

*Names changed to protect the innocent
13/06/2023

1 2 3 4

Russell Webb Design

Get your fill of UX trends, case studies and best practice

Blog
About
FAQs
Authors

Events
Shop
Patterns
Themes

Twenty Twenty-Five

Designed with WordPress

Loading Comments...

Write a Comment...

Email (Required)

Name (Required)

Website