Freeing Millennials from financial worry

Designing an easy, fun, and instantly accessible budgeting experience.
Duration
10 week project
The team
1 Product designer
2 Data scientists
8 Engineers

Improving the customer onboarding and budgeting experience.

Our team was tasked with creating a mobile budgeting experience for Millennials that is fun, easy, and accessible. We inherited a code base that provided a basic login with manual budget creation.
My Product Design role
My role as the product designer spanned the product development including research, design, development and testing. A key element of my role was to design solutions that responded to the goals of our Millennial budgeters as we encountered constraints and competing priorities.

Millennial budgeters wanted to know how much money they have so they don't overspend

Stressed out Millennials
Millennial budgeters are savvy mobile app users looking for tools to help them get in control of their finances. Many Millennials avoid finances because of how stressful and time consuming budgeting can be. Sixty percent of people would change banks for a better mobile app. They want a system that fits into their mobile lifestyle and is easy to maintain. Our aspiring budgeters are looking for a way to keep track of their money. This surprised us because we expected customers to focus on saving.
The primary pain point was not knowing how much money they had at any given time. Banking jargon and confusing designs create confusion and anxiety for customers.

Is the Current Balance for this credit card the balance due or the balance available?

An app showing renters how much they could spend based on frugality provided inspiration

We conducted several rounds of independent research starting with broad ideas and narrowed our research with consecutive rounds using Walt Disney style brainstorming sessions taking turns as the dreamer, the realist and the critic.

We discovered an app that helps renters identify how much they can afford to spend on a rental, based on their frugality level. This idea provided a point of inspiration. Helping customers make informed decisions based on their personal profile resonated. We looked for a similar value add for our Millennial budgeters.

My research revealed a cluttered market with overlapping features. Several Fintech app reviews noted the focus on user experience.

This article highlighted niche apps and recommended YNAB for its feature to allow users to set their income and adjust spending categories!

Easy, fun, and accessible design values framed our team discussions

We developed a shared language to evaluate design and development decisions. I started to define the design vibe to reflect our Millennial budgeter values.  Millennials, reeling from economic downturns, shun traditional corporate culture/boomer hierarchies in favor of  meritocracies/social responsibility. These digital natives favor simple, friendly, mobile solutions.

The engineering teams appreciated having a concrete idea for the direction. I put together a draft of content and some inital fonts, colors and button styles to represent the aspirations. This evolved into the Click through page.

Trusted friend and valued financial hack vibe
  • Simple, clean design
  • Approachable, fun feeling
  • Crisp data visualizations
I organized our ideas and research into possible task flows and key values to frame our scope discussions with the goals of our Millennial budgeters.

Redesigning the onboarding flows kept the focus on user experience

Significant refactoring of the code forced us to rethink our ambitious scope. I had to trim the design without losing the cohesive flow and key elements of the budgeting experience.

An early idea was floated to go to the dashboard immediately after account creation to show value earlier. Contrastly, additional demographic questions collected more customer information and created a more personalized experience, but it slowed the onboarding process, increased the complexity and added to development requirements.

I shared examples from my research showing the importance of onboarding and created a few quick drafts to whittle down our design to a feasible scope.

Iterations of onboarding screens

Building trust, simplicity, and clarity for Millennial’s drove the design

We decided to focus on a simplified onboarding experience and data visualization on the dashboard to be able to quickly test the PLAID and Data Science API functionality.

Development priorities
Future development
  • simple onboarding experience
  • link bank accounts during onboarding
  • automate income and 4 basic categories
  • dashboard with distinct spaces
  • accessible, trusted friend experience
  • bill pay and reminders
  • financial report generation
  • predict future spending
  • customer frugality profile
  • advanced  budget categories

A periwinkle hued pastel blue created an accessible, friendly, Millennial vibe

I knew blues and greens are popular with fintech apps aiming to strike a tone of stability and growing your money. However, I wanted to avoid the corporate feel of a navy blues while Mint and Robinhood already are strongly associated with greens. I landed on teal to evoke a friendly, unique vibe. However, the accessibility of the teal was disappointing.

Further color explorations landed on a vibrant purple and a pastel blue. While the lively purple was appealing, it gave an edgier feel that didn’t quite align with the design language. The purple inspired a tinting of a blue for a periwinkle hued pastel blue that has a friendly, approachable vibe that would appeal to our Millennial budgeters.

Linking bank accounts earlier in the flow connected spending + budgeting

I redesigned the onboarding to simplify the amount of information gathered from our budgeters and reordered the sequence to link the bank accounts earlier. This design solution connected budgeters with their spending data at the same time they are setting their budgeting goals for the four basic expenses.

It addressed our Product Manager’s desire to show value early and narrowed the scope of the development for our engineers while maintaining the onboarding experience for our Millennial budgeters. This was our game changer because the Data science API allowed us to add value during the onboarding process, not after.

