Works @ frog design

Interaction Design, Design Pattern

Duration

Aug 2021 - Jan 2022, 6 months

Overview

One of the largest financial holding corporations in Taiwan is stepping into a new era with a total improvement on all the websites and apps that will become the main bridge between the company and its customers.
Frog design, as a helper, creates a new user experience and also builds a comprehensive design system that is inspiring yet reliable to the client (the corporation).

My Contributions

I joined this project in the midway. However, it was a tough time to be a part of the team. At the moment, we needed to regain our client's trust and deal with all the design mess that was left from the previous phase.
As an interaction designer, I mainly focused on designing the new features but also put lots of effort to organize design patterns and maintain the overall design consistency.

Digital transformation is more than being efficient and laborless

Traditionally, people visit a bank branch for their financial needs. They have to schedule a time to commute to a bank and sit in a line that has no guarantee of the wait time. Moreover, when it is their turn to meet a clerk, they spend time filling up forms or asking questions. Whatever they do, they also prevent the clerk from serving other customers.

When the bank tries to move its service from offline to online, it actually wants to remove the barriers. Speaking of barriers, the time of service and the limited human resource are good examples. Digital transformation has the potential to make more people reach the service and fulfill their needs anytime they want. However, the question becomes that "could the customers use the service with confidence and ease on their own, without help from a bank clerk?"

#1 People have questions and they need assist

To apply like a loan request or foreign currency exchange, the process could be simple and smooth when we have a clerk by our sides to help us finish all the required forms and have our financial situation fully checked. During the process, we got to ask lots of questions especially when it is our first time to do the request.

#2 Digital transformation is not about going paperless

For example, to borrow money from the bank, you will need to read some terms and instructions, fill out a detailed form, accept the rate, and understand when to pay the money plus interest back and how.
Anything in the application process could cause misunderstanding and hinder the success of finishing it. To remove the help from a bank clerk, we will need to provide extra help during the customer's digital journey.

Before designing anything, think of the users

Start from the user journey, let's see an example

I will use the credit card cash advance (信用卡預借現金) service as an example to illustrate how I analyzed the different stages of customers using a financial service. This service makes a good example because it is not widely known and utilized by regular customers. Thus, through this example, I will show you how we use design to introduce this service to future customers and how we guide them to file an application successfully.

#1 Motivation & Discovery Phase

Despite that people may find out that they could use the cash advance service to borrow money during exploration. When it is time that they need urgent money, providing clear and straightforward access to the service gets more important.
Another important thing is that we should clearly introduce the service to the users especially when they still feel unfamiliar with it.

Starting point A - promotion on the dashboard
The dashboard is the first place users will be when they open the app every time. To put a promotion for the cash advance service here is very effective to let each user notice it.
Somehow, each spot on the dashboard is very precious and we know a fact that to show too many items here will make all the displayed items less attractive and seem less important. So it is not wise to show this promotion to every user and we should only make it appear for those users we identify as potential applicants.

Starting point B - one of the transaction action items
Users can find this service on the main list for all transactions for sure, but we carefully categorize all the actions for users to easily locate each of them. In this case, we put the credit card cash advance service under the title named "loan service" but not under another title like "credit card".
Although from the competitor studies we have learned that this service is mostly put under the credit card section, it may not be a wise position for a service that is not widely known by all customers. When people meet the need to borrow money from the bank, their goal is to get a loan and they will explore and compare available options altogether. Thus, using loan service as the title to include all the loan options creates an environment for customers to know such an infrequently-used service like credit card cash advance.

A succinct and effective intro page
An introduction page consists of two parts: a short intro and FAQs.
• Short intro: listing a few key points of the feature makes users quickly understand with what purpose they may use the service.
• FAQ: frequently asked questions usually point out those concerns that people may usually come up when they are considering utilizing a service. These questions often work better than paragraphs.

#2 During & After Application Phase

When applying for a cash advance, the most important things to know for a customer are how to pay back to the bank and how much interest is included. Thus, during the application process, all relevant information should be displayed and easy to be found.
After an application is successfully filed, the customer should be clearly informed of when they will get the loan and what should they do if unfortunately the loan application was not approved for some reason.

Installment payment preview
When a customer wants to plan the payment during the application, the estimated amount to pay will be provided according to the number of the loan and the interest rate. This information will help the customer to make a confident decision based on his/her financial situation.

Notifications for the transfer process
When the customer failed to receive the money, he/she will get notified with an error message and further action to fix the problem.

The whole user journey and the missing piece

If the customer needs the loan in cash, he/she can go to an ATM nearby to apply for a cash advance. To fully consider all possible channels for a customer to reach the cash advance, our next step should be assessing the usability of the current ATM interface and its compatibility with the new mobile banking app.

Design language system brings consistency

Over 280 stories to design for, the previous example is just one of them

Not only designing the UIs for each feature (story), we also spent a good amount of time constructing a complete design system with all the UI components and the most important document which is about UX patterns. Through documenting patterns, we formalize the design philosophy for each scenario and the design guide for all possible situations.

UX pattern example - Product Intro Page

The first image below is the introduction page I introduced in the previous section about the cash advance service, and the second image shows how we documented this design pattern. Following the same UI structure, this design can be applied to different products that also need an introduction page. With this UX pattern document, our client may grow the banking app with a clear path to follow and maintain the design consistency.

Takeaway

Designing for the mobile bank was a special experience in my career. Customers always welcome the lowest interest rate or handling fee and the most profitable investment target. It's all business and it is not just business as well. Customers today are showing their loyalty when a bank not only designs financial products for them but also provides powerful tools and abundant information for them to pursue as much fortune as possible.

Where design can make some impact is between the bank and the customers. Not just helping the bank to build up a positive image, design is a voice for the bank to communicate with the customers as a friend and as a helper in everyday life.

Of course, one of the interesting things to experience was that designers faced lots of challenges from stakeholders. It was a fascinating chance to train yourself to listen to voices from many sides and then muddle through to the goal where you expected to see everyone happy with your design.