Simplifi - Spending Plan

Image of New York Times Wirecutter awarded Best Budgeting App 2020 & 2021: Simplifi. Doing the Spending Plan dashboard cards on an iPhone and a laptop.

Background:
In my role as Lead Product Designer on the Studio Team at Allovus, I engage in a mix of deliverable-based projects and ongoing, integrated design consultation. One of the clients I worked with in an ongoing capacity was the product team at Simplifi, a web and mobile finance app by Quicken designed to help users easily understand, monitor, and control their financial health. For over a year I partnered with the team to incorporate the application of systemic thinking and adoption of interaction best practices, lower-level feature exploration, and the end-to-end design for larger flagship features. One of the larger initiatives I worked on was redesign of their budgeting feature: Spending Plan.

My role:
User experience, visual design, branding

A laptop showing Simplifi's initial implementation of their Spending Plan feature before I started the redesign.

Before: The Simplifi team had come up with a great strategy for easily determining what’s left for users to spend each month but their initial execution felt disjoined, used space inefficiently, and was difficult to understand.

An exploration for rebranding REI’s Outlet business. To connect with the audience, I used modern lifestyle photography and amplified the heritage aspect of REI’s brand, rather than focusing solely on the featured product.

Process & details:
When we kicked this effort off, the Simplifi team had compiled a generous amount of customer feedback from interview sessions and reviews. Once customers understood how to use the feature, they loved being able to visualize how their spending is doing each month with a single place to see all their bills, but there was a steep learning curve to understanding exactly what the feature was doing and how it worked. The team wanted to redesign it maintaining all the existing functionality, while adding some additional things users had been asking for. As with any redesign, I started with an extensive audit of the existing experience, outlining opportunities for optimization and clarification which I shared with the team. We could strengthen the relationships between the calculations and detail views by only showing one at a time, allowing users to focus on a single area of the plan as they work.

Early concept sketches and low-fidelity wireframes showing early expirations or recent

These are some of my early sketches and low-fidelity wireframes exploring ways we might strengthen the relationships between controls and content, allowing the user to focus on one specific area of their plan at a time, but still see how changes impact the big picture.

Since I worked on multiple projects for different clients each day, I would work within a weekly allotment of hours. In order to make sure we accounted for all the current and new tasks planned for inclusion in this feature, I created a document to track the requirements for each area and shared it with the Product Management team so we could track the completeness through each iteration. Initial ideation happened over several weeks with weekly client meeting to either review my progress, or to provide suggestions and feedback for whatever their internal design team was working on.

Images of documentation I created to keep track of core user tasks and needs to make sure everything was accounted for in the redesign.

I created this document and used it to track all the user needs and core tasks for each area of Spending Plan to make sure everything was addressed over the course of my iterative redesign effort.

I created this document and used it to track all the user needs and core tasks for each area of Spending Plan to make sure everything was addressed over the course of my iterative redesign effort.

The last thing the team wanted me to think through before committing to the new proposed navigation model within Spending Plan is how it would scale for their smaller supported breakpoints. I prepared wireframes showing how the tabbed navigation can be repositioned to optimize the space available for content at smaller screen-sizes.

Wireframes I created to show how the content and controls would adapt at screen breakpoints of 1440 pixels, 1022 pixels, and 768 pixels.

As we started to align on a layout for the web app, the team asked me to explore how the navigation within the feature would present itself at each of their supported breakpoints, when constrained browser widths wouldn’t allow for the content and to appear side-by-side.

As we aligned on an approach through low-fidelity iteration, the Simplifi team increased the scope of our redesign to include revising the styling of the global product navigation plus identifying a new typeface for use throughout the product. Until this point the product used Roboto, the default typeface from the Material Design platform it was built upon. They wanted a typeface with more unique personality that aligned to their brand tenants of being approachable, trustworthy, and warm but concise. In concert with our Studio Design Director: Steve, I produced multiple high-fidelity variations for new color and type treatments talking through the benefits of challenges of each with the team.

Visual design samples, showing 8 different explorations for navigation and content colors, and 3 typeface explorations.

While working on Spending Plan the Simplifi team also asked me to work on visual refresh of the web app navigation and typography for the entire product. These are a small subset of the color, style, and type explorations I produced and reviewed with the client. (The blue arrows point to the options the team chose and brought forward to production.)

