While eBay China already had a robust mobile web presence, they felt their product was lacking in terms of motion. The app was fast, secure and well-engineered, but felt static compared to other Chinese eCommerce websites. I collaborated with the team at DesignMap to breathe life into the eBay mobile web UI by extending their 'Fill Your Cart With Color' brand theme. The final deliverable was production ready ReactJS components which the engineers at eBay could easily integrate into their codebase.
The three main goals of the project were to:
Our 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 UI where animation could be valuable.
Using a defined list of high value interactions or 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. Focused on feasibility of implementation and performance.
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.
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.
Ooooh fancy animations...so what?
I like your skepticism :) All the animations were designed from an engineers perspective. Delivered to eBay as functional, highly performant React + CSS components. Copy, paste, deploy and watch those click through rates increase!
Below is sample code for the Price Drop Component delivered to the eBay team
Higher click through rate when compared to components without an animated CTA or microinteraction.
Detailed Motion principles and guidelines were delivered to give the design and engineering team a framework for incorporating motion into the UI.
Production ready ReactJS components. Which meant there was minimal time required by eBay engineers to incorporate the React components into the live website.