Some interesting facts about the project —
We built new components and contributed to the Design System while parallelly working on the project
Together with the other team designers, our team firmly focuses on design consistency across 4 countries during the project
It was the first project that adopted Agile project methodology across three countries comprising over 100+ team players
Renownedly becoming the first full brand new app in DBS that was revamped from frontend to backend in DBS.
In 2016, DBS launched a new design to the public - it has proven to be an essential banking app to help customers perform some tasks on the go. After two years, the business kept growing with more users engaged with DBS service. Hence with the growth in market share, it became the right time and opportunity to polish the brand and improve on user experience.
From a design perspective, our previous mobile banking design lacks a strong foundational structure and relevance, which actually limits the user experience satisfaction and unable to resolve customers' pain points. It became clear that revamp of the entire banking and user experience is our main goal and together with the alignment of design in six countries' markets and enhance of core experience together in the future.
The previous DBS digibank TW app
To build a best-in-class mobile banking experience.
Increase consistency across all user journeys and components, to achieve our objective in maintaining Design Consistency across different countries' markets.
Advance persuasion skills to sell-out design ideas to different stakeholders
Reduce on communication gap to build consistency and create balance with business, technology, and design.
Creating a balance between DBS Taiwan market's needs and alignment of 4 countries' needs through design.
Design Consistency working modal
The project was about 2.5 years from start to launch. Being one of the two product designers in an Agile team that comprises over 100+ people, my sole responsibility was on the overall Android platform design.
During this project journey, I created Fixed Deposit, onboarding, and certain setting UX journeys. Also coming up with a banner set and illustration based on our Brand Guideline, bridging between the development teams and the implementation of reusable components, contributing, and serving as a guide to the Design Language System.
Product Designers
Chen Zhao (UX Lead)
Iris Chen
Stakeholders
Researcher
Design Language System Team
QA Team
Delivery Team
Development Team
Regional Team / Business Team
From idea to product - Collaboration makes design alignment
The full revamp of a mobile banking app from front-end to back-end became clear to us that it was no ordinary brownfield project. It been a long journey with a lot of back and forth to implement our design desirability while balancing business viability and technical feasibility.
To provide a seamless banking experience for customers, we had to restructure the entire user journey, design new brand visuals, and build new components. Meanwhile, to create scalability design approaches to cater to various functionalities to 4 countries' businesses needs.
2019 DBS digibank APP in 4 countries
When the team formed, we kicked-off the project from workshops where all the stakeholders got together to analyze and start the discovery phase of the project. The first phase of our project focuses on the gathered legacy problems, users' feedbacks, and wishlist while defining the scope before started creating the user journeys.
From the exploration to the testing stage, we redefined information architecture, created vital user journeys, and redesigned brand visuals.
New Information Architecture
Previous issues in the old mobile banking APP
Through the testing, we dug out the customers' mental models and verified our hypothesis. Some insights from the report helped us to iterate on design and dive into design details.
Some insight we've found—
Let users complete the task in minimal steps
Give valuable information to users when they are making a transfer
Provide a shortcut to users to access the frequently-used functions
Protect users' security information anywhere
From design to implementation, it was a complicated and lengthy process especially in the development stage. All the ideal product design process became just a reference, and the reality is trial and error. To get there, I worked with my manager to try various methods to make the process better.
Balance Business Viability while implementing design desirability
To achieve our objectives identification of business goals, understanding of our customer pain points, map out the user journeys became essential so as to deliver the best-in-class UX. We gathered in workshops with researchers, product owners, and the Taiwan business team in Singapore and concluded on numerous good ideas while at the same time dissolving discrepancies among us.
From Design Alignment to Co-experience
To work on design consistency with other countries' on-going revamp plans and make sure everybody is on the same page, we worked with other designers and researchers that had worked on other countries' revamp projects to share and compare our designs on a weekly basis. During those sessions, we discovered and learn different ideas from one another, dug out product discrepancy in different countries, shared design references, and knowledge. Eventually, we created and aligned most of the user journeys with the best approach. Some documentation about feasibility and limitations were built at the same time for us to enhance while parallelly having technology and business teams moving forward.
Design screens and flow comparison in two countries
Build a bridge between development team and us
To boost the speed of the development stage, our tech team hired new engineers gradually throughout the project. On the side of the QA team, new testers join to accommodate the increased QA tasks. Subsequently, the increment in design questions came flooding towards my manager and me. Communication occupied 80% of my daily life. To squeeze more time for design-related work and bridge the communication gap among us, the realisation of the need for guideline surfaces, and I started to build guidelines to get everyone on the same page. Meanwhile, we set up a daily design question session for everyone to clarify queries, arranged meetings to go through in details to avoid confusion, and create a source of truth to reduces on self assumption.
See some guideline examplesFrom individual creation to team contribution
While working on the project, the Design Language System (DLS) team was building up its eco-system. We had several review sessions with the DLS team and other project designers to discuss component scalability. The objective was to reuse the components to other countries and achieve design consistency goals.
The Working Modal of Contribution
Financial Summary
We map out the account balance with an expandable pattern for customers to check at a glance as well as assets and liability chart with a clear and concise financial summary.
Leveraging on the traditional account details customers are used to, new deep dive of information analysis is done to be able to provide more insights to customers. Through the redesign, we designed six months of transaction history in the form of Bar chart to give customers with perceptivity over their past account activities.
The Valuable Essential Info
We indicated the essential info at each critical step, like the best interest rates in the transfer input page, the helper hint, and the amiable introduction. People-friendly transfer instructions help customers better understand how to proceed with payment.
warm greetings to customers
We have different segments of customers. To differentiate them, I explored more than 10+ sets of the greeting banner for our homepage and account details page, to provide a more fitting first impressions for each respective segment based on their demographic and social class. I also tried some animation approaches to make it intractable. It can benefit our product to be recognized quickly and increase association by injecting emotion to go from transactional to magical.
Fewer steps, More services
From each landing page of the services, we provide quick links to land you to frequently-used services in the fewest clicks. No more complicated steps and confusing journeys with your personalised financial management.
Android Design System
As I was the first designer to create Android screens, I contributed many components to Android Design Library, and it has been useful for the whole design team. It became a single source of truth for development teams. Since then, our Design Language System keeps enhancing and gaining resources to maintain the design system. Now is a mature and well-organized design system in DBS.
Check out Canopy Design System
A good starting point
The revamp of the DBS digibank on iOS and Android has been receiving many positive feedbacks (2 weeks since launch). It’s still early days for the service platform, yet the results have exceeded our expectations. 85% of the customers got us 4 to 5 star with more than ten thousand rating from our survey conducting and App/play store.
For sure, we also received numerous feedbacks with areas of improvement. Keep iterating the design and overall service is our priority to continue to move forward.
Build the industry knowledge foundation
Taiwan MB Revamp is my first project in the banking industry. Through the exposure to such a brownfield project, it provided me with a sturdy foundation and helped me to get familiarised with the industry. It gave me the next career opportunity to be the lead and in charge of the next-gen project in Hong Kong.
from failure to success
We were the first project to apply the new methodology in different orientations. Countless frustration and growth happened during the project, especially in the development stage. To speed up the dev process, we kept hiring new devs and QA. The previous working modal became useless and inefficient. Through the trial and error approaches, I learned to document the failure while coming up with a new solution to try on next time. I iterated the method over and over to reach the best. The documentation helped me and my team to make the working modal better and wiser, and eventually pushed the service to the market successfully.
I would like to mainly thanks to my manager as well as the UX lead of the project, Chen ZHAO. Also, thanks to Leo Lin and Abhinav from the Design System Language team and our researchers. We couldn't achieve fantastic work without each other.
