Date

July - November 2019

Team

Self

Introduction

It’s a money management problem

borrowing is tricky

Credit card users sometimes find themselves overspending and desire better ways to manage and control money to avoid negative impact on their credit. If cardholders are not careful, they will experience interest fees, long-term debt and indifference to rewards programs.

Most credit card issuers don’t help users stay mindful of their spending, leaving them to track and account for their purchases manually or by memory. If this problem can be fixed, users will feel more confident about using credit cards to manage their cash flow instead of relying on other financial tools.

Profound potential solutions

More helpful financial features on the go

Using a few human-centered design approaches of gathering user and competitive research, I built mobile app features to help users see their money differently through tools that help them provide clarity and take action.

My Role

I conducted competitive and user research, designing iterations of a prototype for a fictitious brand, Beyond Bank, a personal project. I also conducted usability testing to refine my final designs.

Credit cards 101

everyday essential spending tool

Credit cards are an everyday and essential financial tool that many carry in their pockets. According to creditcards.com:

• The average card-carrying adult has about $5,839 in card debt.

• Retailers promote credit cards to users for convenience.

• Many households use credit cards to pay for medical expenses before health insurance covers medical costs.

Personal experience greatly varies

Debt drives confidence levels

As a former retail financial consultant and leader with experience helping card users, not everyone feels as confident about using a credit card because of debt.

Credit cards have been the best tools for me to manage cash flow for everyday spending when bills are often weighted upon every other bi-weekly pay. I empathize with other users when my existing card apps don’t help me keep track of my spending. I manually monitor my purchases by writing them down in a reactive way.

Here are some questions I have considered for the research of this project:

• How often do customers have concerns with managing credit card debt?

• How high of a priority is using a credit card when it comes to their finances?

• What methods do customers use to keep track of their spending?

RESEARCH

The competition is not that much better

Mobile app concerns are universal

With mobile app reviews, users express frustration with understanding their own spending and the lack of convenience in getting help without being nudged to sign up for additional services.

Not all credit card issuers provide the same number of features or quality assistance within the app, prompting many users to threaten to use other brands for a better mobile experience.

We’re confident spenders after all

Paying bills and tracking money are #1

Credit card mobile apps helps users most with payment management and spend tracking. From a questionnaire surveyed on active credit card users, on average they own between 2-5 credit cards, and over 75% feel confident that their credit card apps service them well.

Design Requirements

Many credit card users lack confidence using a credit card for an important purchase because of the way they plan (or don’t plan) for financing. To summarize and synthesize my findings, I have created this problem statement:

“Busy young working adults need a way to confidently monitor their card spending and handle making large purchases on the go.”

I identified design requirements to address the problem statement. Mainly, the solution needs to:

• Help busy users easily track their spending on a frequent basis.

• Allow users to get help with making any kind of financial decisions involving the consideration of their credit card.

• Assist users the convenience of managing their card debt.

Ideation

I began with a few user flows to create a framework for the design iterations and focused outcomes for my persona in mind.

User flows (above L to R):

• User wants to know what are the different finance options for his certification course so that he can decide how to put it onto a credit card.

• User wants to know what his spending would look like during the billing cycle on his credit card so that he can monitor his budget and ensure he has enough to pay for his courses.

• User wants to know what his expected monthly bill would look like if he paid the minimum incase his cash flow hits an unexpected life bump or how much money he’ll be able to save in interest if he pays more than the monthly financing total.

With my design requirements in mind, I began to ideate some potential design solutions through simple sketches. I initially suggested that it would be beneficial to create a feature to let users plan for large purchases with an interactive survey.

But it quickly got complex and I even wondered if it would even be more distracting than helpful. This idea needed additional user feedback before proceeding.

My wireframe sketches exhibited uncertainty in how to direct a user around new features that may not exist yet on many credit card apps. (Oops!) With my user's mental framework of making a large purchase, I wanted to understand:

“What are the top level tools and/or primary information will a user need to use when considering a large credit card purchase?”

My assumption for the user was that she/he would need to way to have flexible balance payoff options. With my mind map, I also incurred a challenge to my assumptions from the user by asking:

• “Where would you look to within our existing credit card and banking apps to determine whether you could financially handle a large purchase?”

• “Could you explain further what made you decide to use this tool? What’s the threshold of you going through these same steps for your next large purchase?”

It was revealed that my user needed constant clarification of his cash flow: where his money was coming and going in detail, from his transaction history down to was paid in interest over time. This suggested that the user could use better tools to understand his spending without having to go dig for it in multiple places and having to calculate it for himself.

“What if the user could see his money differently by categorizing these purchases for him (bar graphs and charts) and bring in the tools to help give him control over his spending?”

Since the user could not declare a specific feature (or set of features) that would help make larger purchases easier on his apps, I needed to test whether the user could find these new features based on some assumptions of where they could be found with a card sort.

