INTRO
It's not the 20th century anymore, and going to the bank once a month is no longer the usual errand with a local banker's help.
Nowadays, transferring money is an everyday task, whether it's paying bills, shopping, or sending money to friends and family. Despite this change, dealing with money remains a stressful experience.
Our money exists as pixels on our device screens, rather than something tangible we can hold or store in a pillowcase. That's why it has become more important than ever to trust the institutions responsible for safeguarding our hard-earned cash.
The Bank's responsive design aims to provide users with complete confidence and peace of mind when managing their money and savings across devices.
HOW MIGHT WE MAKE ONINE BANKING FEEL AS INTUITIVE AS TYING YOUR SHOELACES?
CHALLENGE
While numerous digital products tend to focus on specific user demographics, online financial transactions encompass a significant portion of the modern population. Regardless of age or technical proficiency, every user seeks to navigate their banking website or app with ease and confidence.
My objective was to create a universal design that caters to a broad audience, accommodating various user habits -from making on-the-go transfers to scheduling recurring payments from the comfort of their homes.
BALANCING QUALITATIVE AND QUANTITATIVE KEY METRICS
For a complex product like an online bank, a holistic assessment involves considering both qualitative and quantitative KPIs. From the UX design perspective, providing a sense of security in using the online bank is crucial, alongside optimizing the number of clicks required to complete fundamental tasks like making a money transfer. These metrics are interlinked, subject to various attributes that can influence the overall user experience, and may even contradict each other if not thoughtfully designed.
"I just want to send money, why are there so many buttons and options?"
Where do I click?
"Did I send it? When is it going to arrive?"Where do I click?
"Can I accidentaly lose my money if I click something wrong?"
"I better keep my notepad with account information with me"
"I need to schedule a quiet time for this"
"I better do it on my computer, I can make a mistake on mobile"
"Mobile is another thing to learn, it'll all be different! I better stick to computer!"
SUBJECTIVE
Why balancing both metrics is important
"Hold on, I didn't think it would send right away, I thought I could read through again before confirming!"
"The number of clicks for one transfer is way too high and time consuming"
OBJECTIVE
"It's often not easy to find old transactions"
"Will using more products increase time and effort switching between?"
"Some features are limited in mobile banking"
"Some features like QR payments require mobile banking"
CONTEXT & RESEARCH
WHAT DO USERS SEEK FOR IN ONLINE BANKING?
User interviews have been conducted to better understand main concerns as well as expectations users across democraphics have. Eight participants from various age groups and educational background have been interviewed and data gathered have been used to generate empathy maps, create user journeys and finally define problem statements.
CLARITY
Many study participants conveyed their frustration with the cluttered design of the banking websites they have utilized. A common concern was the time-consuming process of distinguishing between standard banking actions and promotional or supporting products.
Should there be bigger distinction between the two? What tools can bring more clarity to existing designs?
EFFICIENCY
As the majority of tasks were reported to be somewhat repetitive, participants expressed the desire for the ability to expedite their financial errands.
Can some tasks be simplified or automated without compromising on security?
RESPONSIVITY
Both user research and competitive audits revealed that several popular banks do not provide a consistent user experience across devices. Issues such as inconsistent visual design, information architecture, or the absence of certain features on specific devices have been identified as significant pain points impacting a considerable number of users.
How can a standardized design and feature set be implemented across all devices to ensure a seamless and uniform user experience?
DESIGN
LANDING PAGE
A homepage of a bank should have a strong structural and visual identity. It takes a second for users to form an opinion about what level of trust the institution is giving. Information architecture, the tone and the UI, especially colours play an important role in this case.
The Bank is designed to be mature, elegant, youthful and confident, up to date with the financial world and a place to trust your money to.
USER ACCOUNT PAGE
The primary objective of this page is to offer users a quick and accessible view of their account, with key actions prominently featured on the first screen and secondary actions placed further down or on other account pages.
For this I opted for a centralised dashboard that provides an overview and essential information, complete with links for managing products and a clear call-to-action button.
While the primary account is preselected for user convenience, a quick glance reveals all subscribed products, making management readily accessible.
Given the central functions of a bank, such as transfers and fund deposits, these actions are strategically placed, just a click away and visibly highlighted.
The page's hierarchy is intuitive - starting with an overview, followed by actionable steps, and concluding with a history browse.
To maintain a streamlined user experience, subsequent actions open in pop-ups. Less frequently accessed details like account information, security settings, addresses, user information, applications, and contracts are discreetly housed under the user management section, recognizing their lower priority and infrequent use.
TRANSFER FLOW
The primary challenge in most cases lies in striking a delicate balance between subjective and objective metrics within the main flow. Users must feel secure and assured that their input details and transaction summary are thoroughly reviewed to prevent any inadvertent financial transactions. Simultaneously, a lengthy flow, a high number of clicks, and uncertainty about the progress can be undesirable for various reasons.
To address these concerns, I've chosen a pop-up flow, primarily focusing on subjective metrics. This design choice aims to keep users closely connected to the established home base, the dashboard page, and the point from which they initiated the action via the call-to-action button. The pop-up serves as a clear indication that a standalone event is occurring, ensuring users understand they haven't been redirected elsewhere, eliminating the need for them to cross-check their location.
Given that many transfers are repetitive but not necessarily set as recurring, users have the option to expedite the process by jumping directly to a saved preset for a payee or by repeating a transfer from their recent transaction history.
In order to maintain a clear and guided flow, each piece of information input is kept separate. Although this increases the number of windows, it minimises clicks, and users can be confident that no field has been overlooked.
The summary page provides users with an opportunity to review and correct information before allowing them to proceed, ensuring they confirm that everything is accurate.
A progress bar positioned near the action button at the bottom of the page indicates the advancement of the flow.
Authentication can be achieved through the app or computer-integrated security systems.
Lastly, the confirmation page provides users with options to download the transfer report, review their transaction history, or initiate another transfer.
SELECTED SNAPS FROM THE FLOW
(the flow took total of 12 clicks)
COLOURS, TYPOGRAPHY, BUTTONS
FONTS
Roboto | Roboto Medium | Roboto Bold
COLOURS
The choice of colours was not random at all. One of the insights that users interviews provided is that colours indeed play an important role in how a product or service is perceived. Shades of blue and purple are associated with wealth, seriousness, trustworthy institutions. The modern online setting finalises the palette with bright tones and contemporary pink. The colours were built and customised using Material Theme Builder plugin for Figma and checked against accessibility requirements as well as the text.
BUTTONS
* Material 3 Design Kit was modified and used for this project. Colours were built and customised using Material Theme Builder plugin for Figma.
EXPLORE THE PROTOTYPES
Click on respective image and explore high fidelity prototypes for desktop and mobile website as well as mobile app
Try making a simple domestic transfer on the desktop version!
Try making a simple domestic transfer on the desktop version!
The financial market in the West is vast and saturated, and it's the intense commercial competition that's driving rapid advancements in the industry. While the number of features is on the rise, it's not keeping pace with the expansion of our mobile screens or our diminishing attention spans. Both research and usability studies have consistently revealed that, more than specific add-ons or special features, users prioritise an easy, intuitive, and efficient flow, coupled with a trustworthy brand.
Responsiveness is a critical factor, especially with the increasing number of users favouring smartphones for their day-to-day banking activities. The expectation is for smartphones to perform at the level of desktop computers, presenting a considerable challenge given the constraints of pocket-sized devices.
In this context, the adage 'less is more' rings true once again, emphasising the importance of simplicity and functionality in meeting user expectations.
TAKEAWAYS
Next project