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: +Case Studies

Documented here are my UX Case Studies and their powerful results. These success stories are used here as a showcase, to fuel continuous learning for myself and others, and to optimise my design process. Enjoy…

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
Blank Canvas to Digital Playground
A Designer’s AI Experiment

As a UX designer, I’m always looking for ways to streamline my workflow and push creative boundaries. So when I heard about Figma’s new AI capabilities ‘Make’, I had to see it in action. Can a tool quickly prototype a complete, narrative-driven landing page from scratch? I decided to put it to the test, and the results were more than I expected.

From Uninspired to Unstoppable

My goal was to create a modern, experimental landing page for a creative digital business. The AI prompt was simple yet specific:

"Design a landing page for a creative digital business with an emphasis on design experimentation, digital visuals, and technology."

What happened next was a fascinating look into the future of design.

AI PROCESS

The AI at Work

From a blank canvas, the AI started to work its magic.

78 Seconds later…

it wasn’t just generating a static layout, it was building a complete design system. It created components, wrote placeholder copy, and even the React underlying code.

Scroll down

Ignite Your Imagination: Transform Your Blank Canvas into a Digital Playground

After a few more minutes, the result was a fully designed, visually rich landing page.

Breathe Life into Pixels: Watch Your Digital Playground Emerge from a Blank Canvas

The AI interpreted my prompt and delivered a bold hero section with eye-catching gradients, a featured work gallery with interactive cards, and sections dedicated to services and industry trends.

Responsiveness

Seeing the Design in Action

The AI handled responsiveness very impressively. A mobile-first approach today is essential, the tool automatically created a transition for different screen sizes, providing solutions for interactive elements and flawless responsiveness.

The Big Question

Validation or Innovation?

After seeing the final product, I’m left with a profound question: Did this tool save time, or did it save me from a necessary part of the creative process?

There’s no doubt that the AI delivered a solid foundation, tackling about 60% of the work with remarkable speed. It created a baseline of good UX patterns and clean code.

However, as a designer who lives and breathes this work, I have to ask: Are our (human) base-level patterns enough, or should it challenge us to push web design further?

Stop Dreaming, Start Building: The AI managed to capture responsive versioning too.
Powerful, but…

While this technology is powerful, it comes with a few caveats:
- It’s currently an Enterprise-level feature, locked behind a paywall.
- The feature must be enabled by an administrator. There is cost, and a credit count
For now, these tools can save us from the mundane, repetitive tasks. But the real magic of design, the element that makes a project truly stand out is the unique human perspective. It’s the storytelling, the subtle emotional cues, and the a-ha moments that only a human designer can bring.

So, while AI can build the foundation, I believe our role is to continue pushing the boundaries, ensuring that every design tells a meaningful story.

What do you think? Is this the future of design, or just a powerful new tool in our creative arsenal?
Discover high-impact UX case studies

Portfolio case studies describing design, my UX process, and business impact.

From boosting user adoption in fintech, to improving trust with responsible gambling through to retaining Millennials in the world of ‘digital lotteries UX’ to leveraging key USPs for mobile healthcare.

My Case Studies

Quick-Look PDF
10/09/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
Discovery Workshop to Roadmap in 3 days
TLDR; Navigating Ambiguity
Using workshop techniques I validated personas to surface a UI that promoted next steps for a Candidate Portal.
—
Solving 3 big problems in 3 days; Aligning the target audiences through journey mapping, defining a Value Proposition and building a draft Product Roadmap.

Contents

Help clients solve big problems, fast

Defining the vision and setting scope

Ideation and roadmap

4 principle concepts

Boost engagement

3 big problems in 3 days
Hard Skills:

Journey Mapping

Research

Visual Design

Goal-oriented Roadmap

Soft Skills:

Empathy

Collaboration

Critical Thinking

Full List →
How to facilitate an ideation workshop around solving problems, understanding through ideation and knowledge sharing (based on agreed on personas)

Help clients solve big problems, fast

This user-centred and business workshop focussed on;
- Business Problem Statement – The What
- Value Proposition Statement – How to excite users / customers
- Product Roadmap – Action/Next Steps
What we set out to achieve

