What’s new | quick notes

Mar. 25, 2021

Designers create durable and adaptable foundations

In collaboration with business unit leaders and designers across Intuit, the Intuit Design System is working on a durable and adaptable framework. This framework renames and builds on the fixed and flexible principles that have always been part of our design system.

As part of the durable and adaptable framework, IDS proposes a number of elements that can eventually become uniform across Intuit experiences:

• Badges: status badges and numeric badges
• Buttons (and links)
• Cards
• Selections: checkboxes and radio buttons
• Tiles
• Utility icons

This is work in progress, and we’ll share what the components look like soon. Meanwhile, you can glimpse the scope and planning for the work in Figma.

Meet the design leadership committee

We’re pleased to announce the charter members of the IDS-QuickBooks Product Design Leadership Committee. These QuickBooks leaders will help us bring SBSEG customers, use cases, and knowledge into the design system.

• Chris Bush, Group Design Manager, QuickBooks Advanced
• Shailesh Shilwant, Product Design Director, QuickBooks
• Sheila Vyas, Group Design Manager, QuickBooks Money

The committee is a rotating group of SBSEG design leaders who will help advocate and evangelize use cases and systems needs with the IDS core team. In collaboration with design system business unit leaders such as PJ Nidecker, the SBSEG design leaders operate at scale, above and beyond their segment responsibilities, and they use their influence to help customers at a platform level.

Download updated logos fast

Need the latest QuickBooks logo? Find it on the Intuit brand site, which is integrated with the One Intuit Digital Asset Management system.

1. Visit the Intuit brand site. Sign in with your Intuit credentials.
2. Select Downloads in the navigation.
3. Select QuickBooks in the product list.
4. Select Asset type, and then Logos.

Mar. 11, 2021

Say goodbye to old friends and hello to more Figma

Deadlines are set for Intuit to phase out some of our old design tools. In keeping with our plan-on-a-page goal of using more “unified and scalable tools and processes,” we’ve moved most design work into Figma.

Designers, developers, and other stakeholders are encouraged to migrate or archive designs by these dates.

• April 30: InVision
• May 31: Abstract, Lingo, Sketch, Zeplin

Figma help documents offer tips for importing files from Sketch.

Revisions to this site will also support the tools transition.

Since we started using Figma this past September, a number of training resources and sessions have helped designers get up to speed with the new tool. Designers can find training videos and other resources on this Figma page.

Figma lunch and learns are scheduled to resume in April. And you can always get Figma questions answered on Slack: #cmty-design-figma.

Jan. 14, 2021

May deadline set to phase out some design tools

Intuit is phasing out some of the design tools we’ve been using. Sketch, Lingo, InVision, Abstract, and Zeplin will no longer be in our portfolio of tools, as Figma is taking over as our primary tool. May 31, 2021 is the deadline to transfer assets out of the older tools.

After that deadline, Intuit will no longer be supporting licenses for those tools. A limited set of licenses will be set aside for archival purposes only, but all Intuit designers and partners should be relying on Figma by then.

Intuit designers started preparing for this change this past summer when we started using Figma. The cloud-based tool has functionality and processes that enable us to replace other tools. And we’ve specifically called out “unified and scalable tools and processes” as a goal in our design plan on a page (links in this article are for Intuit employees only). The May deadline helps us move toward that more unified approach.

If you still have designs and other work in those tools, we recommend that you export and archive them by the deadline. We understand that migrating from Sketch to Figma takes some work. Our hope is the May deadline leaves you and other teams with enough time to make the move. To help, you can review this Figma guide to importing files for Sketch.

We’ll add this and other information to our Figma page on this site. We understand there will be more questions about this. We’ll add more info to the Figma page as details are figured out.

Figma lunch and learns continue
Come join us and our community of Figma users for a session of Ask Me Anything (about Figma!) on Tuesday, Jan. 19 from 12:15 to 1 PM PT. We invited a few of our in-house Figma power users to answer your questions.

