Product Designer
Personal Development

Product Design Thinking

Applying the full design thinking model through a mobile budgeting app product called Allot.
Project Status
Completed
Client
Self (Student)
Ship Date
January 2021
A polished mockup of a product interface within a mobile device.

Introduction

This project was a way for me to apply the full Design Thinking model through a conceptual budgeting app called Allot. A huge amount of gratitude goes out to my mentor, Manprit Kalsi, for guiding me through this process.

The key objectives I wanted to accomplish were:

  1. Execute the full Design Thinking model for a mobile-first product MVP.
  2. Follow data driven decisions by conducting usability tests on the product experience.
  3. Create an approachable budgeting product brand.

Online research highlighted budget avoidance as a problem

People who try to adopt a budget either fail to account for their own complex needs, or fail to keep consistent maintenance on their budget. This is especially true for people experiencing strong emotions—they justify their spending with those emotions.¹ ²

Users were able to overcome budget avoidance with positive collaborators

I conducted 10 user interviews to supplement my online research. I surfaced several themes from my sources of information:

  • Mental Health: budgeting has been a source of anxiety for interviewees as opposed to being a benefit.​
  • Collaboration: collaborating with a loved one helped interviewees enjoy keeping a budget on track.
  • Mindset: budgeting has been avoided by interviewees who have been anxious about it.

Emotional states can affect user behavior

I referenced personas to understand that users were aware of their emotional spending and were also interested in educating themselves on how to budget around this better. The proposed solution is to make it easy to budget regardless of emotional state.

A short example of a Persona that documents user behavior based on emotional states.
This persona represented the priority audience who struggled to maintain a consistent budget because of how strongly their emotional states affected their behavior.

Prioritizing critical flows for a budgeting app

I identified two high-impact flows for a budgeting app's minimum viable product (MVP) based on my synthesized research insights. These critical flows carried my best-guess design assumptions that I also wanted to test:

  1. Onboarding: the account creation process will need to be thorough and approachable.
  2. Creating a budget: users should be able to create and maintain their budgets easily.

Testing user trust and freedom of choice

Several high-priority issues were discovered through five usability tests on a quick wireframe prototype:

  1. Users couldn’t trust the app’s methodology because the benefits of tracking mental health alongside finances were unclear.
    Recommendation: Explicitly describe the app's methodology through an onboarding sequence.​
  2. Users felt that the forced voice assistant on-boarding felt awkward.
    Recommendation: Give users the choice to use text-based alternatives.​
  3. User did not feel like the app would be secure enough.
    Recommendation: Explicitly outline how a user's information will be used with access to privacy law links.

These recommendations were implemented as I refined the designs further.

A sequence of three mockups that focused on showing plain, clean alignment within a mobile interface. Described further in the caption below the image.
The sampled wireframes in the photo depict a user's action to edit what a budgeted item would be called. These wireframes focused on testing for visual accessibility and mental model compatibility with real users.

Expressing the unity between mindfulness and finances to build user trust

I merged visual design trends typically found in mindfulness apps with standard, utilitarian layouts typically found in FinTech apps to evolve the product’s user interface.

A sequence of two mobile app dashboard mockups where user chooses to reveal more information.
These mock ups showcase a sequence where a user expands their dashboard to see more information presented to them in a thoughtful way.

Approachable microinteractions

I balanced the users' needs for having a simple, welcoming display with the ability to easily access critical information.

Testing my final assumptions

I conducted usability tests on the final prototype with the following objectives in mind:

  1. Gain insight about a user’s impression of the app branding.
  2. Gauge the desirability for a Conversation User Interface.
  3. Understand how users will want to navigate the app based on the affordances they see.

Learning 1: Design for various levels of technological comfort

Test participants expressed frustration at the app not being explicit enough about why it collects their information and what it would do with it.

Main recommendation: Highlight opportunities for users to read more details about how collecting information will be used to their benefit.

Two mockup screens with annotations pointing areas of improvement.
These two frames represent key moments where the user should have been able to learn more about how their data would be used to improve their experience.

Learning 2: Ensure visual accessibility for all

Test participants struggled to read some of the smaller font sizes.

Main recommendation: Increase the minimum font size threshold to 14px with a heavier font weight.

Two mockup screens with annotations pointing areas of improvement.
These two frames represent key moments where the user could not read essential text due to font size and weight.

Learning 3: Communicate mental models

Test participants were not able to consistently understand what the “Amount Available” progress bar was communicating at a glance.

Main recommendation: Animate the progress bars to show the fill decreasing—emphasizing the visual logic—and include an “info” icon for access to more detailed explanations.

One mockup screen with annotations pointing areas of improvement.
This frame represents a key moment where the static representation of a progress bar wasn't clearly communicating whether they had lost or gained money towards an established financial goal.

Retrospective

I learned a lot from this thorough exploration of the Design Thinking model:

  1. Assumed solutions are never 100% correct, though they can still be very close to what the user needs.
  2. Prioritizing is key—you cannot create a great solution without deprioritizing some other aspect of your solution.
  3. Creating simple solutions to complex pain points requires a lot of trial, error, and time.

Even though these learnings are from an early-career project, I still find myself continuously reflecting back on them as a full-time designer.

1 Loureiro, Y.K. and Haws, K.L. (2015), Positive Affect and Malleable Mental Accounting: An Investigation of the Role of Positive Affect in Flexible Expense Categorization and Spending. Psychol. Mark., 32: 670-677. doi:10.1002/mar.20808

2 Zhang, Christina and Sussman, Abigail B., The Role of Mental Accounting in Household Spending and Investing Decisions (December 4, 2019). Forthcoming in C. Chaffin (Ed.), Client Psychology. New York: Wiley, Chicago Booth Research Paper No. 19-07, Available at SSRN: https://ssrn.com/abstract=3051415

Next case study

Lead Web Designer
Form UX

Sign Up Form Redesign

An accessibility-forward update to create a frictionless sign up experience for first-time Fastly app users.
Read this case study