Overview

Institutional Digital Workbench (IDW) is an internal DBS platform designed to streamline workflows for Relationship Managers (RMs) and Customer Service Officers (CSOs). It provides an integrated dashboard for handling urgent To-Dos, reviewing financial performance, and managing customer cases efficiently.

The Team & My Role

Product Owner/ Users
Business Analysts
Product Owner/ Users
DBS Design team
Development team

My Role: As a UX/UI Designer for DBS-IDW, I focused on improving the usability and efficiency of internal financial tools. My work involved:
✅ Liaising with BAs & Tech Teams to translate business needs into user-friendly designs.
✅ Creating UX/UI for dashboard widgets, enhancing user experience for RMs & CSOs.
✅ Refining data display & interaction flows, improving searchability, deep-linking, and sorting logic.
✅ Aligning designs with DBS Design System (DLS) for consistency across platforms.

Key Users

Relationship Managers (RMs) – Manage client relationships, oversee financial products, and ensure compliance.

Customer Service Officers (CSOs) – Handle customer cases, financial assessments, and back-office operations.

The Process - User-Centred Design Thinking

1. Asking the Right Questions

How might we present financial performance data in a digestible, interactive way while ensuring large numerical figures remain readable?
How might we integrate customer review cases (CSFA) and financial metrics (Performance Widget) seamlessly into IDW, creating a unified workflow?
How might we make important data points discoverable upfront, reducing reliance on tooltips and hidden elements?

2. Discovery Phase - Understanding the Existing System

User Insights: Collected from IDW users (RMs & CSOs), who shared screenshots of the existing CSFA portal, required data points, and key navigation pain points.
Sitemap & Workflow Integration: Analysed how CSFA cases and Performance Metrics should be structured under one umbrella within IDW for a cohesive experience.
Technical Constraints: Considered feasibility of data synchronisation, hyperlink deep-linking, and widget reordering behaviours to align with DBS tech stack.

Client provided existing CSFA system screens, including login flows and category-specific pages, to ensure that the IDW-CSFA widget aligns with the current data structure.
The study focused on maintaining consistency with existing data points to avoid discrepancies in information display.

"Pay attention to what users do, NOT what they say."

~ Jakob Nielsen

Design Widget

About CSFA

The Customer Sophistication and Financial Assessment (CSFA) Widget is a key feature within DBS Institutional Digital Workbench (IDW), designed to help Relationship Managers (RMs) and Customer Service Officers (CSOs) manage their customer sophistication reviews and financial assessments.

Initially, users struggled to access key actions like creating a New Questionnaire, Classification, ISDA Deferral, and ISDA Waiver. The existing setup required them to navigate separately into the CSFA portal, leading to inefficiencies and unnecessary friction.

To improve accessibility and usability, I designed a tooltip on hover for guidance and a dropdown menu with deep links for direct navigation.

Problem Statement

Users were unaware that additional CSFA actions existed within the portal.
Navigation was inefficient, requiring multiple clicks to locate the correct form.

Enhancing Discoverability & Navigation

How Might We Improve Access to CSFA Actions Without Overloading the UI?

The Challenge:

Users needed a clear entry point to access New Questionnaires, Classifications, ISDA Deferrals, and ISDA Waivers.
The actions were buried within the CSFA portal, requiring unnecessary clicks.
Users unfamiliar with the options struggled to know what actions were available.

The Solution

✅ Implemented a tooltip on hover over the kebab menu (⋮)

Provides contextual guidance by explaining available options without cluttering the UI.
Helps first-time users understand what they can do before clicking.

✅ On Click – Dropdown Selection with Deep Links

Clicking the kebab menu reveals a dropdown menu with direct actions.
Users can quickly access New Questionnaires, Classifications, ISDA Deferrals, and ISDA Waivers.
Deep-linking ensures users land directly in the relevant section of the CSFA portal, avoiding unnecessary steps.

Detailed Breakdown

When a user clicks on "My Cases" in the CSFA Widget, they are navigated to the Questionnaire (Listing View), which presents a structured interface for managing customer assessments. The screen design incorporates Secondary Tabs, Functional Tabs, and Quick Filters to streamline case handling.

Secondary Tab: Contextual Navigation

Purpose:

Provides a clear separation between My Cases and Pending My Action tabs.
Ensures users can quickly toggle between cases they own and cases requiring action.