And be sure to make time for our lunch and learn on Wednesday, Feb. 17. Figma is sending one of their advocates to tell us about new features.

See the training calendar or find links to recordings of past sessions in the lunch and learn schedule (Wiki link).

Didn’t get an invite to the lunch and learns? Let us know.

Figma quick tip video: How to enable libraries in drafts (1 min)

Welcoming more users to OIDAM

What’s in a name?
In October we launched the One Intuit Digital Asset Management system (OIDAM.) Today OIDAM is ready to be used more widely by designers and partners alike. To maintain a useful DAM, we added asset naming convention guidelines and are starting to enforce them. Say goodbye to “image1.jpg” and “invoice2.png.” Say hello to “bookkeeping-software-connect-accounts-feature-qbo-us-desktop.jpg.”

SEO matters, geographically speaking.
All of our illustration file names have been localized to French, Spanish, and Portuguese to optimize for SEO. Thank you, Miles Sabin and his localization team!

Brand photography, where art thou?
Remember the old days of 2020 slacking Sunčica Lukić for a brand photo because you forgot to download that 1 GB photo toolkit? Search no further, we got your back! Download FY 21 Brand photos from OIDAM today!

To get yourself familiar with OIDAM, check out these videos to get started.

• Quick tutorial: how to get started
• Governance: folder structure and naming convention
• Job aid: quick reference guide

Dec. 17, 2020

Introducing the IDS-QuickBooks design system council

We’re pleased to announce the January 2021 kickoff of the IDS-QuickBooks design system council.

With representatives from most QuickBooks design segments and specialties, the council will help IDS-QuickBooks keep up with QuickBooks projects and better see how the design system can help.

Council members will also help share information about the system with their teams and other partners. This will help designers and developers know when to use IDS-QuickBooks components and how to contribute and make them better.

The team kicks off its activities with a launch party on Jan. 21, 2021.

The council is a work in progress, and we welcome your suggestions and questions. For instance, are there other teams or individuals who can help out? Let us know.

SBSEG brings more staffing power to IDS
Starting in February 2021, SBSEG will contribute additional employees to IDS core initiatives. The combined contributions amount to about 2 additional headcount for IDS, and the SBSEG employees will give between 25 and 50 percent of their time to IDS projects, such as efforts to improve documentation and visual design.

Contributing employees will be assigned to an IDS project for at least 1 quarter. To maintain continuity of staffing levels, other employees will pick up work in subsequent quarters. Contributing employees are also included in the IDS-QuickBooks design system council.

The program kicks off in February with Richard Jeng, Shawn Murdock, Vivek Saigal, and Dan Thrash.

Questions about IDS-QuickBooks?
Slack is the best place to get answers to Figma and other design system questions.

• For Figma questions #cmty-design-figma
• For IDS-QuickBooks questions: #sbg-xd-designsystem

Have difficult questions or want to explore tricky design challenges? Sign up for office hours for product or marketing.

Nov. 18, 2020

Figma product components: 100% done

This week, with the completion of the modal dialog pattern, the IDS-QuickBooks team has completed converting all Sketch components to Figma. 42 components are now available in the IDS-QuickBooks product library. And work continues on the marketing component library as well.

For the complete components set, the design systems team is now working on improving guidelines both in Figma and on this site.

Check out the IDS-QB web library in Figma.

New, revised patterns take big steps
In the complete library of Figma product components, you can find the step flow pattern. In the Design System sandbox, you can see the step indicator pattern. Both patterns can help customers complete work that requires a number of subtasks.

Completed with the generous contributions of Senior Visual Designer Neena Burman, the step indicator pattern guides customers through tasks horizontally and lets them track their progress as they go. Customers can even use the progress bar to navigate to an earlier step to complete work. Check out the step indicator in the sandbox in Figma and see the code in GitHub.

