Spendle
Spendle is a digital wallet web app design with an integrated budgeting feature. By including an intuitive budgeting feature, users can reduce the number of services they use to complete transactions and start building better habits through financial transparency.
INTRODUCTION
Responsible for conducting competitive analysis, user research, interviews/surveys, designing prototypes and wireframes, executing usability tests, and creating a UI design system.
MY ROLE
• Figma
• Creately
• Google Forms
• Google Sheets
• UsabilityHub
• Miro
• Adobe Illustrator
TOOLS
Felipe Cruz - Mentor
Raymond Ayers - Tutor
Jen Bonina - UX/UI Designer
TEAM
Who’s the competition?
By looking at what’s currently on the market, we can better understand the gaps in current product offerings, and make something better ;)
We analyzed PayPal, Apple, and Mint to see what’s working and what could be improved.
PAYPAL
PayPal has worked to build its brand and customer base through their subsidiaries (Venmo), on top of being a widely accepted payment method for online merchants. Customers are able to connect multiple banks and cards and use PayPal as their payment method online to expedite the online checkout process.
-
• Strong global presence.
• Accepted by many online merchants.
• Useful features to accommodate a variety of users.
• Overall convenience for users.
-
• Web app (from mobile) needs major improvement.
• Issues/concerns of security and fraud.
• Not an actual bank, so there are no federally-required protections.
• Poor customer service.
-
• Better UX/UI for a more delightful and easy experience.
• Reward system without the need for a credit/debit card.
• Ability to categorize and track past transactions.
• Live feed of bank and card funds available.
-
• Apple Pay is a big threat for PayPal due to their DPAN security, ability to pay easily online and in stores, and store other information like plane tickets and insurance cards.
• Google Pay also features DPAN security for their users and is available on any device including web browsers.
APPLE
Apple seamlessly integrates their products on iOS device(s) for an efficient, secure, and intuitive way to pay online/in stores without the need for physical cards. Products include: Apple Wallet for storing existing cards and tickets, Apple Cash for sending/receiving money and paying online/in stores, Apple Card, and finally, Apple Pay, which is their exclusive payment processing system. All of these products are available for iOS users.
-
• Ability to pay in places that have contactless payment terminals.
• Beautiful user interface and simple set up.
• Ability to store more than just payment information.
• Peer-to-peer payments.
• Expedited checkout.
-
• Only available for iOS users and not a native app on their computers (only available on safari browsers).
• No way to view all transactions from debit or credit card.
• No ability to categorize past transactions.
• Does not allow customers to pay directly with bank account.
• Does not show card balance.
-
• View a summary of spending habits.
• Display live view of funds available.
• Add as a browser plugin/extension for other browser products.
• Still be able to use digital wallet for purchases that don’t accept Apple Pay.
-
• Google Pay - is not exclusively available for Android users and can be used on all devices.
• PayPal, which allows users to pay for things using funds from their bank account.
• Fraud and cyberattacks (Let’s be real, this is a threat to all payment processing systems).
MINT
Mint’s objectives include safe and secure finance monitoring with encryption and multi-factor authentication, housing all accounts in one place (including bills and investments), transaction/cashflow tracking, and notifications and reminders about bills/fees. They attempt to stand out from the competition by giving their users a central app to store and view live information about all their financial assets.
-
• Ability to sync multiple existing accounts.
• Strong security and encryption.
• Algorithm to categorize expenses.
• Easy set up.
• Summary of funds.
• Budget setting.
-
• Overwhelming/complex interface (learning curve).
• Lack of directions/instructions on how to navigate/use the app.
• Lack of marketing/product visibility.
• Some functionality issues with the app.
• Premium subscription only available for iOS users.
-
• Send payments to peers.
• Set budgets per account/card.
• Pull funds from existing accounts into envelopes.
• Gain a % of interest on envelope savings.
-
• Competitors such as YNAB, PocketGuard, and Honeydue.
Users must rely on a variety apps and services (think, Venmo, Zelle, PayPal, Apple Pay, Google Pay, Cash App) to send money to friends and purchase items online. None of these payment services include an intuitive way to budget funds going in and out, leaving users in the dark about what they are actually spending. The one budgeting app I looked was lacking in intuitive user experience, making it less desirable to use.
So, what’s the problem?
but, i want to know more
🧐
but, i want to know more 🧐
Investigating behavior and saying buh-bye to assumptions.
By getting insights from REAL humans through surveying and interviewing, we can better understand user behavior and the intricacies of the problem, and thus, come up with the best solution (or at least get the ball rolling in that direction).
Let’s talk about the survey.
A total of 26 people completed the survey, ranging from 21 to 45 years old. Only 1 participant said they don’t have a digital wallet or use a payment service.
👯♂️ Participants
The questions focused mostly on user behavior when it came to the payment services they use most often, online shopping behavior, interactions with their banks’ app, and experience with budgeting.
🤔 Questions
• 80% use more than one digital wallet or payment service.
• Almost 60% use Venmo most often.
• 88%+ have 2FA enabled.
• 58% said that budgeting can cause anxiety for them.
🕵️♂️ Findings
How did the interviews go?
A total of 5 people in the target audience were recruited for interviews. Ages ranged from 22-61 and all participants actively used digital payment apps or wallets.
👋 Recruited
In addition to asking about participants’ behavior with their preferred payment apps, I also wanted to go deep and learn about peoples’ relationship with money and how that might be affecting their spending habits.
🤑 Asked
Using Creately (basically a whiteboard with digital Post It notes), I organized everyone’s quotes into related sections (affinity mapping) to get a clearer idea of pain points, behaviors, and needs. Overlapping feedback was bundled into 13 groups.
🗺 Organized
Key takeaways from the interviews
INSIGHT 1
1
Money management is not only a skill, it can be a trigger.
All participants mentioned that money management requires education and discipline, and that the lack of education or parental influence led to higher anxiety and difficulty managing finances. When it came to budgeting, a pattern revealed itself: budgeting was very loose and only implemented when funds were tight.
INSIGHT 2
2
Security can make or break trust with a product and/or brand.
It goes without saying that when it comes to money, security and trust is very important. All participants mentioned that they needed to see a higher level of security from the payment services they use. Multiple participants mentioned that if they experienced any breach in security, trust with that company was gone for good.
INSIGHT 3
3
Convenience can be helpful AND hurtful.
The convenience of digital wallet services was highly appreciated. It helped participants with seamless checkout and paying friends without the need for cash. However, the frictionless aspect of these payment services contributed to more impulse buying.
Say hello to our personas!
The three personas were based on the people I interviewed and data gathered from the survey. These personas are the target audience and their characteristics and goals will help me understand the key tasks needed for the minimum viable product (MVP). Expand the list below to learn more about each of our personas!
Persona #1 Sara Anderson
Sara has a relatively good grip on her spending habits but limited time to buy items for her business. She needs a digital wallet that lets her purchase items quickly without having to enter all her payment information at checkout.
-
Age: 34
Location: Seattle, WA
Ethnicity: Latina/Korean Mix
Family Status: Married with a baby
Occupation: Event Planner -
• Hiking
• Reading fictional novels
• Amateur photography
-
# of Payment Apps/Services: 3
Frequency of use: 3X a week
Device Preference: Mobile/Tablet
Shops Online: Often -
• Needs to make financial adjustments to accommodate her growing family.
• Wants to easily pay her babysitter.
• Wants to buy business supplies online quickly.
-
• Alternatives to cash
• Financial stability
• Streamlined shopping experience
-
• Has limited time to achieve all her daily tasks.
• Often forgets to grab cash while out on errands.
• Has to buy a lot of business supplies, both online and in stores.
• Was negatively surprised about all the expenses when having the baby.
Persona #2 David Patel
David is a little more old school and prefers to pay with cash, but the extra trips to the ATM and bank are taking too much time. He needs a single, easy-to-use app that lets him send cash to people quickly.
-
Age: 51
Location: Chicago, IL
Ethnicity: Indian
Family Status: Married with 2 kids in college
Occupation: Non-profit Organization Manager -
• Golfing
• Restoring vintage cars
• Attending classical music concerts
-
# of Payment Apps/Services: 1
Frequency of use: 1X a week
Device Preference: Desktop
Shops Online: Sometimes -
• Needs to pay his buddies for a round of golf.
• Spend less time trying to learn new tech.
• Needs to send money to his kids in college.
-
• Simplicity and convenience.
• Spend more time doing the things he loves.
• Making sure his kids have money on time.
-
• Complicated interfaces and dealing with multiple apps.
• Time-consuming errands to complete basic tasks.
• Gives up quickly if there’s a steep learning curve.
Persona #3 Emily Thompson
Emily makes good money but her “self-care spending” is getting out of hand. She needs to set up a budget in order to cut back on unnecessary spending so she can start saving for a new car.
-
Age: 23
Location: Austin, TX
Ethnicity: African American
Family Status: Single
Occupation: Content Writer -
• Playing and streaming video games.
• Volunteering at the animal shelter.
• Cooking and baking. -
# of Payment Apps/Services: 4
Frequency of use: 5X a week
Device Preference: Mobile/laptop
Shops Online: Very often -
• Needs to watch her impulse spending more carefully.
• Needs to pay off student debt.
• Wants to save up for a new car.
-
• Financial freedom
• Self-care spending
• Build credit and be responsible
-
• Has a lot of anxiety about money in general.
• Big impulse buyer (and gets buyers remorse often).
• Usually doesn’t have money leftover to put into savings.
• Didn’t learn about money management basics.
Ok, so where are we at?
We now have some solid research, our personas to encapsulate the target audience, and a list of behaviors REAL people are doing to show us which features Spendle needs to have in order to be a useful product. At these beginning design stages, we’re going to create 3 features that meet the needs of each persona. Those features include:
• Creating a digital wallet so Sara can use express checkout when purchasing online.
• Designing peer-to-peer payments so David can pay his friend for a round of golf.
• Creating a budget plan so Emily can start tracking where her money is going.
Before fully sketching out wireframes, I needed to get a grip on how the rest of the content might be organized on the web app. Using OptimalSort, 7 users participated in a closed card sort, which revealed there’s a number of features that users would expect to see in a couple sections, such as the list of transactions, money in/out, and bank account.
Using this information, I’ve decided that some content will be duplicated on a couple different tabs in the design. We will find out later through usability testing if this is actually useful or not.
Information Architecture
User flows
TASK #1
💳 Add a card to the digital wallet
This flow in its most basic form is pretty simple and straight forward.
TASK #2
Here, I emulated Venmo’s user flow for sending a payment. Based on the interviews, Venmo was a favored payment app because of its intuitiveness. No need to reinvent the wheel here.
💸 Send a digital payment
TASK #3
This was a more difficult flow to sort out. The flow is a simplified version of Quickbooks, as a way to organize and confirm transactions into categories. You will see that this feature was reiterated the most throughout the project.
💰 Set up a budget
Paper, pen, & sketches,
oh my!
Let the paper prototyping begin! We’ve got our three main features and the three personas they apply to. Now it’s time to start drawing out some really basic screens. During this process, I was able to work out where there might be some issues and reiterate once I moved onto to mid-fidelity frames. But for now, let’s see where everything started.
Task #1 Add a card
Task #2 Send a payment
Task #3 Create a budget
Mid-fidelity magnificence
Just kidding, it’s not that amazing. Although this portion of the design process is boring looking (hello grayscale), it was one of the more enjoyable parts of the project. By not thinking about polished aesthetics, I could explore lots of possibilities within the constraints of the project requirements and needs of the user.
Instead of subjecting you to tons of black and white mid-fidelity screens, I’ll show you some highlights of design decisions that were made before conducting the usability tests.
BUDGET FLOW
When designing, I like to keep an archive of designs going in case I want to revisit them and iterate on the initial idea. However, before conducting usability testing, it was made clear to me that requiring a user to select which categories they were going to sort transactions into BEFORE actually sorting was going to cause a major increase in mental load, trying to remember which categories they had initially picked.
So instead, we nixed that step and allowed Spendle to predict which categories a transaction might be sorted into.
This relieves the user of extra work and allows them the freedom to change the category if Spendle guessed incorrectly.
A logical reordering of steps
BUDGET FLOW
With anything finance-related, people like the see visuals. It can communicate data and information a lot faster than just looking at raw numbers, so I knew that integrating visual representations of data was integral to not only communicate status to a user, but also add some visual interest to the design as well.
Starting off, I made a bar chart that used the dreaded “danger” red to communicate where a user was over budget. But in case color was not enough (accessibility!), I also added dollar amounts to further indicate how over budget a user was.
We also see here the list of categories that our user has sorted their transactions into. It seems like a lot, maybe usability testing will let us know if less is more.
How do you say, “Stop spending”?
MID-FIDELITY FRAMES
What else you got?
One of the more simple and straight forward flows was onboarding and set up. We opted in to have users be introduced to Spendle and features via a swipe-through onboarding (which of course included the option to skip).
To highlight security at the start, I wanted to include an option that would allow a user to verify their identity prior to getting an account fully set up through a 6-digit code input through phone or email.
Onboarding
There’s a lot going on here but I wanted to give users the ability to navigate the majority of the app and features from this screen alone. Based on data and interviews, most users are not fully aware of the funds coming in and out each month, so including the stats near the top would allow for more transparency, and hopefully motivate users to mind their spending a bit more if that’s their goal.
I also included a dropdown filter to give users the freedom to see basic stats about money in/out during different timeframes.
Based on interviews, I knew that participants frequently reviewed recent transactions, so this was also included in the initial dashboard design.
Home dashboard
Imitation is the sincerest form of flattery, right? Well, in this case, it was also the most efficient way to design this flow. Something I did a little differently at this stage in the development (that differed from Venmo), was require the user to select their payment method BEFORE having access to the “pay” button.
The thought process behind this was to prevent users’ from moving too quickly and accidentally sending funds from the wrong account. Usability testing will help prove if this was a good idea or not.
Digital payments
Based on the card sort, I saw that participants expected certain features to be available on multiple parts of the web app, so it was relevant to include the Spendle balance in the wallet dashboard and the digital payment dashboard.
I’ve included the button slider (found through Material Design) to help users quickly navigate to an account type they want to focus on.
From the interviews, filtering and viewing transaction was another frequent behavior that needed to be part of the MVP. Here, we have a little glimpse of how that will evolve with the initial screen.
Wallet
Usability Testing: Finding the “oops” moments in my design to create better UX.
I recruited 6 participants through personal network to test the mid-fidelity prototype with the primary goal of finding out what worked and what needed to change for an optimal user experience
SUMMARY
• Moderated in-person tests using a mobile device, consented video recording, and pre-written test script.
• Compensation: homemade chocolate chip banana bread 😋
TEST PROCESS
• 3 Males & 3 females between the ages of 22 - 40.
• All participants currently use payment apps or services such as Venmo/Apple Pay and most had some form of budgeting process.
PARTICIPANTS
• Create an account
• Add a card to Spendle Wallet
• Send a payment to a friend
• Create a budget plan
TASKS
Spill the tea
Using the rainbow spreadsheet method, each participant was represented by a different color so that I could quickly analyze the feedback and see which areas of the design needed iteration for a better user experience. Overall, the participants successfully completed the given tasks, but upon reviewing the rate of ease for each task, improvements could be made. Below are the top findings from the usability test.
ISSUE 1
1
Difficulty finding the button to add a card or bank to the wallet.
Evidence: 4 out of 6 participants reported this issue and several tapped the account type slider to find the button. This task’s ease scored lower for some because of this issue.
Possible solutions: Place "Add an account" button in a more obvious place, and/or ability to add an account by clicking on the slider button navigation to add an account of that specific type.
2
ISSUE 2
Not understanding how to categorize transactions or change a category.
Evidence: 3 out of 6 participants reported this issue and lowered the score of ease due to this issue. From video recording, all participants had to bring the phone closer to view the information and layout to understand this page.
Possible solutions: Add coach marks and/or a splash page before this step to show how it works, very simple text, or even an interactive screen for first time users. Another idea would be to simply lower the title "Categorize" on the screen so users can see it more easily.
3
ISSUE 3
Misunderstanding the bar graph in the budget summary.
Evidence: 3 out of 6 participants reported this issue. It was not until the graph was explained that they understood what information it was communicating.
Possible solutions: Add a key, add some other information graphics such as donut graph, graph for money in and money out, trending graph, or graph just showing category spending if limits have been implemented.
4
ISSUE 4
Struggling to understand the user flow when sending a payment.
Evidence: 2 out of 6 participants reported this issue and score of ease was lowered because of this issue. These two participants paused during the test and questioned if they had missed a screen or did something wrong.
Possible solutions: Reduce the number of steps on this flow and move location of some buttons. Additional suggestion, remove any reference to "Spendle P2P" (This term is vague and unfamiliar).
5
ISSUE 5
Difficulty finding search bar on Pay/Request dashboard.
Evidence: 2 out of 6 participants reported this issue and score of ease was lowered because of this issue.
Possible solutions: Lower search bar on the screen to increase visability.
6
ISSUE 6
Too much copy and cluttered interface.
Evidence: 3 out of 6 participants reported there was too much to read and that the dashboards had too many buttons or too much going on in general.
Possible solutions: Reduce copy with very selective and clear verbiage. Create a clear hierarchy with UI design and increase white space.
Where do we go from here?
Where do we go from here?
We now have some solid feedback that validates some design decisions and highlights problem areas. I can move forward to implementing changes based on feedback from the usability test as I transition the design into a high-fidelity prototype with polished UI.
Design is life!
Despite having a degree in graphic design and nearly a decade of experience, I found out that UI design is a whole new beast with its own rules. After a lot of trial and error (including peer reviewed feedback), I finally composed the style guide that would define the overall look and feel of the Spendle web app. Based on data gathered from real people, money can be scary, so I aimed to create a visual system that’s welcoming with calming colors and fun doodles. Anything that makes money management more enjoyable will be a win!
The thought process behind each element.
DESIGN SYSTEM
In order to learn more of the ins and outs of Figma, I moved forward with creating a design system from scratch, using original and modified components, original style/color library, and grid system.
Many of the modified components came from Material Design’s community Figma file. This resource was really helpful for me also learning how auto-layout works.
I also gained design insights and basics from resources like Medium and Youtubers, like Mizko. I won’t lie, having a college education in design principles went a long way too! Using Illustrator, I designed all the icons for Spendle so they were all uniform in design.
-
When people think money, it’s likely they think of the color green. I wanted to move toward a cooler palette that emulates calm and serenity while still keeping it money-focused and professional.
-
I choose the font family “Jost” because it had a very clean face that felt professional without seeming stale. Because the product is related to finances, it knew that readability would be an important factor as well.
-
We’ve got a really simple and easy-to-read button system. I didn’t want the button aesthetic to grab the users’ attention more than the relevant content displayed on each screen.
-
This design system was simply modified from the Material Design 3 Community file. Knowing that these dimensions and layouts and industry standards helps reduce design time!
-
These containers have also been adopted from Material design and display users’ card/bank accounts across multiple places in the Spendle web app.
-
No need to reinvent the wheel when creating a new design system! Utilizing and modifying elements from Material Design was a huge time saver and also helped me get a better idea of how to work with components in Figma.
-
This is where vector experience came in handy! I knew there was going to be a lot of specific icons needed across the screens, so I ended up making all the icons myself in Illustrator. This helps keep everything uniform across the platform.
-
We kept it simple with a tab navigation for mobile, utilizing my custom icons and a light highlight for when a tab item is active.
-
I got super lucky finding these hand-drawn illustrations from Rawpixel. With my membership, I was able to download high-res image files and use them commercially. They are fun and trendy and bring a little more lightness to the design.
Bringing the product to life
Armed with valuable data and possible solutions from the usability test, I transitioned the screens to high-fidelity. This is really where I took a deep dive into Figma, getting familiar with the basics such as auto-layout and components. As I developed the design further, the style guide was updated continuously until a final look and feel was solidified and applied to all screens. Below are the user flows with the final styles applied and annotations from what changed as a result from the usability tests.
FLOW 1
This flow is pretty straight forward and I did not want to deviate from standard norms. The onboarding slides highlight some of the products features and leads straight into the account creation process.
How did usability testing effect this flow?
I kept the “skip” button on the onboarding slides, as 3/6 users opted to skip this portion. However, the biggest change was that I removed the option to add a card or bank account during account creation, because only 1 user in the usability test opted to add a card while making their account. The other 5 participants skipped this step when presented the choice.
Create an account
FLOW 2
Add a card to digital wallet
Another straight forward flow! The large text fields help with easier navigating for those who may have larger fingers and there’s an additional option to change the account type if a mistake was made.
How did usability testing effect this flow?
The tests confirmed that having an option to “nickname” an account was a useful tool. Otherwise, the only major change as a result of the usability test was making the form fields larger in order for them to be more readable and what I like to call, finger-friendly :)
FLOW 3
Filters and searching transactions was a frequent behavior from participants, so this flow was created to accommodate our target audience. I’ve provided ample ways to filter transactions, whether it be by date, payment type, $ amount, and more. Additionally, since we know that the target audience of this product is wanting to track their finances more carefully, I’ve added the option to add note to transactions.
How did usability testing effect this flow?
It didn’t! Unfortunately, this design came after usability testing. However, I gained inspiration for the design from my current bank app to see how another successful product crafted their user journey when searching for transactions.
Search/filter transactions
FLOW 4
As expected, much of this flow design was based on Venmo’s user journey for sending a payment. It’s a very successful product and from the survey, was the payment app that provided the most value for participants. To reduce cognitive load, I kept the user receiving the payment in view throughout the entire flow. Additionally, to stay aligned with the product design, the payment options are displayed similarly to how they appear in the Wallet dashboard. This means showing account balances for those who are trying to be mindful of their spending.
How did usability testing effect this flow?
Per test feedback, I switched the flow so that users can select the option to pay or request funds prior to choosing the payment method. Users are still offered the option to change aspects of the transaction before sending or requesting payment, because let’s be honest, we all make mistakes sometimes! Participants positively noted that they liked the option to cancel the transaction after completion, so we kept that in the design!
Send a digital payment
FLOW 5
Y’all! This was HARD! Even though the feedback from usability testing was mostly positive and the design was usable, there was a lot of reiteration when it came to displaying the graphs and financial data. Because there was a lot going on here, I had to be really selective about the design on each screen. I spent a lot of time learning auto-layout for this flow, so that the elements retained their integrity if changes were made.
How did usability testing effect this flow?
Per test feedback, coach marks were added to give direction to new users on how to categorize transactions. Several participants noted it would be helpful if categories were also placed into related groups. For example, streaming services and concerts could go under the umbrella of “Entertainment”. By grouping together categories, users can get an overall sense of where their funds are going. Users are now given the option to set spending limits on an entire category group and/or subcategories. Lastly, the test showed that the graphs needed to be simple and clear, so I looked at other products to replicate effective data visualizations for users.
Create a monthly budget
it's so pretty
🤩
it's so pretty 🤩
It’s also usable! By reiterating the design based on issues reported from the usability test and keeping the needs of our personas at the forefront, we now have a functional product that looks good and provides utility for users.
But that’s not all…
