UX Research, Video Editing, Animation & Illustration
Services
Intuit - Quickbooks
Client
Year
2023
Collaborated with Intuit as a UX Motion Designer to elevate internal brand performance and user experience.
Intuit - Quickbooks
QuickBooks Motion System
Role: Lead Illustrator/Motion Designer
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.
Working with an incredible team of researchers, designers, engineers, and product managers, we nailed down Motion Principles, 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 dev workflows.
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 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.
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.
“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
What Users Are Saying
🤨 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 Challenge
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.
The Solution
Activity Dots
Skeleton Loader
Progress Cycle
Activity Bar
Storytelling Loader
Progress Bar
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.
Guidelines | Usage
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.