Going public - eBay's Playbook

Going public - eBay's design playbook

Disclaimer: Various images on this page where crafted by the talented folks on eBay's brand and design system team and they deserve all the credit. Read on to learn about my specific contributions.    

Quality foundations + big goals

I jumped onto a fast moving design system team growing our design system, releasing our documentation to the public, and evolving the product design system over the long term.
Visit playbook.ebay.com to explore our integrated DS and brand docs

Disclaimer: Most of the images here are from the talented folks on eBay's brand and design system team and they deserve the credit, not me.

Intro here:

I jumped onto a fast moving train of design system team making exciting moves to grow their design system, release their documentation to the public, and evolve the product over the long term.
Visit playbook.ebay.com to explore the playbook.

The Challenge

New playbook launch

The team had been working toward a huge goal of completing their new documentation site in the coming months, they needed support completing guidelines content, reviewing drafts and fine tuning pages before the internal launch

Strong foundations

Run the system: While the playbook project was the big focus we still had to keep the system healthy with normal operations and customer support everyday

Improve process: The team was looking for ways to improve process for smoother operations and time efficiencies

My part

New playbook launch

For documentation project, Playbook 2.0, I created and coordinated content for a variety of pages: foundations, components, patterns, accessibility
Reviewed new content with collaborative partner teams
Coordinated image and motion assets for the site CMS

I joined a strong team with a big backlog, and pitched in to key initiatives.

A11y content coordination, editing, publishing
I added support for variables and variant properties
Collaborated with engineers who were building system components for design support and QA
Led the design and production of new component and patterns, collaboration with product team designers, and component library engineers
Led the creation of new DS communications to bolster awareness transparency within the design org

New playbook launch

For documentation project, Playbook 2.0, I created and coordinated content for a variety of pages: foundations, components, patterns, accessibility
Reviewed new content with collaborative partner teams
Coordinated image and motion assets for the site CMS

Strengthening foundations

Led design for new components and patterns to the system in coordination with adopting product teams
Led DS customer support with busy office hours, multiple slack channels, team reviews
Improved process: Helped refine team’s task tracking, formalize engineering coordination, establish regular DS comms and visibility across the org

I joined a strong team with a big backlog, and pitched in to key initiatives.

A11y content coordination, editing, publishing
I added support for variables and variant properties
Collaborated with engineers who were building system components for design support and QA
Led the design and production of new component and patterns, collaboration with product team designers, and component library engineers
Led the creation of new DS communications to bolster awareness transparency within the design org

Strengthening foundations

Led design for new components and patterns to the system in coordination with adopting product teams
Led DS customer support with busy office hours, multiple slack channels, team reviews
Improved process: Helped refine team’s task tracking, formalize engineering coordination, establish regular DS comms and visibility across the org

Built on a strong foundation

Foundational work lead to this moment

The team had for the previous 2-3 years diligently building a solid design system, while aligning DS and Brand foundations together
Key to the strategy was one set of coordinated tokens and styles (type, color, iconography, illustration, photography, motion/animation) to unify product, brand and marketing experiences

Disclaimer: Most of the images here are from the talented folks on eBay's brand and design system team and they deserve the credit, not me.

Intro here:

I jumped onto a fast moving train of design system team making exciting moves to grow their design system, release their documentation to the public, and evolve the product over the long term.
Visit playbook.ebay.com to explore the playbook.

Foundational work lead to this moment

The team had for the previous 2-3 years diligently building a solid design system, while aligning DS and Brand foundations together
Key to the strategy was one set of coordinated tokens and styles (type, color, iconography, illustration, photography, motion/animation) to unify product, brand and marketing experiences

Replacing previous docs

This new Playbook 2.0 was replacing an older version of Design system docs that was outdated and difficult to maintain.
Former DS docs excluded brand, content, accessibility, and motion aspects
Customers had to search for guidance between multiple sources (Figma library, outdated doc site, eng docs)

Disclaimer: Most of the images here are from the talented folks on eBay's brand and design system team and they deserve the credit, not me.

Intro here:

I jumped onto a fast moving train of design system team making exciting moves to grow their design system, release their documentation to the public, and evolve the product over the long term.
Visit playbook.ebay.com to explore the playbook.

Replacing previous docs

This new Playbook 2.0 was replacing an older version of Design system docs that was outdated and difficult to maintain.
Former DS docs excluded brand, content, accessibility, and motion aspects
Customers had to search for guidance between multiple sources (Figma library, outdated doc site, eng docs)

Documenting to new levels

Beyond the component, page tabs focused on related areas:

Develop: Provides links to matching coded components and displays status of those components for each library, powered by a custom API by our design tech team
Motion: Provides animated component examples with guidance and tokens
Accessibility: In collaboration with our accessibility teams and web engineering partners we crafted design centered accessibility guidance to explain topics including tab sequence, reading order, labeling and focus styles.

Disclaimer: Most of the images here are from the talented folks on eBay's brand and design system team and they deserve the credit, not me.

Intro here:

I jumped onto a fast moving train of design system team making exciting moves to grow their design system, release their documentation to the public, and evolve the product over the long term.
Visit playbook.ebay.com to explore the playbook.

My contributions

Created, composed, edited and published a range of pages across the doc site.
- Key examples: Responsive layout, Accordion, File upload, Text link
Contributed content to a wider range of edits and update, including Accessibility tabs across components.
- Key examples: Table, File upload, Video player

Disclaimer: Most of the images here are from the talented folks on eBay's brand and design system team and they deserve the credit, not me.

Intro here:

I jumped onto a fast moving train of design system team making exciting moves to grow their design system, release their documentation to the public, and evolve the product over the long term.
Visit playbook.ebay.com to explore the playbook.

Reflections

Joining an existing strong, fast moving DS team was very different from building up a team and making slow gains over time.
I have learned so much from public DS sites in the past its amazing to give this value back to the external community with our public launch
The strong foundation gave us room to grow into a new space, adding motion and accessibility guidance for each component
Team process can always be refined, don’t get too comfortable :)