The challenge was to create a flexible 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 on UX and design patterns to arrive to a solution that can accommodate the widest range of content requirements and still feel familiar when viewed on any device in any context.
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 complicated 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.
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.
Tools
Interactive tools were embedded into journeys to assist customers in making the right financial decisions.
Global UI System
As future iterations will 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.
Louise Winters 