HSBC Public Websites

View projects

My End-to-End Experience in the evolution of HSBC's Public Websites

A Hands-On Journey

Public Website Redesigns

The HSBC public website has undergone multiple waves of redesigns to modernize its architecture, improve usability, align globally, and support new digital acquisition models across retail and wealth.


When I first joined HSBC, their public website operated like a digital brochure: static pages, fragmented navigation, and no dedicated onboarding for new-to-bank customers. The experience made it challenging for users to understand products, compare options, or begin an investment or banking journey.

HSBC’s public websites transitioned from static, informational content to a modern, responsive acquisition channel with calculators, onboarding tools, and campaign journeys. I contributed to multiple redesign phases, supporting global alignment, accessibility, and improved conversion across wealth and retail products.

‍

Context & Challenge

  • Legacy Technology - Flash content, static HTML, and early table-based layouts limited flexibility, performance, and accessibility.
  • Fragmented Content & Navigation - Inconsistent information architecture made it difficult for users to discover products, tools, or campaigns.
  • Lack of Onboarding & Conversion Paths - There were few interactive tools, no clear product journeys, and minimal support for new customers trying to start a banking or investment relationship.
  • Global Consistency Challenges - Localized markets had different templates and content patterns, making governance, compliance, and brand consistency difficult to maintain
  • Global Consistency Challenges - Localized markets had different templates and content patterns, making governance, compliance, and brand consistency difficult to maintain

Technological Evolution

Over multiple redesign cycles, the website underwent a significant technology transformation:

  • HTML & Flash → HTML5 / CSS3 - Removed Flash-based tools and visual content, replacing them with modern, lightweight, and accessible HTML5 components

  • Tablet & iPad Optimization - Early redesigns focused on accommodating iPad and tablet devices, optimizing layouts for touch interaction and screen orientation

  • Responsive Design - The site transitioned to fully responsive, mobile-first design frameworks, supporting a consistent experience across desktop, tablet, and mobile

  • Componentization & Modular Layouts - Introduction of reusable components enabled faster rollout of campaigns, calculators, and onboarding journeys across markets

  • Integrated Tools & Calculators - Financial calculators, eligibility flows, and onboarding tools were incorporated directly into the site, supporting measurable conversion

  • Design System Adoption - Later phases implemented a global design system, unifying typography, UI patterns, and interactive components across markets while maintaining localization flexibility

My role

I worked and led across multiple redesign and optimization initiatives throughout this evolution, including:

  • Redesigning public-facing pages with improved IA and navigation.
  • Creating campaign landing pages aligned with global acquisition objectives
  • Designing and integrating interactive tools such as calculators, eligibility journeys, and onboarding flows
  • Supporting adherence to accessibility standards (WCAG) and compliance requirements.
  • Collaborating with global and local teams to maintain brand consistency while enabling market-specific content

Impact

The redesigns transformed HSBC’s public website from a static brochure site into a conversion-oriented, responsive digital channel. Outcomes included:

  • Improved clarity and usability across devices and markets
  • Enhanced support for onboarding new-to-bank customers.
  • Increased engagement with tools, calculators, and campaign content.
  • Reduced friction in discovering products and completing journeys.
  • Dynamic, relevant content and tools that guided users toward the products and services most applicable to them.
  • Enabled faster iteration and rollout of campaigns through modular components.
  • Overall, the site became a critical part of HSBC’s digital acquisition and self-service strategy, supporting both retail and wealth customers in their journey from awareness to conversion.

Project visuals at a glance

See how UX has made an impact over the years for HSBC's Public Websites with a visual timeline of key redesigns, showing how layouts, tools, and user journeys evolved over the years.

[interface] interface of ai tool (for an ai saas company)
[background image] image of contact office (for a general contractor)
image of game development process (for a mobile gaming) - conceptualization stage
image of an inspiration board for logo design
[interface] screenshot of software in action (for an ai saas company)
image of an event planning session 2
image of studio setting (for a game development company)
image of beer tastings (for a craft brewer)

COLLEAGUES feedback

Trusted by HSBC Colleagues

Richard's depth of experience, product intuition, and unwavering commitment to customer-centric design have shaped some of our most critical digital journeys. From complex onboarding flows to multi-channel servicing experiences, his work consistently demonstrated both strategic thinking and meticulous execution.

Richard is collaborative, data-informed, and relentlessly focused on delivering experiences that feel simple and empowering to customers. His contributions have had a lasting positive impact on our digital adoption and customer satisfaction metrics.I strongly recommend Richard for any senior UX or product design role—he is an exceptional talent who consistently raises the bar.

image of historical photos of the preschool
Robert Schuster
Head of UX / UI Design for the Americas at HSBC Bank

Over nearly two decades, Richard played a pivotal role in the evolution of HSBC’s public website experience. His ability to balance brand, customer needs, regulatory constraints, and commercial priorities made him an invaluable partner in some of our most complex and high-visibility initiatives. Whether doing a full redesign, redesigning core product journeys or driving improvements to content structure and navigation, his work consistently elevated the quality and clarity of our digital presence.

image of community involvement for a furniture store
Tracy Wong
Head of Public Website for HSBC Bank Canada

Richard played a key role in shaping the evolution of our public website into a more personal, relevant and customer-focused experience. His ability to align brand, customer needs, regulatory considerations and commercial goals made them an invaluable partner across our most visible digital initiatives.He worked seamlessly across product, engineering, marketing and compliance teams, helping us move from static information delivery to tailored journeys and more intuitive paths to product discovery.

community outreach event: educational workshop
Kerri Dawson
Head of Digital Channels for HSBC Bank Canada

Working with Richard made an immediate impact on product quality. He proactively involved QA during design reviews, clarified edge cases, and documented behaviors that used to show up as late-stage defects. Our team felt empowered instead of reactive, and it significantly improved collaboration between QA, design, and development. I can confidently say UX played a major role in reducing defects and making our releases smoother.

[interface] image of a tablet showing a saas product interface (for an ai saas company)
Graeme Taylor
Senior Digital QA & Test Manager

Across many years and countless digital sales campaigns, Richard proved to be one of our most reliable and insightful UX partners. Beyond exceptional design skills, his breadth of digital knowledge — spanning UX, content, SEO, performance, accessibility and customer behaviour — made him uniquely effective at turning complex propositions into clear, relevant and commercially strong customer journeys.

image of office environment [interface]
Naomi Dias-Hawe
AVP Digital Sales at HSBC Bank Canada

Richard was a key contributor to HSBC Bank Canada's digital transformation programme. His strong UX expertise helped us redesign and streamline critical customer journeys, especially onboarding and account opening.Richard’s user-centered approach removed major friction points, resulting in smoother, more intuitive experiences, lower drop-off rates, and faster time-to-value for new customers. His collaborative style and focus on measurable impact made him an excellent partner in delivering a world-class digital banking experience.I highly recommend Richard for any UX or digital product role—he consistently puts the customer first and delivers results.

image of team member explaining a conservation project
Jun Shen
Head of Online and Mobile Banking Channels at HSBC Bank Canada
View on LinkedIn

Let’s build your next success

Ready to discuss your project or see more case studies? Share your email to connect and explore how we can elevate your digital experience.

Thanks! We’ll be in touch soon.
Sorry, there was an error. Please try again.