Downloading assets gets simpler
In the design systems site, we simplified how you download assets. To get our font, icons, illustrations, and other visual assets, go to the Downloads page under Resources.

Start designs fast with Figma page templates
In the past few weeks, the team worked hard to build out Figma page templates. Use these templates to kick off your projects and save time when designing for QuickBooks Online, QuickBooks Online Accountant, and QuickBooks Self Employed.

We will continue to refine and build on these templates, and a massive thanks to Natalie Harmon for her contribution.

Catch us at new office hours
As we head into the holiday (and peak) season, we’re reducing office hours to Tuesdays and Thursdays only. Slots are still 30 mins between 3 and 4 PM PT. Sign up for office hours.

If you’re not able to meet during Pacific Time, we can schedule a session for you. Let us know.

Oct. 15, 2020

Get connected to Figma components fast

Since our Sept. 1 Figma launch, the IDS-QuickBooks product team has delivered more than 30 QuickBooks components in the IDS-QuickBooks Figma library, and many more are in the pipeline. Use the published components and other design foundations when creating QuickBooks experiences.

More information about Figma components appears on this site. Here’s the quickest way to get the component you need.

1. Go to the page for the component you want to use.
2. Select the Figma component link under Resources.

Which components to use
Not sure which component to use for your design? Here’s how you can decide.

1. When you’re designing for QuickBooks, use an IDS-QuickBooks component.
2. If the IDS-QuickBooks component hasn’t been coded yet and is on the IDS roadmap (check the Intuit Design System site), use the IDS component in the short term. When the IDS-QuickBooks component is ready, developers can use that.
3. If the IDS-QuickBooks component isn’t ready and won’t be anytime soon, use the IDS component if it works for your design.
4. If the IDS-QuickBooks component isn’t ready, won’t be anytime soon, and does not work for your design, have your development team do their best to leverage existing components. Try to limit overrides, and if you have to override some specs, document what they were.
5. If your PD team is delivering a new component or pattern, they should contribute that new work to IDS.
6. If no component exists, have your PD team do what they need to do. And if developers can build their components to become a part of IDS eventually, that is ideal.

We know these steps don’t eliminate all the questions. You can ask more questions in Slack at #sbg-xd-designsystem. You can also sign up for office hours.

See updated guidelines on type
To help you make typography clear and delightful in QuickBooks products, we just published Typography-Product 2.0. The new guidelines clearly establish AvenirNext forINTUIT as the cornerstone element of our brand’s visual language.

Our typography aligns our use of weights and sizes in our products. And it helps us meet the needs of all users. Read the latest guidelines.

We’re now a design system for all Intuit
The QuickBooks Design System is now IDS-QuickBooks. We’re pleased to join forces with teams across the company to build systems that help us design and deliver great experiences. More information on rebranding our design systems is on the way.

Oct. 9, 2020

QuickBooks marketers celebrate new ways to reach and delight customers

This week marks a number of milestones for QuickBooks marketing, from the unveiling of the marketing design system to the launch of a new publishing platform.

Agency partners get first look at marketing design system
If you’ve been following the QuickBooks Figma rollout, you’ve seen progress on component libraries for both product and marketing. This Monday the marketing team unveiled our complete library to the agency that’s helping QuickBooks reimagine how we tell our story. The design agency R/GA will build on these components to establish new designs for marketing pages, including refreshing colors, interactions, and animations.

Built from the ground up using atomic principles and guided by user testing, the marketing component library establishes a standard for data-informed design.

And these designs will extend worldwide, as QuickBooks global marketing teams start using the components in the stories they tell and the pages they build.

A One Intuit approach to publishing
Those pages will be published through a new web platform that Intuit launches this month, the One Intuit Content Management System. Aided by the marketing component library, OICMS helps marketers build pages fast, reducing page authoring time from 14 hours to about 1. OICMS takes advantage of updated WordPress Gutenberg functionality and lets marketers use metadata to drive pricing and promotions on pages. To track how those pages perform, OICMS uses additional metadata for real-time reporting in Adobe Analytics.

