BUDGET BUILDER
Building Smarter Budgets
Career Foundry Case Study
"There's got to be an easier and more convenient way to keep track of my spendings"
Role
Ux Ui Designer
Oct 2023-Current
Skills
-
User Research
-
Usability Testing
-
Competitive Audit
-
Card Sorting
-
Wireframing
-
Mockups
-
Prototyping
-
Design System
-
Content Generation and Editing
Tools
-
Adobe XD
-
Figma
-
Illustrator
-
Photoshop
-
Optimal Workshop
-
Microsoft 365
-
WebAIM WCAG
Team
-
Tutor - Raymond
-
Mentor - Kasper
-
Career Specialist - Carma
Summary
-
Applied a human-centered design process and mobile-first approach to desing a responsive app in Figma, that encouraged user engagement
-
Conducted direct user interviews for firsthand insights into user needs and preferences. Competitive audits provided a thorough understanding of similar products in the market. Usability testing further refined my understanding and informed product enhancements.
-
Created wireframes that provided a structural blueprint ensuring clarity and alignment to user needs
-
Developed detailed prototypes and mockups to visually showcase design concepts and functions. These facilitated testing and iterative improvements based on feedback, ensuring a more polished and user-friendly app.
-
Created a design system that established consistent visual and functional standards, ensuring a cohesive, user-friendly experience
Summary
Lead UX UI designer, Researcher, Information Architect
​
-
Created a responsive website, that encouraged user engagement
-
Conducted direct user interviews, competitive audits, usability testing
-
Created wireframes that provided a structural blueprint
-
Developed detailed prototypes and mockups to visually showcase design concepts and functions
-
Created a design system that established consistent visual and functional standards
My goal - Design a financial app that simplifies expense tracking
RESEARCH
Competitive Audit
A research of two similar competitors Zelle and Expensify, revealed that neither offers a user-friendly method for creating custom budgets which was an opportunity for Budget Builder to explore
15 Questions 28 responses -Survey revealed
Create budgets on demand
Allocate funds and need to create budgets
Want a feature to track expense
Don't track expenses and want to start.
Opportunities:
-
Integrating expenses into budgeting groups for the 72% actively tracking expenses is an opportunity
-
Discovering the reasons behind non-tracking is crucial
-
The ability to explore flexible budgeting using past spending as a guide
-
Weekly budget status notifications could encourage better budgeting
-
Lastly, 68% are neutral about the financial app, suggesting room for growth by addressing expressed pain points
User Interviews
My user group for the interviews included a 53-year-old software engineer at a banking institution, an 18-year-old freshman in college, and a 28-year-old business consultant.
Current Financing Habits
-
Use Excel sheets to track finances for their ease of use, organization, and accessibility.
-
Categorize finances based on nondiscretionary and discretionary spending
User Needs:
-
All interviewed expressed a desire for monthly cash flow predictions based on previous expense pattern
-
Alerts when spending is over the allotted limit
-
The ability to Create specific goals
-
Highlight suspicious credit card charges based on spending habits
-
An easier way to itemize a restaurant check so each pays for what they ordered
-
Alerts of deals of discounts available but not availed for services or subscriptions enrolled in
Users want to easily track spending, plan for the future, and enjoy simplified payments
Iterations made to site map based on card sort and to prototypes based on user feedback
WIREFRAMES
-
Establishing basic designs and flows, providing a solid foundation for expanding our designs
Images expand when clicked upon
CARD SORT
helped me understand user mental organization and consequently iterate my site map design.
-
30% of Users put retirement plans under Budgets while 40% listed them under Overview. Retirement plan is now listed on the home page, so it is easily accessible to the user
-
60% listed Create custom categories under Budgets while 40% listed it under Overview. As this directly relates to budgets it will continue to reside under budgets
-
There was a 60-40 split in multiple categories, to help users the parent titles for these two categories titles were changed to Budget created, and the user profile
Images expand when clicked upon
LOGIN / SIGNUP
New users ensure sustainability
After Iterations Sign Up has a BOLD color
After Iterations Login has a stroke so as not to get lost
CREATE AN ACCOUNT
-
Concerns Alignment and spacing issues (image 1).
-
Iterations To ensure that all designs were aligned and spaced consistently, Figma auto layout was used throughout the designs.
HOME PAGE
ITERATIONS AFTER USER FEED BACK
Eliminating unnecessary steps relevant information is now accessible on home page
Uers can edit budgets details
Expenses can also be viewed in an easy to follow graph
Goals are acessible on home page
EDIT BUDGET
Design Library created for the app consist of color, text, icons, forms, header, footer, vector images
Color
Hues with contrast ratios and adherence to WCAG accessibility standards are included in the color library
PRIMARY
6D1FD4
7.51 AAA AA
421381
12.79 AAA AA
D4D020
6.78 AAA AA
F0E9FB
17.75 AAA AA
FFFFFF
21.1 AAA AA
000000
21.1 AAA AA
COMPLEMENTARY
D4D020
12.84 AAA AA
COMPLEMENTARY7F7D3D
4.91 AAA AA
GREYS
333333
12.63 AAA AA
GREYS
4D4D4D
8.45 AAA AA
GREYS
808080
5.31 AAA AA
GREYS
E6E6E6
16.82 AAA AA
Text
I opted for two text typefaces to enhance the visual appeal. Day One brings impact to the hero area, while Montserrat adds clarity while offering multiple style variations. Restricting fonts to two not only enhances design but also ensures efficient page loading.
Headers, Footers, Input fields, Vector art, Cards, Iocns
My Takeaways
Narrow Down on Objective
The possibilities are endless and it was easy for me to get overwhelmed and distracted by all the possible options, but it was team work that kept the focus on the main objective Helping users budget easily
Users Interviews and Users
Scheduling interviews can be tricky. To make it easy for users, I reached out to them the day before, as well as sent out a text reminder 30 minutes before the interview. This helped prepare me for unforeseen circumstances.
User interviews were very insightful and helpful. They helped eliminate many biases
-
Older teens probably need to budget more
-
In talking to college freshmen, I realized that as their source of income is limited they are very conscientious spenders​
-
-
Adults probably budget well​
-
Interviews revealed that many adults would like to budget but don't due to time constraint​
-
Adults are also vary of sharing financial information and worried about hacking
-
Design vs Reality
Sometimes the concept may appear to be the solution as was the case with home page designs. However, talking to users shed light that it 2 pages consolidated into 1 was a better route to go in eliminating unnecessary steps. And so while it is important to be passionate about designs it is more important to detach from them as well.
TESTIMONIALS
Carma
Career Specialist
"It's a pleasure to work with Michelle. She is a good communicator. She responds well to feedback and incorporates other suggestions and ideas into her work. She's curious, friendly, and a good collaborator."
Kasper
Mentor
"Michelle is very dedicated to her work as a UX designer, and has shown both competence and a high level of work-ethics. She has a clear and concise way of communicating and is easy to work with."