The Problem

Monitoring and managing credit scores feel complicated and tedious to do separately.

The Solution

An app that tells you everything you need to know about your credit score, and lets you take action directly without leaving the app.

Solution Breakdown

User Research

In order to uncover key pain points and empathize with users, I created 2 personas

Carlos

• Age: 50
• Education: High school and some college
• Hometown: New York City, New York

Carlos is a small business owner operating in the middle of a busy metropolitan area. As the business grows, Carlos wants to purchase real estate and obtain loans. When it comes to finances, he’s very old school.

User Story

As a business owner, husband and father, I want to be able to easily and simply monitor my credit score so that I can invest more, whether in my assets, or my children’s education.

Amelia

• Age: 23
• Education: 4th year university student
• Hometown: Bruges, Belgium

Amelia is about to complete a B.A. in Business Administration and rents a studio apartment, but her contract ends as soon as she graduates. She's actively looking for new apartments in Bruges. She recently started using a credit card and would like to have a credit score that would enable her to finance her housing.

User Story

As a new adult and college Senior, I want to increase my credit score on time so that I can have a wider selection of potential apartments.

User Journey Maps

Carlos

Goal: improve credit score over time and obtain new loans and credit cards

Amelia

Goal: tracking credit score regularly

Competitive Audit

With a competitive audit of our top 2 competitors...

Strengths

• Straightforward design
• Great information hierarchy, especially for credit cards
• All information easily accessible, including feedback
• Easy content navigation
• Encouraging tone
• Tailored recommendations easily accessible – feedback tells you what could be improved and how

Strengths

• Option to filter credit cards
• Available in 2 languages: English and French
• Strategic navigation link placement

Weaknesses

• Poor branding
• Lack of variety in buttons: makes distinguishing the type of actions unclear
• Cluttered layout

Weaknesses

