Company
ebay
Year
2016
Type
Design System
UX Pattern
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.
UX Challenges
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.
UX Goals
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.
Native First
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
across domains.
Types of Cards
There are 3 types of cards that live in the content layer,
each with their own usage and definition.
Card
Used to differentiate between distinct data sets.
Full Content Layer
Used when content is analogous and requires no need for an emphasized visual separation. Full content layer is white, sits directly on top of the background and spans the entirety of the page.
Full Width Card
Used when the primary content
needs to be called out opposed to other extraneous information. There should only be one primary full width card per page.
Usage
General usage guidelines to help designers
implement cards effectively.
Titles
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.
Card Breakouts
Don't break content out onto individual cards if not necessary. Excessive usage will create friction and slow down user scanning. Always group content on a single card when possible.
Title Breakouts
Don't break titles out of cards. All content should be contained inside the card.
Standalone Card
Don't use a standalone card unless there are or will be more than one card being used. A card should not simply be used as a background
Stacking Content Layer Elements
Don't stack elements of the content layer on top of each other. Cards, full width card, and full content layer always rests directly on top of the background.
Primary & Secondary Cards
On small and medium screens full width card would be used to identify the primary information within the page while all secondary, tertiary and other extraneous content would live inside regular cards.
Card Behavior
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).
Shoping Behavior
With user data we are able to personalize their shopping experience by surfacing relevant content. For example, if an user is an avid Fashion shopper, USS would push up fashion events and collections instead of tech or craft deals.
Topography
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.
Conclusion
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.