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.
An app dedicated to credit card users, an app accomodates credit card users’ needin one platform:
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 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.
Users like to use mobile payment apps like Apple Pay or PayPal. Because it's convenient and easy.
Users need a clear visual design to show how much they earn for the cash back.
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.
Users will appreciate an intuitive functionality design. Keep “easy to used” as a goal in mind.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
H:
Be sure the white color in the font contrast with the button background. You can double check with the contrast plugin in Figma
M:
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.
Me:
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.)
Me:
Though I think the old color pie wheel works, I feel it’s still good to take a stab at some other possible combination.
H:
I would place the word “search” inside the search bar. With the same gray color as the magnifying glass icon.
Y:
Feels like the percentage number font size is a little big
Me:
I updated the search bar with placeholder text and applied to other places.
Me:
I reduced the font size since it did look a little bad in proportion with other elements.
There are still some design languages can be optimized and cleared up for a consistent visual and branding standard.
Make the next UX improvement of the app through tests and feedbacks.
