Contents

＋

#Overview 1Introduction 2User Research

3Personas 4Design System 5Data Visualisation

6Final Designs 7Testing 8Conclusion

＋

#Overview 1Introduction 2User Research 3Personas 4Design System 5Data Visualisation 6Final Designs 7Testing 8Conclusion

Intro
As part of HSBC’s digital transformation, HSBCnet was migrated to Evolve, a next-gen execution platform designed for intelligent, integrated, and customizable trading experiences.

Challenge
Legacy interfaces lacked consistency, visual clarity, and design system alignment. Clients expected a more streamlined, responsive, and professional platform that better supported a fast-paced trading workflow.

Solution
Key screens and components were redesigned using the Evolve Design System, improving hierarchy, accessibility, and visual consistency across the storefront and trading platform.

1. Introduction

The migration of HSBCnet to Evolve marked a significant step in modernising HSBC’s execution platform. Evolve was positioned as a smarter, faster, and more user-focused solution, designed to support complex trading workflows while offering a cleaner, more customisable interface.

Focus was placed on improving key areas of the platform, including the storefront and trading screens. These interfaces previously suffered from visual clutter, inconsistent use of components, and limited accessibility.

The following comparison highlights how the redesign improved clarity, consistency, and usability by aligning with HSBC’s new design system.

Client Trading Dashboard

2. User Research

User research played a central role in shaping the Evolve platform experience. A design thinking approach was applied throughout, using the Stanford d.school’s five-phase model: Empathise, Define, Ideate, Prototype, and Test to uncover user needs, clarify pain points, and enhance high-value interactions.

HSBC Securities Services Design Thinking Methodology using Empathize, Define, Ideate, Prototype and Test

Financial institutions were increasingly recognising the importance of offering customers feature-rich mobile banking applications that were easy to navigate and use (Forbes Advisor, 2021). As users became more intuitive with digital tools, seamless user experiences became essential to maintain engagement and satisfaction.

Facing growing competition from FinTech disruptors, financial services providers began actively investing in user experience improvements through design thinking. For example, Bank of America increased online banking registration by 45% after redesigning the process with a focused approach (UX Planet, 2020).

The Evolve platform adopted a similar user-centric methodology, aligning with these industry shifts. This approach helped create a more intuitive, responsive, and professional digital experience that met evolving client expectations.

Key Insights

Client Expectations Shifted: Users wanted faster, more intuitive digital experiences with fewer workflow interruptions.
High vs No-Value Interactions: Actions like login, search, and filtering were identified as no-value steps. In contrast, interpreting data and decision-making were high-value interactions to prioritise.
Competitive Pressure: FinTech apps, designed with first thinking, had significantly higher engagement. Traditional platforms needed to match that level of usability.

Methods Used

Stakeholder & End-User Interviews: Conducted to observe behaviours and understand pain points around tasks like NAV monitoring.
Iterative Prototyping: Wireframes and prototypes were tested with users to refine design decisions before development.
Accessibility Reviews: Final products were audited by external agencies to ensure WCAG 2.0 compliance, e.g., scalable content, clear navigation, and robust interface elements.

Outcome

Improve Efficiency: Aim to reduce low-value interactions to enable faster access to high-value tasks such as data analysis and decision-making.
Streamline Interfaces: Plan to simplify the UI using components consistently aligned with the new design system.
Enhance Accessibility: Target compliance with WCAG 2.0 standards, supporting features like content zooming up to 200% without functionality loss.
Deliver PWA Experience: Offer tools through app-like behaviour, removing the need for traditional web navigation.

3. Personas

A persona was developed based on user research activities that included interviews, observational studies, and behavioural analysis across a range of roles in financial management. Common themes emerged around the need for better access to real-time data, more intuitive navigation, and greater flexibility in working with large datasets. Insights from this research were consolidated into a representative user profile to reflect the priorities, pain points, and goals shared across participants. The resulting persona helped inform design decisions and align product features with user expectations.

Tom - The Data-Driven Investment Manager

“ I need a system that can handle large data which would crash Excel, but be easy and simple to use. ”

Profile

Investment Manager at AMG Financial Management.
Over 10 years' experience in TA Operations and Management.
Primarily office-based, works from home during Covid using remote tools.
Heavy desktop/laptop user with dual-monitor setup and multiple systems running in parallel.

Pains

Data scattered across multiple reports and systems, requiring time-consuming navigation.
No real-time data visibility for key metrics.
Complex queries require external help due to system limitations.
Excel crashes with large data volumes, and formatting/pivoting is cumbersome.
Data lacks flexibility, cannot filter or sort dynamically.

Goals

Real-time access to account and transaction data.
Export data for regulatory reporting and analysis.
Drill down from top-level view to granular fund-level data.
Configure and reuse data thresholds.
Operate with a single currency aligned with exchange rates.
Have a 12-month view of flows, descriptions, and redemptions.

Solutions

A responsive data platform that supports real-time updates, configurable filters, top-down drill functionality, and eliminates reliance on external systems like Excel.

Requirements

Research revealed Tom needs quick and clear user journeys, threshold and filter configurability, and the ability to handle high-volume data without performance issues.

Outcomes

A modern data system would improve productivity, reduce manual effort, and help Tom perform high-value investment activities without technical blockers.

4. Design System

