The pay app dedicated to credit card users.
Maximize your credit card rewards and benefits


8 months, 2022


Mobile app

My Role

Solo Project
UX/UI Designer


Figma, Adobe Suite,
Miro, OptimalSort, UsabilityHub

Project Overview

About ClavaPay

ClavaPay is a payment app designed for credit card users. This app aims to guide users choosing the best fit card for all kinds of purchases and make the payment in-app with a seamless experience.


Credit card users need a pay app that can make payments and help maximize credit card rewards in one place. Because users will have an easier and more efficient experience in one app rather than switching between separate apps to finish their tasks.

How might we fill the gap and provide a more seamless payment experience?


An app dedicated to credit card users,  an app accomodates credit card users’ needin one platform:

  • Store user’s credit cards and pay with the app when needed;
  • Guide users to pay with the best fit credit card to maximize the cash back and rewards;
  • Recommends merchant deals that associate with users’ credit cards.

Know the best cash back rate when you make a payment.

  • Easier to pick the best fit card to pay when on the go
  • Know the best card of each category for the highest cash back;

Scan to pay with QR code.

  • Scan the merchant QR code to pay at the check-out
  • Show your QR code to cashier to scan and pay

Manage rewards. Explore deals.

  • Manage, view and redeem your rewards from the app
  • Explore and use different deals under each credit card

Design Process

Competitive Analysis
User Research
User Interview
Affinity Map
User Persona
User Journey
User Flow
Card Sorting
Information Architecture
UI Elements
Usability Test
Peer Feedback
Future Steps


Competitive Analysis

On current market, the payment app and credit card benefits related app are two separated products. While the payment apps are relatively matured, I put my focus on apps that help maximize and manage people’s credit cards and rewards for this competitive analysis.


“The smarter digital wallet.”
“A must-have for anyone with multiple credit cards”

SWOT Profile


“Earn more from your credit cards everyday.”

SWOT Profile

user survey

Tool Google Forms
Participants 18 people

Survey Goals

  • General attitude and context about mobile payment app and credit card
  • Attitude and friction toward credit card benefits and reward usage
  • Market possible attitude toward an app filling the gap of a payment app and a credit card management app

Survey Insights

participants own at least 2 credit cards.
participants own a credit card with cash back/reward feature.
participants say they use payment apps to finish their purchases.
participants found it confusing to take advantage of their credit cards benefits and features
participants will/maybe consider to use an app assist maximizing credit card cash back. (72% said will consider)
participants would love to see if the current payment app adds function to better utilize their credit card rewards and benefits.

Use interview

Tool Zoom Call & In-person Interview
Participants 3 people

Survey Goals

  • To better understand users' attitude toward the payment app,like and dislike, and reasons
  • To better understand users’ thoughts, frustrations and needof reward type credit cards
  • To find out what users' need and concern are about apayment app designed for credit card users and credit card features

The interview was conducted with 3 female participants. They are all frequent and experiential users of mobile payment app and credit card.

After organizing the thoughts and quotes from the interview, I brought the information into the Affinity Map to visualize and group different topics that participants mentioned about.

Survey Insights

Mobile Payment App

Users like to use mobile payment apps like Apple Pay or PayPal. Because it's convenient and easy.

Cash Back/Reward

Users need a clear visual design to show how much they earn for the cash back.

Reward & Benefit Policy

Users more or less cannot remember all credit card reward policy.


All users share the concern about how the app can take care of data and security issue. The fraud alert and big purchases notice are the basics.

Easy to Use

Users will appreciate an intuitive functionality design. Keep “easy to used” as a goal in mind.

Smart to Use

  • Smart notification or guidance to suggest best fit credit card when purchasing.
  • Customizable features like frequently used card, personal settings.


Use personas

User Journey

Based on previous user research and personas, I created user journeys for Robert and Julia. Below is th Robert’s user journey, which represents a major user flow that ClavaPay looks at.


User Flow

Robert's Objective

