Ushering a 120 year old bank into their digital transformation era

Role

Head of Experience

Team

10 (UX and visual designers, user researcher, content strategists)

Type

Overall design leadership; experience strategy; design system; DesignOps

Timeframe

2022 - 2023

⏱ project overview

A mind-boggling large number of sub-sites, branding sites, micro-sites and functional sites sat on an ecosystem of disjointed and antiquated CMS. Worse still, there was confusion, a loss of brand trust, an unacceptable drop-off rate (amongst other unpalatable metrics), and a general unpleasant and effortful experience for both customers and internal teams.

It was up to us to migrate this regional bank onto a new CMS, complete with a brand new design system to bring users through delightful data-driven journeys. More than that, we improved the client's internal publishing processes and ways of working, culminating in less frustrating work for them.

💫 Impact

+20%

Pages per session grown

-4%

Page bounce rate reduced

8

Business units the design system has coverage over

Using frameworks for ☑️ Practicality ☑️ Scale ☑️ Impact

Don’t reinvent the wheel — we won’t have time for that.

(And, more cynically: the client isn’t paying us for that.)

That is the case for many client engagements with a fixed scope, where we are bound by assumptions in the initial scope of work, and by the short runway of time we will have to deliver it.

Within these constraints, here are some examples of how I led the maintenance of cohesion, structure, and consistency across the multi-year program.

Setting up design documents and checklists

My love affair with Notion continues as we used this as our source of truth, with decision captures. Equally important, to scale up best practices and the right design culture within a team, we established these guard rails to ensure quality of the shipped products.

I took my learnings from projects past, about documentation and ensuring that they are communicated to the cross-functional team to heart. This documentation also make sure that:

  • Consensus is captured around the experience we're delivering
  • Knowledge is scaled across the entire team
  • Organizational memory for these actions and decision is kept

The power of intra-team communications absolutely cannot be understated in a massive program, and it took some experimentation to figure out the right cadence, volume, and tone.

documentation

↑ Above: A snapshot of how we organized our shared brain, allowing for ease of reference and transparency across the teams

Every facet of a heuristic evaluation analysis, systemized

With 13 different BPI sites and 80+ journeys across both desktop and mobile devices to assess in 3 weeks, we were in for a wild ride.

The setup started with identifying the metrics for the framework, which spans across four different categories. These would add trackable and quantifiable rigour through the design process, and give a comparative view across both internal and external lenses.

(Time travel to the present: we did the same assessment to track the improvements after the site was launched!)

In order to quickly scale up to the rest of the team involved in this exercise, I set up Excel sheets with formula that would help to calculate scores and give an aggregated numerical output for each section of the categories, making it a breeze

Finally, when it came to communicating our findings, components were set up in Figma to allow for easy editing and updating of findings across the different sites. 

↓ Below: Spreadsheets and components galore!

heuristic-excel-1
heuristic-components-1

Anchoring experience principles to archetypes and journeys

I implemented the frame for standardized journey phases through the anchor of experience principles and what they mean for archetypes.

This allowed us to identify distinct moments that matter and opportunities, but still around a sense of familiarity and scalability so that the client team could also easily distribute it to the rest of their business.

↓ Below: A glimpse of how we systemized the journeys for three of the archetypes, and identifying the customer lifetime value that can be unlocked along their entire relationships with the bank

journeys

Design system: curation vs. creation

Building a design system from scratch was going to take us weeks upon weeks.

But what if our starting point was curation and adaptation, from the accelerator we’d built in anticipation for such a scenario?

The time and effort savings are so monumental, and we bought the time to explore more on the visual language, testing the concepts with the clients across the main and sub-brands, and allocated some of our team members to support in other activities like IA testing.

You can see more about how we’ve set up the Xcelerator in its own case study.

foundation
components
fragments
guidelines

↑ Above: A look at the engine of the design system, from foundations to how they translate into coded fragments, and guidelines to allow for better onboarding of the design process for anyone in the team

Communicating purpose through systemizing covers

As the chosen tool to communicate our designs not just with clients but internally with our cross-functional teams, we needed a way to quickly see at a glance which Figma file was the right one. 

↓ Below: Figma covers, with multiple boards for external reviews, internal connects, cross-functional working boards, and archive boards capturing the changes over time

covers

Final thoughts

This was a challenging engagement, but not just because of the delivery aspects of it. We were hit by a round of layoffs right smack in the middle of the busiest period of it, with half of my team being let go. 

Beyond applying empathy and patience in these situations, the leadership lessons I’ve learned can’t be distilled down to platitudes right now; I’m not going to sugar coat it and say that it was a cakewalk, and that everyone came out stronger for it. 

These were hard lessons: of motivation, depression, injustice, and the need to still lead what was left of the team through the turbulence. One day soon I'll write a companion post about this!