Redesigning a data-heavy trading platform for clarity, customisation, and real-time visibility within the constraints of a global banking system.

The HSBC Warrants and CBBCs platform serves active traders who rely on fast access to highly dense financial data to make time-sensitive decisions.

The existing platform was outdated, visually inconsistent with HSBC’s latest design standards, and not optimised for modern usage contexts, including live streaming and content sharing.

Beyond a visual refresh, the challenge was to restructure a complex interface to support efficient workflows, while aligning with HSBC’s global design system and strict accessibility requirements.

Client / Project

HSBC / Warrants & CBBCs site

Client / Project

HSBC / Warrants & CBBCs site

Platform

Responsive web

Platform

Responsive web

Role

UI

Role

UI

Year / Duration

2023 / 3 months

Year / Duration

2023 / 3 months

MANTRA Scan / Main page

Research

Extending rigid systems for complex financial products

The UI phase involved analysing established patterns across leading competitors such as HKEX and BNP Paribas to understand expectations around layout, density, and customisation.

Particular attention was given to how high-performing platforms structure data-heavy dashboards and user-controlled views, which informed decisions around component flexibility and layout systems.

In parallel, feasibility assessments were conducted to evaluate how far the HSBC Global Banking design library could support these patterns in practice.

Problem statment

The existing platform does not effectively support high-frequency trading workflows, where users require customisable, high-density data views that remain clear, accessible, and performant across devices and live contexts.

This is further constrained by a design system not built for such complexity, limiting the ability to deliver an optimal user experience.

The existing platform does not effectively support high-frequency trading workflows, where users require customisable, high-density data views that remain clear, accessible, and performant across devices and live contexts.

This is further constrained by a design system not built for such complexity, limiting the ability to deliver an optimal user experience.

The existing platform does not effectively support high-frequency trading workflows, where users require customisable, high-density data views that remain clear, accessible, and performant across devices and live contexts.

This is further constrained by a design system not built for such complexity, limiting the ability to deliver an optimal user experience.

Design response

Adaptive experiences for different trading behaviours

To support both casual and experienced traders, the platform introduced simplified and advanced viewing modes, allowing users to engage with the level of complexity that best matches their familiarity and workflow preferences.

Adaptive experiences for different trading behaviours

To support both casual and experienced traders, the platform introduced simplified and advanced viewing modes, allowing users to engage with the level of complexity that best matches their familiarity and workflow preferences.

Adaptive experiences for different trading behaviours

To support both casual and experienced traders, the platform introduced simplified and advanced viewing modes, allowing users to engage with the level of complexity that best matches their familiarity and workflow preferences.

Accessibility considerations were embedded throughout

Ensuring contrast, typography, and interaction patterns met compliance requirements without compromising usability.

Accessibility considerations were embedded throughout

Ensuring contrast, typography, and interaction patterns met compliance requirements without compromising usability.

Accessibility considerations were embedded throughout

Ensuring contrast, typography, and interaction patterns met compliance requirements without compromising usability.

Optimised for visibility in live broadcast contexts

The interface was designed with readability and scale in mind, using clearer hierarchy, larger UI elements, and improved spacing to ensure financial data remains legible and understandable during live streams and presentations.

Optimised for visibility in live broadcast contexts

The interface was designed with readability and scale in mind, using clearer hierarchy, larger UI elements, and improved spacing to ensure financial data remains legible and understandable during live streams and presentations.

Optimised for visibility in live broadcast contexts

The interface was designed with readability and scale in mind, using clearer hierarchy, larger UI elements, and improved spacing to ensure financial data remains legible and understandable during live streams and presentations.

HSBC / Warrants & CBBCs responsive web design

© 2026