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



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

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

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)

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

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 :)

Let's connect :)

I can share more about this project when we meet.