SavvySpender
App, Web Design, UX/UI
The SavvySpender app and responsive website will let users learn how to budget and save their funds. This will affect people who feel anxious, uncomfortable and triggered around money by providing a simple, dynamic and educational financial tool.
Project type: Design challenge / Individual project
Role: Sole Designer
Tool: Figma
Deliverables: Mobile app and responsive website mockups
Duration: 4 weeks
The Problem
I have been on a journey to improve my financial literacy and money management systems. When looking for a budgeting app, I felt frustrated by how complicated and rigid many of the options I came across were. After speaking to people in my life and conducting some research, I realised many of us share this frustration.
The Goal
Design a money management app and responsive website that will let users learn how to budget and save their money. This will affect people who feel anxious, uncomfortable and triggered around money by providing a simple, dynamic and educational financial tool.
Process
I adopted the design thinking process for my design. This included user research, surveys, paper and digital wireframing, low and high-fidelity prototyping, accounting for accessibility and iterating designs to produce a high quality design that meets users’ needs.
Understanding the User
I conducted a survey to better understand user behaviours, needs and motivations around money management. A total of 80 participants across Europe, North America and Africa completed the survey.
I discovered that 65% of total participants expressed negative or ambivalent feelings towards the topic of money, often using the words ‘anxious’ and ‘uncomfortable.’ Users also expressed their frustration with current budgeting tools as being cumbersome and rigid. Users desired budgeting tools that offer flexibility, are simple to use and help improve financial literacy.
Time Commitment
The time investment to set up a budget can be discouraging for users, especially first time budgeters.
Accessibility
Budgeting tools often assume users have a fixed income. Users with varying income have expressed these tolls don’t meed their needs.
Financial
Users who often need sound financial advice and tools can’t afford premium features and financial advisors.
Usability
The rigidity of many budgeting tools makes them hard to use consistently.
Competitive Analysis
I compared the user experience of three direct competitors, focusing on their apps and/or websites.
User Flow
I defined my app structure based on the pain points and goals from my research. The most important thing was to offer a personalised experience by establishing a user’s initial comfort levels with budgeting and money management from the outset.
Paper Wireframes
I sketched out wireframes on paper, keeping user pain points about usability, time intensity and accessibility in mind.
The wireframes shown are for the My Budget screen of the SavvySpender app.
Final paper wireframe for the My Budget screen.
Digital Wireframes
I added a calendar feature so users can easily look through their finances from previous months and plan for the future.
I also chose to use a large, minimal button, clearly indicating to the user how to add a new spending category.
Low-fidelity Prototype
Incorporating insights from my foundational research and peer feedback, I created a low-fidelity prototype.
App Mockups
After conducting a usability study with potential users, I incorporated feedback to improve my designs. In particular, I created two subcategories under the budget section of the app: My Spending and My Saving.
I added a spending indicator bar so users have a clearer picture of their spending and remaining amounts.
I also added an arrow so users can easily return to the main budgeting screen, improving the overall navigation of the app.
High-fidelity Prototype
My high-fidelity prototype followed the same user flow as my lo-fi prototype.
I incorporated the feedback I received to enhance the user experience.
Responsive Website
Following the same design thinking process I used for the app, I designed SavvySpender’s responsive website for desktop and mobile.
View SavvySpender’s website for mobile here.
Impact
I returned to five potential users who completed the initial survey for testing. The target users expressed very positive feedback overall. In particular, users responded very well to the ‘learn’ tab, expressing that this feature made the app stand out from the other budgeting tools available.
What I learnt
I learnt that meeting users’ needs doesn’t have to look like including a number of complex features. Users value a well thought out design that is simple, functional and intuitive. This was a challenge for me but I hope potential users are pleased with the outcome.