cs_qds-cover-2

Quicken Design System

OVERVIEW

Quicken’s financial management tool helps customers get a full view of their finances so they know where their money is going, can create financial goals, and can track investments from one convenient place.

Being in the software marketplace for over 30 years, Quicken has grown as a comprehensive financial tool. Over time, and as a result of being contributed to by hundreds of employees, the product experience acquired confusing interactions and user interfaces started to look dated.
As expectations around how software behaves have changed, some customers had grown resigned and frustrated with accomplishing various tasks.

The Quicken product contains literally hundreds of screens, and from my interest in studying design systems, I saw an opportunity for the company. I discussed this opportunity, namely of creating a product design system, with my VP of Product & Design. I shared the benefits a design system would have on improving the brand and team productivity. I also shared outside experiences design systems have had with teams in other businesses where they worked to improve their product consistency, and having results creating customer delight.

The value having a design system would have for the company became a must-do effort for our team to establish.

MY ROLE

I was the lead designer responsible for creating the Quicken Design System. It was exciting being able to contribute my knowledge of design systems to this project. I was responsible for leading the design team’s effort by planning the work, managing assignments, and keeping the team’s conversations moving forward.

I also advocated for the company’s adoption of the design system by engaging in conversation with business leaders, product managers, and developers in the effort to address concerns, generate interest, and support implementing the system.

PROBLEM STATEMENT

Quicken, being in the financial software business for over 30 years – with versions on Windows, Mac, and mobile – is a comprehensive financial tool comprised of hundreds of screens. Over time the product has accumulated a share of confusing interactions and dated looking user interfaces.

When I joined the company in early 2016, I was unable to find any product documentation helping to guide product design and development for the teams in our Menlo Park and Bangalore offices. Being new to this kind of financial software, I started familiarizing myself with the current product. I discovered similar looking interfaces and interactions, but the way they worked was different from what I expected.

I began wondering if having no guidelines that the teams could reference was responsible for the interface and consistency challenges to the product experience. I knew from my study of design systems that teams were creating these systems to address the same kinds of problems we were experiencing at Quicken. From there, I realized we had the opportunity to address these challenges was by creating our own design system.

SOLUTION

As a team, we all wanted to deliver better product experiences and recognized the challenge with being consistent and productive with our work. To best guide the future of Quicken’s product development and address these challenges, we agreed that having a design system would help accomplish that goal.

To accomodate a high workload, I designed this project as a phased effort. We began by establishing our founding principles – typography, color, space, and iconography – believing this would have an immediate impact on designing the future product experience.

PROCESS

Scope & Constraints
We were a small design team responsible for supporting product development and marketing needs across the company. Without impacting ongoing business efforts, we understood there was a limited amount of hours a week we could invest in creating the design system.

Working within those guidelines, I planned the project work by breaking goals down into small tasks that were easy to include in the team’s workloads. I managed these tasks with the team to help keep us focused and have a consistent momentum of accomplishment as work progressed.

Our goals for the 1st phase of work was to establish what we called the foundation. The foundation was designed to be a complete listing of all typography, color, spacing, and iconography used in our products.

Challenges
Time and available resources were a challenge for the team contributing to this project. The team could not spend more than 20% of their time per week working on the design system without placing other product initiatives at risk. To keep our promised 20% work effort consistent, week over week, required me to communicate regularly by making requests and managing the promises of individuals within the design team. I also worked with the product development teams setting expectations and promised delivery dates to keep a consistent work rhythm and meet our goals.

Another challenge surfaced while the team was developing our color system guidelines. The development team was in need of color guidelines as new products for web and mobile were nearing their deadline for going Beta. To complete on our color systems guide we consolidated parts from the new products color guide to reduce confusion with what system teams should use.

Planning & Strategy
Before this project was created I was already deep into learning everything I could about design systems by reading any books, articles, videos, and podcasts available to me. “Atomic Design” by Brad Frost, “Design Systems” by Alla Kholmatova, and the “Design Systems Handbook” by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield were among my most referenced resources.

Having that understanding in the background was effective when brainstorming what actions were needed to establish a design system supporting an existing and complex product. At first, the total work required looked overwhelming, so to overcome that challenge I began breaking the total work down into phases. From there I broke the phases down further into a long list of tasks small enough and easy to complete.

My goal was to overcome the teams busy workload and still complete these tasks, creating an experience of accomplishment for the team in moving this project forward.

Research
One of the early exercises in building a design system is in knowing the state of your existing product. To understand what our existing state looked like the team and I began performing an audit of our Windows and Mac product. We began work taking screenshots and documenting all examples of user interfaces, colors, typography, and icons we could find.

While the team’s experience with completing this audit seemed like a big effort, the exercise itself made it clear why this task was important. In paying close attention to the current state we could clearly see the degree of inconsistency that was present in our products. We saw hundreds of colors (many greys and blues), differing styles of icons, outdated font families, and all sizes of text in use.