During the coming months, ProConnect Group and QuickBooks marketers around the world will migrate to the new publishing platform.

A One Intuit approach to assets
The OICMS platform also enables a new way for Intuit communicators to track image assets: the One Intuit Digital Asset Management system.

Working with the marketing component library and OICMS, the asset management system (OIDAM) helps users find, use, and catalog logos, photography, and other assets for marketing pages. Numerous brand assets are already archived and cataloged in the system, and more work on expanding to include additional illustrations and product assets are in the works.

The Intuit Design System—QuickBooks helps support these marketing advances. Have questions about marketing components? Sign up for office hours.

Explore more in the IDS-QuickBooks marketing component library.

Sept. 1, 2020

Quick notes: Today QuickBooks designers start creating, discovering, and sharing with Figma

Launch day: All QuickBooks designers now have access to Figma, the cloud-based design tool that’s becoming the Intuit standard for design creation and collaboration. Design system teams and design project managers across Intuit established the foundations that help Intuit move to this open, collaborative tool.

A number of components and resources are available now for QuickBooks designers:

• Nearly 20 core product design components have been published in the design system libraries.
  • Buttons
  • Checkboxes
  • Dropdowns
  • Dropdown buttons
  • Dropdown typeahead
  • Numeric badges
  • Page messages
  • Radio buttons
  • Split buttons
  • Status badges
  • Switches
  • Text area
  • Textfield
  • Textfield typeahead
  • Menu items
  • Tooltips
  • Combo links
  • Icon buttons
  • Toast messages

  The team is working on more than 30 additional components, revised documentation, and other resources.

• Organized neatly following atomic design principles, a full set of components are available in the marketing design system. More enhancements for building marketing experiences are on the way.
• For designers working on mobile apps, components are ready for both Android and iOS.
• If you need a component that’s not in Figma yet, import the asset from our Lingo library. For more help, you can read about importing files from Sketch.

Don’t miss Figma 101 training Thursday
To get more info about designing with Figma, Zoom into Figma 101 on Thursday, Sept. 3 at 3 PM PT. Can’t make it? We’ll record it and make the replay available. Need an invite? Email Diem Sarkar.

For more updates, see the Figma questions and answers.

More Figma questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Aug. 27, 2020

Quick notes: Figma launches next week! Here’s how to get ready

On Sept. 1, all QuickBooks designers can get access to Figma, the cloud-based design tool that’s becoming our new standard for design creation and collaboration. Here’s how to get started and celebrate.

Drop into the Figma launch party
Join us anytime from noon till 4 PM PT on Tuesday, Sept. 1 for our Figma launch event and celebration. We’ll deliver light Figma training 4 times throughout the afternoon, and there will be plenty of chances to win Figma T-shirts. Need an invite? Email Diem Sarkar.

Zoom into Figma 101 training
To get more in-depth info about designing with Figma, Zoom in to Figma 101 on Thursday, Sept. 3 at 3 PM PT. Can’t make it? We’ll record it and make the replay available. Need an invite? Email Diem Sarkar.

Native mobile first
This week we published components you should use when designing QuickBooks native mobile apps. Start designing with confidence using Android or iOS components.

Marketing design system ready to use
Creating marketing experiences for QuickBooks? Design in Figma and use the marketing design system. We published components this week!

Product design system foundations and components ready
If you’re designing product experiences for QuickBooks, more foundations and components are now ready for you to use in Figma. You can find the design system libraries here.

Components in progress
You can see in-progress versions of most components in Figma. But not all the components are updated in Figma yet. You might need to import a component from Sketch in the meanwhile. Be sure to check the component once you do that. There will be some shifting from one tool to the other.

For more updates, see the Figma questions and answers.

Aug. 19, 2020

Quick notes about design system foundations in Figma

Foundations set for product and marketing
To prepare for the Sept. 1 launch of Figma, QuickBooks designers completed establishing foundations for marketing and product designs this week.

