eBay China already has a robust mobile web presence, but they felt their product was lacking in terms of motion. The app is fast, secure, and well engineered but it felt static, especially 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 language and creating animated ReactJS components.

3 main goals of the project were:

  • Guide users along the funnel of purchasing an item using motion
  • Develop an eBay branded style of motion
  • Deliver ReactJS components using pure CSS animations

UI Motion Process

This is the process I use when designing motion to fit within an existing design system.

1

UI Audit

A comprehensive audit of the UI was done to identify potential areas 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.

2

Prototype

Using a defined list of high value interactions and/or user flows I create animations using After Effects, CSS/JS or Invision.

3

Animate

Create polished animations of the individual design components. Focused on feasibility of implementation and performance.

4

Build

Build the component in functional code. The language depends upon the product. Sometimes it's Javascript (web app )other times I'll deliver Objective-C (iOS).

01 MOTION AUDIT

IDENTIFY POTENTIAL

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.

02 PROTOTYPE

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.

03 animate

Fill your cart with color

By constraining ourselves to a limited color palette we were able to create a systematic decibel level for the 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.

UI animations should be an expression of the brand, make the product easier to user and a bit more delightful.
04 build

ReactJS Components

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.

The Price Drop React Component

Below is sample code for the Price Drop Component delivered to the eBay team

javascript
CSS
React component usage
NEXT PROJECT

MARSHALL BREWING