Creating a Design System for Maybank Digital Banking
Contributors: Ain Sahimi, Alicia Tan, Edward Han, Intannur Ain
Tools: Figma and Miro.
Overview
Maybank was incorporated on 31st May 1960. Founded by a Singaporean, Tan Sri Khoo Teck Puat. Maybank is Malaysia's largest bank and also one of the leading banks in Singapore. Maybank has a full range of banking services, with 21 branches and more than 27 ATMs strategically located throughout the island.
Our Problem Statement
While exploring Maybank's mobile application, we discussed the UI issues that we found within the app.
Some of the problems were:
The inconsistency in design
The design itself was not up to date
It was hard to navigate
The logos/icons used were not high resolution
Visual hierarchy can be improved
Basically, the team felt that the branding was not strong enough and it was not user friendly. We planned to solve the said issue by creating a set of design system for Maybank's mobile application. This would create consistency as well as build trust between the user and business end.
Key Design Principles
Trustworthy
It should look trustworthy, so as to increase brand awareness and allow users to be comfortable with the brand.
Beautiful Yet Functional
It should a variety of purposes, making the application functional, yet pleasing to the eye.
User friendly
It should be easy to navigate, with frequently used tasks and functions well positioned on the home screen.
Consistent and Simple to Use
It should also be simple to use and understand.
UI Foundations
Our mission was to retain Maybank’s key branding but yet introduce an improved core UI elements, e.g: Buttons, brand and UI colors, typography etc…
Prioritisations
Once we established the core UI, we then work on identifying the components that bring the highest value and most critical in the Maybank banking app.
Component Anatomy
We then continue to identify the components used in the Maybank digital banking with the help of the priotisation exercise we did earlier.
Using the core UI that we have established, we then extract out the elements to form the components.
An example of how the card system was created using the core UI elements.
Our Product Offering (Insurance) - Designed with Design System
The team decided to focus on insurance, one of the features that Maybank digital app offers. We draft out a low fidelity wireframe using the components created for the design system.
Tone and Voice
Before we proceed on applying the content and visuals, we discussed on what the tone and voice of the brand should be and we came out with the following below.
Finally, we decided to adopt option 1 which has the best features such as a clean layout, clear hierarchy and good functionality.
Final Design
The final design consists of the core UI, components, and, tone and voice which contributes to the content and visuals used.
Design System Success Metrics
It’s important to measure the success of the Design System from multiple standpoints to help guide business decisions and find areas of improvement.
Internally, we carried out a customer satisfaction survey to get a gauge if people would want to use or find out more about the product we designed.
In conclusion, we felt that it was neutral - we needed to explore more on the mobile app to come up with more components in order to have a cohesive overall design system.
Constraints & Retrospectives
What went well
With good understanding of the current design problems and concerns , we were able to establish the design priority and principles, and come up with a design system that significantly improve the current design.
Constraints
Some desired outcomes are unclear; some required transactions and usages are not fully communicated to us ; tight time and budget.
Areas for improvement
Work on more than one key components. Creating auto-layout with multiple components; Apply the design system to more screen and applications
Thank you so much for reading! If you have any comments regarding my work, feel free to drop me a feedback! It will be much appreciated!✨
