Meet Skylar

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. 

Monthly Breakdown

  1.  Skylar can view her monthly spending based on category

  2. Clicking on the card allows her to view a transaction by category breakdown

  3. She can view different months 

Annual Trends

  1.  Skylar can view her spending over a year

  2. She can view different years 

Savings Overview

  1. Skylar can view her progress on her current short term saving goals

  2. Clicking on this feed card brings her to the Saving section 

Money Tips

  1. Skylar can view a weekly Money tip

  2. Skylar can favorite money tips to view later

  3. 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

Pantsuit Professionals

(PSP)

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.

User Research

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.

Strategy

Using these insights we planned our design direction. Moving forward we would focus on designing:

  1. Automated inputs so users spent less time 

  2. Providing processed data in overviews

  3. Branding UI and using credible APIs to establish trust

  4. 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

Ideation

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

Usability

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. 

Big Idea

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. 

Final Design

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. 

Key Takeaways

Reflections & Next Steps
  1. Understand your user: When designing an app from the beginning understanding your primary user really informs the functions and features you design and prioritize.

  2. 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.

  3. 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.