Design Systems: creation, scaling and management of a global website template
TL:DR
HSBC needed a new website template which could be scaled up to markets around the world, and adapted to suit each market’s specific needs. With strict controls for their visual identity, we needed to create a framework and toolkit which could be rolled out and flexed.
I led both the development of the design system and the roll out to two lead markets concurrently. The design system used an atomic approach, identifying templates, components and elements, and setting out standards of use. I was the face of the agency team, working closely with both the global HSBC team, and the leads for each market.
The outcome was a highly flexible but well structured suite of design tools, which could be flexed and repurposed to adapt to each market’s needs. The outcome meant an ‘invest once, reuse often’ model for rolling out websites across the HSBC markets.
The client’s brief
The global digital team at HSBC had big ambitions for a roll out of their public website across many markets. The project had two goals - create a flexible approach to creating websites that could work across varying markets, and kick off the roll out with launches in both Hong Kong and China.
The varied group of stakeholders posed a particular challenge in designing and implementing an approach. As well as the key stakeholder within the HSBC global digital team, there were international product owners and business stakeholders, and global brand managers. Each had distinct requirements, and needed considered approach to engagement.
Working remotely and across language and cultural barriers put an additional emphasis clear communication and removing ambiguity in solutions. As with any agency led project, the timelines were demanding, and requirements were subject to changes. Rapid turnaround and responses to change was important to the client.
We followed the atomic approach set out by Brad Frost.
The approach
I worked with the account management team and stakeholders to define the client’s goals and targets. I led identified an approach for gathering requirements from local markets, and capturing their needs. At the same time, I led a workshop with the design team to explore options for an atomic design approach, which the client had previously identified as their preferred approach.
In order to deliver the two project goals in tandem, I had to juggle dependencies between the work streams and have a view on all ongoing and upcoming activity.
The market roll out to China and HK was concurrent. I kicked off the engagement by introducing the stakeholders in each country to the existing designs and gained their buy in to replace their existing sites, and commitment to provide resources to support the project. I relied heavily on the stakeholders, research about cultural differences between users, and an assessment of their existing site, to inform our recommendations for their future site.
While this was going on, I was working with the team to break down the existing designs into atoms, modules, components and page templates, which needed to go through the global brand governance processes. I created a framework which balanced the need to retain the integrity of the original designs, with the requirement to use a CMS to enable markets to manage their sites. I defined a set of rules and guidelines for template and component use which would give the best flexibility, while ensuring that market stakeholders couldn’t introduce poor experiences.
The result
I acted as the face of the agency team, routinely presenting to global stakeholders to inform them of progress, gain approvals, and gather information. I considered the client’s perspective with each decision taken, and directed the team to deliver to that standard.
I delivered a future proofed approach to reuse of global public website designs, with an effective implementation in both China and HK. The client was pleased with the outcome, and the approach has been continued across other markets.
HSBC China website
HSBC Hong Kong website