Recently I was leading the Discovery phase for a multinational publishing, education & recruitment company. My prime objective was to facilitate the generation of a Value Proposition within a collaborative workshop environment based around three hypotheses;
- Understand – ‘Getting the right idea’ and ‘getting the idea right’
- Ideate – Align the team | Get creative
- Roadmap – Present, prioritise and theme
Defining Vision, setting scope

How to facilitate an ideation workshop around solving problems, understanding through ideation, knowledge sharing (based on agreed on personas)

Persona Playback, Value Propositions and Knowledge Sharing

Validating Personas proved crucial. Early ‘Understand’ sessions proved invaluable in terms of getting to know the client’s ecosystem and getting closer to the overall workshop goals. Goals included personas improvements using a Value Proposition Canvas to expose misunderstandings, define Jobs To Be Done (JTBD) and Pains and Gains – more importantly it identifying key themes and services that would appeal to these personas. This ensured any misalignment did not cascade down to the Journey Maps on Day 2

What we were trying to achieve using ‘Ask the experts’. Early touch points included attracting educational establishments and employers using baked-in services, plus having the ability to grow the market was paramount for particular personas. The client had the raw building blocks and the workflow for their ‘niche product for a niche market’, communicating that vision was the challenge.

Customer Journey Mapping – Make the best hiring decision

How to facilitate an ideation workshop around solving problems, understanding through ideation, knowledge sharing (based on agreed on personas)

Gaining alignment across stakeholders on what making the ‘Best hiring decision’ journey looked like. Creating a visual representation of every experience a key persona(s) had with the client helped to tell a story, more importantly this led to a prioritised ideation list (visual solutions).

Making the Best Hiring Decision
- Initial stages – Planning and approval
- Intermittent stage – Profile building, search and selection tools
- Final stage – Interview, agreement and follow-on activities
The exercise also highlighted a level of anxiousness, through to excitement and eventual relief. A truly valuable activity that presented opportunities that were eventually clustered and presented to the group as an adaptive Crazy 8 activity.

Ideation and Roadmap

Finally, this led on the most challenging section of the workshop, the Ideation Sessions. This resulted in 4 concept areas to prioritise on the road map and populate a timeline.

Sketching can be scary!

Demonstrate the steps to avoid a cold start.

Push back on judgement calls and champion quantity over quality. All participants should take advantage of the knowledge in the room, bounce ideas off each other and improve through collaboration. A process of silent note taking, constrained to a page/large Post-It note, resulted in 4 principal concepts.
4 Principle Concepts
1. Data Driven Profile & Test Builder

Value: shorter tests, improve the UX

Add key indicators to job profile definition

Guided self-service model for selection, surfacing details for expert personas

Fit candidate suggestion tool from an employee pool

Connect to other API portals for greater value

2. Right Insights for the Right User

Value: Personalisation. Summary driven..

AI best fit suggestions based on profile.

Rate candidates with a media rich likelihood indicator.

Deliver <MORE> understandable expert insight
3. Candidate Experience & Value

Value: candidate self-improvement.

Shorter assessments, setting target thresholds

Candidate Reward with feedback, tips to improve or learn, job suggestions

Be fair & honest to the candidate on possible mismatch on values and culture

Store profiles, experiences, and test results

4. From Hiring to Performance, and Back

Value: better decision = better employees.

360˚ view – track new hires, top performers inform future hiring.

Performance data and employee self-ratings to inform future profile building and hiring decisions and guide personal development

Compare performance & career progress to your peers
Boosting Engagement

Shortcuts to Success
Shortcuts to Success

* Faster, more reliable tests: Reduce testing time and increase reliability

Personalised engagement: Tailor tests to individual needs, leading to higher engagement and lower churn.

Business-focused UX: Align testing with business goals by leveraging KPIs; Targeted feature development.

Supercharge Testing

Impactful Tests

Reduced client churn: Shorter, feedback-driven tests foster client satisfaction and retention.

Diversity in hiring: Objective, efficient testing helps attract diverse talent and improve hiring decisions.

