ebay Card Pattern
*This is one pattern within ebay’s Design system Library. You can
read this to get an understanding of the DSL before diving in.*
A card is a visual container that holds a single or related grouping of information. Originally ebay had no unified pattern or logic in the way cards were used across the system. This project aims to create a systemic approach and guardrails to help designers and developers utilize cards as a tool to create meaning and logic behind their designs.
There is no rationale, design standard or cohesion in the way cards are used across the service and platform. In that way, they are often used as decoration, ignoring information hierarchy and causing a disjointed experience across the system. Designers have been struggling with the notion of having cards on a page as a method of having visual unity across the system, each domain looking at one another or at artifact designs to make sense of the pattern.
Create a rationale, usage standard, and logic in the way cards should be used and provide guidelines to ensure consistent end-to-end implementation. It's also imperative to specify the visual style and align existing discrepancies within the system. Lastly, formulate a strategy that would be frictionless for domain adoption.
It was unanimously decided that the standardization of cards would start native first, from ebay's native app, as that was the most feasible method to push to release. ebay's web platform had too many variables, dependencies and stakeholders to wrangle in a short timeline and it would be almost impossible to launch an synchronized design update
Types of Cards
There are 3 types of cards that live in the content layer,
each with their own usage and definition.
General usage guidelines to help designers
implement cards effectively.
Do use titles to label cards whenever possible. This help users to quickly identify the nature of its contents. If there is a need for the heading to be dropped; for accessibility standards, the first identifiable content would be the structural heading. If none of those options are possible, designers are required to provide off-screen headings.
By using cards as an tool, we are able to easily reorder and personalize
content based on user relevancy or affinity with how they use eBay
through our Unified Stream Service (USS).
Creating topography allows for designers to create a mental model of how cards operate
as components. Meaning and function is given to each layer, creating hierarchy and
swappable container/content relationships.
The logic and interaction for cards have been adopted and embedded in
ebay’s 4.0 and all subsequent product releases. It created cohesion, order,
and meaning for the use of cards and allowed for the intelligent organization
and chunking of information. Next steps is to evaluate the translation of cards
for Mobile web and web platforms. To understand whether cards as an
component translates across platorms or if they are necessary
driving factors in design.