Linked data is sorted and tagged by the Data science API the first time

Customizing the PLAID template balanced efficiency and personalization

Early sketches of content layout to link the bank accounts

Our product manager pushed for a three column card style design over a more commonly used single column design to display the most banks while the engineers advocated for using a PLAID template out of the box. The PLAID template incorporated boilerplate text, a search bar and one, two or three columns of bank accounts.

I designed mock ups with the elements and bank logos to see the impact of the different logo styles and patterns on the overall visibility. I used the PLAID template and adjusted the copy to reduce the banking jargon and evoke our friendly vibe. While I leaned towards using the single column approach, I felt that this design would be good to test and could be easily be updated if the results showed that the design slowed down our budgeters or impacted the onboarding experience.

Design iterations showing different bank account layouts

Designs using a bottom sheet overlay to link to the customer bank accounts

Income + 4 Basic expenses created a simple budget onboarding experience

We mapped 200+ PLAID categories to Income + 4 basic expenses. This process surfaced assumptions about the meaning of terms and possible conflicts with overlapping terms for calculations such as debt and loans. I revised banking terms and icons to reflect the Millennial perspective. We started to think about how to build a flexible system that could grow with future development projects. This led to the design of a database admin panel that the Data Science team built to record design changes to terms directly to the API.

Single decision interactions focused customer attention

Our budgeters are assisted in making their budget with a default amount suggested based on their recent transactions. They can edit the budget amount and either enter the amount manually or build their budget by selecting transactions. The bottom sheet overlay provides a flexible interaction while simplifying page navigations. The success message confirms the income amount.

Budgeters can make a quick decision to use the default amount or review their past transactions to update their income.

I designed the budget onboarding in a repeating pattern to build familiarity for our Millennial budgeters and simplify development by reusing components. The piggy bank character was added to provide a fun celebration with information confirmation.

Designs showing the first of four basic budget categories, that we called blocks.

Three distinct spaces created visual separation on the dashboard

I started by listing all the information our budgeters discussed and arranged the hierarchy of importance to segment the dashboard into sections. I created three distinct spaces, each with greater resolution: balance, cash flow and transactions. I identified first glance content versus reviewing later and looking for greater detail content.

When I hit a roadblock, my design manager suggested thinking about removing anything that could be moved to another page. Each design crit we asked if an element was needed and if it was needed there. I started stripping away elements and moved them different pages.

Strong visual hierarchy hinged on understanding our budgeter's goals

There was a lot of push and pull between competing ideas. My product manager pushed for mostly visuals to avoid a business app feeling while my design manager pushed for strong text hierarchy. A mentor suggested you didn’t need to rely on illustrations to create a fun vibe.  

This led to the idea from our Millennial budgeters primary goal: knowing how much money they had available to spend. The balance became the primary element that is always visible on the dashboard. The second hierarchy of needs was tracking cash flow, which led to creating distinct spending and budget views. I imagined my Millennial budgeters on their daily tasks and the context in which they use the budgeting app.

The dashboard design focused on visibility, visual hierarchy, and quick access to spending.

Bottom sheet interactions mimiced the feel of budget “envelopes”

The tradeoff to design an efficient onboarding experience was to move personalizing the budgeting to in app. This had the additional benefit of being able to give our budgeters a preview of future development and get their feedback.

The idea was to create sticky features in the app, giving our Millennial budgeters a reason to return to the app by building in personalized interactions.

Simple field editing with two buttons was simplified to a single button interaction

Revisions prioritized scanning over editing so we moved the Update budget button below the activity information

Individual transactions can be reviewed and moved to a different budget category

Millennial budgeters personalized the budget experience with toggles

Toggles and radio buttons for easy preference changes

Easy, fun, and instantly accessible budgeting for Millennials

We improved the user experience and reduced onboarding time by 50%

We achieved our goals by reducing the time required to create a budget by more than 50% and creating a fun, friendly, and easy budgeting experience for Millennial budgeters. Redesigning the onboarding flow gave the development team time to refactor the code and integrate the Plaid and Okta microservices. The Data Science team exceeded expectations when they built an administrative interface for future development. I used my previous database administrative experience to test and refine the interface with them while the engineering team was refactoring the code.

The number of competing priorities and perspectives pushed me to lean into my design role to advise and communicate my reasoning. I've learned to lead with my recommendations and explain the design decisions that led to that recommendation including the designs that were discarded. Leading with the recommended designs focused on the solutions that served the customers while addressing the alternative design solutions built trust with the team.

Additionally, I've discovered how fundamentally my designs shift when prototyping the designs. Sharing the prototypes early gave the team a chance to actively participate in the design discussions. Having half dozen people mobbing in your files can take even a solo designer into a teamed design environment. I prototype at every stage of the design process now, even if it's with scraps of paper to get a sense of the interactions with the product team

Key user flows