Duration
2017/02ー2018/02 （1 year）
My role
UX/UI designer
Team
UX designer - Katherine
Visual designer - Amy
Summary
In 2017, according to trends in global payment apps, we redesigned the payment App provided by Taiwan's largest telecommunications company to increase product usage.
We improved the existing app and add new functions, also built the design systems and released both Android and iOS Apps.
Problem
The existing app was inconsistent in design, and the information structure (hierarchy) was not well organized. Also, the function was incomplete and there was only an Android App.
Challenge
It was our first time receiving a project from a large company. As a three-person design team, we needed to work on a huge and complex project with high productivity levels. In addition, it was a big challenge to prioritize design and development, and to collaborate with the engineers of our client.
Solution
We divided this project into 3 versions. We redesigned existing apps, added new functions, built design systems, and developed android & iOS apps
Outcome
My contribution
I was the main UX/UI designer, involving in all processes such as research in early stage of development, create the interfaces and design systems, and maintenance of visual design in late stage of development.
Solution Overview
Before
The existing app is inconsistent in design, and the information structure (hierarchy) is not well organized.
For example, users were confused with too many styles of buttons and dialogs.
Besides, the readability of the information is poor due to inconsistent text sizes and color rules.
Before
After
We launched a new design system along with Material Design, due to the tight design schedule and limited development costs.
It was a huge challenge to design and release a large app in a short time.
There was only an Android app so we decided to build the design system along with Material Design.
By doing so, the design proceeded efficiently and it was easy to develop. It was also useful when creating new features.
After
Process ＆ My Contribution
It was a big challenge for a small team to work on a large project in a short period, so we divided the project into 3 versions.
I was the first designer, mainly worked on UI design. But I also Involved in whole the process, such as research in early stage of development and maintenance of visual design in late stage of development.
The goals of each version and my contributions are as follows.
The process of this project and my role in each version.
Competitive Research
Before working on the design, I conducted competitive research to understand global and domestic trends of payment apps.
These are my insights based on the research.
Iterations
There are many fancy interfaces and interactions for the FinTech app on dribbble and Pinterest.
However, when designing a payment app, we need to consider the authentication processes and how users use the app in different paying situations. On top of that, the development limitation and the cost of Learning are also important.
Here is how we order the priority of the home page.
Problem
In ver.1 there were only transport cards. But in Ver.2 and Ver.3, credit cards, joint cards, and city cards have been added.
Every card has a different function, and the logic such as "setting a default card" is complicated, but it has to be merged in one screen.
For example, barcode payment can be used on a credit card but not on a transport card.
Solution
I came up with a layout that can be used with various cards.
Originally it was designed to change the default card by swiping up. Tomake it easier to use, we add a toggle to set a default card in the card details in ver.2.
Refers to a global payment application such as Apple Pay. Swipe up the card you want to use to become the default card.
By arranging the 3 functions of touch payment, balance, and barcode payment", this layout can be used even for cards with only two functions.
The toggle for setting the default card on the details page.
Problem
According to our usability testing, it is not easy for users to switch cards without instructions.
At the same time, the engineer found that the interaction reduces the performance of the app.
Solution
In the late stage of ver.3, we changed the cards into a list view and made sure it was easy to use through usability testings. And user can tap the star icon to switch a card to a default card.
Marking the default card with a star icon.
Usability Testing
Originally, there was no user test or usability test at our company, but I and the UX designer were concerned about the"objectivity" and "persuasiveness" of the design. We noted the importance and necessity of doing usability testing, so we proposed it to the president.
When creating a function, I made prototypes of several patterns and gather screens I wanted to test.
The UX designer and I planned the tasks for each test, and filtered users from the surveys.
We conducted 60 minutes user testing in person twice a week.
We interviewed 12 users about their payment habits and how they felt when using our app.
Below are summaries of the usability tests.
Conditions of participant:
Tasks, including:
Open questions at the end of the interview, for example:
Here is an example of improving the design through usability tests.
Version２
Not only common notifications from the system, but also personal notifications have been added.
So I divided them into segments, and also added red dots to unread notifications.
I divided system and personal notifications into segments, also added red dots to unread notifications.
Version３
We found that due to the segments, users began to not to read the personal notifications because it required one more tap.
Besides merging into one page, I also created 4 patterns of notification page to test which is easiest for users to use.
・ Category: Tag vs. Icon
・ Unread: Red dot vs. Background color
I created 4 patterns of notification page to test which is easiest for users to use.
Here is the process for the usability testing.
Task: There’re 4 patterns for the notification page. Please open a notification message.
️The user said, “There will be a lot of notifications on this page, so I think the tags would be more intuitive. And the red dots are more visible than the background color.”
We considered that “the tags will make better use of the space on this page, and the background color might let the page be fulled with various colors.”
Based on the results of the user testing and our considerations, we decided to use the “Tag + Red dot” pattern.
And it was adopted by our client.
Design Systems
The existing app is inconsistent in style and components, so I built the design system from scratch according to Material Design.
I was in charge of the layout, components, and guidelines of the app and the visual designer created the color schemes and icons.
In the late stages, our client requested to release an iOS app, so I adjusted the icons and components according to Human Interface Guidelines.
The design system of the Android app.
Cross-Platform
In the early stages of ver.3, our client wanted to release an iOS version as well.
Based on the Android design, I efficiently transformed the layout and components according to Human Interface Guidelines.
However, due to system limitations, the iOS version features are slightly different from Android.
For example, versions earlier than iPhone 6 don't have NFC, so users can only use online credit cards.
In such a case, we had to think about the flow and layout from the beginning.
Due to varying availability of NFC, the home page is different in Android and iOS.
Finalize
In this project, I not only designed interfaces but also created user flows and prototypes to ensure the usability of our apps.
Here are the deliverables of some features.
In the redesign, we added an onboarding process.
The introduction of the main features will display automatically, so users can know the features before starting use.
Additionally, if you enter your mobile number below, the system will determine if you are already a member or a new member and proceed to a different flow.
We designed the flow of barcode payment including authentication.
To reassure the user, we also added a notification after the payment is completed.
A joint card is a card that has the functions of both a credit and transportation card.
When users register their card, you need to check if you want to change their original transportation card.
To eliminate the frustration of users not being able to add a card after scanning it, we show the supported banks first before scanning.
Users can pay call charges for Chunghwa Telecom with Smart Pay. Users can also scan the barcode to pay utility bills of other companies.
Users can exchange their points for goods.
In the late stages, we also designed a function where users can send gifts to their friends.
outcome
Because this is a client-side product, we don't own accurate data.
But before the redesign, it was rated approximately 2 to 3 out of 5 on the Play Store and increased to more than 4 stars after a new version was released. In addition to that, it reached 500,000 downloads in less than 2 years.
We also released a new iOS app from scratch. As of March 2022, it has 13.8K reviews and a rating of 4.6 stars on the App Store.
These results show that we have achieved our client's goalsーto increase usage and competitiveness.
Final thoughts
Engaging in various fields.
This project is my first project in the digital product design field.
In addition to UI design, I engaged in various fields, such as research, user flow, prototyping, testing, and version management.
Because of this experience, I was able to get an overall picture of the project design, and it was helpful for the future.
Not just thinking, but moving your hands to explore more possibilities.
If I just implement the design that I think is good at first, I might lose sight of other possibilities.
Also, not only thinking about screens and flows but actually making screens and testing them, so that I can find out blind spots and get more ideas. By doing that, I was able to make my proposal more convincing.
It's important to cooperate closely with cross-functional teams.
I worked closely with the UX designer; we used competing services together and discussed user flows, wireframes, and so on.
I also cooperated with client-side developers regarding certification flows, technical possibilities, and product quality assurance.
Through this cooperation, we were able to build large apps in a short period.
The cooperation in our team was great, so we were invited to share how we merged designs and built culture.
I would like to do more research in the earlier stages.
Due to the schedule and scope of this project, I couldn't do user research in the early stages.
As a result, after the design was finished, we realized that it wasn't suitable for users.
For example, I designed the card interactions according to global trends, but in the final version we found that it was difficult to use.
If time permits, I would like to do deep research, such as user interviews at an earlier stage.
I would like to improve the wording and user experience.
Looking back now, there are wordings and instructions that might confuse the user.
Next time, I would care more about the general aspects of usability, to make the app smoother to use.