User Benefit:
🎯 Reduces clutter by only displaying relevant cases based on user responsibility.

Functional Tab: Categorising Case Types

Purpose:

Offers four key sub-tabs within My Cases to help users filter by assessment type: Questionnaire | Classification | ISDA Deferral | ISDA Waiver
Ensures users can switch between different assessment categories effortlessly.

User Benefit:
📂 Provides structured navigation, preventing information overload.

Quick Filters: Streamlining Case Prioritisation

Purpose:

Enables users to filter cases by status instantly, including: Draft, Submit A / B, T&M Endorsed, etc
Ensures users can switch between different assessment categories effortlessly.

User Benefit:
🚀 Speeds up task management by allowing users to focus on relevant cases.

Performance Widget

User Requirement

The Performance Widget currently requires users to hover over tooltips to view critical identifiers like GPIN(Group Party Identification Number) and GCIN(Global Customer Identification Number), adding unnecessary interaction steps. The new approach aims to display this information upfront, improving accessibility and efficiency.

HMW (How Might We) Approach

HMW reduce interaction steps while ensuring key financial data remains accessible at a glance?
HMW balance upfront data visibility without overwhelming the user interface?

🔴 As-Is (Current State)

🔹 Interaction Required: Users must hover over tooltips to reveal GPIN, GCIN, and financial details.
🔹 Limited Visibility: Important financial and customer identifiers are hidden by default, leading to extra steps and potential confusion.
🔹 Slower Decision-Making: Users navigating through financial data experience delays in accessing key information, reducing efficiency.

User Pain Point:
👎 "I need to hover over each data point to check the identifiers. It’s inefficient and makes bulk analysis harder."

🟢 To-Be (Improved Design)

✅ Upfront Data Display: GPIN, GCIN, and financial metrics are always visible without requiring hover interaction.
✅ Faster Data Retrieval: Users can scan key details at a glance, eliminating extra steps.
✅ Consistent Data Presentation: Aligns with DBS design standards for clarity and accessibility.

User Benefit:

🚀 Immediate visibility of essential financial and customer data.

🎯 Faster workflow for users handling multiple accounts.
🔍 Better decision-making with clearer, upfront data presentation.

How does the enhanced Performance Widget improve financial data visibility?

Before: Users had to hover over tooltips to view essential financial identifiers like customer identification numbers and group party details, making data retrieval inefficient.

Now: Key financial data points are displayed upfront, reducing unnecessary interactions and ensuring instant access to important insights.

How does the CSFA Widget help users manage their cases more efficiently?

The CSFA Widget provides a centralised overview of customer sophistication and financial assessment cases. It:

✅ Groups cases based on urgency, ensuring high-priority cases are clearly visible.

✅ Enables deep-linking, allowing users to jump directly into relevant case details without extra navigation.

✅ Supports quick filtering and sorting, helping users prioritise work efficiently.

What improvements were made to sorting and filtering options?

To streamline case management and financial analysis, I introduced:

✅ Default sorting by due date to prioritise urgent cases.

✅ Manual sorting for all columns, allowing users to customise their data view.
✅ Quick filters for financial trends, enabling users to switch between quarterly and yearly views instantly.

Outcome

The DBS-IDW Performance Widget & CSFA Widget Enhancements successfully addressed key usability challenges by improving data accessibility, workflow efficiency, and interface clarity.

By moving away from hover-dependent interactions and adopting an upfront display approach, we significantly reduced interaction friction, allowing users to make informed decisions faster. The integration of deep-links, structured navigation, and quick filters further streamlined workflows for Relationship Managers (RMs) and Customer Service Officers (CSOs).

Key Achievements

✅ Improved Data Visibility
Key financial metrics are now always visible without additional user actions.

✅ Optimised Workflow Navigation
The CSFA Widget now enables users to quickly access pending cases with minimal effort.

✅ Enhanced Filtering & Sorting
The Performance Widget includes quick filters for quarterly/yearly financial trends, ensuring seamless data retrieval.

By implementing data upfront display, structured navigation, and deep-linking, DBS-IDW now delivers a seamless, intuitive, and efficient experience for RMs and CSOs managing financial performance and customer sophistication assessments.

Page updated

Google Sites

Report abuse