As eBay expanded into the Chinese market, they needed a scalable, localized design system to support their first phase of digital products.
In Chinese e-commerce, animation is the norm as motion signals quality and plays a key role in shaping user perception. eBay wanted to inject delight into the user experience through thoughtful motion and interaction design. I partnered closely with their team to design, animate, and implement a robust set of UI components crafted to resonate with Chinese users.
Driving Conversions with Motion
When thoughtfully applied at key moments in the user journey, motion design doesn’t just make products feel more polished and delightful — it also drives measurable business outcomes. Subtle, purposeful animations can guide attention, build trust, and help users move more confidently through the funnel, leading to higher click-through rates and increased sales.I partnered with the team at DesignMap to audit the eBay China website and mobile apps, identifying opportunities where motion could add the most value across the shopping experience.
My UI motion design process helps clients build more intuitive, beautiful and profitable software products.
A comprehensive audit of the UI is done to identify areas of user experience where animation could add the most value. Hundreds of screenshots and short videos were shared with the team at eBay to find areas of the user interface where animation could add value.
A filtered list of have been identified user flows we create animations using After Effects, CSS/JS or Invision. This is where a brands motion style and personality begins to take shape.
Create polished animations of the individual design components. With a strong focus on feasibility and performance.
Build the component in functional code. The language depends upon the product. Sometimes it's Javascript (web app) or CSS or both. Other times I'll deliver Objective-C or Swift code.
Where can animations add the most value?
Which parts of the UI are confusing? Are users abandoning their shopping cart? Could transitions between screens be made less jarring? A comprehensive audit of the UI was done to identify potential areas where animation could add the most value.
The animations had to align with both product, brand and business goals. Next step; determine a user flow to focus on.
ANIMATING UI FLOWS
When doing UI animation, it's really important to see the animations in the context of the UI. The more 'real' the animation seems the easier it will be to get buy in from the team on whether the animation feels right or not. 15+ UI flows and components were animated to flush out ideas for eBay and narrow in on final overall motion styles and components.
By constraining ourselves to a limited color palette we were able to create a systematic decibel level for a system of animations. Loud animations, i.e. items on the page we were trying to draw the users attention to, use 3 colors. Secondary UI animations use only one color.
The use of quick bursts of color extended the eBay brand slogan of "Fill Your Cart with Color" and gave developers a systematic approach to applying animations which are on brand and simple to implement.
The engineering team at eBay uses ReactJS for their web app. For performance reasons all the animations were built using pure CSS. I delivered 11 React based components in a standalone Storybook app with documentation and motion specs.
Higher click through rate when compared to components without an animated CTA or microinteraction.
For eBay China that translated to roughly 500,000 conversions!
Detailed Motion principles and guidelines were delivered to give the design and engineering team a framework for incorporating motion into the UI.
after delivering a working component to eBay's engineers they had it implemented and deployed to a staging site. Ready to be A/B tested.