Intuit QuickBooks'
Motion System
Worked with an incredible team of researchers, designers, engineers, and product managers to nail down Motion Principles. I created Motion Tokens, designed reusable Motion Components, curated a Motion Library, and set up a standardized Loading Framework. Everything was aligned with Intuit and QuickBooks' design language and their dev workflows.
We wanted to make life easier for users and streamline the design process across platforms, we built a comprehensive motion system. The goal? To keep things consistent and boost efficiency in how motion was implemented.
Motion Principles and Guidelines
To keep QuickBooks motion design consistent and customer-focused, we laid out a solid framework. We put together clear guidelines, best practices, and motion examples, all hosted on the QuickBooks Design Site, making it super accessible for designers and devs alike. This ensures smooth and cohesive motion implementation across the board.
Motion Components and Paterns
To speed up both design and development, we created a set of standardized motion patterns and components. This includes animated UI, screen transitions, modals, and other patterns built with motion tokens, serving as a jumping-off point for a variety of UI elements.
Motion Library
Understanding the need for consistency and efficiency, we built a centralized motion library for QuickBooks. This library is a go-to source for reusable motions, code snippets, and guidelines, making it easy for teams to integrate motion seamlessly into their projects.
Case Study
Loading Framework
QuickBooks users were facing inconsistent and frustrating loading times, so I led the design of a comprehensive loading framework that turned these moments into opportunities for engagement and delight. This solution introduced standardized loading animations customized for different scenarios, offering visual feedback and improving the user experience. By implementing a variety of loader types, we significantly reduced perceived wait times while reinforcing the brand's commitment to a smooth, seamless experience.
Motion Tokens
We developed IDS (Intuit Design System) Motion Tokens to simplify the design process. These pre-defined easings and durations, showcased interactively in the Intuit Design System Storybook, are the foundation of our motion strategy. These tokens ensure smooth transitions and create a unified motion language while staying flexible enough for future updates.
The Challenge
🤨 External customers:
Users were stuck with long and inconsistent loading times, which took a toll on their satisfaction and trust in the platform.
👩💻🎨 Internal customers:
The lack of loading components meant teams were creating tons of one-off solutions, which slowed down design and development, and made updates a hassle.
📈 Business Impact:
Fixing these issues could boost user retention, improve overall satisfaction, enhance brand perception, and give us a competitive edge by delivering smoother, more seamless interactions.
The Solution
We tackled these challenges by flipping the script on the loading experience, turning it into a chance to engage, inform, and even delight users. We expanded our lineup of loading indicators, customizing each for specific scenarios to make those wait times feel shorter. Paired with clear guidelines and best practices, these indicators now create a consistent, informative loading experience across all our products.
Progress Bar
Storytelling Loader
Activity Bar
Guidelines | Usage
What users are saying
“QuickBooks Online is clunky and slow.
Too much waiting between screens.”
— Product Recommendation Score (PRS) User Test
“It’s disorienting. Why are they(cards) popping up at different times. It’d be better if all the cards loaded together instead of jumping around.”
— Page Loading Transitions User Test
“Response to commands is Slow & Sluggish with extended wait times for an action to be executed. During the waiting cycle there are NO INDICATORS to advise if something is transpiring or if the system is frozen.”
— Product Recommendation Score (PRS) User Test
Activity Dots
Skeleton Loader
Progress Cycle
Activity Loaders (Dots, Bar)
These subtle loaders give quick visual and motion feedback during short wait times or when the exact duration isn’t clear. They’re simple and low-key, offering reassurance that things are moving along without distracting the user.
Skeleton Loader
For moderate load times, skeleton loaders imitate the layout of the content that’s on its way, filling the empty space and giving users a sense of what to expect. It helps reduce that awkward "waiting" feeling.
Storytelling Loader
For those longer, unpredictable loading times, storytelling loaders turn waiting into an opportunity to engage. They use fun, informative animations and narratives related to the task, keeping users entertained and connected to the experience.
Progress Loaders (Bar, Cycle
For longer wait times, progress loaders provide transparency, letting users see exactly how much time is left. It gives them a sense of control and helps manage their expectations.