Next, we completed our audit by grouping everything together – by color, by typography – to begin looking for themes. Those themes would help guide us through the next steps to this project.

DESIGN

Color System
When the team started reviewing the colors cataloged from our product audit, we started discussing how we were using color in our work. We had existing rules for how data visualizations looked, and we held beliefs how expenses (red) and deposits (green) should be treated. Some product features even had a distinct color palette, setting themselves apart from the rest of the product.

We wanted to be more intentional and create meaning with our use of color, so we started exploring color frameworks in design systems. While exploring what other design systems were doing, the Quickbooks Design System: Color Framework became an exemplary resource when developing our color framework guidelines.

Because of the large library of colors we cataloged, we recognized that it was best to have it inform us with creating a new color system. We then created one system for our existing brand, and another color system for the future brand we wanted to build. We found that these two color systems represented our two audiences, essentially baby boomers and millennials, but wanted to avoid internal confusion around what system to use.

We examined the two systems together and from there created a final color system used for guiding both existing and future products forward.

Typography System
Good typography is essential to any communication and a core element to every design system. While defining our typography system we started looking at the styles we cataloged from our product audit. We found that our Windows and Mac products used different size and font weights – lights, mediums, semi-bold, and bolds – and that were not adaptable with each other.

To resolve these challenges we wanted our typography system to have a clear hierarchical scale and label system working harmoniously across all products. That way when we adapted our designs for different platforms, the fonts and weights used would be consistent and without large visual changes.

The structure we were creating needed to work with our products system fonts: Segoe (windows), San Francisco (Mac & iOS), and Roboto (Android & web). So, to create a visually balanced system using these font families, we mapped them out visually to perform a side-by-side comparison. We found that not all weights were available across all font families so we decided not to include them in our system. One tradeoff we made was while Segoe and San Francisco had semi-bold, Roboto did not, so we substituted the roboto medium font in place of semi-bold.

When labeling our text styles, we started out by grouping them by headings and body types, but found ourselves creating redundancy with that approach. The structure we settled on took inspiration from Apple’s HIG and the Material UI type scale. Our solution landed with 13 styles with naming labels such as Hero, Display, Body, and Captions that met most of our design needs. This gave us the ability to adapt designs across system fonts / product platforms without dramatic differences.

Now that the typography system was defined, we created a mobile version using the same structures and rules we created for the desktop and web. This made it easier on the team to use a complete, holistic system in adapting our design work to any platform.

Layout & Spatial System
The subject of layouts and spacing was never really a discussed topic and everyone intrinsically had their own style from which they designed. This was one contributing factor to the inconsistency in our product design: we were unclear how the team should approach layouts and spacing.

Since the topic of layouts and space was undefined I drafted a set of principles we could discuss and agree upon as a team. For this system, I started with including ideas of 8 point grids and space in design systems as they were already present in our designs. I also included grid systems for desktop, tablet, mobile that included our account sidebar in use. I also advocated that the team always design in 1x, as there were cases – like in our mobile designs – where our source files were in 2x.

The result was a detailed page documenting how to use these space guidelines with examples how to apply them to our design flows.

Icon System
Quicken uses a lot of icons; the windows product alone uses more than a hundred icons. So when we completed cataloging icons in our products, most of them were from our windows product. When we started organizing them by context we also discovered the style used to create them differed by platform. This stark difference prevented us from applying our icons across products or having a consistent brand image with them.

As a result of this discovery, and considering the time involved, we decided to place on our work with icons on hold. We wanted to continue discussing the illustrative styles we were using and how we wanted to keep or redesign our icons going forward. Completing on this task would put the rest of the project at risk being completed on time.

OUTCOME

After 3 months time, the design team realized its goal of creating the foundation to the design system. We created a repository of confluence pages detailing our new set of principles for color, typography, layout and spacing. We also created sketch templates for the design team to begin adapting them into their designs.

We also prepared presentations to share our solutions with the rest of the company, and prepared updated design roadmaps to include what phase 2 and 3 of this project would look like.

Confident that were on the right path to creating more consistent looking experiences across the Quicken line of products, we shared presentations detailing our solutions with the company. To share what the design system project would look like going forward, I prepared a new design roadmap detailing the second and third phase of implementation.

SUMMARY

The Quicken product consists of hundreds of screens and overtime grown to have inconsistent product experiences. Recognizing an opportunity to resolve product inconsistency and improve productivity with the team, I promoted and led the establishment of a product design system for Quicken.

Work was broken down into phases, containing tasks small enough for a team with an already large workload to accomplish. We moved fast to developing our founding principles within 3 months, while at the same time supporting new product development.

From there, we documented our new rules and findings for the company. We also created a new design roadmap detailing phases 2 of 3 which distributed work creating the elements, components, and templates to be added to the design system.