A web design system to streamline the pre-login personal banking experience
Project type
Global web design system for a multinational bank’s web revamp — scope includes only Personal Banking CASA (Current Accounts Savings Accounts) related pages that are pre-login.
Completed 2020
My role
Working under Mullenlowe Singapore for a Singaporean multinational bank, I was the lead UI designer that conceptualised and designed the refreshed web look and feel, and the global web design system.
I was involved all the way from the initial concept stage, to component audit, UI production, and finally design system delivery to our FE development team.
Tools
Sketch, Invision, Zeplin
The larger project team
Our cross-functional team consists of digital strategists, UX designers, and FE developers. We work in close collaboration with our client’s product owners.
The problem identified
Banking can be a daunting affair for the everyday user. When the web experience is painfully disjointed, users are unable to complete their desired tasks, and this can create added stress and frustration.
In our research, we found that the core issue was:
Most of the bank products (e.g. savings account, credit cards, etc) are not contained within the larger main website
By clicking on each product, users are often brought to a new site with no clear gateway to backtrack to the main site
This means that the entire web eco system is actually made up of multiple micro-sites of different navigations, which breaks up the user journey
A quick glance at the different product micro sites:
We also found that micro-sites were preferred by the bank’s product owners, because the old website template is just not flexible enough to house content suitable for each product’s branding.
The old main website:
So the big question was…
“How might we create a design system that can streamline the different products, while provide enough flexibility to house versatile content?”
Leading up to the solution
Together with the strategy and UX team, we conducted a few weeks of findings gathering through stakeholder workshops, data analytics, and market research. This eventually outlines the requirements that will inform our design.
From the user perspective, the website must be easy to use, with clear entry gateways, conversion points, and exit points.
And from the business perspective, we need to convince product owners to stop creating micro-sites — because our new design system will be versatile enough to showcase their content, plus a streamlined user journey will definitely help with their conversion rates.
The solution
Staying true to the client’s brand promise of “Right by You”, we wanted to design a branch-to-digital experience that focuses strongly on the human aspect of banking.
“Online banking shouldn’t be another hurdle in your everyday life. It should be a smooth and intuitive experience that is honest and transparent – just how you need and want it to be.”
On landing, user is immediately presented with a greeting and a list of quick task options, very similar to how your experience will be at a physical bank branch.
Decluttered entry points — easily locate, filter, and compare between different banking products
User-centric content that is needs-focused, as opposed to the previous website which was product-focused and filled with banking jargons that most users are unaware of
As we go live with only the Personal Banking portion of the website, it is important to constantly reassure our users that they are on the correct site — so we create a simple page explaining how and why things are changing.
Moving to UI production
Upon approval of the new website look & feel with the client’s c-suite, (and before we kick started our UI production process), we conducted a thorough and stringent component audit, together with Strategy and UX.
This audit is informed by the new IA, new content structure, and the approved look & feel direction. With this, we are able to define a finite list of templates and components we need to flesh out in order to deliver.
The web design system
In our UI Production, we also cross check and revise our designs according to:
Web Content Accessibility Guidelines (WCAG) AA Compliance
Bootstrap v4.0 Best Practices
Component-based Design Best Practices
We delivered web desktop and mobile page templates, together with a design system in 5 UI states, 4 break points, and with each component’s min. and max. states.
This is handed over to our FE development team, and our UI work ends here.
A versatile system
To cater for versatile content, we created a system with minimal UI colours, and designed it such that the main site only uses 3 hues, and 2 gradients.
By making these 5 colours flexible, product owners can easily switch them to the relevant product brand colours to create unique templates without straying away from the web eco system.
Different colours can create a different look & feel, but the site maintains the same components and navigation system.
My takeaway
Being my second large scale web revamp project (following the revamp of an airline’s website), this project was all about refining the design work flow and execution process of building a system.
Being already familiar with the technical constraints (such as WCAG compliances, bootstrap and component-based design best practices), I get to dedicate my energy into the solutioning of the problems, be it user related or business related.
This project was also an exercise in subtraction. In order to achieve more, we need to reduce until it is obvious.
A lot of times as designers, we are constantly thinking of adding more and doing more, and often forget that making something “simple” and “easy to use” is actually the most essential.
“Simplicity” is always a tricky concept when selling to stakeholders, so I’m very grateful for a supportive client who trusted in us and was aligned with our vision.