The Project
Scoops is a payment app that allows users to send and receive funds, create a budget to manage their money, and earn points towards rewards on every dollar they spend.
Context
Career Foundry UX Course Project
Role
Tools
Researcher and Designer
Google Workspace, Optimal Sort, pen and paper, Balsamiq, Figma, Usability Hub
_edited.png)
Challenge
As people become more dependent on digital tools in their everyday lives, their attitudes about money are also shifting towards a cash and card free lifestyle.
Goal
Conduct research and design a payment app that provides users with a secure, functional, and multi-use experience.
Methodology
I used the Design Thinking Process as my framework throughout the entirety of this project - its flexibility allows for continuous iteration during the development of the project while still keeping the focus on solutions that are human-centered.
.png)
Test
Prototype
Ideate
Define
Empathize
Empathize
So, where to start?
Knowing the competition is crucial - if you're going to build something that already exists, you have to build it better!
To see what other payment apps looked like, I did a competitor analysis and heuristic evaluation of Venmo and CashApp.
This gave me insight into what features the competitor apps focused on, what kind of reviews the apps were receiving through the Apple app store, and by downloading the apps myself I was able to determine any usability issues.
_edited.png)
Next, time to talk to potential users.
Finding out what users are looking for in a payment app seemed like an easy task - they want something that's fast and secure right?
But those expectations are standard now, it's just a part of doing business in the digital space. Then, what can my app bring to the table that other payment apps don't have?
I conducted surveys and interviews to find out.
Finally, what problem am I trying to solve?
There was a lot of data to go through, and I needed to ask myself what problems this app would attempt to solve. Three areas of focus stood out - users enjoyed being rewarded, users feel stressed about their spending habits, and users want information presented to them in a way that is visually appealing.
"I like getting free things that I already buy."
"I need different types of visual aids."
"I'm stressed about my spending habits."
%201.png)
The Problem Statement
"Modern spenders need a payment app that delivers on the basic requirements they’ve come to expect from digital products, but goes beyond that to meet their emotional needs as well, making often stressful or boring payment interactions a positive and friendly experience."
.png)
Define
After taking my research and problem statement into consideration, I was ready to create unique user personas.
By asking "who am I designing for?" I was able to focus in on two specific personas that represented the two app features I had already hypothesized would bring value to the app experience - Budget and Rewards.
These features aim to attract casual users who may be scared away by strictly business finance and banking apps, offering ways to enhance their Scoops experience through helping and rewarding.
Lea
The Shopaholic
Tom
Always On-The-Go
Much like creating a character when playing Dungeons & Dragons, these personas have specific "stats" and behaviors - this helped me stay true the user's goals during the many iterative stages of the design process.
Take a look at Lea and Tom's personas and user journeys below to learn more about their individual needs and goals.
Ideate
The next step was to develop the barebones structure of the app. I knew the "what" of what the users needed, but not the "how" of how they would get to what they needed.
The simplest way to figure this out was to map the steps both Lea and Tom might take to achieve a specific task.
For Lea, this was creating a budget. For Tom, redeeming a reward.
Each flow takes the entire process into consideration, from opening the app and logging in, to making final confirmations to reach the desired success criteria.
With these flows mapped out, I could see the architecture of the app start to become more clear. No longer just the barebones, now I was ready to build a more detailed sitemap.
However, my first try was a bit cluttered and didn't really feel like a natural progression through the app...
.png)
I needed a little bit of helping seeing things from the user's perspective here, so I enlisted the help of some friends and coworkers who fall within the Scoops target demographic to participate in a card sort.
Card Sort #1
I let the participants pick their own categories.
This resulted in a wide variety of category placements, and I learned that different people have very different opinions about money terms.
This wasn't as helpful as I had hoped, so it was time to try another card sort!
Card Sort #2
I picked the categories for the participants.
These results were much more defined and had fewer outliers.
With this second card sort complete, I felt confident that I could create a sitemap that was cleared defined.
.png)
.png)
Much better! Now I know who the Scoops users are, what they need, and how they're going to get to what they need - it's time to start designing what it all looks like.
Prototype
The previous stages of the design thinking process have been focused on thinking. This stage is all about design.
From initial pen and paper wireframes to colorful high-fidelity screens, the Scoops app went through iteration after iteration after iteration after...you guessed, it - iteration!
Below you can see the progression of the Rewards feature.
When I started designing these screens, I had a different reward option shown that wasn't connected to my user Tom's behavior.
I caught this error after my first round of usability tests and all future wireframes showed a corrected reward redemption option.
What other errors did I make in my designs? Am I not seeing this from the user's perspective? How can I be sure that what I've created is easily understood and visually appealling?
The best plan of action whenever I was doubting myself was to get feedback. After creating a set of high-fidelity screens that I could link together as a simple working prototype, it was time to test it.
Test
Usability testing can be an invaluable tool that shines a light on previously unseen pain points or errors. Designing for the user can be tough, but the user is still the best critic.
To assess my prototype, I conducted a series of six usability tests over the course of several days.
Goals
The goal of testing was to measure Learnability by observing participants as they navigated various tasks in the Scoops prototype - these tasks included basic functions such as creating a login and completing onboarding, sending money, and redeeming rewards.
Objectives
Determine if the app layout aligns with participants existing mental models of payment apps.
-
Can participants navigate the app easily?
-
Do participants understand the available options?
Observe participants as they complete specific tasks in the app.
-
Does Onboarding require less or more information?
-
Is the Send Money process easily understood?
-
Do participants see value in the Rewards feature?
Methodology
Moderated testing was conducted In-Person and Remotely based on the individual participant’s preference.
Participants
A small group of 6 participants were recruited for individual testing sessions. Participants ranged in age from 25-40, and had basic to advanced experience with smart phones and mobile applications.
26, Underwriter
40, Operations Manager
36, Training Specialist
36, Process Analyst
26, Customer Service Agent
30, Accounts Payable
With testing complete, I had a wealth of feedback to reflect on and analyze, separating insights into actionable critiques.
Positives, negatives, and even some ideas that I didn't think of! All of this was great feedback - I just needed to update the errors my participants called out and refine the task flows.
Feeling ready to tackle another round of ideating and prototyping, I set out to create final mockups for the Scoops app.
Test
Prototype
Ideate
Define
Empathize
The visual design choices I made for the Scoops app were purposeful, not just aesthetic driven.
During my research, participants expressed they felt anxiety upon seeing a certain shades of blue used by large banking apps - that's not an emotion I want connected to Scoops so I needed to create a pleasant and welcoming atmosphere as soon as the user opens the app.
I decided on a set of soft pastels that are reminiscent of rainbow sherbet, a sweet treat that can evoke feelings of joy, nostalgia, and satisfaction.
.png)
These colors were also used to help reinforce user association with the app's main features, which you can see started right away in the onboarding screens below.
_edited.png)
Green for Wallet
Blue for Budget
Pink for Rewards
Buttons and form fields were rounded to give a friendly impression. Icons were used to guide users, and pleasant illustrations affirmed successful actions. All of these choices were made to suggest to the user a tone of "Hey, you got this! No worries here!".
.png)
.png)
And of course, the Scoops app had to have a visually appealing and bold logo to match the positive environment I was crafting for the user.
I combined a dollar sign with an ice cream cone - simple but effective, and plays with the meaning of the app name as well.
.png)
Once completed, my mockups would be further tested by my peers - where my usability test participants tested the features, my peers would test the validity of the visual design.
Here's my original Scoops Rewards task flow mockups -
And here's the final mockups after receiving peer feedback -
Accessibility
Creating products that everyone can use is important as the digital space continues to grow and technology becomes more interconnected with our lives.
When I updated my mockups after receiving peer feedback, I also made changes throughout the app to ensure that it would meet accessibility needs.
Some changes...
.png)
Contrast
The colors in the Scoops logo were too light against the white background. I added a black stroke to the logo and name to better define them.
Labels
I added labels to the form fields to help clarify exactly what information is needed, and added example text to help prompt the user.
Context
The social icons may not be immediately understood as clickable without additional copy providing guidance.
Line Weight
The thin line weight on form fields and cards combined with the lighter colors made them difficult to see and recognize as interactive. Increasing the line weight makes them stand out more on the screen as fully fledged UI elements.
Voice Accessibility
The search option for Rewards isn’t very supportive of user needs by only using text input so I added a voice-to-text option allowing for faster searching.
And an interesting insight...
.png)
.png)
Grayscale
During usability testing, multiple participants commented on the grayscale design of the high-fidelity prototype, asking if it was how the final product would appear.
I learned that these participants were all neurodivergent, being on the Austism spectrum or having ADHD.
They liked the grayscale because it was calming to them, and allowed them to focus on the tasks without sensory overload and distraction.
This makes perfect sense - sensory overload can lead to mental overload, which is something we should already be designing to avoid.
Above I've imagined the Scoops dashboard in "Gray Mode", a possible accessibility option. By removing the colors but leaving the rest of the stylistic elements intact, the app can still have a unique visual personality.
And here it is! A clickable prototype of the Scoops payment app that you can take a look through yourself.
Learnings
This project has been a blast to work on, and while not every stage of the process was easy, it still taught me so much. The number one takeaway I have is to always remember "you are NOT your user!".
And that's not a negative - letting go of your own anxieties as a designer and allowing the voice of the user to guide you is extremely fulfilling. Oftentimes, users can be the best collaborators.
Here's a few additional learnings that my "collaborators" inspired -
Location Based Services
During usability testing, multiple users voiced the desire to see supportive location features like NFC and searching - while these may not seem like usual concerns for a payment app, it did highlight that users often face the same problem no matter the product - ease of use. To improve the app I would ask “how might we improve efficiency for users by adding new in-app location services?”
Value Based Experience
I would really want to make sure that users receive benefit from the app and have the ability to improve their financial literacy - I could do this by refining the Budget feature and creating some sort of “earn points as you learn” option where users receive reward points for completing learning modules (kind of like Coinbase).