Motion Design

Turning a contractor handoff gone wrong into an opportunity to build ServiceTitan’s first scalable motion design system

Client: ServiceTitan

Role: Lead Designer

Timeline: 1 year

Tools: Figma, Google drive/tools, AfterEffects, LottieFiles, Atlassian Tools, AEUX

The challenge

After launching a suite of MVP-level native mobile apps at ServiceTitan, our design team had room to focus on the next layer of polish. As we rolled out a new UI library, leadership wanted to enhance the user experience through thoughtful motion and animation. We brought on a contract motion designer to establish direction and elevate the interface, but midway through, they disappeared without notice, leaving the project (and leadership) in limbo.

Fortunately, I had just enrolled in a Motion in UX course, intending to build on the contractor’s work later. What started as a contingency plan quickly evolved into full ownership of motion design across the company.

Approach

I dove into learning by doing and evolving through trial and error, a consistent approach to motion that balanced usability, delight, and technical feasibility.

First, I set a vision statement and core guiding principles.

Vision statement

Motion design should elevate the user experience of the ServiceTitan mobile apps, where users not only accomplish tasks efficiently, but also find joy and ease in the fluidity of their digital interactions

Guiding Principles

Trustworthy

Motion should create and maintain trust by providing feedback, guiding the user through flows, and instilling confidence in each interaction

Purpose-driven

Motion application should be meaningful and support the user in efficiently and successfully completing their tasks

Consistent

Motion should provide a uniform and familiar experience for users across the entire experience of the ServiceTitan product ecosystem

Delightful

When applicable, motion should improve the human experience of using ServiceTitan mobile apps

Engineering was a key stakeholder in the success and implementation of these motion assets. This was often a constant dialogue between myself and a core group of engineering partners, testing approaches, validating performance, and ensuring that each animation could be implemented effectively across Android and iOS. Together, we explored how to apply appropriate/OS-specific haptic feedback, maintain accessibility standards, and balance design intent with technical constraints in order to create shippable experiences.

Working collaboratively with product, engineering, and design systems partners, I created animations across three key categories: Spot Illustrations, Micro-interactions, and transitions.

Spot Illustrations

Adds a moment of delight and provides reassurance to the user that a request that they made has been recieved and is being processed.

Micro-interactions

Boarding colors and sounds coordinate visibly in the app and across gate signage, leaving no room for ambiguity.

Page Transitions

Adds a moment of delight and provides reassurance to the user that a request that they made has been recieved and is being processed.

Building for Scale

I wanted to ensure that other teams would be able to learn and create their own standardized animations for their feature areas without creating a bottleneck around me. To further this goal, I created a series of documentation in Figma, Confluence, and Google Drive so that other designers could pick up and run with their tools with minimal individualized guidance.

To ensure motion design could grow beyond me, I built shared documentation and templates that standardized principles, naming, and specs. These lived in assets across Figma (collaboration and handoff files), Atlassian (JIRA ticket documentation and asset log), and Google Drive (AE files, videos, and gifs), giving every designer the tools to prototype and hand off animations independently.

I also successfully made a business case for a LottieFiles team account so that other designers, PMs, and engineers could upload and access Lottie assets.

I also partnered with the Design Systems team to define a backlog of reusable motion patterns that would support both mobile and desktop experiences.

Impact & Learnings

My work on this project…

  • Enabled several designers across multiple product areas to learn AE and Figma animation tools to successfully ship motion in their feature areas.

  • Empowered a junior systems designer mentee to expand her motion, presentation, and stakeholder management skills to produce 2 standardized motion assets to be used by designers across the product org.

  • Pushed ServiceTitan’s design systems team to start work on the first company-wide framework for motion, enabling consistent, scalable animation across the product suite.

What began as a stressful scramble to adjust to a new set of responsibilities turned into a highly fulfilling learning experience. Through this experience I…

  • Learned how to use AfterEffects and LottieFiles (and related plugins).

  • Learned how to communicate motion design and its benefits to company leaders and non-designer stakeholders. Not only does it add an element of delight, but it also provides a functional language that communicates hierarchy, guides attention, and builds user trust.

  • Created a strong rapport between engineering and design. Once the first instance of motion was shipped, the engineers were also excited and proactive in generating ideas and opportunities we could work on together. The element of delight was experienced both by our customers and internally by those who worked on these animations!