Delight users with Rive

Yi Lai

Mobile Designer
Design Systems
Rive Animations
Figma
Rive
Dealerware

Revitalizing Dealerware’s Design System with Motion

At Dealerware, I was brought on to collaborate with the design team and leverage my expertise in design systems. My goal was to streamline processes, enhance feature development, and inject moments of delight into an otherwise utilitarian app experience.
Dealerware+ revolutionizes fleet vehicle management, offering mobile solutions for customer contracts, daily schedules, and efficient service lane operations. Key features include:
Contracting customers from any mobile device.
Effortlessly scanning driver licenses, credit cards, and insurance information.
Instantly billing for fuel, mileage, or damage at contract close.
While functional and efficient, the app’s workflows felt routine. My focus was on transforming these moments with thoughtful design and motion to create an engaging and enjoyable experience.

Design System Improvements

I reimagined Dealerware’s design system by introducing scalable, reusable components that ensured consistency across the app and streamlined the design process. Key improvements included:
Cohesive Visual Identity: Standardizing typography, color palettes, and spacing to unify the UI.
Simplified visuals with dynamic motion: Redesigning complex workflows, such as contract signing and scheduling, with intuitive patterns and consolidated 3 different graphic libraries (unDraw, icon8 and custom illustrations)
These updates gave the app a refreshed visual identity, elevating its overall aesthetic. Below is a comparison of the app’s transformation:
Before and after
Before and after
In addition to the visual overhaul, I added a layer of animation to further enhance the user experience.

Introducing Delight Through Motion

Motion became a cornerstone of the app’s redesign, infusing moments of joy and clarity. Using Rive, I implemented animations that not only added visual appeal but also improved usability:
Visual Delight: What used to be a simple screen such as passing the device for a signature became delightful with interesting animation. We also introduced motion to 404 pages and other secondary screens, keeping the app energetic while maintaining professionalism.
Visual Feedback: Still graphics were replaced with subtle animations. For example, task completion screens featured celebratory animations, creating a sense of accomplishment for users.
Login Screen: A refined and dynamic "plus" animation welcomed users, setting a polished and professional tone right from the start.
These touches ensured that even routine tasks felt meaningful and enjoyable.

Impact and Outcomes

The combination of design system improvements and motion-driven interactions delivered tangible benefits:
Enhanced Productivity: Streamlined workflows reduced user effort and improved task completion times.
Increased User Satisfaction: Thoughtful animations added personality to the app, transforming mundane moments into engaging experiences.
Below is a snapshot of the motion enhancements in action, recorded in production:
By balancing functionality with moments of delight, the Dealerware+ app became more than just a tool—it became a seamless, engaging part of the user’s day.
Partner With Yi
View Services

More Projects by Yi