The product: 

Penny Pincher is a finance app and website focused to help tutor young adults in budgeting & saving money. What’s different between Penny Pincher and other finance apps is that you can use it without adding sensitive account info, linking accounts.

Project duration:

January 2022 to February 2022

My role: 

UX designer leading the app and responsive website from conception to delivery.

Responsibilities: 

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, taking into account accessibility, iterating on designs, determining information architecture, and responsive design.

Understanding the user

• User research

• Personas

• Problem statements

• Competitive audit

• Ideation

Problem statement:
Michelle is a recent grad software engineer who needs to budget her expenses because she wants to keep track of her bills and finances.

Problem statement:

Troy is a law student who needs keep track of his expenses because being a student, he’s on a tight budget.

Ideation

I did an ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on budgeting and account features.

STARTING THE DESIGN

• Digital wireframes

• Low-fidelity prototype

• Usability studies

After ideating and drafting some paper wireframes, I created the initial designs for the Penny Pincher app. These designs focused on delivering personalized guidance to users to help add certain transactions from their account to the app.

Select category from expenses for more detailed sorting (top left)
Global navigation to access all features within the app (bottom)

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of adding a transaction to a user’s account.

Accounts

Users want the ability to add their accounts for automatic adding of their transactions

Upload Receipt or Transactions

Users weren’t certain if uploading receipts would be the most convenient way to add transactions

Tools

Users liked seeing a breakdown of their different expenses

Refining the design

• Mockups

• High-fidelity prototype

• Accessibility

Based on the insights from the usability studies, I applied design changes including providing a clear section of the ‘Add Transactions’ screen to add notes plus icons for each section for users that may need to differentiate for accessibility purposes.

Additional design changes included adding an option to view a more detailed breakdown of expenses when the user taps on a specific section of expenses to the Tools screen.

1.

Clear labels for interactive elements that can be read by screen readers.

2.

Icons where any key expense is added in throughout the app

3.

Color palette of range of green added in taking into account users who may have accessibility needs

Responsive Design

• Information architecture

• Responsive design

With the app designs completed, I started work on designing the responsive website. I used the Penny Pincher sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Going forward

• Takeaways

• Next steps

1.
Conduct research on how successful the app is in reaching the goal to help young adults budget their finances.

2.
Add more educational resources for users to learn how to budget their expenses.

3.
Add more features like interactive elements and tips to help users manage their finances.