BI_webinar_video_poster_result_edited.jp

HSBC

Banking and Investment Market

My Role: Lead UX/UI designer

Duration: Given the project's large scale, it commenced ten months ago and will be sustained and managed in the future.

Please Note: Due to the highly sensitive nature of this project, I can only provide a high-level overview without disclosing specific details or displaying actual designs and the process.

Project Overview

How this project started

Financial services, banking and investment company HSBC, partnered with Australia's MUFG Pension & Market Services to completely update their digital services to meet the evolving needs of the diverse population in Hong Kong and potentially worldwide. This update included overseeing their online member platforms, including user experience design and interface, as well as the development and administration of the systems.

Project Goal

The goal was to create intuitive, personalised, user-friendly digital experiences for HSBC’s different client segments, enhancing engagement and improving financial decision-making for HK members.

The existing platforms are outdated, causing difficulties in navigation and leading to inconsistent user experiences across various devices.

Main Challenges

Understand the HK superannuation industry and investment market.
Tackling the issue of paper-based forms and processes currently in HK.
Displaying the portal in multiple languages (three languages).
Ensuring that heavily regulated business requirements and technical feasibilities are considered while providing the best user experience.

Design Process

Design engagement model and plan
Design risk assessment
Research model
Cross-cultural user research
UX strategy
Wireframing and user interface design processes
User testing
Design hands off
Iteration

Design Engagement Model and Plan

As a lead UX designer, I established a collaborative design engagement model plan with internal and external stakeholders, including product owners, business analysts, project managers, technical analysts, offshore and onshore technical teams, and digital delivery managers. This plan ensured alignment on user experience design goals, shared vision and workshops, timelines, and deliverables. This detailed design project plan outlined key milestones, responsibilities, dependencies and communication channels.

Design Risk Assessment

A comprehensive risk assessment was conducted to identify potential challenges.

Regulatory compliance and its effect on user research.
Accessibility for users with diverse needs
Integration with existing HSBC systems UX and UI
Scalability for future growth and expansion
Multilingual platform culture

Mitigation and avoidance strategies were developed for each identified risk.

Design Strategies

Personalisation: Tailoring the experience based on member profiles and goals

Education: Integrating learning resources to help users make informed decisions.

User-Centric Design: Creating personalised experiences tailored to member profiles and goals.

Simplification: Streamlining account management, complex investment processes and reducing no-value interactions

Omnichannel Consistency: ensuring smooth transitions between online platforms and mobile phones.

Creating intuitive interfaces: users can access critical information and perform tasks efficiently.

Cross-Cultural User Research Model

We developed a research plan to gain deep insights into user needs and behaviours; this plan includes:

Competitive analysis of their current platform and other financial platforms
Remote interviews.
User journey maps
Design thinking workshops
Usability testing
Cultural sensitivity training for our design team.
Localisation considerations for language and financial regulations.
Focus on the learnability of the products.

Key findings included variations in investment preferences in a different market with different cultures and personas, differing levels of financial literacy, and culture-specific concerns about online financial management.

Wireframing and User Interface Design Processes

We created low to mid-fidelity wireframes to establish the core functionalities and information architecture. These were iteratively refined through internal reviews and stakeholder feedback. For the UI design, we adhered to HSBC's brand guidelines while introducing modern, user-friendly elements, including:

A clear hierarchy of information.
Intuitive navigation for complex financial products.
Learnable self-service investment choices to easily manage.
Data visualisation for complex features such as investment choices and asset allocations.
Responsive design for a seamless mobile experience.

Design System and style guide aligned with HSBC branding and core our core products:

I led the creation of a comprehensive design system and style guide process as part of this project to ensure consistency, including:

•Detailed UI component library

•Modular design library

•Interactive prototypes

•Accessibility guidelines

User Testing

We conducted multiple rounds of user testing:

Remote usability tests
Task completion rates for key user journeys (e.g., setting up a new investment, Changing the investment options, registering to the platform)

User feedback led to several refinements, including simplified language for complex financial terms and improved accessibility features.

Design Hands Off

Regular design hands-off sessions to support the development process and Iteration

Post-launch, we established a process for continuous improvement:

Ongoing collaboration with HSBC's product team for feature prioritisation

Final Outcome

While specific details about HSBC's superannuation and investment platforms in Hong Kong are not provided due to confidentiality, the chosen user-centric approach and the design engagement plan ensured the new designs resonated with HSBC's user base requirements while the iterative process allowed continuous refinement.