Steven Wise.Portfolio

Case study

Designing one banking experience across 55 markets

HSBC Business Banking

Overview

The challenge was to create a consistent experience across 55 markets and 17 languages, including the UK and Hong Kong.

As UX team lead, I was responsible for ensuring this large-scale and complex project was supported by robust UX methodology and high-quality deliverables.

Requirements gathering

Stakeholders from the 55 markets distributed across the globe were brought together at a London summit. The vision for the project was presented, and connections with stakeholders were formed.

I designed and facilitated workshops to gather, understand and prioritise requirements from the market stakeholders at the summit and throughout the project.

Design for a workshop
Workshop design

Site audits

The individual country sites had disparate and sprawling architecture without logical structure. Each site’s content had to be logged and audited.

This provided an understanding of the content structure, volume, and types and highlighted potential challenges.

Sample of a site audit in a spreadsheet
Site audit

Information architecture

The site architecture was organised around the bank’s ‘capabilities’, which appear in the primary navigation, and its product inventory. Users can navigate through the product family and individual product pages to greater levels of detail in a clear logical journey.

Usability testing of essential journeys and navigation labels gave valuable feedback on the naming and organisation of the site. This resulted in more user-centric navigation labels and structure.

Site map diagram
Site map and journey sample

Wireframes and prototyping

Wireframes were created to document components, page templates and functionality. Interactive prototypes were used to explore and test essential journeys and interactions.

The UX team closely partnered with the content editors, visual designers and developers. Collaboration at an early stage created a shared ownership and understanding of the design, functionality and user experience.

Wireframe of the HSBC Business Banking homepage design
Homepage wireframe

Design system

A library of reusable responsive components was created. This was hosted in a living style guide with guidance on the component’s purpose and use. This was referenced as the single source of truth and helped ensure a consistent experience across digital real estate.

The design system also provided design and development efficiencies. Country sites could be rapidly rolled out and more easily maintained.

Web page with component types marked up
Reusable responsive components

Content mapping

Existing content marked to be migrated to the new sites was mapped to suitable templates and components in the design system. A gap analysis enabled decisions to be made to either create new or variant components, adapt, or rewrite content.

To facilitate content migration, PDF forms were created matching each page template and its components. This enabled the content team to migrate content into the relevant content field aided by visual guides and annotations in the PDF.

Web page with content elements marked up
Content mapping and migration

Dynamic content

Personalised content can be displayed to users based on their geographic location, business size, industry sector and behaviour.

Country sites can draw on a global pool of shared editorial, and product content could be restricted to specific regulatory markets.

A taxonomy, tags and dynamic content rules were defined to enable the display of content on the relevant page and component types.

Diagram representing how dynamic content will be surfaced on the website
Tagged dynamic content

Enterprise CMS integration

Content rules and structure for each page template and component were documented to facilitate integration into the Sitecore CMS.

This approach gave editors a structured way to navigate and edit content related to the users’ view of the site.

Diagram representing structured content in the content management system
Content rules and structure

“Steve sets the bar for professionalism and quality of delivery. At Friday, he led the efforts on the most complex project the team tackled, and was invaluable in ensuring on-time and below-budget delivery. His composure was instrumental in keeping the team focused despite the many twists and turns, and his expertise allowed us to deliver innovative and elegant solutions that work.

Steve is a joy to work with. He’s funny, thoughtful and has the unrivaled ability to remain calm and gracious under pressure. Working with him has been a real treat and I look forward to renewing our professional relationship in the future!”

Alberta Soranzo, We are Friday

100%

Drag to pan. Scroll, pinch or use + and − to zoom. Esc to close.