Simplifi - Spending Plan

Background:
In my role as Lead Product Designer on the Studio Team at Allovus, I engaged 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

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.

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.

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.

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.

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.

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.

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.