With a plan in place, I moved forward to high-fidelity mockups and started designs for the native mobile apps on iOS and Android. We knew that mobile users mostly use Simplifi for quick monitoring and checking tasks, and that larger planning and maintenance flows are typically done on desktop with the web app. I am a strong proponent of maintaining the complete feature set on mobile devices, so we made sure the mobile version allows users to complete all the same tasks. Users need to see the totals that go into calculating how much is left to spend, but also understand what individual items make up their total for each section. Maintaining this multi-level hierarchy on mobile was challenging with the available screen real-estate, but I provided the team with three different approaches. In order to better inform our decision, I also prepared and ran six non-designers from our office through remote study sessions to experience navigating through the plan using approach then rating the ease of navigation, complexity of information, and emotional impact of each. Even though it meant additional levels of navigation and more interaction, participants gravitated toward a standard hub-and-spoke model allowing users to drill into and back out of dedicated views for each subsection.

Three different versions of Spending Plan navigation for the mobile app I created, shown on iPhones.

I prepared three possible methods for navigating the Spending Plan for the Simplifi mobile app and informally tested them with potential users to see which approach was the easiest to understand and use. Users preferred the hub-and-spoke navigation model and dedicated screens for each area of content (center image).

To support the development and coding of this feature on web and mobile, I created 125 high fidelity mockups (58 for the web app and 67 for the mobile app). I also communicated directly with developers when questions raised during production and worked with the Product Managers to document and triage multiple rounds of bug logging where the initial implementation fell short of the intended design. The next couple images show the final redesign and result of several moths of iteration, testing, and cross-disciplinary collaboration.

High fidelity mockups of the final redesign of the main Spending Plan page shown iPhone and a laptop.

The final design of the main Spending Plan page allows users to plan and monitor their monthly spending, seeing how adjustments impact what’s left for them to work with each month.

“Simplifi combines an elegant, intuitive interface with robust tools to track your spending and plan for future expenses. [...] Our favorite feature is the personalized spending plan, which gives you an up-to-the-minute dollar figure of what you have left to spend for the rest of the month after accounting for your bills and savings goals.” 

NY Times Wirecutter, Winner: Best Budgeting App 2020 & 2021

“Simplifi combines an elegant, intuitive interface with robust tools to track your spending and plan for future expenses. [...] Our favorite feature is the personalized spending plan, which gives you an up-to-the-minute dollar figure of what you have left to spend for the rest of the month after accounting for your bills and savings goals.” 

NY Times Wirecutter, Winner: Best Budgeting App 2020 & 2021

Outcome:
Not long after the completion and release of the redesigned Spending Plan, our client excitedly announced that they had been selected by NY Times Wirecutter as their top pick for Best Budgeting app of the year. (An honor they have since received for a second year in a row!) As someone that actively uses Simplifi to track my own finances, I love the ease of maintaining a budget without going through the traditional steps of having to figure out how much money to put in each category up front. Spending Plan enables users to easily track their obligations and payments, plan for contributions to long term savings goals, and monitor their spending with the end goal of keeping your monthly spending below the amount of money you bring in each month. There are few opportunities in ones career to designs product with the intent and features that truly differentiate an experience from its competitors and am thankful for my time collaborating with the Simplifi team.

High fidelity mockups of the final redesign of the expenses section of Spending Plan shown iPhone and a laptop.

The final design of the plan feature that allows users to earmark funds for additional spending in specific categories that aren’t bills and may happen across multiple transactions.

The complete redesign took several months of weekly iteration with the Simplifi design and Product Management team. Our studio team at Allovus studio works remotely (even pre-pandemic) and all client reviews and and collaboration were all conducted over video call.

While I functioned as design lead and individual contributor driving and producing this work, it was crafted with feedback from:
Allovus Studio Design Director - Steve Godfrey
and with ideas, feedback, and approvals from the Simplifi team:
Product Managers: Kristen Dillard & Kelly Tong, and designer Ashim Adhikari
Navigation icons designed by David Hose

The complete redesign took several months of weekly iteration with the Simplifi design and Product Management team. Our studio team at Allovus studio works remotely (even pre-pandemic) and all client reviews and and collaboration were all conducted over video call.

While I functioned as design lead and individual contributor driving and producing this work, it was crafted with feedback from:
Allovus Studio Design Director - Steve Godfrey
and with ideas, feedback, and approvals from the Simplifi team:
Product Managers: Kristen Dillard & Kelly Tong, and designer Ashim Adhikari
Navigation icons designed by David Hose

© 2022 Courtney Comfort      ///     mr.courtneycomfort@gmail.com
© 2022 Courtney Comfort    ///    mr.courtneycomfort@gmail.com