As a busy father, I want to know the best card to get the most cash back when I make a purchase, so that I can maximize my cash back balance on my credit card.

card sorting

Tool OptimalSort
Method Closed card sort
Participants 5 people

I conducted a card sorting to help better understand where I need improvements after the original sitemap configured.

The card sort has 19 cards for 5 pre-defined categories. Overall the card sort results overlap with most of the designated sorting in original design.

The insights are to connect some of the pages where needed, and to reword page names to reduce misunderstanding.

Information Architecture


low to mid-fidelity wireframes

low-fidelity wireframes

mid-fidelity wireframes


usability Test

Test method Moderated remote test
Participants 6 people


Affinity Map

Next, I pulled the information from the affinity map into a rainbow spreadsheet. From the 22 observations of the test results, I prioritized and identified 5 major issues that need to be reiterated and improved based on Jakob Nielson’s severity rating scale as well as the frequency of the issues. The rest of the feedback is also covered in the next round iteration.

Key Issues

High Severity
“I don’t know which card is providing the deal on the Deals page.”

Test version


Suggested Change

Add information to each deal to indicate which card it’s related to. Re-design the Deals page to display deal information by card, clearer for users to navigate and also make it consistent with the concept of a payment app designed around credit cards.


50% participants expressed the confusion of how they will know which of the cards is providing which deal. P1, P6 both wondered what card provides the deal information. P5 also asked if the deal information is a general resource or a specific deal from the owner's card.

High Severity
Expecting that I can click the card on the Best Card page to pay.

Test version


Suggested Change

Further develop the flow and functions on Best Card page, add the option that users can select the card and start the payment process from this page.


66% participants were trying to click the selected card on the Best Card page to start the payment process. P3 was the most successful participant to complete all tasks. When trying an alternative path for task 1, she also expressed the feeling of issue 2.

High Severity
Need to have reward redeeming information of each card.

Test version


Suggested Change

complete the redeeming information on Rewards page.


P2 and P6 both noticed that the app only showed the necessary redeeming information on one card due to mid-fidelity condition. They either asked or supposed that the app would have all the similar information in the final look.

A/B Test

Tool UsabilityHub
Participants 10 people

I used the UsabilityHub recruitment approach to get 10 random participants, age between 20-49, for the preference test. There are 4 male and 6 female.





Option B is the one performing better, but the difference is not statistically significant.

Result Insights

Based on a report I learned younger generation will understand and prefer option A more than option B due to different age groups. In this test, I have 6 participants age between 35-49 and 4 participants age between 20-34, which to some extent reflects the result of this preference test. Since my target users are younger generation, I will remain on option A look.





Option B is the one performing better, and the difference is 99.0% likely to be statistically significant, and not due to random chance.

Result Insights

Not only the preference test but also later showing the decision to others, people all express the option B looks better. It’s great to see how users choose and make sure a user centered design.

Peer feedback



Be sure the white color in the font contrast with the button background. You can double check with the contrast plugin in Figma

Consider changing the colors from pink and purple to something else. Everything else is blue/purple. This is meant for contrast I’m sure, but maybe try a lighter blue and see how it goes.

The old button background did not sufficiently give AA level contrast at regular font size. At this place I switched the button to the secondary button style, since it’s an option to go to and not a CTA.(The primary button gradient look is also revised to make sure the contrasts level.)

Though I think the old color pie wheel works, I feel it’s still good to take a stab at some other possible combination.



I would place the word “search” inside the search bar. With the same gray color as the magnifying glass icon.

Feels like the percentage number font size is a little big

I updated the search bar with placeholder text and applied to other places.

I reduced the font size since it did look a little bad in proportion with other elements.

final design

UI design



UI elements

High-Fidelity prototype

future steps

Optimize Design Language Systems

There are still some design languages can be optimized and cleared up for a consistent visual and branding standard.

Keep Improving UX

Make the next UX improvement of the app through tests and feedbacks.