• Feedback and detailed credit score overview takes 3 actions to reach (relatively long path – not easily accessible

I uncovered 3 major gaps and opportunities

1. The option to pay off credit card debts from within their apps
2. Provide a goal-setting configuration to cater better to user’s unique circumstances
3. More accessibility features (customizable text and dark mode) from settings

Then drafted the following value proposition

Features and benefits

• easy credit score monitoring
• paying off debt directly from app
• reminder notifications
• credit score progress status and detailed,  comprehensive credit overviews
• tailored credit suggestions
• no hidden fees
• automatic payments after certain limit
• personalized tips to improve credit score

Value for user needs

• Amelia: comprehensible, goal-oriented
• Carlos: accessible, personalized, goal-oriented

How Might Wes

My challenge was to tackle 5 "How Might We"s

1. How might we give a clear overview of a user’s credit score?
2. How might we guide our users towards their financial goals?
3. How might we let the user take action towards said goal?
4. How might we give each user a personalized experience?
5. How might we keep users accountable and up to date with their credit scores?

Ideating Solutions

Here's what I did in order to address the key user needs and pain points

Defined the user flow

Made paper wireframes of key screens

Round 1

Round 2

Round 3

Of those quick, low-fi sketches, I decided to further pursue features marked with a pink asterisk and create a low-fidelity digital prototype.

More Research and analysis with usability testing

Before moving any further, I conducted an unmoderated usability study on my prototype

My research study plan

Goal: Determine if users can complete core tasks within the app. Determine if Creditwise is difficult to use.

Research Questions

• How long does it take for a user to know what’s impacting their score?
• What can we learn from the user flow to clearly know what actions to take to increase their credit score?
• Are there any parts in the user flow where users get stuck?
• Do the users find the paying option easy and reliable?
• Are there more features the users would like to see in the app?

KPIs I wanted to measure

Time on Task

User Error Rates

System Usability Scale (SUS)

Participants

• Adults (from among my friends and family, aged 18+) with a common goal of improving their credit score
• 2 women, 2 men, between the ages 20-56

Script

1. Prompt 1: Get detailed insights about your credit score
   Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the way the information is presented?
2. Prompt 2: Get detailed insights about your high impact credit factors
3. Prompt 3:  Pay off any debts you might have
   Prompt 3 follow-up: How easy or difficult was this task to complete? Is there anything you would change?
4. Prompt 4: From the home page, figure out where you would go to browse for different credit card and loan recommendations made for you
5. Prompt 5: How did you feel about Creditwise overall? What did you like and dislike about it?

Then presented a list of prompts for my System Usablity Scale where my participants had to pick an answer ranging from "Strongly DIsagree" to "Strongly Agree".

Here's what I learned afterwards

… Nothing of great significance, and that’s okay!

1. It didn’t take longer than 2 seconds for my participants to complete the tasks; they found them rather trivial and easy to complete
2. Positive feedback on information organization and clarity
3. All voted “Strongly agree” for “I think the app is easy to use”

Improvements and accessibility considerations

Some design decisions and improvements in high fidelity

Let's zoom in and take a look at details in my design

Screen 1: Home

1. Increased and improved and improved spacing, and feedback icon communicates stronger achievement emotion in user
2. Caption indicating number of remaning suggestions: helps user with deciding whether or not pursuing the action further
3. The Credit Card card, although taller in height, contains more comfortably all kinds of content, no matter the font size. This suggests an increased accessibility, since it can adapt to bigger font sizes.

Screen 2: Credit Report

1. CTA is way more prominent; increased contrast provides a strong signifier that clicking it will lead to more details
2. A brief description underneath the heading as opposed to having it hidden within a tooltip. Since we're displaying quantitative data, it's best to have some copy clarify what it is.
3. Using a ring instead of a progress bar: although both methods of displaying the progress percentage are equally straightforward, using the ring gives us the advantage of saving up on some horizontal space. That enables us to fit additional but helpful content, such as feedback, as well as a CTA that lets the user fine-tune and configure their credit goals easily, without otherwise having to go through their account settings.
4. By separating those two elements I implemented some flavor of "separation of concerns". Although it doesn't achieve much functionality-wise, it helps the user being presented with their insights in a more modular, bite-sized way.
5. Slight change of wording (and placement, too): between "click" and "tap", we all know that the latter better describes the gesture users perform on mobile touch screens (as opposed to desktop screens with cursors)
6. Added descriptiveness: not only makes the information displayed more educational yet digestible, but also reduces the amount of information that needs to be fitted inside the tooltip (which are typically meant for short fragments of text)

Screen 3: Credit Card Payment Confirmation

1. More focus on the transaction at hand: the overlay on the main screen and the hidden tab bar put the confirmation popup front and center. That lessens the distractions on the UI and may help the user focus more when completing the transaction
2. Added descriptiveness underneath the heading for increased usability.
3. A more clearly defined information hierarchy between the amount transferred, source of transfer, and destination of transfer
4. Added "Cancel" button: an additional way to exit the popup/cancel the transaction completely. Having the "Cancel" button placed at the very bottom of the screen, somewhere that can be easily tapped by the thumbs of the user, adds an extra layer of security. In case the user doesn't see the "x" at the top right corner of the popup, they have another way out of the transaction.

Key Takeaways

What I'd do differently next time...

You made it to the end! :) As my first UX project, I learned a lot, including:

1. More, but less refined ideas: as I was brainstorming with my paper wireframes, I found myself taking a while to come up with UI elements. But the only way to get better at it is to practice; this and subsequent projects enabled me to do exactly that.
2. Another usability study: given the scale and timeline of the project, the only testing that occurred was the unmoderated usability study I conducted on an extremely limited scope of the project (low-fidelity with restricted functionality). More testing needs to be done with my high-fidelity prototype, to ensure that it still aligned with the target users’ needs and addressed their pain points.
3. More attention for notifications: Notifications are an important aspect of the UX of Creditwise, but it didn’t receive the love and attention I had planned for it.

See my other projects...