Fundamental elements like spacing grids, color, and typography are set for web and native mobile designs. Once they’re published, these foundations will be available for designers to integrate into their work in Figma. And the foundations will be an integral part of other components.

Product foundations
See color, responsive grid, and elevation in the web product foundations.
You can also view web product typography.
Native mobile typography, color, and elevation are in the mobile foundations.

Marketing foundations
With some exceptions, marketing uses most of the same foundations as product. See marketing foundations in the marketing design system.

QuickBooks Online navigation
Speaking of foundations, a version of the product shell and navigation is available now. Thanks to Natalie Harmon and her team for contributing these patterns. We’ll move them into the QuickBooks Design System before we launch in September. Meanwhile, you can see the left navigation, global header, and global create menu patterns in Figma now.

More Figma training, questions, and answers
Additional Figma training opportunities are in the works. Meanwhile, you can catch up on Figma questions and answers.

Still more questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Aug. 12, 2020

Quick notes about Figma, retiring Harmony components, and creating new marketing ones

Figma update: new design tool launches Sept. 1
QuickBooks designers can start to create and collaborate in Figma starting on Sept. 1. With the open, cloud-based platform, designers will work fast and get inspiration from other teams, designs, and explorations across the organization.

The design system team is setting up foundations for Figma now. And you can prepare for the change too. Check out the Figma questions and answers.

More Figma questions? Ask in Slack: #cmty-design-figma.

Design system questions? Ask in Slack: #sbg-xd-designsystem.

Goodbye to Harmony components
Throughout the past quarter, QuickBooks Design System designers and a team of IDS developers have been rebuilding Harmony components. The rebuilt components will be compatible with the updated version of Chrome that Google is releasing in 2021. And the refreshed components are aligned with the latest visual design.

For examples, check out trowsers, panels, or popovers. Once we’re done with QA, we’ll post the list of updated Sketch components soon. And the updated work will also appear in Figma.

Hello to fresh marketing components
To help QuickBooks create and deliver awesome end-to-end experiences, the marketing design system has a new home in the QuickBooks Design System. The team (XD, PD, PM, think globally) is finalizing work on new, improved components for marketing experiences. These updates will help us deliver faster for marketing designers, partners, producers, PD, and our customers.

The new components will also have a home within Storybook (ReactJS) and a new CMS publisher, Gutenberg WordPress.

Check out examples of the new components in Zeplin and Storybook.

July 29, 2020

Catch up on Figma progress, web-responsive page templates, and revised components

To prepare for the September launch of Figma, the QuickBooks design systems team revised QuickBooks page templates and a number of components, such as panels and popovers.

• Figma is set to launch for Intuit designers in September. Design program managers are leading us through contract details now. Once the paperwork is signed, designers will have access to a collaborative, cloud-based tool for creating and sharing designs. To keep track of the progress as it happens, read the latest Figma update.
• QuickBooks Online page templates now include additional guidance for how we can make these foundational elements work for mobile screens as well as desktop pages. These web-responsive templates are in Sketch now. We’ll start working on Figma versions in August. Meanwhile, check out the latest in the design system sandbox.
• Panels are a quick way for customers to add details in a trowser. To see the updated guidelines and specs, review the panels component.
• Popovers are another way to let customers add info fast, without getting too far from the page they’re on. See the new guidelines, images, and files in the revised popovers component.

July 11, 2020

New design tool set to launch in September,
New page templates launch now

With the launch of Figma and a fresh approach to page templates, QuickBooks designers will have more powerful tools to organize, build, share, and improve customer experiences.

• Figma is set to launch to the entire QuickBooks Online design community in September. This beta launch will give designers and stakeholders access to a collaborative, cloud-based tool for making and sharing designs. We’re working with teams across Intuit to figure out details, and we’ll keep you posted. For more information and to get answers to some of your questions, read the latest Figma update.
• QuickBooks Online page templates are the newest addition to the design system sandbox. The templates give designers a framework and guidelines for how we structure pages and screens in QuickBooks Online. To check out and start using the Sketch files, see the design system sandbox.

