Skylar is a recent graduate who is working in NYC. She is looking for help with budgeting and saving for some short term goals. She needs to feel guided through the budgeting process and reassured by building trust.
To accomplish this she should be shown clear information about her finances and an easy to understand and utilize budgeting method.
Skylar can view her monthly spending based on category
Clicking on the card allows her to view a transaction by category breakdown
She can view different months
Skylar can view her spending over a year
She can view different years
Skylar can view her progress on her current short term saving goals
Clicking on this feed card brings her to the Saving section
Skylar can view a weekly Money tip
Skylar can favorite money tips to view later
Clicking on this card brings her to the Money Tips section
Users valued simplified overviews of their money, therefore I designed additional feed cards for quick overviews
Background & Challenge
Pantsuit Professionals (PSP) is a lifestyle brand with a focus on financial literacy for younger working women.
PSP was a startup with a website and social media presence. As Co-Project Manager and a UX designer it was my role to work with a team on designing a budgeting and savings app.
The CEO wanted to create an app to simplify budgeting and saving for PSP's demographic. Our team began with a discussion the scope of the project and the brand identity. Our 5 person team had 3 months to complete this project.
Our main focus was on how to empower women in financial decisions.
How might we help simplify budgeting and savings for young working women?
First we needed to understand our user.
Needs & Wants
We began our research by sending out surveys to the company's instagram followers and website members (our primary users).
We wanted to find out:
How many are currently budgeting?
How they budgeted?
How comfortable they felt with money management?
Any concerns around budgeting?
We received 239 survey responses. Most of the respondents were women under 30 who were either students or in a beginning career stage.
51% of users budget digitally
57% of users state security as top concern
54% of users identify as budgeting beginners
23% of users don't budget
With this information in mind we wanted to talk to users and get a more clear view of how they manage their money. We wanted to know what methods they used, how they felt about budgeting, and where they thought there was room for improvement in budgeting.
We interviewed 6 users with careers ranging from student to business consultant. From there we used empathy mapping and a persona to gain insight into users and a foundation to structure the solution on.
1. Users perceive budgeting as a time consuming and tedious task. They are just too busy to check everything manually.
2. Numbers alone do not mean anything. Users need to have context around their money habits.
3. Security is important and users feel comfortable giving information to companies they trust.
4. Users lack confidence in their finances and look for ways to educate themselves in saving, budgeting, and investing.
Using these insights we planned our design direction. Moving forward we would focus on designing:
Automated inputs so users spent less time
Providing processed data in overviews
Branding UI and using credible APIs to establish trust
Providing money management resources in app
With our design direction more focused and now knowing our user better, I set out to find what type of budgeting method we would base our app around. There are many different ways to approach budgeting and lots of our users had stated confusion when doing research due to this. As our user was a beginner budgeter and most likely still building assets I decided on a method called The Monthly Nut. I chose this method for its simplicity and because it easily provided large overviews of different categories, which were things our users valued.
From our empathy mapping and research we gained 4 main insights.
Framing & Solutions
Sketching & Paper Prototyping
Taking these sketches I used them in Marvel Pop to create a quick clickable prototype for the client to receive feedback on the home feed and how it links to other sections.
Some important feedback I received was questions around how to navigate between feed cards, where certain content could be found, and how my cards would then link to another section of the app.
I began to sketch out ideas for the home feed section, using various cards, as quick overviews of money. When I was doing this I had an idea to implement a "Spending Bubble" on the home feed. This was a quick and easy way users could see if they still had money to spend this month or if they had reached their limit.
Home feed cards I iterated on in my sketches were:
Spending Limit Bubble Card: Overview of how much has been spent
Monthly Breakdown: Categories of spending per month
Annual Trends: Linear graph of yearly spending
Money Tips: Weekly money management resource
Prototyping & Usability Tests
With a solution sketched out and client feedback, we were comfortable moving into the high fidelity phase of the project.
We used mood boards to help create a style guide. Our focus was on making the brand trustworthy and professional with a hint of fun. To accomplish this we chose a darker background and main colors with some fun icons. We used the same font as the website to keep consistency throughout the brand.
The Spending Bubble
A quick dynamic visual for users to see how much money they had left to spend this month. This was perfect for a user who was out and about to quickly pull up and check.
Prototyping & Usability Tests
Our final prototype took in all that we had learned from our users and client feedback. We uploaded our files to Jira and performed annotations for the developers.
Reflections & Next Steps
Understand your user: When designing an app from the beginning understanding your primary user really informs the functions and features you design and prioritize.
Work with your developers: Throughout the process I had access to developers to ask about the feasibility of design choices, this was very beneficial in understanding limitations.
Document, document, document: There was a period where my team was asked to change projects mid-project and then we returned to this project. Having documentation made picking up my work and process much easier.
In the future I would like to do more user tests with the hi-fidelity prototype to gain insight on what features user would like to see added to the app. I also would want to work on integrating more APIs into the saving section of the app so users could save automatically.