After having helped Canadia Bank successfully launch their new website, our team designed its mobile banking app counterpart.
There’s no denying that digital solutions are overtaking almost all offline models. Banking is no exception. The number of smartphone users is constantly on the rise. The younger generation’s demand for convenience, security, and ease of access warrants the presence of a mobile banking app.
Our long-term vision for Canadia Bank's mobile app is:
In tandem with redesigning Canadia Bank’s online presence, it was essential to identify the differences between desktop and mobile to determine which elements can be kept consistent between the two mediums and to what extent.
Consistency across all mediums is essential to brand strategy. Ensuring that users don’t have to relearn the app is providing a good user experience. If a user feels a disconnect between the website and the app’s flow and structure, their user experience is bound to be affected. Especially as safety and security are at the forefront of banking practices, the confusion from having to relearn the app is bound to trigger feelings of unease and concerns over the authenticity of the clashing platforms. It's absolutely critical to ensure users are able to easily move from app to mobile web to desktop web and back. This is only possible through thoughtful navigational directions.
Different mediums no doubt function differently. The way gesture and navigation controls function are different between mobile and desktop. For example, to perform bill payment on a desktop, a mouse or a trackpad may be needed, while to perform bill payment on a mobile, a user may need to use TouchID or similar technology. However, despite differences in gesture and navigation functions, we designed to ensure that the core banking features strictly follow the brand guideline and design direction previously defined and are in congruence with the desktop counterpart.
Understanding the importance of intuitive design and navigation and how they can be achieved through the principle of consistency is what lay the groundwork for the core banking features.
One of the competitive advantages of a mobile banking app is the ability to perform traditional functions virtually. This includes account opening. We redesign to ensure that account opening is not only simple but also fast for the users.
At the very first interaction with the app, the onboarding screen presents the users with 3 main features: Mobile App Activation through Canadia Card, Account or CID; Guest Mode and Online Account Opening.
With specific regard to the Guest Mode, we wanted to give the users the ability to explore the app even without a registered account. Guests can explore and utilize core functions such as Exchange Rate, Fixed deposit Interest Rate, Promotions, Calculators, Loan and Help etc. This opens the door of the app's practicality beyond their existing customer's profile and entices non-customer to register.
Hidden fees often manifest through unintentional ambiguous languages and layouts. However, intentional or not; we can all agree nothing is more unpleasant than hidden fees.
To communicate transaction or anything that is funds-related as clearly as possible, we decided on using the Canadia Bank's primary red color for any 'Transaction Review Page' before the final transaction action is carried out. This reservation of the primary red color for every Transaction Review Page displays a vivid contrast to the muted white background of the other pages, and signals to the users to carry out any additional confirmation as needed. This way, mistakes are minimized.
Below are some examples of the Review Page for various different transaction functions. From QR Payment, Transfer between personal accounts, Transfer between other Canadia accounts, Domestic bank transfer, Overseas bank transfer, Standing order, E-wallet payment, Utility payment to Phone top ups etc.
Aside from color signaling, we ensure all the descriptions and call-to-actions are in plain language and in a straightforward structure; taking extra precaution to include all the necessary details such as merchant name, account number, exchange rate and fees etc.
Loans are one of bankings' fundamental service offerings. To simplify the accustomed complicated process of loans, we structure the Loan Application Form into two main pages: the first page gathers the user's basic information while the second page assesses the user's loan intent.
To match customers' expectations, existing users who are logged in should enjoy the convenience of pre-filled information and should only need to confirm the pre-filled information. The basic information requirement of the first page only applies to new users or those in guest mode. Following the specification of the loan amount, users are then shown the monthly payment of the loan and its breakdown. Once everything is confirmed, a final confirmation in a pop-up form lets the users know that their application has been submitted.
Multi-factor authentication is amongst the most secure methods against fraud. However, it could also present a nuisance for users from having to provide two or more verification measures to gain access. Biometric security such as facial recognition and touch ID makes multi-factor authentication a smoother process for users while also offering them an added sense of security.
Facial and touch recognition already have a recognizable UI of their own. Therefore, when it came time to redesign Canadia's Bank App, we opted to retain the recognizable Facial and touch ID icon while personalizing it with Canadia Bank's color, patterns and button. It's a sensible middle ground between adding a touch of familiarity and a touch of individuality.
The ability to turn on or off—ATM Withdrawal, Contactless Payment and Online Payment—pushes security up another notch. Advanced card management allows users to prepare for unfortunate and unforeseeable circumstances—where their credit or debit card is stolen—instantly, without having to contact a bank personnel where longline of queues await.
A simple layout allows the other elements to communicate their functionalities. For instance, from the use of on/off toggle switch, to the slider bar, to assigning red for active and grey for inactive; users are able to visually and easily gain a sense of the app functionality.
The Favorites feature enables users to create a set of templates for quick and easy access to their frequently used payment methods. Given its functionality, Favorites must be situated within easy access on the Homepage.
The categorization of Transfer and Payment serves to keep payment between accounts and utilities payment organized. Additionally the simple layout and navigation allows the (+) button to standout and makes the process of creating payment templates incredibly simple.
Creating a Pattern Library is not only a gateway to ensuring a consistent UI, but it’s also a gateway to ensuring seamless maintenance.
A Pattern Library is a collection of design components that appear multiple times on a website or an app. In the case of Canadia bank’s Pattern Library, we included vital assets such as Bank Components, Cards, Models, Inputs, Buttons, Icons, Typography, Patterns, and Colors.
This way, when future changes are made, such as adding new features, the groundwork is done, and various components and styles can be replicated at speed.
Designing a high-fidelity prototype is an integral part of the design process for any digital product because this enables the design team to run usability testing with end-users.
Hundreds of links between screens bring to life the interactions and the animations—allowing our clients to review our work in detail. Often in product design and development, there is an inevitable mismatch between expectation and reality. A high-fidelity prototype, however, allows for realistic user interactions bridging the expectation and reality gap.
Feel free to try out the prototype below, and click on the full-screen button to have an immersive experience.
Often, when there’s a considerable amount of work to be done, teams can be crippled by clarity on where to start and how to tie it all together. At Mäd, we work in batches that allow for critical checkpoints, ensure a steady process, and ensure we are building in the right direction. By creating our first batch of screens and wire-framing our designs into a working prototype, we can receive important client feedback before moving on to lengthier design sections.
Moving on to the second batch, we can add further sophistication and start carving out the true identity for the application. Again, we focused on some key aspects to develop and prototype to align the team for the final stages of the project.
Diving into the final batches, with both the client and our designers entirely in harmony, we create a high-fidelity prototype spanning a considerable array of screens. This allows us to carry out user testing, ensuring that the application looks excellent (and on-brand) and works as expected—and to a high standard.
We apply this process to all our projects, and Canadia Bank is no exception. With the UI completed, Canadia Bank was then able to take the prototype to mobile developers to turn the visual design into a coded, working product. The clarity given by such an in-depth UI handover allows coders to join up the dots simply (so to speak). It’s a ‘waterfall’ approach, whereby all the designs are completed in advance to let the coders focus on their area of expertise with the reassurance that all design problems have been explored, developed, and solved.
Given Canadia Bank’s position as the kingdom’s largest bank, to serve the needs of up to 500,000 users requires a thoughtful human-centric approach that envelopes many intricate steps.
A successful project is a result of transparent communication between both the client and the service provider. We take clients’ feedback very seriously and view it as our due diligence to provide drafts that mirror reality as accurately as possible, ensuring alignment from the start.
