Super-app pattern adoption for a scalable banking ecosystem: MyMo 2.0, used by 17.4 million customers
Super-app pattern adoption for a scalable banking ecosystem: MyMo 2.0, used by 17.4 million customers
SUMMARY
SUMMARY
I led the MyMo 2.0 mobile banking's UX revamp decisions, ranging from getting the buy-in from stakeholders, down to leading end-to-end design solutions and app restructuring, catering a scalable MyMo ecosystem and strengthening the value proposition of the core products that compliance with banking regulations and security requirements.
I led the MyMo 2.0 mobile banking's UX revamp decisions, ranging from getting the buy-in from stakeholders, down to leading end-to-end design solutions and app restructuring, catering a scalable MyMo ecosystem and strengthening the value proposition of the core products that compliance with banking regulations and security requirements.
IMPACT DELIVERED
IMPACT DELIVERED
DURATION
DURATION
March 2020 - February 2021
March 2020 - February 2021
CUSTOMER
CUSTOMER
GSB Government Savings Bank
GSB Government Savings Bank
TEAM FUNCTIONS
TEAM FUNCTIONS
2 UX/UI Designer (My Role)
2 UX/UI Designer (My Role)
40+ Developers
40+ Developers
15 Business Analysts
15 Business Analysts
3 Product Managers
3 Product Managers
2 Data Scientists
2 Data Scientists
MyMo 2.0 by GSB is now available for download on both Google Play (Android) and App store (iOS)
MyMo 2.0 by GSB is now available for download on both Google Play (Android) and App store (iOS)
or access this link to view a prototype demo
or access this link to view a prototype demo
MyMo is one of Thailand's national banking application operated by Government Savings Bank, objectively shaping the banking experiences to be simple and keep the 17.6 million customers to be on top of finance 24/7.
MyMo is one of Thailand's national banking application operated by Government Savings Bank, objectively shaping the banking experiences to be simple and keep the 17.6 million customers to be on top of finance 24/7.
Digital negligence and outdated presence, gradually leading to significant revenue loss from 2018 to early 2020
Digital negligence and outdated presence, gradually leading to significant revenue loss from 2018 to early 2020
The issues that GSB facing was primarily attributed to 3 major areas:
The issues that GSB facing was primarily attributed to 3 major areas:
The product's branding and presence fail to accurately represent the actual banking service quality regarding the poor usability practices with the convoluted app architecture.
The product's branding and presence fail to accurately represent the actual banking service quality regarding the poor usability practices with the convoluted app architecture.
Few commonly used features require excessive taps to the point where customers feel the experience is becoming burdensome, increasing drop off and churn rates per annual up to 13%
Few commonly used features require excessive taps to the point where customers fell MyMo banking experience is becoming burdensome, increasing drop off and churn rates.
The application of branding schemes all across MyMo was considerably inconsistent. Some screens assigned CTA buttons in outside-of-brand-rules hex code or incorrect use of UI elements, compromising the brand credibility which is in line to GSB's branding principles.
The application of branding schemes all across MyMo was considerably inconsistent. Some screens assigned CTA buttons in outside-of-brand-rules hex code or incorrect use of UI elements, compromising the brand credibility which is in line to GSB's branding principles.
1-week Sprint, 75+ lives to turn this magic happens
1-week Sprint, 75+ lives to turn this magic happens
Sitting down together with key stakeholders to document the critical impact expectations and relevant resources.
Prior to getting the buy-in from stakeholders and MyMo 2.0's project a green light, with a team together, we fulfilled the goal clarity and strong organization by drawing up the extensive roadmap, focusing a strategic set of issues and prioritized lists of banking products that we see ourselves tackling them in each quarters with the release dates.
Under the tight 3 hours of marathoning all the brain works and a pitch in one meeting, the result led to stakeholders stating 'This works for me. Let's make this happening'.
Sitting down together with key stakeholders to align on the critical impact expectations and relevant resources.
Prior to getting the buy-in from stakeholders and MyMo 2.0's project a green light, together with a dedicated team of business analysts and product managers, we fulfilled the goal clarity and strong organization by drawing up the extensive roadmap, focusing a strategic set of issues and prioritized lists of banking products that we see ourselves tackling them in each quarters with the release dates.
Under the tight 3 hours of marathoning all the brain works in one meeting, the result led to stakeholders stating 'This works for me. Let's make this happening'
Sitting down together with key stakeholders to document the critical impact expectations and relevant resources.
Prior to getting the buy-in from stakeholders and MyMo 2.0's project a green light, with a team together, we fulfilled the goal clarity and strong organization by drawing up the extensive roadmap, focusing a strategic set of issues and prioritized lists of banking products that we see ourselves tackling them in each quarters with the release dates.
Under the tight 3 hours of marathoning all the brain works and a pitch in one meeting, the result led to stakeholders stating 'This works for me. Let's make this happening'.
Kicking off the 2-week research-design sprint with few business analysts and another UX/UI designer together to walk down the UX audits of MyMo version 1.0 and 1.5 design styles and patterns incorporating heuristic evaluation framework. This process helped us to accumulate the insights of the underlying usability issues existed and outline measurable goals that account for the team's time and efforts.
Full deep dive of UX audits summary and all key problems underneath this message
Kicking off the 2-week research-design sprint with few business analysts and another UX/UI designer together to walk down the UX audits of MyMo version 1.0 and 1.5 design styles and patterns incorporating heuristic evaluation framework. This process helped us to accumulate the insights of the underlying usability issues existed and outline measurable goals that account for the team's time and efforts.
Full deep dive of UX audits summary and all key problems underneath this message
Inflexible Hierarchy
Inflexible Hierarchy
Consistency and Standards
Consistency and Standards
Font weight inconsistencies with the right-to-left text alignment impedes the natural reading experiences.
Font weight inconsistencies with the right-to-left text alignment impedes the natural reading experiences.
Flexibility and Efficiency of Use
Flexibility and Efficiency of Use
No clear options where users can switch the primary to secondary accounts.
No clear options where users can switch the primary to secondary accounts.
Poor CTA Discoverability
Poor CTA Discoverability
Recognition Rather than recall
Recognition Rather than recall
Unrecognizable call to action copy and cues disrupt the seamlessness of the experience, affecting the transfer journey to be easily lost and increased drop off rate.
Unrecognizable call to action copy and cues disrupt the seamlessness of the experience, affecting the transfer journey to be easily lost and increased drop off rate.
Lack of searchability
Lack of searchability
Flexibility and Efficiency of Use
Flexibility and Efficiency of Use
Navigational hindrances when there are no shortcuts available, potentially forcing all customers to scroll extensively to the end if the choice listed at the most bottom of screen.
Navigational hindrances when there are no shortcuts available, potentially forcing all customers to scroll extensively to the end if the choice listed at the most bottom of screen.
Cross devices non-responsiveness
Cross devices non-responsiveness
Visibility of system status
Visibility of system status
The choices of UI elements and layout does not dynamically responsive to the compact screen, causing legibility issues.
The choices of UI elements and layout does not dynamically responsive to the compact screen, causing legibility issues.
Spaceless Spacing
Spaceless Spacing
Visibility of system status
Visibility of system status
Side menu occupied 2/3 of the screen, leaving cramped touch area for exiting the sidebar. Additionally, some frequently used functions like cardless withdrawal and QR payment are not prominently displayed, making access frustrating difficult.
Side menu occupied 2/3 of the screen, leaving cramped touch area for exiting the sidebar. Additionally, some frequently used functions like cardless withdrawal and QR payment are not prominently displayed, making access frustrating difficult.
Representation mismatches
Representation mismatches
Visibility of system status
Visibility of system status
Icons did not accurately reflect the services, and the inconsistencies in the color scheme and font weights can detract the readability of the text.
Icons did not accurately reflect the services, and the inconsistencies in the color scheme and font weights can detract the readability of the text.
Visual Inconsistencies
Visual Inconsistencies
Visibility of system status
Visibility of system status
Floating icons and cropped out text comprises the readability and overall user experience.
Floating icons and cropped out text comprises the readability and overall user experience.
Content Overloads
Content Overloads
Consistency and Standards
Consistency and Standards
Cropped-out text and long-drawn content recedes readability and customers could feel burden by the jumbled texts. More so, the CTA button is styled inconsistently with the rest of the system.
Cropped-out text and long-drawn content recedes readability and customers could feel burden by the jumbled texts. More so, the CTA button is styled inconsistently with the rest of the system.
Unbreathable Layout doesn't support cross-translated copies
Unbreathable Layout doesn't support cross-translated copies
Visibility of system status
Visibility of system status
Dense spacing increases the likelihood of navigating the errors and mistaps. Further, the text aren't properly fit within the designated areas due to the interface layout constraints.
Dense spacing increases the likelihood of navigating the errors and mistaps. Further, the text aren't properly fit within the designated areas due to the interface layout constraints.
Overlapping Services
Overlapping Services
Flexibility and Efficiency of the Use
Flexibility and Efficiency of the Use
The complexity of authentication process requires cross-app access, instead of built-it authentication measure can reflect to the drop off rates
The complexity of authentication process requires cross-app access, instead of built-it authentication measure can reflect to the drop off rates
User Control and Freedom
User Control and Freedom
Duplication of services in two different apps causes a confusion.
Duplication of services in two different apps causes a confusion.
Brand Inconsistencies
Brand Inconsistencies
Consistency and Standards
Consistency and Standards
When onboarding into the product of MyMo 1.0, the UI style and branding deviated significantly from the main color schemes, making the entire interface feel as a separated, standalone app rather than the cohesive part of MyMo ecosystems.
When onboarding into the product of MyMo 1.0, the UI style and branding deviated significantly from the main color schemes, making the entire interface feel as a separated, standalone app rather than the cohesive part of MyMo ecosystems.
Key Observations from JTBD Framework
Key Observations from JTBD Framework
Brainstormed the potential job performers and scenarios to get the broader view on the behavioral factors and desirability linked to product purposes - having a usable app is a standard, but combining desirability, meaning customers eager to use more and is the ideal determinant of the service's quality.
Drawing from the initial interview insights conducted by another business analyst, we formulated key hypotheses centered around the questions: "What are they aiming to achieve using MyMo 2.0?"
Brainstormed the potential job performers and scenarios to get the broader view on the behavioral factors and desirability linked to product purposes - having a usable app is a standard, but combining desirability, meaning customers eager to use more and is the ideal determinant of the service's quality.
Drawing from the initial interview insights conducted by another business analyst, we formulated key hypotheses centered around the questions: "What are they aiming to achieve using MyMo 2.0?"
In this mapping, it is concluded that customers desire to fulfill their day-to-day transactional operation needs that mostly in line with “efficiency" and "busy lifestyle.”
In this mapping, it is concluded that customers desire to fulfill their day-to-day transactional operation needs that mostly in line with “efficiency" and "busy lifestyle.”
I want to bookkeep my bills easily so that by the bill due dates I won’t mess up the pay day and still have a proof to keep checked.
I want to bookkeep my bills easily so that by the bill due dates I won’t mess up the pay day and still have a proof to keep checked.
I want to buy the goods or grocery outside without relying on a cash, so that I don’t have to feel panicked not having a money with me.
I want to buy the goods or grocery outside without relying on a cash, so that I don’t have to feel panicked not having a money with me.
I want to settle the bills easily when I go out with friends or pay g/w/e bills remotely, so that I can move on without having to deal with crunching the numbers
I want to settle the bills easily when I go out with friends or pay g/w/e bills remotely, so that I can move on without having to deal with crunching the numbers
I want to explore and register the services on my own, so that I can feel free of travel worries and don’t have to wary of any worst case scenario happening if I forget to bring along any vital proof of identity documents.
I want to explore and register the services on my own, so that I can feel free of travel worries and don’t have to wary of any worst case scenario happening if I forget to bring along any vital proof of identity documents.
*surveyed based on 13 existing GSB customers from different demographic range to understand the underlying objectives towards the use of mobile banking services
With the clear objectives and visions in mind, we moved ahead mapping out a systematic information architecture based from JTBD archetypes and business requirements.
With the clear objectives and visions in mind, we moved ahead mapping out a systematic information architecture based from JTBD archetypes and business requirements.
Key Observations from Feature Prioritization Mapping
Key Observations from Feature Prioritization Mapping
Achieved a common-grounded understanding with internal teams and stakeholders by covering 3 key aspects that deemed to be the heart of MyMo 2.0 to facilitate a prioritized feature and functionality list.
Starting from high-priority type of features that are hugely impacted towards the app experiences overall, then addressing lower-value or least priority features.
Achieved a common-grounded understanding with internal teams and stakeholders by covering 3 key aspects that deemed to be the heart of MyMo 2.0 to facilitate a prioritized feature and functionality list.
Starting from high-priority type of features that are hugely impacted towards the app experiences overall, then addressing lower-value or least priority features.
Daily Transactional Functions
Daily Transactional Functions
Transfer Flows
Transfer Flows
QR Pay/Receive
QR Pay/Receive
Top Up/Bill Payment
Top Up/Bill Payment
Group Transfer
Group Transfer
Account Overview
Account Overview
App Activation
App Activation
Service and Product Sign-Up
Service and Product Sign-Up
Transactional History
Transactional History
Personalized User Engagement
Personalized User Engagement
E-slip Autosave
E-slip Autosave
Menu Launcher
Menu Launcher
Hashtagging
Hashtagging
Notification Timeline
Notification Timeline
History Timeline
History Timeline
Discoverability Improvements
Discoverability Improvements
Account Favorites
Account Favorites
Search Bar / Filter Search
Search Bar / Filter Search
Transfer Schedule
Transfer Schedule
Once settling down the priority list of features, we then transitioned into 1-week design-development sprint from 2-week sprint, where I completed the to-do list based on the a weekly assigned user stories, in tandem with business analysts and 50+ developers, by sharing mid or high-fidelity design explorations and hands-off to supplement in design-development cycle.
The following designs as you can see had been through roughly 10-15 iterations due to the few reasons: a shift in roadmap and the last-minute service scope changes raised by stakeholders as to elevate the better banking services.
Once settling down the priority list of features, we then transitioned into 1-week design-development sprint from 2-week sprint, where I completed the to-do list based on the a weekly assigned user stories, in tandem with business analysts and 50+ developers, by sharing mid or high-fidelity design explorations and hands-off to supplement in design-development cycle.
The following designs as you can see had been through roughly 10-15 iterations due to the few reasons: a shift in roadmap and the last-minute service scope changes raised by stakeholders as to elevate the better banking services.
As we finalized couple UI patterns with the growing numbers of the design components in a library, to help streamline our internal processes, we built the scalable design components library to apply across the other GSB banking products.
Learn more about how my team and I grounded up the first MyMo design system and visual language via this link.
As we finalized couple UI patterns with the growing numbers of the design components in a library, to help streamline our internal processes, we built the scalable design components library to apply across the other GSB banking products.
Learn more about how my team and I grounded up the first MyMo design system and visual language via this link.
01
01
Seamless App Activation
Seamless App Activation
Onboarding the customers that prioritised user experience, data security, and compliance with MyMo regulations to further enhanced user trust, from app activation to service onboarding.
Onboarding the customers that prioritised user experience, data security, and compliance with MyMo regulations to further enhanced user trust, from app activation to service onboarding.
Daily Transactional Feature
Daily Transactional Feature
WHY THIS DESIGN?
WHY THIS DESIGN?
In MyMo 1.0 or 1.5, there were no options where users can set the app passcode or Face ID login, and mobile OTP request lacks the real-time countdown indicator, hence featuring the said options. The rebuilt MyMo 2.0 also lets customers to choose multi-factor authentication methods with a touch of personalized message in sync with the present time (good morning, afternoon and evening) after completing activation stages.
In MyMo 1.0 or 1.5, there were no options where users can set the app passcode or Face ID login, and mobile OTP request lacks the real-time countdown indicator, hence featuring the said options. The rebuilt MyMo 2.0 also lets customers to choose multi-factor authentication methods with a touch of personalized message in sync with the present time (good morning, afternoon and evening) after completing activation stages.
02
02
Money Transfers never feel this easy and secure
Money Transfers never feel this easy and secure
Minimising money transfer complexity by shortening the flow and auto-save receipt on every successful transactions.
Minimising money transfer complexity by shortening the flow and auto-save receipt on every successful transactions.
Daily Transactional Feature
Daily Transactional Feature
Personalised User Engagement
Personalised User Engagement
WHY THIS DESIGN?
WHY THIS DESIGN?
Cramming loads of choices in front of users can affect a time spent on tasks. Introducing the new money-transferring flow to guide the step-by-step screens from contact selection to transaction overview before sending funds, ensuring the speed and security in hand at every stage customers navigate onto.
On top of successful transactions, auto-save receipts, that resembles the physical receipts by its design, let the customers to digitize and store the transactional activities to use as a proof for personal or business expenses.
Cramming loads of choices in front of users can affect a time spent on tasks. Introducing the new money-transferring flow to guide the step-by-step screens from contact selection to transaction overview before sending funds, ensuring the speed and security in hand at every stage customers navigate onto.
On top of successful transactions, auto-save receipts, that resembles the physical receipts by its design, let the customers to digitize and store the transactional activities to use as a proof for personal or business expenses.
03
03
Product Sign-Up and KYC
Product Sign-Up and KYC
Making KYC process easily proceeded with enhanced visual cues, through the support of blockchain-based biometric digital identity such as facial recognition to link identity to the services securely and fraud-free.
Making KYC process easily proceeded with enhanced visual cues, through the support of blockchain-based biometric digital identity such as facial recognition to link identity to the services securely and fraud-free.
Personalized User Engagement
Personalized User Engagement
WHY THIS DESIGN?
WHY THIS DESIGN?
Included the customizable, prominent illustrations to help catch the attention of the present KYC (Know-your-customer) stages and minimize the necessity of using the long copy on the screens to leave ample breathing room for a better experience.
Included the customizable, prominent illustrations to help catch the attention of the present KYC (Know-your-customer) stages and minimize the necessity of using the long copy on the screens to leave ample breathing room for a better experience.
04
04
Collaborative Transaction
Collaborative Transaction
Whether in the dining out situation or sorting out the bills, group transfer to allow merging the money-transferring tasks in one go
Whether in the dining out situation or sorting out the bills, group transfer to allow merging the money-transferring tasks in one go
Daily Transactional Functions
Personalised User Engagement
WHY THIS DESIGN?
WHY THIS DESIGN?
Although Favorite has been newly introduced into MyMo 2.0 to let customers bookmarking the frequently money-transferred recipients into the contact list and for a quick access to help customers proceed a money transfer faster, we wanted to maximize the benefits above the surface-level of purposes in Favorite feature.
The mention from JTBD scenarios inspired our team to implement a group transfer, in which allowing customers to create a recipient group and proceed the transfer with ease without manually repeating the actions.
Although Favorite has been newly introduced into MyMo 2.0 to let customers bookmarking the frequently money-transferred recipients into the contact list and for a quick access to help customers proceed a money transfer faster, we wanted to maximize the benefits above the surface-level of purposes in Favorite feature.
The mention from JTBD scenarios inspired our team to implement a group transfer, in which allowing customers to create a recipient group and proceed the transfer with ease without manually repeating the actions.
05
05
Search bar presence to ease off the search journey
Search bar presence to ease off the search journey
Providing the discoverability elements such as search bar to quickly scan payment-related activities and manage the financial operations in a fraction of time.
Providing the discoverability elements such as search bar to quickly scan payment-related activities and manage the financial operations in a fraction of time.
Daily Transactional Functions
Personalised User Engagement
WHY THIS DESIGN?
WHY THIS DESIGN?
Having a dedicated search bar enables customers to search up the previous transactional activities and navigate the goals faster. This also applied not only in History, but also when selecting the biller as the recipients in transfer flow.
Having a dedicated search bar enables customers to search up the previous transactional activities and navigate the goals faster. This also applied not only in History, but also when selecting the biller as the recipients in transfer flow.
Keep the accounts and products listing pleasantly neat and easily scannable
Keep the accounts and products listing pleasantly neat and easily scannable
Discoverability Improvements
Paper bill like e-statement, giving the experiences closer to physical statement.
Paper bill like e-statement, giving the experiences closer to physical statement.
Discoverability Improvements
Discoverability Improvements
06
06
See everything all in one view
See everything all in one view
Find a prototype demo from here
Find a prototype demo from here
Find a prototype demo from here
Personalize and customized how do you want to handle with the bills
Personalize and customized how do you want to handle with the bills
Daily Transcational Functions
Personalized User Engagement
All in one menu launcher for a quicker access to main functions and product discovery
All in one menu launcher for a quicker access to main functions and product discovery
Personalized User Engagement
What’s happening after MyMo push the 2.0 update?
What’s happening after MyMo push the 2.0 update?
Next
Next
Next
Next
5th ranked
5th ranked
Stepped up from 7 to the top 5 after 2 months of release, becoming the most downloaded financial banking app on both Google Play Store and App Store in Thailand
Stepped up from 7 to the top 5 after 2 months of release, becoming the most downloaded financial banking app on both Google Play Store and App Store in Thailand
65% of Users
65% of Users
have significantly invested their attention to browse more products; thanks to super app pattern which offers relatability and positive reinforcement
have significantly invested their attention to browse more products; thanks to super app pattern which offers relatability and positive reinforcement
40 secs
40 secs
time spent on money transfer per transactions, from selecting or inputting the account number to successful transfer. Much faster and highly efficient.
time spent on money transfer per transactions, from selecting or inputting the account number to successful transfer. Much faster and highly efficient.
+30% in overall conversions
+30% in overall conversions
The perks of the personalization and functions, backed with the modern look of MyMo, has motivated customers to opt to engage with the previously overlooked functions that are now becoming popularly used functions, such as Favorites and Pay Bill.
The perks of the personalization and functions, backed with the modern look of MyMo, has motivated customers to opt to engage with the previously overlooked functions that are now becoming popularly used functions, such as Favorites and Pay Bill.
For confidentiality reasons, the actual values for the following metrics have to be omitted*
For confidentiality reasons, the actual values for the following metrics have to be omitted*
New product roll-out regressed the app performance on older mobile devices
New product roll-out regressed the app performance on older mobile devices
System maintenances in every 2-3 days does say a lot as a huge turn-off
System maintenances in every 2-3 days does say a lot as a huge turn-off
Newly positioned UI elements through this revamp left customers unexpected surprises and a hard time to pick up
Newly positioned UI elements through this revamp left customers unexpected surprises and a hard time to pick up
8 out of 13 selected users from a feedback agreed that Group Transfer's entry point can be more accessible and simplified than this
8 out of 13 selected users from a feedback agreed that Group Transfer's entry point can be more accessible and simplified than this
Behind the brilliance, there are bumps and critiques
Behind the brilliance, there are bumps and critiques
Next
Next
Next
Next
What I would do differently if I can redo the process?
What I would do differently if I can redo the process?
Gradual Feature roll out, one step at a time
Conduct extensive pilot testing with selective group of users before planning a wider roll out, allowing to ease the development pace and manage to fix critical bugs as we go.
Conduct extensive pilot testing with selective group of users before planning a wider roll out, allowing to ease the development pace and manage to fix critical bugs as we go.
Redefining strategy to optimize the better design decision
Utilize more data-driven insights to enrich the perspectives and fine tune for the better design approach because intervening the flow adjustments later on when the app has already implemented in production can be time-consuming.
Utilize more data-driven insights to enrich the perspectives and fine tune for the better design approach because intervening the flow adjustments later on when the app has already implemented in production can be time-consuming.
Balancing decisions of both world — stakeholders and customers' voices
There is no one solution fits both parties. Always stay resilient on design tradeoffs when things get out of hand, and be more succinct with design rationales to reduce the any potential misalignment.
There is no one solution fits both parties. Always stay resilient on design tradeoffs when things get out of hand, and be more succinct with design rationales to reduce the any potential misalignment.
Don't get over-swayed by the trend
While there are considerable advantages ‘super app’ trend has offered, it also raises some concerns regarding the potential cybersecurity risks through the joints of the services. To insulate against insecurity in the future, introducing the design that supports the complexity of MFA data encryption.
While there are considerable advantages ‘super app’ trend has offered, it also raises some concerns regarding the potential cybersecurity risks through the joints of the services. To insulate against insecurity in the future, introducing the design that supports the complexity of MFA data encryption.