barb » HSBC Global UI System 2




A global responsive user interface system

As a senior UX Designer I was involved in re-defining HSBC's global design patterns from the ground up to suit all their touchpoints across 2,000 websites worldwide.


Our challenge was to create a flexible reponsive system that can be deployed across 20+ markets while, during the first release in 2015, primarily being aimed at HSBC's Hong Kong based customers.

  • Consistent experience


    The team iterated through a myriad variations of UX and design patterns to arrive to a solution that could accommodate the widest range of content requirements and still feel familiar when viewed on any device in any context.

  • Name
  • Name
  • Journey


    When defining the responsive template system we had to consider the extended journeys which they were part of. This meant displaying contextual information where the user needed it most so they were able to complete more sophisticated goals, such as making an investment decision or understanding their net worth, with complete confidence.


It was especially important that the new system supported customers in accessing complex financial data from smaller screens. The team had to make sure that responsive behaviour of data visualisations and tables displaying large datasets stay accessible at all sizes.

  • Clear structure


    The backbone of the UI System was a fluid-responsive grid and a set of rules that defined the module behaviours that the grid supported. Intuitive, scalable navigation, consistent page template structure and clear visual hierarchy ensured a robust, flexible and easily extensible structure for other localities to build on.


  • Name
  • Modular flexibility


    The approach that made the system so versatile was designing on the module level. Each page was broken down into smaller building blocks that individually could accommodate a variety of use cases and requirements but when used together they created a harmonic content flow that was clear and efficient.


  • Name
  • Tools


    Interactive tools were embedded into journeys to assist customers in making the right financial decisions.


  • Name
  • Global UI Sytem


    As future iterations would have to be able to follow the principles that the new system established, the team delivered a comprehensive UI library & styleguide to ensure that HSBC's digital experience will continue to improve and evolve through perfect brand consistency.


  • Name

Role: Senior UX Designer

Agency: Brilliant Basics