What is the QuickBooks visual refresh?

Most simply, Bolt is a visual refresh of the QuickBooks end-to-end experience. The refreshed design direction includes 6 tracks. The sixth is the focus of this page.

  1. Visual elements: extensible evolution of secondary visual elements
  2. Illustration: extensible evolution of our illustration style
  3. Motion: a baseline motion system, inclusive of signature motions
  4. Video: a framework for video storytelling for all formats
  5. Marketing: flexible components that allow for compelling storytelling and cohesion in our global web experiences.
  6. Product: evolution of our product visual language, creating a familial system of signature moments across devices.

Bolt product presentation
Breaks down of key aspects in the product will get the new visual refresh. 

Prototypes
These were created with early concept explorations intended to give teams a high-level vision of what the fresh design direction could be. Not every component or pattern reflects the final design. 

Important things to know

Updating a product’s visual design isn’t a one-person effort. Be sure to include partners and stakeholders from product management, engineering, design, and others. Create a plan and identify the scope. 

 

Follow this guideline if:

  • Your team plans to purely adopt the new visual direction for the existing feature with no changes in the interaction.
    Example: QuickBooks Online dashboard visual update.
  • Your team plans to create a new feature or redesign of the current experience. However, make sure everyone is aligned on the scope and schedule. Bolt accounted for visual design only. Not all the components or patterns are refreshed.
    Example: QuickBooks Capital design update and redesign.

For small changes to the current experience:

If you’re not sure whether or not your team should use the new visual refresh, make the decision after identifying the percentage of the new visual vs. the old one, the scope of work, and the future road map.

Will the experience be OK with the look of both new and old visuals? Will it just be a short term solution? Do you have a following up plan on your roadmap for a full visual update or redesign?

  • If the answers are yes to all 3, go ahead. 
  • If the answers are no, make sure the visual update is on the product roadmap first and come back when your team is ready. 

Pre-work: 

  • Designers should do a quick high-level audit to identify and highlight the areas of the product that will change. Make sure that the layout is reflected on what’s in production. Sometimes it may be impossible to get the accurate one, designers will need to do some updating.

 

  • Engineers do an estimate of the work scope with what is available from IDS with Bolt theme and what IDS does not have yet.

 

  • PMs estimate the scope with the product roadmap timeline. 

 

Implementing process

There are 7 key areas and steps to implement the new visual refresh.

See example from FTU team who has followed this process to update their dashboard. Shout out to FTU team who was our POC for this process. 

  • XD: Anna Cai, Shawna Kirby, Jen Hong
  • PD: Saffar Keyvan, James Dutczak, Suresh Vittala Gupta
  • PM: Kylie Tuosto

1. Speedy Updates to Design at Scale (SUDS)

 

Designers:

Help developers QA after CSS debt clean up.

Developers:

  • Follow instructions here to clean up CSS
  • QA with your team on visual and interaction to ensure no bugs after devs are complete with CSS cleanup.

2. Font-family & type scale migration

Designers:

 

Developers:

  • Follow instructions here to remove Geogrotesque and other font-family declarations because our license has expired.
  • Map the same CSS style name from the old font to the new Bolt style. If you have questions of what the old text style should be changed to, check with your designers.

Important note: Do not hard code fonts or use any other fonts rather than AvenirNextForIntuit. We don’t have licenses to use other fonts. This is a legal issue.

3. Grid and spatial units:

Read the documentation on QuickBooks responsive grid before you start.

     

 

Designers:

  • Update the design layout to IDS Grid 2.0
  • Update spacing units to the new QBDS & IDS spatial units.
  • Make sure to design for a responsive product. Start with mobile first, tablet and then desktop.

Developers:

  • Migrate from Harmony / Bootstrap to IDS Grid 2.0 code
  • Update designs according to designer specifications

4. Colors

Designers:

  • Follow the Bolt color guideline to see how color is being used.
    Note: Legacy color usage may be problematic or not be feasible to update at this time.
  • Remove the light gray background for in-product pages.
  • Double check if your color usage for text and important non-text visual are accessible.

Developers:

Follow designers’ specs and implement the changes. Make sure to reference IDS CSS style name instead of a manual hex number.

5. Illustrations

 

Designers:

  • Update illustrations to appropriate life-style (if needed) or utility illustrations. Please note that this may not be a 1:1 update. Make sure to consider the context, message, intend and content that go with each illustration.
  • If you cannot find illustrations that map to what you had in the product, try to use the ones that portrait similar ideas or request an illustration.

Developers:

  • Follow designers’ specs and implement the changes.

6. Icons

Designers:

Developers:

  • If you are already using Harmony icon font, all the new icons will be automatically updated.
  • If you are not using Harmony icon font, please start using it. Avoid using one-off SVG icons.

7. Components

Designers:

  • Check the Bolt components library in Lingo and guideline in QBDS website to learn what components have been refreshed or in the work. Not all the components published are ready to be consumed in the code yet.
  • Replace the old components to the new ones in a 1 to 1 update fashion. Adjust the surrounding spacing if needed as the newer component design may have a different size or padding than the old one.
  • Make sure to use the appropriate size for components that have responsive versions. For example, button desktop size is 36 pixels and responsive size when on mobile is 40 pixels.
  • If a component that’s not refreshed in QBDS or available in IDS yet, either keep the old style for that component or propose the new visual design if you think it’s necessary. Learn how to contribute.

Developers:

  • Replace HUI / HRC / hardcoded components with IDS components with Bolt theme according to the designer’s spec.
  • Avoid using hard-coded components
  • If a component that’s not built yet, check IDS lab or let us know if you would like to start the contribution.

After designs and engineers work

 

Designers:

  • Schedule an office hour with our team to go over the changes for us to learn and help catch any last minute concerns.

Developers:

Here are a few resources you may find helpful:

Support and feedback

  • Reach out to us on Slack at #sbg-xd-designsystem or schedule an office hour if you have questions.
  • Give us feedback to help us improve this playbook.

Frequently asked questions

We know there are many questions regarding the implementation process. There are too many for this website to handle. Visit this Visual Refresh FAQ google doc to get your questions answered. 

  • Was this Helpful?
  •