Company
ebay
Year
2016
Type
Design System
UX Pattern
ebay Date &
Time 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.*
There is no unified service at ebay as a source of truth for date, time, and localization to be generated, stored and surfaced on ebay platforms. As a result, each team maintains their own logic and design by domain and platform, creating a disjointed experience across the system.
UX Challenge
Date and time is used all across the ebay platform, from delivery dates, auction times, countdowns, to a multitude of instances. Issues arise when each team create their own formats and logic in silos without communication with other teams. The result is that there may be 4-5 different delivery dates that are surfaced from page to page without rhyme or reason. Other than a discordance with formats, there are also over complicated formats that should be simplified or rethought to be improve the user experience for the user. These issues not only exist within the US service, they also extend to our services overseas in 31 different locales.
Product Goals
Create a single source of truth
and ensure consistency across
all platforms and applications.
Enable a single point of testing.
UX Goals
Provide a simplified menu of formats for domain use and set fundamental standards for usage. Display only relevant information and create an unified global solution.
Process
Quick rundown of the process on collecting,
analyzing, vetting, and formulating
the Date & Time pattern.
01
Audit use cases for date and time across domains. Data gathering.
02
Review collected data and use cases to identify overlapping functions.
03
Consolidate formats down to core reusable and logical formats for all use cases.
04
Figuring out time zones. They are defined by the user’s location. Today, ebay has a single time zone for each country, a goal for the later phase would be to show the exact time zone for the user based on IP using LBS.
05
Shop around phase I standards to teams in domain reviews, collect feedback, and iterate based on feedback.
06
Work with Localization team for translations.
Date
Final Formats
Jun 5
Jun 5 – Jul 5
Jun 5, 2015
Problem
Inconsistent punctuation and spacing
Conflicting truncation of months
Multiple variants for the same information
Solution
Truncate month
Reduce excessive punctuation
Condense range into month day format
Usage
Delivery (future & past)
Date edited
Date & Time
Final Formats
Today at 5:00pm
Thursday at 5:00pm
Jun 30 at 5:00pm
Jun 5, 2009 at 5:00am
Problem
Multiple formats for similar content
Unnecessary info based on use case
Solution
Display format based on relevancy:
"Today for items/events ending or starting beyond today but within immediate week
"Month and Date" for items/events ending or starting beyond immediate week
Full date, year, and time for when year is important (CVI)
Usage
End/start date & time
Countdown
Final Formats
5s
5m 5s
5h 5m
5d
5d 5h
5d 5m (Tue, Jun 5 at 5:00am PDT)
Problem
Three ways to display countdown and date & time
Unnecessary amount of counters
Solution
Two counters at a time
Call out countdown to the front and provide truncated date and time
Usage
Countdown
Product Solve
The Commerce Experience Service Layer serves as a platform solve to define the standards
for internationalization formatting. COS experience layer will use this as the source of truth for the
platform solves we are building. COS experience layer will only define the data output as
expected by applications. Visual output will still remain part of the front end layer.
Conclusion
Date and time formatting became the first initiative to create
an unified system to serve, maintain and generate collective
information. Goals following these phases is to standardize
and localize currency, metrics, and addresses.