* Shared Data; All backed up by a global database

Boost diversity & retention

Innovation for Early Adopters

* Modernise testing: Introduce innovative concepts too early adopters only.

Candidate quality and validity: Prioritise attracting the best candidates. Ensure test results are accurate and reliable.

Goal-oriented roadmap: Leverage learnings to craft a clear roadmap for continuous improvement.

Better candidates | More valid results
Goal-oriented roadmap

Setting standards with a development Roadmap

Solving big problems and setting milestones through a draft roadmap contributed to accelerating development across the current period and the next. Raise their internal products up to today’s standards was a priority. This roadmap was a significant step closer to this.
3 big problems in 3 days

Align the target audiences

We did this across the group early on through a deep-dive personas playback session. This proved essential both to enable the journey map but also assigning value in the KPI session.

Define the Pains and Gains

This was accomplished with a Value Proposition Canvas. A useful business tool to surface Pains and Gains and Jobs-To-Be-Done

Build a draft Product Roadmap

This acted as a our North Star and as a high-level visual summary of the workshop outcomes; Two development streams; Two principal personas.

As a value-add, a UX / UI Report consolidating all data was generated, highlighting the groups new findings and areas for improvements to inform future Timelines and Roadmaps.

IN BRIEF; Problem Statement > Knowledge sharing and defining scope > Ideation (4 principal concepts) > Future Roadmap > In 3 days

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.

Discover high-impact UX case studies

Portfolio case studies describing design, my UX process, and business impact.

From boosting user adoption in fintech, to improving trust with responsible gambling through to retaining Millennials in the world of ‘digital lotteries UX’ to leveraging key USPs for mobile healthcare.

My Case Studies

Quick-Look PDF
19/06/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
Pt II – Money Management App UX Challenges Explained
TLDR; The second on a two-part deep-dive focussing on mobile UX design targeting seasoned designer-types, mastering Design Theory, and navigating lean Agile challenges.
Contents

Welcome to Pt II
The brainstorming UX Designer
Hard Skills:

Journey Mapping

Research

Visual Design

Soft Skills:

Empathy

Collaboration

Critical Thinking

Full List →

Welcome to Pt II

Real-world app design challenges, by persona

In my previous post (01 Welcome to Pt I; Real-world app design challenges by persona) I detailed why wealth management apps are becoming super relevant and how certain UX designers types experience certain user experience challenges. Let’s move on to our second persona;

Silvr Bank – Europe’s Best Digital Bank*

*Silvr Bank is a fictitious organisation but these are real-world challenges I have experienced in real-world projects with real-world clients.

The overarching goal with Silver Bank* is to design an interface for a thriving Generation X, with an emphasis on growing the fledgling millennial users base – i.e mobile-first. The C-level were looking to expand and improve their digital offer on these foundations

3,000 employees | 85 branches | 2nd biggest player in its market

The brainstorming UX Designer

At the kickoff stages this designer is focusing on the ‘what if’, they live their life in the fast lane of UX Discovery workshops and are typically very creative.

Blindly Following a Predefined UX Process

Every design team (or team or chapter) will have their flavour, probably with different names. The skill is to take these stages and adapt the outcomes so your creative and non-creative teams will understand and respond.

Design Thinking 101 – Research, Design, Prototyping, Testing and Measuring (validation) are default to the UX Designers. But do other team members understand or even need these outputs?

The point is, tailor the UX process according to project needs which comprise staple elements such as research, design, prototyping, and testing (validation).

Not Following the Iterative Design Process to Resolve Issues

Successful Agile Mindset – The ‘From’ and ‘To’ concept is familiar in banking UX Design. At MVP stage this pattern could be relatively dry. Using Agile to Iteratively improve the UI and improve the experience with new icons and micro animations to help deliver that delight moment for your users.

