My Role

As one of the five core UX designers to rebuild eBay’s design system, my contributions are reflected in leading designs on components creation, UX standards maintenance and pattern guidelines documentation, providing visual guidance/strategy for product teams as well as collaborating with developers to establish the revamped Design System. 

​Skills: Visual design, Interaction design, User testing, UX writing and Communication!

Pattern design showcase

Before diving into my design process, here are some of my selected work on pattern guidelines [tap each thumbnail to see more]. Pattern guidelines are important deliverables for building our Design System and speaking the common design language, the guidelines specify the usages, behaviors, specs, etc of the component and designers reference them as the source of truth.

Example guidelines [Button]

Please tap 4 thumbnails below to see other guidelines:

Pattern design process

A pattern, from creation to delivery, goes through many stages and rounds of iterations: 

• Internal Audit: I audited our current system design to identify and document inconsistencies in existing established styles in the system. 
• External Audit: I also conducted the external audit on other e-commerce websites to get the competitor landscape and comprehensive evaluation. 
• Design Exploration: After audits, I explore different component designs and sketched prototypes, following the accessibility requirements to ensure the system comply with the standards like WCAG.

• Test: Then I tested my design explorations in real contexts, with stakeholders to review and build to a consensus 
• Iterations and Documentation: With certain rounds of iterations, when the patterns are well-established, I move on to documentation

Sketch Library of components

​Sketch library is the place to share our UI kits and styles with designers, I built flexible components symbols across different platforms (Desktop, mWeb, Native and Template) and pushed regular releases.

A snapshot of Sketch Library components

Using Sketch Library components to build quick prototype

Document the design

The component documentation connects us with designers, we also have rules for writing guidelins as well. I normally started with the brief introduction, example overview, different types and usages and illustrate the proposal with in context examples, I also wrote the do’s and don’ts for easy understanding and lastly include the specs in the doc. 

Here are some examples: Forms, Tabs, Buttons, and Modal.

A snapshot of pattern guidelines in Sketch

Presentation on Design Summit

​Design Summit is eBay’s annual conference where the whole design org members would attend — about 200 attendees. During the conference, we have talks to present team artifact and hands-on workshops. It’s a great festival to meet different team and learn what they’re creating!

I was demoing our Design System and Component Library to the audiences on eBay Design Summit