The design system was significantly streamlined to improve consistency, usability, and efficiency across the Evolve platform. Previous guides included excessive component variations and limited guidance for modern UI requirements such as dark mode, leading to inconsistencies across the platform. The updated system introduced fewer, more standardised components, with clear guidance for both light and dark modes using design tokens to maintain visual alignment.

Previous research identified pain points around unclear documentation and inconsistent implementation. The new system addressed this by streamlining usage patterns and aligning components with accessibility standards and technical constraints.

Examples of redesigned components, showing before and after sets, are displayed in the slideshow below.

Design System

5. Data Visualisation

The previous design system lacked a comprehensive style guide for data visualisation, resulting in inconsistent visual elements across platforms. To address this, a new set of visualisation components was created, which covered a wide range of variations as shown below. These components were designed with flexibility and clarity in mind, ensuring consistency across both light and dark modes.

Scroll Here

Visualisation Components

The examples below demonstrate how these visual components were integrated into the Evolve dashboard.

Examples of Visualisation Components in Use

6. Final Designs

The final design phase translated research insights, iterative refinements, and design system updates into production-ready interfaces. Screen flows were created in Sketch, with multiple artboards mapping user journeys and interface logic.

Screen Flows in Sketch

Enhancements to the Evolve Trading platform focused on improving layout structure, establishing a clearer visual hierarchy, applying consistent typography, and refining component styling in line with HSBC’s design standards. The annotated screenshots below highlight key updates that were made to the main dashboard design.

Annotated Improvements Made to the Evolve Trading Platform

The process concluded with a proposed screen flow for the Evolve Store, demonstrating how an integrated app marketplace could function within the platform. The aim was to provide a streamlined user experience for discovering, launching, and managing Securities Services tools.

Evolve Store Interface Design

7. Testing

A detailed WCAG 2.1 AA-level audit was conducted on the Evolve platform, covering both desktop and mobile experiences. Multiple accessibility issues were identified; a selection of these is presented below to illustrate key areas that required improvement.

Date picker hover state with insufficient contrast

Insufficient Text Contrast

Issue: Several UI elements such as table headers, placeholder text, and calendar labels failed WCAG 2.1 AA contrast ratios. Some dropped as low as 1.3:1, impacting users with low vision or colour blindness.

Solution: Foreground and background colours were updated to meet the minimum 4.5:1 ratio. Hover and focus states were reviewed to ensure consistent readability across all themes and interaction states.

Content Loss on Reflow

Issue: At 400% zoom or 320px width, key elements like the “Select” button and pagination controls were cut off or became inaccessible. This broke the experience for users relying on zoom or mobile views.

Solution: Layouts were restructured using flexible grids and relative units. All interactive elements were made visible and scrollable within a single direction, ensuring compatibility with screen magnifiers and smaller screens.

Custom Table Missing Important ARIA Semantics

Malformed Custom Tables

Issue: Visually correct tables were missing semantic ARIA roles such as grid, columnheader, and gridcell. This prevented assistive technologies from reading and navigating table data properly.

Solution: The markup was updated to include all required ARIA roles and relationships, enabling screen readers to interpret table structure correctly and support efficient navigation.

Active Page Was Visually Indicated but Not Programmatically Identified

Interactive Elements Missing Names or Roles

Issue: Filter inputs and dropdowns were missing accessible names, and nested buttons occasionally overrode field labels. This caused confusion for users relying on screen readers.

Solution: ARIA labels and proper roles were added to clarify the function and state of each element. Label conflicts were resolved by refactoring DOM structure and improving form control hierarchy.

Dynamic Updates of the Table Are Not Programmatically Announced

Dynamic Content Not Programmatically Announced

Issue: Updates like “No results found” were visually rendered but not announced to assistive technologies. A missing live region meant screen reader users received no feedback when content changed.

Solution: A persistent aria-live="assertive" region was added to the DOM. This ensured dynamic updates were automatically announced by screen readers, improving usability for all users.

These findings were used to refine component-level design patterns and inform the evolution of the Evolve Design System, ensuring the platform delivered a more inclusive and accessible user experience.

8. Conclusion

The project successfully modernised the Evolve platform through a series of strategic design and usability improvements. Key achievements included:

Comprehensive Audit

Review of existing workflows, UI components, and accessibility gaps helped identify pain points such as unclear visual hierarchies, poor contrast ratios, and inconsistent component use.

Unified Design System

A scalable design system was introduced, replacing outdated UI patterns with consistent and accessible components optimised for both light and dark themes.

Improved Data Visualisation

New templates and visual standards were developed to bring clarity, consistency, and understanding to charts, tables, and new dashboard components.

Accessibility Enhancements

A WCAG 2.1 AA audit revealed issues like missing ARIA attributes and inaccessible dynamic content, fixed with semantic HTML, improved markup, and live region support.

User-Centric Refinements

Iterative feedback from user testing and stakeholder reviews informed enhancements to the dashboard design, interaction flows, and overall usability.

Implementation Support

Final deliverables included updated component libraries, annotated screen flows, and design documentation to guide development and future adoption of Evolve.

These efforts established a strong foundation for scalability, integration, and inclusivity. The result was a future-proof interface that aligned with HSBC’s global design standards and better addressed the operational needs of the Securities Services platform.