Working as design lead, I facilitated a group of cross-business designers to explore a visual language that spoke to a younger demographic and new-to-the-franchise customer. Going broad to narrow, validating variations with our target, I designed the core of the visual identity that is now being prioritized to bring to product in FY22.
At the time of writing this, we have an experience that has just been released to the Apple App and Google Play stores. This experience is made up of shared capabilities (services), along with net-new functionality, specific to Money. This release is serving as our foundational experience with which we will learn from in greater numbers, finding product/market fit.
Current visual design
With Money by QuickBooks, we are targeting a new type of customer. We have intentionally decided to cater the visual language to them. They are not at the point in their journey where they need accounting or bookkeeping software and we’re considering a younger demographic in Gen-Zs and Millennials. They’re tech savvy, have aspirations to grow, and are seeking professional tools.
The Money visual language will be in service to achieving the following points via a unified, restrained, and clear experience that provides the data the customer needs without imposing a visual experience that adds to the noise of their day-to-day uncertainties.
Our vision was to create a best-in-class business money management experience. We defined what success looked like in delivering a tested, robust, and elegant system—an experience that can scale to meet the needs of new-start business owners, providing a calming yet professional and trustworthy experience that is something small business owners can be proud to use.
We defined guard rails that spoke to Money being a brand extension, our goal—to create a bold, breakthrough, and ownable visual expression that reinforces a cohesive, end-to-end customer experience. This visual language should represent the notion that this new product is from QuickBooks but doesn’t look or feel like QuickBooks as you know it.
We scoped four, two-week sprints in which a team of designers from across the business came together, going broad to narrow, at multiple stages, and defining an aesthetic that we validated with our target demographic.
Working with my amazing visual design partner, Mansi Soni, we landed on a visual language that offers a restrained and calming experience, with its foundation in currency. It is sparse and clean, founded in a grid system, and is professional yet inviting with our color palette and use of organic shapes and forms communicating the flow of money.
The qualitative feedback we received from running a number of tests, specifically on color, led to this palette. We took inspiration from money and the dollar bill itself which is why we leaned heavily on greens and tans to make up our primary colors.
Money black is a lighter black, intended to be less harsh on the eye than pure black. And similarly, money white is a slight off-white. Money white and black also help differentiate this app from competitors whose interfaces tend to be stark black and white. Our greens are fresh and vibrant, cooler than the QuickBooks greens, and there are significant differences between each. Our tans are warm and inviting. And the grays act as a consistent, neutral connective tissue for the product experience.
The various tints and shades are optimized for both dark text on light backgrounds as well as light text on dark backgrounds. This was crucial because the palette had to be successful in both light and dark mode. We also mapped colors to respective modes to ensure that they were made to be accessible.
We defined the suite of themed IDS (Intuit Design System) components, making them available in Figma, as a library for both iOS and Android, for the team to use, allowing them to quickly flesh out flows to test.
We’ve leveraged the IDS icon suite (designed by Richard Jeng). The rounded and geometric nature of the icons aligned well with the organic, structured, and warm tone of our visual language.
Finally, because all of Intuit’s products are unified around one typeface, we used AvenirNext for Money by QuickBooks.
© Dan Shallcross 2021