Thank you for scrolling:)
If you want to see more detail about this project, feel free to reach out!
Design Exploration Data visualization
Chart View
HSBC- AI Forecast Interest Rate
Context
If you save money or make investments with a bank, interest rates are one of the most critical factors — and they’re also a key success metric for the bank itself. The goal of this product was to help analysts forecast future interest rate trends more efficiently and make better decisions under uncertainty.
Challenge:
When I first joined the team, the project was considered very hard to deliver within the timeline. There were no clear design requirements, no existing UI, and the only thing available was raw AI model output — basically JSON data. On top of that, I came in as a financial novice, and the work required deep financial and AI model understanding.
Impact:
70% faster forecasting via automated AI workflows.
50+ data sources synthesized into a unified interaction model.
90% adoption rate among institutional analysts by designing for AI explainability.
HSBC- AI Forecast Interest Rate
📌 Before AI: How Interest Rate Forecasting Traditionally Worked
Before diving into the AI solution, it’s important to understand how interest rate forecasting traditionally worked.
The process was highly manual and heavily reliant on Excel. Analysts across different regions started by making interest rate assumptions independently, using their own spreadsheets and formulas. These files then had to be manually consolidated—a time-consuming step that often led to version conflicts and data inconsistencies.
By the time forecasts were produced, each team was effectively operating on its own assumptions. This made the process inefficient, difficult to scale, and risky—especially given that these forecasts directly informed high-stakes financial decisions.
📌 After AI: A Human-in-the-Loop Forecasting Workflow
In the AI-powered workflow, analysts begin by uploading historical data directly into the forecasting system. The AI model then generates initial interest rate curves, allowing users to quickly view, compare, and explore different scenarios at scale.
Rather than treating AI as a black box, the system is intentionally designed to keep human judgment in control. Senior analysts can review the model outputs, calibrate assumptions, and adjust curves when discrepancies arise. These refinements are then fed back into the system, enabling the model to learn and improve over time. This approach positions AI as an assistant—not a replacement—amplifying pattern recognition and efficiency while preserving human oversight, domain expertise, and accountability in high-stakes financial decisions.
From raw AI outputs to explainable decision controls
The AI model initially surfaced its predictions as raw numerical outputs — precise, yet disconnected from how financial analysts think and work. Working closely with the data science team, I unpacked the model’s logic and conducted user audits to understand the real decision-making workflow behind interest rate forecasting.
I then translated complex model parameters into three intuitive, high-leverage inputs: Currency, Tenor, and As-of Date. This abstraction layer allowed analysts to confidently interact with the AI, review assumptions, and calibrate outcomes — keeping human judgment firmly in control while scaling insight through machine learning.
From raw AI outputs to explainable decision controls
The AI model initially surfaced its predictions as raw numerical outputs — precise, yet disconnected from how financial analysts think and work. Working closely with the data science team, I unpacked the model’s logic and conducted user audits to understand the real decision-making workflow behind interest rate forecasting.
I then translated complex model parameters into three intuitive, high-leverage inputs: Currency, Tenor, and As-of Date. This abstraction layer allowed analysts to confidently interact with the AI, review assumptions, and calibrate outcomes — keeping human judgment firmly in control while scaling insight through machine learning.
Financial Analyst
Rajesh is a financial analyst responsible for monitoring and forecasting interest rates across multiple countries on a daily basis.
He typically spends 1–2 hours per day reviewing interest rate data, validating assumptions, and comparing scenarios across currencies, tenors, and effective dates.
Rajesh needs a fast and intuitive way to input parameters—such as currency, tenor, and “as of” date—and quickly view and compare results without relying on complex Excel models.
Data visualization
Quickly understand AI-predicted interest rates in a structured, form-based view.
Analyze interest rate trends and patterns through charts view.
Compare multiple interest rate scenarios side by side.
Review, Calibrate & Replace
Review and calibrate AI-generated interest rate predictions before finalizing decisions
Replace AI outputs with analyst-approved calibrations once they are validated
The Challenge: The core of this fintech tool relies on high-density JSON data generated by AI models. For users like Rajesh and Habiba, raw data is unreadable and difficult to compare across different time dimensions.
The Solution: I translated these complex backend outputs into an intuitive, multi-dimensional table view. My goal was to create a "zero-learning-curve" interface for interest rate comparison.
Design Highlights:
Strategic Hierarchy: I implemented a multi-level header structure that anchors users, allowing them to navigate between Tenors and Durations effortlessly.
Visual Scannability: By applying subtle background color variations and grid logic, I separated different data axes without adding visual noise.
Efficiency: This lightweight visual hierarchy significantly reduced cognitive load, enabling users to perform deep data analysis without needing a manual.
The Intent: Data tables are excellent for precision, but charts are essential for spotting trends. My goal was to provide a seamless transition from granular data to visual forecasting.
The Strategy:
User-Centric Mapping: Following financial analysts’ mental models, I mapped Duration to the X-axis and Interest Rates to the Y-axis, ensuring the visualization felt familiar and actionable.
Managing Complexity with Filters: To prevent "spaghetti charts" from multi-dimensional data, I implemented a robust filtering system. This empowers users to isolate specific parameters and focus only on the curves relevant to their current analysis.
Technical Execution: I collaborated closely with front-end developers to build this interactive layer atop our existing React-based table library. By inheriting the table’s control logic, I ensured that toggling visibility at the bottom remains consistent across views, maintaining a unified user experience.
Component Innovation: Hybrid Chip-Dropdown
The Insight Through research with analysts, I identified a recurring workflow: comparing data curves by holding specific dimensions (Tenor/Duration) constant while rapidly pivoting others. To align with this mental model, I focused on optimizing multi-parameter filtering efficiency.
The Solution Recognizing a gap in the existing design system for high-density selection, I engineered a Hybrid Chip-Dropdown component:
Interaction Efficiency: Combines the immediate feedback of multi-select chips with the space-saving benefits of a dropdown.
Visual Clarity: Maintains a clean, consistent hierarchy even when managing complex, overlapping data dimensions.
The Impact This pattern significantly streamlined user interactions and was subsequently adopted as a reusable global pattern for other data-heavy tools across the HSBC platform.
To support Calibration, I introduced an “Enable shocks” toggle that allows advanced users to calibrate and fine-tune AI-generated curves by adjusting scenarios and methods.
This design follows the principle of progressive disclosure—keeping the interface simple for most users, while revealing deeper controls only when advanced users need them.
Advanced users needed deep control over multiple curves without the "navigation fatigue" of jumping between separate detail pages.
The Solution: Summary-to-Detail Flow I introduced a Summary Table as a middle layer to bridge high-level overviews and granular data:
Batch Selection: Checkboxes allow users to select and compare multiple curves in one view.
Inline Details: Detailed interest rate data is surfaced directly below selected items, preventing unnecessary page loads.
Pattern-Led Design: Leveraged established HSBC design patterns to ensure user familiarity and faster engineering.
The Result Aligned the tool with the analysts' "select, then inspect" mental model, significantly speeding up complex data audits.
Senior Financial Analyst
Habiba leads the group finance forecasting transformation team and is responsible for ensuring the accuracy, consistency, and governance of interest rate forecasts across the organization.
She needs to verify whether AI-generated interest rate forecasts are aligned with internal assumptions and business expectations, and to review, calibrate, or override outputs when discrepancies arise.
Her priority is building trust, transparency, and auditability into the forecasting process—so that AI accelerates decision-making without replacing human judgment.
Bridging AI Logic and Human Decision-Making
Bridging AI Logic and Human Decision-Making
Design Exploration • Data visualization • Table View
Design Exploration • Data visualization • Table View
Design Exploration • Data visualization • Chart View
Design Exploration • Data visualization • Compare View
Design Exploration Review, Calibrate & Replace
Design Exploration Review, Calibrate & Replace
General User Flow for Common Users
General User Flow for Advanced Users
“I’m thrilled to recommend Alice Bai, an outstanding UX designer whose user-centric approach and collaboration skills left a lasting impact on our team at Apex product delivery. As her line manager, I had the privilege of working closely with Alice and can confidently share for her expertise.
Alice has a rare talent for translating complex business requirement into intuitive, visually UX and UI designe solutions. Her mastery of user interview, wireframing, and interactive prototyping was instrumental in our strategic product delivery.
Beyond technical skills, Alice is an empathetic team player, she thrives in cross-functional environments, bridging gaps between design, engineering, and stakeholders with clarity and quality.”
Context
If you save money or make investments with a bank, interest rates are one of the most critical factors — and they’re also a key success metric for the bank itself. The goal of this product was to help analysts forecast future interest rate trends more efficiently and make better decisions under uncertainty.
Challenge:
When I first joined the team, the project was considered very hard to deliver within the timeline. There were no clear design requirements, no existing UI, and the only thing available was raw AI model output — basically JSON data. On top of that, I came in as a financial novice, and the work required deep financial and AI model understanding.
Impact:
70% faster forecasting via automated AI workflows.
50+ data sources synthesized into a unified interaction model.
90% adoption rate among institutional analysts by designing for AI explainability.
What people say about me.
What people say about me.
The Challenge: The core of this fintech tool relies on high-density JSON data generated by AI models. For users like Rajesh and Habiba, raw data is unreadable and difficult to compare across different time dimensions.
The Solution: I translated these complex backend outputs into an intuitive, multi-dimensional table view. My goal was to create a "zero-learning-curve" interface for interest rate comparison.
Design Highlights:
Strategic Hierarchy: I implemented a multi-level header structure that anchors users, allowing them to navigate between Tenors and Durations effortlessly.
Visual Scannability: By applying subtle background color variations and grid logic, I separated different data axes without adding visual noise.
Efficiency: This lightweight visual hierarchy significantly reduced cognitive load, enabling users to perform deep data analysis without needing a manual.
The Intent: Data tables are excellent for precision, but charts are essential for spotting trends. My goal was to provide a seamless transition from granular data to visual forecasting.
The Strategy:
User-Centric Mapping: Following financial analysts’ mental models, I mapped Duration to the X-axis and Interest Rates to the Y-axis, ensuring the visualization felt familiar and actionable.
Managing Complexity with Filters: To prevent "spaghetti charts" from multi-dimensional data, I implemented a robust filtering system. This empowers users to isolate specific parameters and focus only on the curves relevant to their current analysis.
Technical Execution: I collaborated closely with front-end developers to build this interactive layer atop our existing React-based table library. By inheriting the table’s control logic, I ensured that toggling visibility at the bottom remains consistent across views, maintaining a unified user experience.
Design Exploration Data visualization • Compare View
Design Exploration Data visualization • Compare View
The Insight Through research with analysts, I identified a recurring workflow: comparing data curves by holding specific dimensions (Tenor/Duration) constant while rapidly pivoting others. To align with this mental model, I focused on optimizing multi-parameter filtering efficiency.
The Solution Recognizing a gap in the existing design system for high-density selection, I engineered a Hybrid Chip-Dropdown component:
Interaction Efficiency: Combines the immediate feedback of multi-select chips with the space-saving benefits of a dropdown.
Visual Clarity: Maintains a clean, consistent hierarchy even when managing complex, overlapping data dimensions.
The Impact This pattern significantly streamlined user interactions and was subsequently adopted as a reusable global pattern for other data-heavy tools across the HSBC platform.
Design Exploration Review, Calibrate & Replace
To support Calibration, I introduced an “Enable shocks” toggle that allows advanced users to calibrate and fine-tune AI-generated curves by adjusting scenarios and methods.
This design follows the principle of progressive disclosure—keeping the interface simple for most users, while revealing deeper controls only when advanced users need them.
Design Exploration Review, Calibrate & Replace
Advanced users needed deep control over multiple curves without the "navigation fatigue" of jumping between separate detail pages.
The Solution: Summary-to-Detail Flow I introduced a Summary Table as a middle layer to bridge high-level overviews and granular data:
Batch Selection: Checkboxes allow users to select and compare multiple curves in one view.
Inline Details: Detailed interest rate data is surfaced directly below selected items, preventing unnecessary page loads.
Pattern-Led Design: Leveraged established HSBC design patterns to ensure user familiarity and faster engineering.
The Result Aligned the tool with the analysts' "select, then inspect" mental model, significantly speeding up complex data audits.
General User Flow for Advanced Users
General User Flow for Common Users
Design Exploration Data visualization • Compare View
General User Flow for Common Users
“I’m thrilled to recommend Alice Bai, an outstanding UX designer whose user-centric approach and collaboration skills left a lasting impact on our team at Apex product delivery. As her line manager, I had the privilege of working closely with Alice and can confidently share for her expertise.
Alice has a rare talent for translating complex business requirement into intuitive, visually UX and UI designe solutions. Her mastery of user interview, wireframing, and interactive prototyping was instrumental in our strategic product delivery.
Beyond technical skills, Alice is an empathetic team player, she thrives in cross-functional environments, bridging gaps between design, engineering, and stakeholders with clarity and quality.
Thank you for scrolling:)