My assumptions were tested…

users want a one-stop shop

I made an assumption that users would like to see features inspiring for action directly in the active page used. For example, if a user wanted to set up a budget alert, then an option to do so would be available in the same screen, and not have to research for it in another section of the app. I used behaviors from the mind map to create the various card tasks for a card sort.

The conclusions:

• Users naturally liked to see advice and help topics all in one place, versus spread out across relative topics. My assumptions were supported!

• Having a “budget” section should serve as a major category in the info architecture. This is a feature that is validated by the participant’s groupings.

…and even more assumptions were tested

budgeting is the foundation for more

I assumed if users were provided these categories (budget, alerts, help), they would use them to resolve desired financial tasks.

From the card sort, I was still curious to understand how users would approach using “advice topics” and “budgeting tools”. I wanted to find out if users would reach for these categories to solve common financial concerns using scenarios with a tree test.

Testing conclusions:

• Users aren’t that happy with how their credit cards help them see money differently. I asked a preliminary question to find out where people stood with their own chosen app products. Overwhelmingly, users chose their favorite credit cards because on the rewards at 60%. Users being able to see their money differently came in second place at 20%. (This reveals a big opportunity for improvement in this space!)

• Users used budget tools for future goals. The budget section was used most to either update budget categories and goals. This was exhibited as most successful.

• Users planning for large purchases needed research and lending tools. Users varied their answers based on a personal situation to deal with, which is a biasing factor in the perceived success rate. A larger majority wanted to see where they stood by checking their own balances and budget (assuming they wanted to pay for it out of pocket as a first measure), whereas a much smaller group chose to get advice by way of financing and lending. This was an opportunity to try and answer both crowds.

• Users reduce existing debt by reviewing their budget. I assumed users would like to use a debt calculator tool if provided. Instead, they mainly chose the budget section to update their goals, or pay it off. About 20% used a budget calculator, which gave further insight about a potential need for this tool.

As a result, I created a budget section with category tools and an interactive debt payoff calculator in my design solution to help users gain clarity about reducing personal debt and become motivated towards reaching other financial goals. This is inspired by a feature found on some credit card statements with a small chart suggesting sample payoff terms.

I revised the steps in my user flows after clarifying the user’s mental model from the card sort and tree testing, reducing the number of steps to reach the user’s goal. (Tossed out the idea for a survey!)

From the multiple revisions due to user feedback and review of the design requirements, I updated the information architecture to form the backbone of the mobile app.

Using a mobile app interface was best based on the user’s lifestyle habits and need for versatility and convenience. From there, I decided to build new features for budgeting, an advice section to guide users making unique financial decisions proactively, and a debt payoff calculator to bring clarity and more motivation for the user to further reach their financial goals.

design

During the initial iterations, I asked for constant user feedback while self-directing on the prototype to accomplish a particular task. I was often surprised that my design assumptions were challenged, but became enlightened by the user’s confusion which helped to further inform my design revisions.

Many of the revisions were often about simplifying or shortening the copy in my headings and descriptions. One user even stated that they “don’t feel like reading a long article” about an advice topic. This make me think of how to balance between offering advice and providing alternative choices for the user with stronger UX copy.

The final design

Clean, friendly and rich

After several rounds of user critiques of the lo-fi mockups, I moved on to high fidelity versions. The visual design was chose to bring attention to a clean style that felt friendly with illustrations and icons. The violet color scheme associates the app with richness (not far off from it’s blue cousin, a commonly used color among many financial institutions).

Visit the links below for the interactive prototypes —

Help & Advice: A place to search and browse topics for short reads regarding personal finances and using a credit card.

My Budget: A section for users to look at their personal spending more closely with eye-catching visuals, customizing your budget and set parameters for alerts.

Billing & Payment: A page to handle credit card payments, understand your credit card figures in detail and use the debt calculator to pay off your debt.

New features reveal unexpected behaviors

some success, and even more opportunity

Usability testing the new features revealed success and opportunities for continued development. All participants were able to complete the tasks successfully.

Users experienced the biggest challenge setting up a budget constraint, which resulted in uncovering a future opportunity to ask for additional feedback and to observe their interactions in person. This was by far the biggest surprise after making some assumptions that users would have more ambiguity with the "help and advice" feature. The debt calculator feature was tested to be the quickest with the most users.

Conclusion

A bright future for financial confidence

more foundational features to test

I believe that these new features will bring an opportunity to drive confidence in credit card usage. If I were to continue on this project, I’d focus on user cases involving financial foundations to build an even stronger and more comprehensive experience.

In the design process, I took on a deeper understanding of significant user research before diving into the iteration process. It was important to invest in getting to know the user and to remove the guesswork in designing possible solutions that could easily dig into more time spent over details when the answers are already provided by user’s preferences and behaviors. It was also important to test the iterations and achieve feedback quickly to inform the next iterations.

Let’s design together. :)