We use cookies to improve your experience here with us.
image overlay

ttb

Leading the Way in Banking

TMBThanachart Bank (ttb) is one of the largest commercial banks in Thailand. It offers financial solutions for over 10 million customers across the country with the aim of helping people improve their financial well-being.

Overview

After TMB and Thanachart Bank merged to become ttb, the new bank wanted to redesign their entire mobile banking application. They were looking for a visually stunning yet simple banking application, creating a fusion of simplicity and design.

Our solution

We helped ttb create a world-class app with an intuitive user experience while refining the app’s overall structure and navigation. Our approach was grounded in learning what ttb’s users were expecting from the banking app, the feelings they experienced while using it, and their main usage paths, along with ttb’s business objectives, KPIs, and more. Seeing the whole picture helped us create a step-by-step product experience that would satisfy the needs of both the users and the business.

New branding direction

Set up a design system to help stakeholders apply to brand consistently

A simplified workflow

Reduced the steps in workflows to a minimum to retain users

New helpful features

Added features like step indicators to keep users from abandoning processes

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Hi_Fi_0daabba5af.jpg

Our process

Design thinking workshops → Wireframing → User testing → Design iteration

For this project, we started by hosting design thinking workshops to extract business pain points and solutions for the new version of the application. Next, we created a design system for the entire app, created wireframes, prototyped ideas, and acquired feedback from users via testing. Then when it came time to iterate the design, we dedicated seven designers to each business squad, with each building out key features within the application to create the smoothest application experience for users.

https://lh3.googleusercontent.com/mGlaee4QpAZnG3TB_vQbU0p4QdGupiHCn2_G4UZsmZflT17QnzJgPsBbl4IuNQLdTCuHTNieMlo6Cosb1yKhuuK48_UiHlI8ClFrJqly4FMhZStNZ-jYz7icMJMZR2X8SYT-35lVOPbMQ5Fokg
https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Wireframe_801141b518.jpg
https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Group_96384_2cdaf329fc.jpg

Challenges we overcame

1. Branding direction

In today’s global market, it is critical to stand out from the crowd, and one of the key ways to do this is to ensure a strong brand identity. Users experience brands in many ways, and the UX/UI and visual elements of a brand’s app tell customers about the kind of company it is.

Morphosis played a significant part in ttb’s new branding direction, including setting up a design system to make various teams understand the new branding direction. These teams, each of which included business and marketing people, designers, and developers, worked on various flows and sections of the app.

Any design system should also come with instructions on how to use it — otherwise, it might be applied inconsistently or incorrectly. Thus, we took the time to teach ttb how to use the design system.

2. Application flows

While identifying the new app’s primary user scenarios and examining the functionality of ttb’s previous mobile application, we noticed that users were unable to estimate loan limits and that the application flow included too many terms & conditions screens. 

Our solution was to introduce a loan calculator in the first step of the application to engage users and make the overall user journey simpler and more intuitive.

3. Step indicators

Another challenge users faced was the app’s lack of step indicators. These are important to include as they help users understand where they stand in processes and reduce feelings of uncertainty as they complete each screen.

Long processes can be overwhelming, so we introduced an expandable step indicator at every stage of the application flow. This helped reduce the cognitive load on users and made it more likely that they would complete the process.

https://lh6.googleusercontent.com/MhjwrFyClpGK8CEhf3DklxK4n1NDPDIP8Z0kg1SFI8ol3MUT_JAHvvWJAzHAWUu9bRlhNDXBYFo-EU2BQQtqvGjXD_WHmNSNKDukqfRYfYS2ZHNqJdeuLdwVJ387tTnDVGNwZa3MPOeHxg28oA

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Main_Graphic_c4ad9f814b.jpg

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/mobile_ui_11f67471f0.png

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Hi_Fi_last_section_ab427ca006.jpg

Get in touch

Know your users. Make strategic choices. Build better products.