eBay Design Systems Group

Promoted end-to-end sitewide consistency through a library of common components, patterns, and best use guidelines.

Problem

How might we encourage the adoption of consistent, sitewide patterns and standards to promote a more consistent and predictable user experience?

Outcome

Collaborations with other design teams to produce scalable patterns, which accommodated diverse set of needs, while still feeling consistent.

The process

Creating a consistent pattern across eBay started with understanding how it was used at that time across the site. This required an audit of the existing site for that particular pattern to identify how it was used, the variations in how it appeared, and documentation of the context within how it was used. Often, it made sense to connect with the designer who used it in their experience to understand their rationale in more detail.

Once we understood need for the pattern within the eBay experience and all of it's existing permutations, we looked outside of eBay to other sites, both directly and indirectly related to ecommerce, to find what we felt were best in class experiences. This external audit would uncover the best practices specific to that pattern, which we would want to employ within the eBay experience.

Based on the internal and external audits, we would sketch explorations for the pattern, using the use cases identified in the internal audit as requirements for the design to adhere to. This was my favorite part of the process because it combined self-driven exploration with collaborative discussion and critique with the larger patterns team. Additionally, I would set up meetings with a smaller group of designers external to the team, whom I met with during the process of conducting the internal audit.

Because we were responsible for creating the library of patterns and components used by all design teams across eBay, we wanted designers to be advocates for consistency and champion the patterns by using them. Before the patterns were coded into reusable components for other engineers to leverage, we would meet with designers whom we met with at the beginning of the process to confirm and validate design decisions.

Final solution

Most of our patterns had the final delivery of detailed specs for components we expected the design community to use within their experiences they created. This was more tactical. Need a button and the guidelines on how to place it within your layout? The pattern library gave designers exactly that.

Not all patterns could be summed up in a series of icons with different interaction states. Patterns like "remove" required overarching guidelines that proposed how content was presented, removed, and reintroduced. It touched on other aspects of the experience like content strategy, messaging, and dynamic animations.