June 14, 2020

Shining the light on new badges and dark mode

New badges and dark mode are the highlights of today’s QuickBooks Design System updates.

Revisions in the visual system of badges help us guide customers to new and useful features. And dark mode makes sure customers can see those features in whatever light the customers are working in.

• Badges help guide customers to helpful information or new features.
  • To show customers things they might need to act on, we use status badges.
  • To guide customers to important numbers they should pay attention to, we use numeric badges.
  • To inform customers about new or revised features, we use new feature badges. We also include guidelines for using the indicator dot.
  • To let customers know a feature is in progress or incomplete, we use beta badges.
• Dark mode lets customers keep reading and using our product in dim or dark lighting conditions. When using dark mode, customers “turn out the lights” on QuickBooks, and colors and some functionality change to keep the experience readable and useable. This alternate way of presenting our screens is still work in progress. Get enlightened about dark mode.

April 18, 2020

Customer celebrations and design system sandbox launched

The QuickBooks Design System site now features a new pattern for presenting celebratory moments and a fresh way to explore design innovations even before they become part of the design system.

• The celebration framework helps designers create just the right moments of joy when customers complete a task or meet a goal. The pattern blends interaction, visual, and content design to create the appropriate amount of delight for these moments of accomplishment. To celebrate good times, come on.
• The design system sandbox gives our design community access to emerging designs, guidelines, and examples that aren’t yet included in system standards. Many of these new designs haven’t been coded yet or haven’t been verified as components or patterns. But these innovations are worth a look and can guide or inform the work we’re doing. Go play in the sandbox.

In addition to these efforts, new work on typography, dark mode, and other designs are in progress. More to come.

March 30, 2020

Design system site struggles

Throughout the past week, the QuickBooks Design System site has not been working well. We apologize for the inconvenience and are working to stabilize the site.

We identified a number of issues:

• Slow load times
• Missing graphics
• Inability to download logos

We’re working to address these and other problems. If you notice other site issues, please let us know.

We’ll update this page with information as soon as we have it.

September 20, 2019

Keeping up with design system changes

The QuickBooks Design Systems team has been busy, and we’ve resolved to do a better job of keeping our design community and partners posted about updates. Here are some of the latest.

The visual design refresh continues

Guidelines for the visual refresh were completed earlier this year, and some components and patterns are still being updated to reflect the new design direction. To keep up with the latest changes, see the visual refresh dashboard.

Browse through a gallery of components

Not sure what the components or patterns are called? You can browse through a gallery of them in the component gallery. It’s a work in progress, so please feel free to let us know how we can make it better.

A final goodbye to Geogrotesque

This should be old news by now, but let’s make sure: The font known as Geogrotesque should not appear in any QuickBooks screens. Avenir is the new boss. Read more about migrating to the new font.

Intuit content designers come together with a unified style guide

For the most up-to-date content guidelines, visit the one Intuit content design style guide. Content creators across Intuit brands and teams contributed to this new resource, and the site will be redesigned and relaunched later this year.

Revising the design system site and tools

Other efforts to refresh the design system site and tools are underway. We’ll publish more updates about improved communication, migration, and tools soon.

Jan. 18, 2019

Bolt transforms QuickBooks design

The Bolt visual design refresh continues to make its way into the QuickBooks Design System. To make Bolt and the system easier to use, we’ve Boltified buttons, form elements, and guidelines. And we updated the Lingo Sketch library too.

These elements now include Bolt updates:

• Typography
• Spatial units
• Basic buttons
• Menu buttons
• Split buttons (combo buttons)
• Info links
• Radio buttons
• Checkboxes
• Switches
• Text fields

Bring Bolt into the product experiences you’re creating. Find out how.