Scope
4 month project:
Learning UX principles
Applying recently learned principles
Solving a problem I saw in the world
UX/UI Designer
Tackled the entire UX process:
Research
Ideation
Design
Validation
Iterations
Embarking on a CreditQuest
Credit cards have been a money spending standard ever since the payment method became popularized in the 50’s and 60’s. Since then, the details and information surrounding them have become extremely overwhelming. I embarked on a UX journey to help solve this problem.
My role
1. Understanding the quest's direction
Kicking off this project, I had a few vague ideas to start with based on my own experiences of finding a credit card. Through these user interviews, I discovered three high priority insights.
We do not what be to left guessing
Most people know getting a credit card is important, but they do not know which cards can do what, or which would be the best for their situation. There are way too many options to choose from.
Financial literacy is a learned skill
Many people do not understand what they are looking at the first time they open a credit card’s page, and they do not want to sift through boring articles to learn about what confused them.
The entire process is not intuitive
90% of the people I talked to had to ask for help in at least one step of their search. Credit cards are very common, but that does not mean the knowledge surrounding them is common sense.
Defining who within the problem space would benefit the most and why
Aided by the user interviews and literature review, I determined that the demographic that appeared to struggle most were financially independent young adults.
Target Audience
Young, financially independent adults
People from this group often stated that they went into the search with:
- Little to no knowledge.
- They ended up choosing one of the first cards they saw, or one that was recommended by a parent or guardian in their lives.
- More than one wished that the terms, conditions, and information were easier to understand.
“I didn’t understand a lick of it.”
2. So... what is the goal?
I am not afraid to admit that I approached this problem space without any specialized knowledge on the field itself. I had a lot to learn so I did what any novice would do: I conducted a competitive analysis to see how pre existing applications address the same problem. Three things became clear:
I am not afraid to admit that I approached this problem space without any specialized knowledge on the field itself. I had a lot to learn so I did what any novice would do: I conducted a competitive analysis to see how pre existing applications address the same problem. Three things became clear:
Visibility and ease of access is key.
Credit card apps present clear options and paths by making sure touch points and features are well labeled and have obvious functions. They are designed to be simple.
The user needs to be in control.
Users being able to to take control of their experience is top priority. Clearly explaining functions at appropriate times helps with a more intuitive approach to the feature.
A push for outcomes, not understanding.
Credit card apps do a really good job at driving the sales pitch.. More often than not, these apps are used to find a quick solution at the expense of the user’s complete understanding.
The project’s direction and defining the goal
From the previous analyses, I knew that I wanted my own concepts to encapsulate visibility and user control. Though, something didn’t sit right about only pushing for an outcome. All of the research and data put together sparked a vision about how I would start my own approach.
Assumption
Credit card apps focus on speeding up the process of finding a credit card.
Implication
User's feel more confusion because they don't understand everything.
The goal was to create an app that leaned heavily into user control, personalization, and cultivating knowledge while maintaining the classic feel of a familiar credit card app.
How might we aid users in the process of choosing and maintaining a credit card?
3. Approaching design as a novice: sketches to usability testing
Moving into the design portion was extremely slow going for me because I was learning design theories and principles as I applied them.
The idea that drove my initial designs was a sort of “choose your own adventure” concept. I wanted to base the designs off a treasure hunting theme to play into the name of CreditQuest. This concept was toned down and eventually adapted to a more modern look in the final designs.
Moving into the design portion was extremely slow going for me because I was learning design theories and principles as I applied them.
The idea that drove my initial designs was a sort of “choose your own adventure” concept. I wanted to base the designs off a treasure hunting theme to play into the name of CreditQuest. This concept was toned down and eventually adapted to a more modern look in the final designs.
I had no idea what changes were in store for me when I produced the original sketches. Though they’re rough and messy, these sketches helped spark that creative streak to kickstart the design journey, even if the screens did not end up being anything like the final screens.
Gaining confidence with Figma
Gaining confidence with Figma
This was my first time using Figma for an original design concept. I learned a lot about best practices, improvisation, and problem solving related to the program and how I personally interact with it.
High fidelity iteration #1... and its issues
The first attempt at creating high fidelity designs was truly terrible. I didn’t have a good understanding of spacing, I hadn’t really grasped the design principles needed to create a nice design, and the colors really clashed which provided a very unpleasant palette to look at. I had it in my head that I liked everything in their own little boxes to separate the pages out by individual sections, my touch points definitely weren’t up to industry standards, and the overall organization leaves much to be desired visually. Not to mention, these were nearly carbon copies of the initial wireframes.
However, after receiving some extremely valuable feedback, I set back to work with the sole purpose of improving the designs and bringing them up to industry standard.
However, after receiving some extremely valuable feedback, I set back to work with the sole purpose of improving the designs and bringing them up to industry standard.
However, after receiving some extremely valuable feedback, I set back to work with the sole purpose of improving the designs and bringing them up to industry standard.
Later iterations and Usability Testing: Round 1
The first round of testing really helped me see that I had designer's blindness, because what seemed super obvious to me was very ambiguous and unclear to others. I found two critical errors that needed to be addressed before the next round of testing:
5 out of 5 of the participants were unable to edit their goals without prompting. Users ended up clicking out halfway through, thinking they were doing the wrong thing.
Critical Issue #1
Most of the participants also couldn’t find the credit card comparison tool because it was just a purple button at the bottom of the credit card screens, which could mean anything.
Critical Issue #2
The users also helped me find visual errors, and areas where the flow of the screens were disrupted easily. Once the first tests were done, I backed up once more and reconnected with the user’s mindset to move into the next iterations of the design.
Iterations and the second round of usability testing
Iterations and the second round of usability testing
For this iteration, I decided to experiment with learning paths in the goals page, however the way I had these set up confused a lot of users. They skimmed over the screen because the visual weight didn’t compliment the idea behind the screen. 3 of 5 participants reported that the layout didn’t make sense to them until it was explained.
New Critical Issue
The other main change with this iteration was the addition of a clearly labeled button for the comparison tool on the credit card page itself. This addressed and solved the issue from the first round of testing, but the button and the surrounding area still needed to be stylized.
Previous Critical Issue Solved
4. What sets this app apart: the final solutions in high fidelity
Creditquest simplifies the process of finding a credit card while educating you about healthy credit habits, financial terms, and important know-hows. Let Creditquest help you make informed decisions, so you’re not left guessing about whether or not the credit card you have is the right fit.
Creditquest simplifies the process of finding a credit card while educating you about healthy credit habits, financial terms, and important know-hows. Let Creditquest help you make informed decisions, so you’re not left guessing about whether or not the credit card you have is the right fit.
Your app, your way
Take total control over your journey to find the perfect credit card. Choose what you see by completing CreditQuest’s easy configuration. Once completed, CreditQuest will get right to work on bringing you the most personalized recommendations possible.
Take total control over your journey to find the perfect credit card. Choose what you see by completing CreditQuest’s easy configuration. Once completed, CreditQuest will get right to work on bringing you the most personalized recommendations possible.
Compare with confidence
Creditquest makes comparing potential credit cards simple, offering a detailed and customizable comparison feature. Save time by choosing the information you want to see and compare, all within the tool itself.
Creditquest makes comparing potential credit cards simple, offering a detailed and customizable comparison feature. Save time by choosing the information you want to see and compare, all within the tool itself.
X marks the spot: get to your goals
Journey alongside the app by interacting with your customizable goal paths. Allow Creditquest to path them for you, or create your own maps to explore and discover your way.
Journey alongside the app by interacting with your customizable goal paths. Allow Creditquest to path them for you, or create your own maps to explore and discover your way.
Let CreditQuest teach you: learn and grow
Leave your confusion behind by traveling through a new and unique approach to learning. CreditQuest’s interactive crash courses are short and simple so that you can use your time your way.
Leave your confusion behind by traveling through a new and unique approach to learning. CreditQuest’s interactive crash courses are short and simple so that you can use your time your way.
Exploring engagement through gamifying the user’s experience
Based on feedback in the usability testing, I wanted the app to more clearly incentivize users into coming back to the app. I decided to work in a gamified spin that goes hand in hand with the goals and crash courses.
Introducing: User Progress
Each time a user completes a crash course or a task from their goals paths, their achievements will be displayed. The user will receive a congratulatory message, where they will be able to see their overall progress bar tick upwards. They will also receive an award and its corresponding badge, both of which can be viewed via the Awards page in the goals section of the app.
Based on feedback in the usability testing, I wanted the app to more clearly incentivize users into coming back to the app. I decided to work in a gamified spin that goes hand in hand with the goals and crash courses.
Introducing: User Progress
Each time a user completes a crash course or a task from their goals paths, their achievements will be displayed. The user will receive a congratulatory message, where they will be able to see their overall progress bar tick upwards. They will also receive an award and its corresponding badge, both of which can be viewed via the Awards page in the goals section of the app.
6. Wrapping up and closing statistics
The potential of an app like CreditQuest to take off in today’s market is unknown because, as far as I’ve been able to research, nothing quite like it has been developed before. Though the layout and function of the app is mostly formulaic, the different take on some of the features and the addition of making knowledge acquiring a sort of game sets it apart. In theory, these inclusions could lead to better user retention. Instead of being the usual one and done, CreditQuest could maintain a more steady user base.
The potential of an app like CreditQuest to take off in today’s market is unknown because, as far as I’ve been able to research, nothing quite like it has been developed before. Though the layout and function of the app is mostly formulaic, the different take on some of the features and the addition of making knowledge acquiring a sort of game sets it apart. In theory, these inclusions could lead to better user retention. Instead of being the usual one and done, CreditQuest could maintain a more steady user base.
100% User Satisfaction
Based on user feedback on the experience with CreditQuest
Based on user feedback on the experience with CreditQuest
