Is the Current Balance for this credit card the balance due or the balance available?
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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