Not Your Parents' Pattern Library: A Fresh Approach in Defining Corporate Design Standards

Originally presented at WebVisions Barcelona, 2013
Presented next at EuroIA 2013 in Edinburgh, Scotland

Think pattern libraries are outdated? Think again. We'd like to challenge the perception of what makes a pattern and a pattern library. In this talk, Carrie and Erica will discuss the fading relevance of traditional pattern libraries and show you what they've done to reinvigorate the Design Standards hub at eBay, making it more engaging and maximizing its usefulness.

Carrie and Erica will also talk about pattern libraries as not only agents of change, but also products of change, and how extending the purpose of eBay's own pattern library has increased adoption and understanding of design standards across the company.

This talk will be powerful for anyone developing design guidelines or looking to create design efficiencies within their company. Attendees will walk away with a fresh perspective on how to create relevant and approachable design standards.

Transcript

1. Copyright 2013 Carrie Buckingham, Erica Decker NOT YOUR PARENTS’ PATTERN LIBRARY 1 Wednesday, July 3, 13
2. Copyright 2013 Carrie Buckingham, Erica Decker CARRIE BUCKINGHAM España, te amo! - translation by Babelfish Copyright 2013 Carrie Buckingham, Erica Decker 2 Wednesday, July 3, 13
3. Copyright 2013 Carrie Buckingham, Erica Decker ERICA DECKER ¡Necesito cafés más grandes! - translation by Babelfish 3 Wednesday, July 3, 13
4. Copyright 2013 Carrie Buckingham, Erica Decker 4 Wednesday, July 3, 13
5. Copyright 2013 Carrie Buckingham, Erica Decker 113,000,000+ USERS 80+ DESIGNERS COUNTLESS PROJECT TEAMS WEB ANDROID TABLET IPHONE ~20 STAKEHOLDERS PER PROJECT 40 COUNTRIES SO MANY AGENCIES 10,000+ EMPLOYEES 5 Wednesday, July 3, 13
6. Copyright 2013 Carrie Buckingham, Erica Decker PATTERNS are recurring solutions that solve common design problems. PATTERN LIBRARIES house collections of those patterns. 6 Wednesday, July 3, 13
7. Copyright 2013 Carrie Buckingham, Erica Decker 7 Wednesday, July 3, 13
8. Copyright 2013 Carrie Buckingham, Erica Decker 8 Wednesday, July 3, 13
9. Copyright 2013 Carrie Buckingham, Erica Decker RULES WE NEEDED ‘EM! 9 Wednesday, July 3, 13
10. Copyright 2013 Carrie Buckingham, Erica Decker 10 Wednesday, July 3, 13
11. Copyright 2013 Carrie Buckingham, Erica Decker pat · tern /ˈpatərn/ Definition Interaction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and accomplish their tasks. 11 Wednesday, July 3, 13
12. Copyright 2013 Carrie Buckingham, Erica Decker 12 Wednesday, July 3, 13
13. Copyright 2013 Carrie Buckingham, Erica Decker Examples of other pattern libraries? The world libraries lived in at the time. YUI/ Welie 13 Wednesday, July 3, 13
14. Copyright 2013 Carrie Buckingham, Erica Decker Pricing Style Pattern When displaying pricing, two things should be considered: 1. What type of pricing it is 2. How to show it Pricing type dictates style The type of pricing that's being communicated can translate into one of three pricing style categories: Quick Scan Style Quick Scan is a representation of an item for sale in a format that enables quick scanning of multiple items. User engagement is limited, so only essential pricing information is displayed. The purpose: To enable quick scanning of basic pricing information. Places where the Quick Scan style is typically used: Homepage, Search results, Landing pages (Verticals, Coupons), My eBay, Daily Deals, Merchandising) Pricing information can include: • Base item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping • Incentive(s) and discount(s) lure Hierarchy is established as: First Tier: Base item price (BIN) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Seller Incentive (Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Seller Incentive (next Richest Offer) Focus Style Focus is a detailed representation of an item for sale in a format that enables focus and engagement on one item. Significant real estate is utilized by displaying larger image(s), price information and item title. The purpose: Communicate, in depth, the pricing and incentive offers for the item. Places where the Focus style is typically used: View Item, Daily Deals, Product Detail and Search Preview Pricing information can include: • Base or Modified item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping Incentives and discounts explained Hierarchy is established as: First Tier: Base Item Price (BIN) or Modified Item Price, Incentive (Richest Offer callout and details) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Incentive (next Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Incentive (next Richest Offer) Review Style Review is a point a flow where the user is able to review, in full detail, a comprehensive summary of item(s) before or after purchase. Often displayed in an invoice-like format, pricing information is aligned right. The purpose: Confirmation and re-assurance. Copyright 2013 Carrie Buckingham, Erica Decker 14 Wednesday, July 3, 13
15. Copyright 2013 Carrie Buckingham, Erica Decker Discrete Selector /disˈkrēt səˈlektər/ Definition A discrete selector is a representative portion; a sample. 15 Wednesday, July 3, 13
16. Copyright 2013 Carrie Buckingham, Erica Decker 16 Wednesday, July 3, 13
17. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK COLOR PICKER 17 Wednesday, July 3, 13
18. Copyright 2013 Carrie Buckingham, Erica Decker DON’T REALLY MATTER...? Maybe the definition 18 Wednesday, July 3, 13
19. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 19 Wednesday, July 3, 13
20. Copyright 2013 Carrie Buckingham, Erica Decker RESPECT the pa ern 20 Wednesday, July 3, 13
21. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 21 Wednesday, July 3, 13
22. Copyright 2013 Carrie Buckingham, Erica Decker No personality Copyright 2013 Carrie Buckingham, Erica Decker 22 Wednesday, July 3, 13
23. Copyright 2013 Carrie Buckingham, Erica Decker KEEP CALM AND USE THE PATTERN 23 Wednesday, July 3, 13
24. Copyright 2013 Carrie Buckingham, Erica Decker eBay has a weird interface. Every time I go there I feel like eBay doesn’t know me at all. “ Copyright 2013 Carrie Buckingham, Erica Decker 24 Wednesday, July 3, 13
25. Copyright 2013 Carrie Buckingham, Erica Decker TANKING BAD ECONOMY, HEAVY COMPLEXITY, NEW COMPETITORS 25 Wednesday, July 3, 13
26. Copyright 2013 Carrie Buckingham, Erica Decker “Like meteors, other dominant internet stars burned with dazzling brilliance before turning shareholder dollars to ash.” - New York Times 26 Wednesday, July 3, 13
27. Copyright 2013 Carrie Buckingham, Erica Decker “It was clear that the world had innovated around eBay, and eBay had stayed with the same formula.” - John Donahoe, eBay CEO 27 Wednesday, July 3, 13
28. Copyright 2013 Carrie Buckingham, Erica Decker Ho d we... BECOME AGENTS OF CHANGE? 28 Wednesday, July 3, 13
29. Copyright 2013 Carrie Buckingham, Erica Decker Dudes. This way. 29 Wednesday, July 3, 13
30. Copyright 2013 Carrie Buckingham, Erica Decker WARNING THE FOLLOWING SLIDES ASKS REALLY HARD QUESTIONS. FREQUENT SIDE EFFECTS INCLUDE NAUSEA, DIZZINESS, OR FATIGUE. 30 Wednesday, July 3, 13
31. Copyright 2013 Carrie Buckingham, Erica Decker Are PATTERN LIBRARIES OUTDATED? 31 Wednesday, July 3, 13
32. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 32 Wednesday, July 3, 13
33. Copyright 2013 Carrie Buckingham, Erica Decker SHIFT 33 Wednesday, July 3, 13
34. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 34 Wednesday, July 3, 13
35. Copyright 2013 Carrie Buckingham, Erica Decker K it HUMAN Copyright 2013 Carrie Buckingham, Erica Decker 35 Wednesday, July 3, 13
36. Copyright 2013 Carrie Buckingham, Erica Decker Kno you AUDIENCE 36 Wednesday, July 3, 13
37. Copyright 2013 Carrie Buckingham, Erica Decker REDUCE THE LEARNING CURVE Copyright 2013 Carrie Buckingham, Erica Decker 37 Wednesday, July 3, 13
38. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 38 Wednesday, July 3, 13
39. Copyright 2013 Carrie Buckingham, Erica Decker Pricing Style Pattern When displaying pricing, two things should be considered: 1. What type of pricing it is 2. How to show it Pricing type dictates style The type of pricing that's being communicated can translate into one of three pricing style categories: Quick Scan Style Quick Scan is a representation of an item for sale in a format that enables quick scanning of multiple items. User engagement is limited, so only essential pricing information is displayed. The purpose: To enable quick scanning of basic pricing information. Places where the Quick Scan style is typically used: Homepage, Search results, Landing pages (Verticals, Coupons), My eBay, Daily Deals, Merchandising) Pricing information can include: • Base item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping • Incentive(s) and discount(s) lure Hierarchy is established as: First Tier: Base item price (BIN) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Seller Incentive (Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Seller Incentive (next Richest Offer) Focus Style Focus is a detailed representation of an item for sale in a format that enables focus and engagement on one item. Significant real estate is utilized by displaying larger image(s), price information and item title. The purpose: Communicate, in depth, the pricing and incentive offers for the item. Places where the Focus style is typically used: View Item, Daily Deals, Product Detail and Search Preview Pricing information can include: • Base or Modified item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping Incentives and discounts explained Hierarchy is established as: First Tier: Base Item Price (BIN) or Modified Item Price, Incentive (Richest Offer callout and details) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Incentive (next Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Incentive (next Richest Offer) Review Style Review is a point a flow where the user is able to review, in full detail, a comprehensive summary of item(s) before or after purchase. Often displayed in an invoice-like format, pricing information is aligned right. The purpose: Confirmation and re-assurance. Copyright 2013 Carrie Buckingham, Erica Decker 39 Wednesday, July 3, 13
40. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 40 Wednesday, July 3, 13
41. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 41 Wednesday, July 3, 13
42. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 42 Wednesday, July 3, 13
43. Copyright 2013 Carrie Buckingham, Erica Decker Research Code Visual Design Specs Brand Content Accessibility Interactions Business Goals Test Results Other Patterns PATTERN History Employee Feedback Industry Standards 43 Wednesday, July 3, 13
44. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 44 Wednesday, July 3, 13
45. Copyright 2013 Carrie Buckingham, Erica Decker Close Bid confirmation 13d 20h US $ 125.50 $15.00 Ground US $ 125.50 $ Time Left Current Bid Shipping Your max bid <RX·UHWKHKLJKELGGHUDQGFXUUHQWO\LQWKHOHDG Increase max bid 45 Wednesday, July 3, 13
46. Copyright 2013 Carrie Buckingham, Erica Decker Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Sit amet scelerisque Ipsum tincidunt Pharetra Aliquam erat Category label See more searches Clear Eames Rosewood Lounge antique clock mid century modern Recent searches Label Another label Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Adipiscing elit Back to Search Results Home Dolor Sit amet Consecetur Browse by category I’m looking for... Search in all Daily deals Hi! Sign in or register Customer Support Community Sell My eBay Copyright 2013 Carrie Buckingham, Erica Decker 46 Wednesday, July 3, 13
47. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 47 Wednesday, July 3, 13
48. Copyright 2013 Carrie Buckingham, Erica Decker Stay RELATABLE 48 Wednesday, July 3, 13
49. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 49 Wednesday, July 3, 13
50. Copyright 2013 Carrie Buckingham, Erica Decker RESEARCH TEAM PROJECT MANAGERS DOMAIN DESIGNERS PATTERNS. Copyright 2013 Carrie Buckingham, Erica Decker 50 Wednesday, July 3, 13
51. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 51 Wednesday, July 3, 13
52. Copyright 2013 Carrie Buckingham, Erica Decker Follow Followed! 52 Wednesday, July 3, 13
53. Copyright 2013 Carrie Buckingham, Erica Decker RATIONALE! METRICS! DESIGN! BEHAVIOR! TESTING! CODE! SPECS! 53 Wednesday, July 3, 13
54. Copyright 2013 Carrie Buckingham, Erica Decker 54 Wednesday, July 3, 13
55. Copyright 2013 Carrie Buckingham, Erica Decker Sweat the DETAILS 55 Wednesday, July 3, 13
56. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 56 Wednesday, July 3, 13
57. Copyright 2013 Carrie Buckingham, Erica Decker TIMELINESS and RELEVANCE 57 Wednesday, July 3, 13
58. Copyright 2013 Carrie Buckingham, Erica Decker When is something officially a pattern? 58 Wednesday, July 3, 13
59. Copyright 2013 Carrie Buckingham, Erica Decker When is it not a pattern anymore? 59 Wednesday, July 3, 13
60. Copyright 2013 Carrie Buckingham, Erica Decker BREAK OUR OWN RULES! 60 Wednesday, July 3, 13
61. Copyright 2013 Carrie Buckingham, Erica Decker I c ant r e ad t his Type what you see or we won’t let you do anything 61 Wednesday, July 3, 13
62. Copyright 2013 Carrie Buckingham, Erica Decker Show us that you’re human by sliding from left to right 62 Wednesday, July 3, 13
63. Copyright 2013 Carrie Buckingham, Erica Decker Option one Option two Option three And on And on And on To infinity Is this usable? 63 Wednesday, July 3, 13
64. Copyright 2013 Carrie Buckingham, Erica Decker Copyright 2013 Carrie Buckingham, Erica Decker 64 Wednesday, July 3, 13
65. Copyright 2013 Carrie Buckingham, Erica Decker G beyond PATTERNS 65 Wednesday, July 3, 13
66. Copyright 2013 Carrie Buckingham, Erica Decker PATTERNS (foundations & collective knowledge) Patterns in context drive evolution RESPEK! SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) 66 Wednesday, July 3, 13
67. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 67 Wednesday, July 3, 13
68. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Patterns rock. (consistent usage is critical to user success) 68 Wednesday, July 3, 13
69. Copyright 2013 Carrie Buckingham, Erica Decker Order information View order details Default Table without Zebra Striping iPhone 5 Black iPhone 5 White w/ Cover iPhone 5 Black iPhone 5 White w/ Cover iPhone 5 Black iPhone 5 White w/ Cover $499 $519 $499 $519 $499 $519 2 2 2 2 2 2 FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th $998.00 $519.00 $998.00 $519.00 $998.00 $519.00 Shipping cost $29.00 Order information View order details Item title Price Qty Shipping & handling Expected delivery Total price Default Table Interaction Layered Design - DS3 Tables Copyright 2013 Carrie Buckingham, Erica Decker 69 Wednesday, July 3, 13
70. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 70 Wednesday, July 3, 13
71. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Guidelines are tried-n-true tips. (they keep our 10,000ft view) 71 Wednesday, July 3, 13
72. Copyright 2013 Carrie Buckingham, Erica Decker 72 Wednesday, July 3, 13
73. Copyright 2013 Carrie Buckingham, Erica Decker N U M B E R O F F E A T U R E S U S E R H A P P I N E S S “NICE, BUT I WISH I COULD DO MORE” “I’M SO GLAD THEY ADDED THIS” “GUESS I BETTER LOOK AT THE MANUAL” “I RULE!” “HEY, WHERE THE F... DID THEY PUT THAT?!” “NOW I CAN’T EVEN DO THE ONE SIMPLE THING I BOUGHT THIS FOR...” “I SUCK!” KATHY SIERRA THE FEATURITIS CURVE HAPPY USER PEAK 73 Wednesday, July 3, 13
74. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 74 Wednesday, July 3, 13
75. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Frameworks = do this. (but you can shift it a little if you need to) 75 Wednesday, July 3, 13
76. Copyright 2013 Carrie Buckingham, Erica Decker REFINE EVERYTHING NAVIGATE THINGS Support both way-finding to thing-finding by serving up the right tools at the right time along a user’s shopping course. Ou NAVIGATION PHILOSOPHY 76 Wednesday, July 3, 13
77. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 77 Wednesday, July 3, 13
78. Copyright 2013 Carrie Buckingham, Erica Decker 78 Wednesday, July 3, 13
79. Copyright 2013 Carrie Buckingham, Erica Decker Browse by category I’m looking for... Search in all Daily deals Hi! Sign in or register Cart Notifications Customer Support Community Sell My eBay 3 HOLY STREAMLINED! Copyright 2013 Carrie Buckingham, Erica Decker 79 Wednesday, July 3, 13
80. Copyright 2013 Carrie Buckingham, Erica Decker Product experience will help you INNOVATE. Frameworks should EVOLVE and stay FLEXIBLE. Share a 10,000 FOOT VIEW with guidelines. Don’t forget that PATTERNS are the FOUNDATIONS. 80 Wednesday, July 3, 13
81. Copyright 2013 Carrie Buckingham, Erica Decker NEVER STOP EVOLVING ...like, eve . 81 Wednesday, July 3, 13
82. Copyright 2013 Carrie Buckingham, Erica Decker THIS SEEMS LIKE A LOT OF WORK... Copyright 2013 Carrie Buckingham, Erica Decker 82 Wednesday, July 3, 13
83. Copyright 2013 Carrie Buckingham, Erica Decker 83 Wednesday, July 3, 13
84. Copyright 2013 Carrie Buckingham, Erica Decker 84 Wednesday, July 3, 13
85. Copyright 2013 Carrie Buckingham, Erica Decker 85 Wednesday, July 3, 13
86. Copyright 2013 Carrie Buckingham, Erica Decker The new eBay, which is rolling out across the U.S. starting today, sports a cleaner and more streamlined design. - Fast Company The design is cleaner with less text and better suited to scale for mobile and the upcoming onslaught of touchscreens. - Engadget eBay is pulling its old clunky site into the modern age with a major redesign and new features inspired by its younger, buzzier tech rivals. - CNN Money eBay's newly refreshed site certainly feels cleaner than ever before, with refinements to the company's search, product and checkout pages, but the overall experience should not be different enough to confuse users. - The Next Web “ 86 Wednesday, July 3, 13
87. Copyright 2013 Carrie Buckingham, Erica Decker RECOVERING UPDATED GOALS, FRESH DESIGN, FOCUS ON INNOVATION 87 Wednesday, July 3, 13
88. Copyright 2013 Carrie Buckingham, Erica Decker Think about your audience, and cater to them. Centralize your tools and make them easy to use. Stay relatable to everyone you work with. And then build credibility by extending your reach. 88 Wednesday, July 3, 13
89. Copyright 2013 Carrie Buckingham, Erica Decker THANK YOU AND SOURCES • All product images are from ebay.com • All screenshots are from ebay.com, the old Pattern Library, or the new Design Systems Library • Out-of-touch Professor photo: doblelol.com/funny-teacher.htm • Millenials photo: free-stockphotos.com/download-free-couple-holding-blank-banner-images • John Donahoe photo: investors.com/image/IT1b1016_1c081015.jpg.cms • Jason Fried photo: thegreatdiscontent.com/jason-fried by Marc Garrett • Dancing Silhouettes: free-hdwallpapers.com/wallpaper/abstract/dancers-abstract-dancers-silhouette/ 257162 • Cockpit photo: flickr.com/photos/jbgeronimi/6363087361/ • Hands photo: antibludoman.ru/arxivy • So Much Work photo: managers.org.uk/practical-support/management-community/blogs/how-important- clean-desk • Fonts are Mission Gothic and Mission Script (thanks, Lost Type Co-op!) • And finally, thanks to Dorelle Rabinowitz for being our sounding board as we put together our first conference presentation. 89 Wednesday, July 3, 13
90. Copyright 2013 Carrie Buckingham, Erica Decker THANKS fo listening clbuckingham@yahoo.com ericajoydecker@gmail.com 90 Wednesday, July 3, 13