Some Thinking of APP page UX/UI Design

UX/UI design is an essential part of job for most product manger, I will use some of my own design works to talk a little about my understanding of UX/UI design.

I got a lot of thinking about UX/UI design when I was designing the interface layout of credit card balance transfer product as that was the first I designed something related deeply with real money. I was a heavy SNS and E-commercial user, also a gamer, even though I was always interested in finance but I had never really thought about the design issue.

So I tried many credit card management and finance management APPs, I started to understand, even for UX design there was a “style” because users got a different mindset for different kinds of “APP”( Or services, people usually except different feeling from different services). When people are using an APP which help them manage their credit card or money, they do not really want a fancy interface design and all those cool animations, unlike when they are playing games or SNS. They except

1.”numbers” are clear,

2.personal information is safe

3.benefits are obvious.

Clear numbers

Above is some pages from the first draft I made and there are some numbers that are really important.

The first two is bank name and card number, as the user need to identify which card s/he is looking into. Therefore this information are put at the left up side of each card since that where people trend to look at first.

The second two is payment due amount and due date. There is a highlight under those two numbers because users want to have a clear idea of how much is due and when.

Next closing date is not as important as other information so there are one the right up side and has no highlights, also the text color is lighter.

Information safety

People usually feel super unsafe when using financial APPs so as the designer, I should use design language to make them feel safe.

Thinking of the time when the users would feel most unsafe is the time when they start to decide if they want to “give” their personal information to you. So I used some design to let them feel a little bit safer.

Card adding page draft

1.Highlight the service provider. China UnionPay is the biggest credit card service provider and it is owned by the China Banking Regulatory Commission. In China people trend to trust government organisations. So this information will address at least some of their concerns.

2.Using blue color for the button and UI icon because blue always give people the feeling of calm and safe.

3.Telling their private information will not be “saved” and this information is near the action button, which is in order to address their concerns and nudge them to act.

Getting user’s approval of accessing their location

Also, your should provide justified reason to access user’s location. On this page, there is a feature that could let user to see merchant deal near them, so let user know why you need their location. From interaction design, I designed two way to “ask” user, one is when user scrolling down to the section, another is when user click “location” button.

Benefits are obvious

It’s important to let the users know that they have received benefits if you indeed “offer” them. Not only because promotion or sales would attract them, but also it would let them have feeling of being “smart” as they make a great deal.

Balance transfer repay page

The APR we provide is much lower than other competitors so I highlighted how much user could save monthly. BTW, if you want to say more about it, you can also put some link to competitor page to indicate this advantage.

At the card detail page, I design some sub-title for each repay method so operator could use them to highlight promotion together with tags.

The interaction and layout for this product is simple, there is basically no complicated interaction method or fancy animations. But for this kind of product, it is very important for UX designer to prioritize information and give the right information as well. All the pictures are drafts I made and those were made by InVision Studio.