What’s new

May 7, 2018

Progress report: voice, modals, marketing, and wireframes

Recent design system updates reflect progress in how we sound, look, and create experiences fast.

• New voice and tone system includes examples.
  As the content design team launched its renewed, streamlined voice and tone guidelines, the design system introduced a new showcase for content examples. Highlighting content from marketing and product, the fresh examples show our design community what our champion voice looks and sounds like. Learn by example.
• Get more guidance for modals.
  Including contributions and ideas from a number of designers, we expanded the modal component and updated our guidelines. Check out new documentation.
• Marketing guidelines support campaigns.
  Are you a marketing designer looking for guidelines for the latest campaign? Do you want to know what components and patterns to use? We made a special place for marketing campaigns. Look for it soon.
• Create fast with our wireframe kit.
  You’ve been asking for a lightweight, low-fidelity component library to help you quickly design product experiences. Our wireframe kit in Lingo can help. Get the kit now.

 

March 7, 2018

Create experiences that are accessible to all

The design system continues to strengthen its guidelines for making experiences that are accessible to all users. Among the latest additions are rules specifically for content design.

Written by Principal Content Designer Louise Mintun in collaboration with a number of design and accessibility experts, the new guidelines present sound advice for crafting content for users with specific needs:

• Blind users who navigate websites with screen readers
• Color blind users or those with low vision
• Users with hearing impairments
• Users with cognitive impairments or learning disabilities

These guidelines appear in the usage section of the style guide.

For additional guidance, including considerations for interaction and visual design, the design system has a section devoted specifically to accessibility.

Feb. 14, 2018

Group resizing, fonts, and cards get smarter

The QuickBooks Design System Team announced a number of changes this week.

• You can now resize grouped elements.
  Some of our advanced components now allow for group resizing. In addition to text overrides, you can now quickly adjust the height and width of components by dragging the corners. You couldn’t do this before without encountering stretch icons and overflowing text. This update is for the following components: tooltips, guidance tooltips, page-level info, and trowser headers.
• Font styles in Lingo are better organized.
  We cleaned and reorganized our font style list. To get the updated fonts, open a new Sketch file and pull from our Design System Kit in Lingo. For instructions on how to install the kit, see the Sketch Assets page.
• Cards guidelines are getting clearer.
  Product and content designers have been asking for help with cards. We’re working on them, and the guidelines are a work in progress. Check out the new documentation and guidance for our cards component.
• Sign up for office hours online.
  Have questions about any of this? Talk to the Design Systems team. You can now schedule an appointment for Office Hours directly from this site. Check available time slots and get instant confirmation for your appointment. Book your time now.

 

Dec. 4, 2017

Design system expands its reach with new site

Earlier this month, the QuickBooks Design System team launched the latest iteration of its site. Still packed with design and content guidelines and inspiration, the site is now enhanced to be even more useful for anyone creating pages and experiences for QuickBooks Online.

The improved site will also be available shortly to viewers outside of Intuit. More people will be able to get insight into our design standards and culture.

The new site shows off a number of improvements:

• Redesigned homepage showcases content, including links to download design tools.
• Improved search helps users find what they need.
• Homepage features video with parallax scrolling, animated SVGs, and other innovative animations and interactions.
• Updated permissions give users fast access to the system.
• Technology enhancements help pages appear better and faster on a variety of devices.
• A site map helps users browse through the content and view the entire system at a glance.

The site will also feature regular release notes and updates, like the one you’re reading now.

August 1, 2017

Tips and tricks: Featuring Abstract and Button Relabel Sketch plugin

In case you missed the recent Tips and Tricks. We covered a useful Sketch plugin, Button Relabel and Abstract. We’re excited to walkthrough Abstract, a new exciting new tool for Sketch collaboration.

We had record number in attendance as you can see in the photo below (and lots more on the phone)! Each of these sessions continue to grow larger and larger. Thanks for the support!

Links to recording and plugin here: Tips and tricks

Got a sec for feedback? Go here

June 30, 2017

Data visualization Sketch assets

A picture speaks a thousand data points. In a data-driven world, the ability to display information through visualization can help our customers understand their business better; it allows the complex to become simple, the abstract tangible, and the invisible (data) visible with bold illustrations.

See how you can use data visualization to ensure a successful end-to-end brand expression.

Note: Our current QBO and QBSE products use custom created graphics which are not re-usable components in our library.  The only chart that is a Harmony UI component is the money bar 2.0 (a.k.a. horizontal bar chart).  The team is in the process of updating this design and creating additional reusable UI components so we have the equivalent code for all data visualization designs. This will happen as we transition from the Harmony UI component library to App Fabric UI components that will be included in the shared tech infrastructure across Intuit.  

 

March 26, 2017

QuickBooks Design contribution process

Make QuickBooks Design better. Share your expertise.
The QuickBooks Design System is owned by every SBG XD designer and developer. Yes, that’s you! Our team is here to help you learn how to contribute content that will help create a world-class design system. There’s no better time than the present, so let’s begin! See how it works.

We look forward to working with you to expand our design guidelines. Share your knowledge, examples, and insights: Contribute today.

 

March 16, 2017

Marketing

AEM components available in Sketch
All the Marketing components, with the atomic grid spacing, are now available in the Sketch (Craft) library.  To view detailed specs check out the wiki (migrating to the portal soon!) or see Marianne Guillen for any questions.

UI components

New updated components
We updated a handful of components in the product Sketch (Craft) library including:

• Trowser
• Text fields
• Errors
• Global Help flyout
• Help pop-out
• Info links
• Modals
• Tooltips
• Guidance tooltip
• Guided tour

Coming soon!
We’re creating native UI components in Sketch (Craft) library for the iOS UI.  We’ll update you next week.

Design Engineering

Updated E2E prototype
Between animated global header icons and signature motion examples (like EasyEase, Entrance, Exit and Stagger), the e2e crew has been busy.  Check out their most recent work.

Designer tips & tricks

Learn to work smarter in Sketch
We’re excited to share our new Sketch template. Now you’ll never start your designs from scratch again with this easy reusable template. Join Vince for a walkthrough and improve your design skills. 

Wednesday, March 22
2:00pm PST

Can’t make it?
Watch the BlueJeans recording (0:42)

See more tips & tricks

 

March 8, 2017

Introducing weekly updates

Communication is key
We’re taking significant steps to get you the tools and information you need to work more efficiently and accurately. Starting today, you can access this What’s New page for up-to-date information on what the QBDS team is working on and who to reach out to if you have questions. Let us know what you think.

We heard you!

Slow and steady wins the race
We know it’s painful–we feel it too! Migrating content from the old Harmony site to the new designsystem.quickbooks.com while rolling out a new brand and mobile web responsive assets has been a challenge. Slowly, but surely, we’re resolving UI component inconsistencies across documentation and assets.

UI components

The fruits of our labor
Based on your feedback and designer demand, we cleaned up these components to have consistent, cross-device documentation in all our sources of truth, including: QuickBooks Design, Craft UI Sketch library and Zeplin.

Trowser	Drawers	Text fields
Errors	Global Help flyout	Help pop-out
Info links	Modals	Tooltips
Guidance tooltip	Guided tour

Our work is not done
We won’t rest until everything in our design system screams design consistency. Here’s a look into the next batch of updated components:

• Buttons
• Step flow
• Toast
• Tabs
• Data input