It is crucial and all kick-off stages with all new teams to pivot towards an MVP mindset. Here is my take in the ‘Three must-haves’;
- Clients must have an understanding of the iterative process
- Clients must understand developing software within Scrum is not typical to a design agency. No Big-Bang please.
- A strong UX-er must be able to push-back on customisations that hold little value and only slow down the Scrum Train.
Designing within Scrum has its own challenges, but one of the clear benefits is the ability to ‘go fast’. This speed is only maintained if the core team are synced and understand that fast decision making, a complete understanding of the iterative process and grasping an MVP mindset must all be entrenched.

Confusing signposting – Crazy pop-ups and misunderstood empty states.

If you don’t understand the flow, how do you expect your users to?

Do not implement multiple pop-ups on your landing page. Do guide user with short concise phrases that give state, progress and system status (See: Usability Heuristics: #1 Visibility of system status)

Full Screen Empty States – Clarify your user journeys by offering clean empty state messaging, decode why loading states appear and explain, jargon-free, what are next steps.

The pop-up frequency, relevance, and placement are key factors that make or break your UX;
- Don’t show multiple pop-ups at once or one after another.
- Ensure the empty state tone of voice is relevant to the audience and brand.
- Your pop-ups shouldn’t cover the entire screen. On mobile, your full screen empty state should.
Give your users breathing space to explore. You can then set suitable triggers for pop-ups to appear at the right time under certain conditions.

The UX Consultant on-a-mission

A seasoned veteran

This flavour of UX designer has earned their stripes both at the sharp end running in-house UX teams and blazing a trail as a freelancer. They are typically driven, organised and looking for clients to be the same – so education is centre stage (which brings its own set of problems – see Not Following the Iterative Design Process to Resolve Issues below).

Retail Banking Services

Banks and FI are increasingly integrating money management functionality into their mobile and desktop apps. There is a clear directive to push their customers to use their products, including Card Management and Selection, more actively.

Card Management and Selection – Cards have become a ‘must-have’ feature in modern financial application. Retail Services have responded, and to up’d their offer with effective use of colour, animations and UX patterns. i.e Here we see superuser swipe or mobile vertical scroll

In the western world, 76% of people use mobile banking services. Differentiation, whether that be through the quality of financial advice or expertise of financial service, has to be clear.

Creative font selection can derail already strong UX

Unless you have a solid reason to use a particular font type, stick with web-safe fonts. This is a common misunderstanding when implementing an out-the-box or white label product, as they allow your client to go crazy either with their brand font or one that simply doesn’t work online (or both).

Use your other UX tools to differentiate and stuck with the main players below;
1. Arial (sans-serif)
2. Georgia (serif)
3. Verdana (sans-serif)
4. Trebuchet MS (sans-serif)
5. Garamond (serif)
6. Tahoma (sans serif)
7. Courier New (monospace)
8. Times New Roman (serif)
Know Your Users. Know your competition

It would be a mistake to believe that money management applications are exclusively relevant for older adults. In reality, the target demographic for such applications is growing younger. Keep an eye out for millennials who, according to CBInsights, will inherit the largest share of the wealth of any generation – so mobile is absolutely key.

Be conscious of the challenger banks that are making waves and be distinct or what your differentiation actually is, and mobile is leading this charge.

Portfolio on Mobile – Leading the charge for Generation Z – Performance, Allocations through to Valuations all offer feature parity on web and mobile. Although Gen Z are prominently mobile – gear your efforts equally across all platforms to offer the complete package.

My conclusion on app challenges

It’s clear the challenges are many. Whether you’re be UX junior looking to soak-up the World Wide Web of experience or a seasoned veteran looking to fine-tune your UX skills, the key challenges when designing financial money management apps** are;

Not Following the Iterative Design Process to Resolve Issues

Clients must have an understanding of the iterative process and an Agile mindset. No Big-Bang please. Accept this and then you and your team can then ‘go fast’.

Laser Focussed on Design Systems and Best Practices

Non UX-ers need their outcomes. Without maintenance, allocation and expertise, a Design System that doesn’t rock, will impact UI delivery.

Blindly Following a Predefined UX Process

Adapting the Design Thinking process to suit. When implementing a white label product out-of-the-box, prototyping and testing default patterns will yield little value, focus on what makes your offer unique.

**Can be attributed to other domains, of course.

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.
07/06/2023

1 2 3

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