James Reffell and Micah Alpern from the User Experience & Design Group at eBay Marketplaces share lessons they have learned working with design patterns over the past few years.

1. Real World Design Patterns
A History of Creating & Using Design Patterns at eBay
James Reffell & Micah Alpern
User Experience & Design Group, eBay Marketplaces
March 25, 2006

2. Design Patterns | Why are we here?
• Talk with you about design patterns!
• History of design patterns at eBay
• Share lessons we’ve learned
• Show an example pattern
• Lively discussion!
2

3. Design Patterns | Who are we?
• eBay user:
• Working at eBay since 11/1/02
• UI Designer
– User Experience & Design, eBay Marketplaces
– My group focuses on Tailored Shopping Experiences
(e.g. Half.com, Kijiji, eBay Express)
• eBay user:
• Working at eBay since 6/30/03
• UI Designer
– Selling Team & Disruptive Technologies, User Experience
& Design, eBay Marketplaces
3

4. People
4

5. Design Patterns | eBay Marketplace’s UED Group
• 5 disciplines
– User Experience
Research
– Content Management
– Creative Design
– Prototyping
– UI Design
• Buying
• Selling
• Platform & International
5

6. Design Patterns | In the beginning …
• There were a lot fewer of us in 2002!
• But we already needed something:
– Too many designers & too much complexity
• “just talking” wasn’t working any more
– Doing lots of design very, very quickly
– Designs were (unintentionally) inconsistent
– People were always reinventing the wheel
6

7. Design Patterns | … there was the book.
7

8. Design Patterns | … there was the book.
8

9. Design Patterns | … the book (cont’d)
• The book didn’t work!
– Obsolete the day it was printed.
– Actively dangerous within 6 months
– Now a collector’s item
• Why didn’t it work?
– Obvious:
• Static (printed)
• Hard to use (big & unwieldy)
– Less obvious
• Too general (well-lit path)
• Too specific (5-pixel padding)
• Not a lot of ‘just right’
9 • Some things were just wrong

10. Patterns
10

11. Design Patterns | Patterns
• Example: Buttons!
Inconsistent style for
graphical buttons does not
reinforce the eBay brand.
Multiple undifferentiated
buttons with inconsistent
positioning of primary action
do not prioritize the actions
for the user.
11

12. Design Patterns | Patterns
12

13. Design Patterns | Patterns
• The patterns worked … a little bit.
– A few important patterns got nailed down
– Made some important discoveries
– Those were used … when designers remembered to
– Good design habits
• Why didn’t it work better?
– Obvious:
• PowerPoint (static)
• No knowledge management system
– Less obvious
• Investigations were slow, long, and included too much vetting
• Little or no user research
• Hard to get into actual designs
13

14. Code
14

15. Design Patterns | Code
<table border=quot;0quot; cellpadding=quot;0quot;
cellspacing=quot;0quot; width=quot;100%quot;
EML bgcolor=quot;#D6DEFFquot;><tr><td
colspan=quot;5quot;
<eml:title> bgcolor=quot;#9999CCquot;><img
Sell Your Item: Enter border=quot;0quot;
Data Logic Toolbox src=quot;https://titan.corp.ebay.com/ui/en
Payment &amp; Shipping
</eml:title> _us/default/images/spacer.gif,DanaI
nfo=toolbox.corp.ebay.com+quot;
height=quot;2quot;
width=quot;1quot;></td></tr><tr><td><img
border=quot;0quot;
src=quot;https://titan.corp.ebay.com/ui/en
_us/default/images/leftLine_16x3.gif,
DanaInfo=toolbox.corp.ebay.com+quot;
width=quot;13quot; height=quot;3quot;
align=quot;centerquot;></td><td><img
border=quot;0quot;
src=quot;https://titan.corp.ebay.com/ui/en
_us/default/images/spacer.gif,DanaI
nfo=toolbox.corp.ebay.com+quot;
15 height=quot;25quot; width=quot;6quot;></td><td
width=quot;100%quot;><b
xmlns:fo=quot;http://www.w3.org/1999/X
SL/Formatquot;><font face=quot;arial,sans-

16. Design Patterns | Code
• The code worked … better.
– Working with developers and code made patterns deeper
– Some designers picked it up – even non-techies
– Used extensively in certain site areas
– Encouraged reuse
• Why didn’t it work better?
– Done in “spare time” by 1 designer & 1 developer
– XML language required training and was not a transferable skill.
– We made it too hard to be flexible
– The what without the how and the why can be frustrating
16

17. Process
17

18. Design Patterns | Process
18

19. Design Patterns | Process
19

20. Design Patterns | Putting It Together
20

21. Final Thoughts
21

22. Design Patterns | Now
• What we’ve got now
– Patterns
– Process
– (cross-functional) People
• UI, visual design, content,
research, development,
product
– Code
• Developer-led, designer
adoption optional
22

23. Design Patterns | What Have We Learned?
• What to do
– Have process, patterns, people, & code
– Move quickly and don’t think too hard
– Incent mass documentation
– Allow and acknowledge messiness
– Document the pattern and the specification and the code
• This is worth it!
– Organic adoption
– Joy of watching team solve hard problems
– Great design (which is the point)
23

24. Example Pattern
24

25. Sell Your Item
• No longer static
– The application grows
with sellers experience
• Rich & deep
– Many many possible
features
– 27 countries with
regional differences
25

26. How you’re selling: Experienced
26

27. Sample pattern: Input
27

28. Sample pattern: Input
28

29. Sample pattern: Input
Title
Data
Actions
29

30. Sample pattern: Input
Required
Title Control
Prefix Data
30

31. Sample pattern: Input
Required
Title Control
Prefix Data
31

32. Sample pattern: Input
Required
Title Control
Prefix Data
32

33. Sample pattern: Input
Title
Data
Actions
33

34. Sample pattern: Input
Title
Data
Actions
34

35. Sample pattern: Input
Required Controls Fees
Title
Title Subtitle
Data Toolbar
Actions Prefix Data Suffix
Prefix Data Suffix
Prefix Data Suffix
Actions
35

36. Sample pattern: Input
Input
Title
Data
Actions
Lets keep building…
Group
Two or more inputs with some kind of relationship
36

37. Sample pattern: Group
Group
Two or more inputs with some kind of relationship
Group: Compound input
Input Input
Group: Related inputs
Input Input
Group: Parent / Child
Input
Input
37

38. Keep building…
Build chunks of functionality.. And assemble chunks into pages
How Your Selling Page
38

39. Sample pattern
39

40. Developing a pattern language helps you
– Think structurally
– See relationships
– Create a predictable UI
– Manage complexity
40

41. Design Patterns | Inspiration & Thanks
• Many thanks to:
– eBay UED, and the UED Platform Team (past and present),
especially Larry Cornett, Jamie Hoover, Luke Wroblewski, &
Peter Stahl
– IA Summit organizers
Inspiration from:
– The Yahoo Design Pattern Library and Platform team
http://developer.yahoo.com/ypatterns/
– Jared Spool, “Elements of a Design Pattern”
http://www.uie.com/articles/elements_of_a_design_pattern/
– “The Design of Sites”, Van Duyne, Landay, and Hong
http://www.designofsites.com/
41

42. Design Patterns | Questions?
Questions about
– the history?
– design patterns?
– input pattern?
Contact:
– malpern@ebay.com
– jreffell@ebay.com
42