Experience strategy, omni-channel design system, engagement, research, transformation
Role : Head of Design APAC & EMEA
Duration: 5.5 years
Accolades
2021 Best Bank & Digital Bank of the Year - The Asset Triple A
2021 Best Digital bank for CX, HK - The Asset Triple A
2020 Digital Bank of the Year - The Asset Triple A
2019 Asia’s Best Digital Bank - Euromoney
2018 Best Digital Bank Asia Pacific - Global Finance Magazine
To protect the interests of Citi, I have omitted and obfuscated confidential information and unreleased features. All information in this case study is my own and solely focussed on Design & UX strategy. It does not necessarily reflect the views of Citi.
Un-complicating finances
Banking is cumbersome to many people. In turn, they barely engage, consider or purchase on the digital channels that have become vital for financial servicing.
Today’s Citi Mobile app started from the seemingly trivial insight that banking apps and websites are both, hard to navigate and hard to understand. It was an internal experiment to explore, if we could create an app that wasn't. An app that made clear to people their immediate opportunities, risks or actions, so they were motivated to
log in more often and to engage more deeply with higher conversion.
This experiment is now live in 14 global markets and has changed how Citi conducts business with its customers across the globe.
Working backwards from Perfect
The team knew that making away with convoluted menus and complicated language wasn't enough to make customers feel more capable. We needed to redefine digital servicing from the ground up.
But how to get started with a proposition of this scale? The challenge for user-centric design is that it needs to be experienced to be convincing.
As a strategy deck alone it's too easily dismissible for decision-makers less familiar with the effects of emotions and flow.
To get buy-in, we therefore needed something that could make the difference tangible and real.
We decided for a variation of Amazon’s Working Backwards methodology: not just a press release to evaluate opportunity, but a production plan and a fully functioning prototype on a phone.
2 months, 25 concepts and many coffee shop user tests later we were ready to put an interactive experience into management’s hands. It was our vision for more customer-centric digital sales & servicing, and it literally took mere minutes to earn the team the green light.
Defining ‘customer’ - Nobody likes a banking experience that isn’t made for them
With the budget in hand we conducted in-depth qualitative and quantitative research across 6 markets in Asia Pacific, using the prototype to check our assumptions about people, needs, and behaviours.
It became very clear that Citi was a different financial institution to different people - Whereas to one customer it’s a credit card company for a single piece of plastic, to another it's the custodian of a complex relationship comprised of multiple deposit, FX and investment accounts.
At high level, 3 customer groups stood out as the most prevalent across all markets. These were customers with:
ONLY CREDIT CARDS
Focussed on spending, next payment date, rewards and the use of credit lines
DEPOSIT ACCOUNTS
Focussed on money movement and on casual savings
INVESTMENTS
A combination of the first two plus investments with an overall focus on active wealth accumulation
Discreet groups, similar behaviour, matching needs
Naturally, each of these groups wanted to feel like the app was made specifically for their banking relationship - a credit card app for a customer with just cards, a money-movement app for someone with deposits and a wealth app for an investor. Could we build a single experience that could cater to such differences?
We found the answer in the groups' behaviours. While their focus was different, their motivation to open the app was surprisingly similar - nearly all login journeys fell into one of two meta models:
1 - ACTION SEEKERS
Open the app to complete a specific action (ie a payment or a trade) with the desire to understand the balance/financial situation before executing this planned action
2 - INFORMATION SEEKERS
Open the app to view the balance/s and, if needed, spontaneously execute an action as the result of the financial situation (ie a funds transfer to balance accounts)
An elastic interface to serve every relationship
Both, action & information seekers, wanted clarity on their balances instantly after login. And both were prone to taking action afterwards, either intentionally or as a result of their financial situation.
We translated this into what we called the 1,2,3 structure of the dashboard:
After 1sec - clarity of financial status
After 2sec - comprehension of necessary actions and location of these actions
After 3sec - start of the planned action (action seekers), or necessary action (information seekers)
Within this framework we customised and personalised the experience to the respective banking relationship.
PERSONALISED Financial overview DESIGN
The nature and number of products was entirely different for our 3 groups. We solved this by modularising the dashboard and giving each customer group a unique design, made for quick comprehension and product navigation.
Card-only customers wanted further details like card number and available credit limit on first sight, investment customers required clarity on summarised balances across all product types with performance indicators where applicable.
PERSONALISED Relationship navigation
To cater to the groups' different focus, we modularised the entire app content. Each group would now see a specific main navigation on the bottom with the sections most relevant to them.
The navigation bar reacted to the customer group and showed the key sections for these groups. Any function and feature of the app was reachable either straight from the dashboard or from these sections, making an overbearing main menu unnecessary.
There were further differences we solved for and ultimately provided 5 unique combinations of dashboard designs and navigation for a highly personalised experience. At the same time, it retained a single basic structure to ensure cost-effectiveness and simplicity for servicing strategy and production.
Proactive servicing for engagement and control
Now that the dashboard was personalised to the customer group, we looked at the second problem - engagement and control. How could we alert customers of immediate opportunities or risks and help them act on these? Most banks relied on Emails, SMS or push notifications.
The problem with doing this is two-fold:
Open ends
These messages don't come with solutions. Customers need to comprehend the alert and decide on the right action, then manually find functions buried in the navigation or contact a call center. Often they aren’t clear what the right action is. can't find it or don't have the time to 'hunt' for it. In the end, they feel unsupported.
Over-communication
Putting not only alerts, but also opportunities, reminders and suggestions into messaging format would create noise that exceed anyone's patience and goodwill. And when everything comes in the same format, it's impossible to differentiate what is urgent and what isn't.
What really mattered to people was having clarity and guidance when they looked at their balances. This made them feel informed and in control, so they could decide whether or not they wanted to act on the alert or recommendation and this action should ideally be placed in view.
We created actions for
Preventing negative financial impact - ie overdrawn accounts, blocked credit cards or exceeded limits
Prediction - ie upcoming payments, statements and pay dates, replacement cards, new accounts, relationship manager appointments
Opportunities - increase of limits, transfer of balances into higher-yielding products, renewal of expiring plans
STATUS LABELS with contextual actions as triggers
Any product or product group was able to 'speak' and display a color-coded label with an alert, opportunity or recommendation.
Every label came with a CTA/button to make it actionable. Problems could be solved (servicing) and opportunities taken advantage of (sales) right from where the attention was: on the the balance/s.
CLICK, TAP, DONE - 3 STEPS TO COMPLETION
Modularising the app architecture gave us the opportunity to 'free' journeys from a fixed place and to make them available anywhere inside the app. Loan booking flows, statements, appointment booking or any other flow could now be displayed anywhere.
That meant it was never more than 3 steps from a proactive servicing message to completion, even from outside the app.
Results: More engagement, higher return, faster production,
In the interest of confidentiality, results are being kept high level.
Motivation
NPS was negative before we launched the experience and quickly turned high positive in every market after launch. We also saw a considerable uptick in the number of logins per customer - More than twice as many customers as usual wanted to return to an experience that made them feel like the could understand their finances better and they needed to think less for everyday actions.
Return
Many customers started using features and took up products they never used or booked before. For some key products, the new experience raised conversion numbers 200-300%. This was driven by the relationship between contextual placement, personalised content and timing of insightful triggers. At the same time, call center contacts reduced considerably as customers felt more informed and more in control.
Flexibility
Modularising the experience with an omni-channel design system had a positive impact on revenue and cost by itself: Design & development time could be reduced by up to 50% through the use of a library of approved and standardised design system components. With faster production time came the ability to react quicker to insights from analytics and customer feedback in order to refine the experience, which in turn drove engagement further.
Why this success? Analysing the elements
Of course the overall journey to the product was longer than it seemed here and it wasn't smooth sailing every day. Many smart people were involved and many pivot storms had to be weathered. Things break, people disagree, and time is finite.
In the end, the success was a case of 'the fools didn't know it was impossible, so they just did it' and looking back I would attribute it to three factors:
Shared belief
Having a vision and making it tangible makes it possible for an entire organisation to march in the same direction. User experience is not simply a matter of logic but one of human truths and emotions, which are often hard to capture with numbers beforehand. However, not everyone can imagine the impact of a better experience without seeing it.
To crack: Give everyone agency to contribute to the vision. Co-owners are the best co-drivers.
Partnership
Everyone must feel free to voice opinions. However, nobody understands business better than the P&L owner, nobody gets experience better than the designer and nobody knows the intricacies of technology better than the developer.
To crack: Being aware that we don't know what we don't know. Trust every participant's expertise, reality of constraints and intent to work towards the vision.
Openness
You will be wrong at times. They will be wrong at times. Everyone will be wrong at times. The faster anyone raises their hand when they realise they were mistaken, the faster people can search for a solution. Together. More often than not this creates a tighter bond and higher trust.
To crack: Focussing on and recognising solutions, not mistakes. The more corporate the organisation, the harder you need to work for this. It is, however, the cornerstone of the entire undertaking.