Lessons From the Coupon Factory: Design Systems at Scale

Slides from my University of Illinois Webcon talk on April 4, 2019.

Learn how we scaled our in-house CSS framework to a full fledged, cross-platform design system at Groupon. Everything from auditing the existing product to design tokens, documentation and implementation. A small team of designers and engineers worked together to create a robust, maintainable system that supports hundreds of product people across dozens of teams working across web, iOS and Android. You can apply these same lessons to your site or product, regardless of scale. We made plenty of mistakes so that you don't have to!

Transcript

1. LESSONS FROM THE COUPON FACTORY Design Systems at Scale Senior UI Engineer, Groupon @peruvianidol MIKE APARICIO ANY ^ image: chicagology.com
2. DISCLAIMER • Our design system is still a work in progress. • A lot of what I’ll cover will be largely web-focused.
6. CHALLENGES • Siloed teams working independently on similar problems • Design delivering static images for implementation
10. Internal Tools (2012) Designers Developers
11. Toolstrap (2012)
12. Toolstrap (2012)
13. CSS https://twitter.com/CoreyGinnivan/status/1074287131374145536
14. Groupon.com Redesign (2013)
15. Groupon Interface Guidelines (2013)
16. Mixer (2016)
17. CHALLENGES • Where does the framework end and the product begin? • Keeping our framework in sync with our design tools • More designers/developers = more deviations • Support for web only • OMG THREE DIFFERENT FRAMEWORKS • No full-time maintenance NEW
18. DESIGN SYSTEM
19. https://material.io/
20. https://www.lightningdesignsystem.com/
21. https://polaris.shopify.com/
23. PARTS OF A DESIGN SYSTEM • Design Principles • Visual Style Guidelines • UI Components • Content Guidelines (Voice & Tone) • Illustration Guidelines • Resources (Frameworks, Design Tools)
24. https://principles.design/
25. http://carbondesignsystem.com/guidelines/principles
26. Principles act as our design conscience. They are a guide to the rightness and wrongness of our designs and help us make a case for design decisions. - Groupon Design Principles
27. https://standardsmanual.com/
28. https://airbnb.design/building-a-visual-language/
29. https://foundation.zurb.com/
30. https://styleguide.mailchimp.com/voice-and-tone/
31. https://www.behance.net/gallery/46062029/Illustration-Guideline
33. image: commons.wikimedia.org
34. WHAT IS OUR DESIGN SYSTEM? • Our Design System is the Sketch UI Kit! • Our Design System is the component library! • Our Design System is the style guide website! • We have a Design System?!?
35. Desktop Web Design Decisions CSS Framework Marketing Site Mobile Web Sketch UI Kit iOS Android Design
 System
 Website Checkout Homepage Maps Search Product C Product B Product A
36. Our Design System is a common language across design, engineering and product that describes how we create digital products. WHAT IS OUR DESIGN SYSTEM?
37. DESIGN TOKENS
38. Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. - Salesforce Lightning Design System https://www.lightningdesignsystem.com/design-tokens/
39. https://bradfrost.com/blog/post/atomic-web-design/
40. SUBATOMIC PARTICLES
41. COMING
 FALL 2019! (j/k Brad! Please don’t sue me.)
49. Desktop Web Design Decisions CSS Framework Marketing Site Mobile Web Sketch UI Kit iOS Android Design
 System
 Website Checkout Homepage Maps Search Product C Product B Product A
50. iOS Tokens as
 Variables (Stylus) Web Design Decisions Token Data (JSON) Token Data (YAML) Android Token Data (XML) Sketch UI Kit
51. VISUAL STYLE UI COMPONENTS • Color • Type • Spacing/Grid • Icons • Borders • Layers • Opacity • Shadows • Animation (CSS) (HTML/JS) • Buttons • Links • Form Inputs • Headers • Navigation • Alerts • Cards • Modals • Badges, etc.
52. VISUAL STYLE AUDIT
53. https://cssstats.com/
54. COLOR • 41 unique text colors • 40 unique background colors • One-off colors not in our palette • Inconsistent naming • Mix of hex values and CSS variables • HSLa/RGBa used for transparency
55. COLOR http://contrast-grid.eightshapes.com/
56. COLOR • Avoid Brand Light on Brand background • Use Brand Dark for text/icons
57. COLOR • Adjust Dark Gray and Link colors > 4.5 ratio
58. https://webaim.org/resources/contrastchecker/
59. COLOR • Adjusted contrast ratios • 050 to 600 for color names • 600 - text • 050 - backgrounds • 400/200/100 - specific uses • Added transparent colors
60. TYPE • 60 unique font size declarations • em, rem, px, %, vw, inherit • 7px … 8em (128px!)
61. TYPE
63. TYPE • 60 sizes > 7 sizes • Separate type scale from weight/color • Reset H1…H6 styles to avoid using for 
 visual vs. semantic value
64. SPACE Content
 Dictated by width/height - (border + padding)
 and/or line-height Padding Space within element Border Visual divider around element Margin Space between elements The Box Model WIDTH HEIGHT
65. https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
66. SPACE Inset
 Equal space (padding) around an element Squished Inset More space on sides than top/bottom Inline Margin between horizontal elements Stack Margin between vertical elements image: Nathan Curtis
67. L/R: 32px T/B: 8px Line Height: 22.4px L/R: 16px T/B: 7px, 6px Line Height: 13px L/R: 15px, 14px T/B: 0 Line Height: 40px L/R: 35px, 10px T/B: 0 Line Height: 35px L/R: 24px T/B: 18px L/R: 8px T/B: 0 Line Height: 18px L/R: 62px/12px T/B: 12px/10px L/R: 20px T/B: 8px/0 L/R: 0 (100% width) T/B: 0 Line Height: 13px L/R: 20px/0 T/B: 0 Line Height: 45px L/R: 35px T/B: 8px/20px
68. SPACE Linear vs. Geometric Progression image: Nathan Curtis
69. SPACE • Define specific space values • Let content/padding dictate height rather than setting
 fixed pixel dimensions • Apply bottom margins only
70. https://getbootstrap.com/docs/4.0/layout/grid/
71. https://labs.jensimmons.com/2017/03-010.html
72. X items evenly distributed 100% width 75%/25% X items evenly distributed Thirds GRID groupon.com
73. Homepage Local Deal Page, Checkout My Groupons 33.3% 33.3% 33.3% 25% 75% 33.3% 66.6% 100%
74. 33.3% 66.6% 100% 1080px
77. GRID • Eliminate the generic 12-column grid • Provide common CSS Grid-based layouts • Use grid/flexbox/floats at the component level
78. common.png
 61k places-profile-icons.png
 2k checkout.png
 39k heartx.png
 5k map-pointers.png
 2k
 personalization.png 8k share-sprite.png
 2k bg-refer_cta_sprite.png
 1k star-rating.gif
 2k gift-wizard-calendar-icon.png
 1k ICONS
79. https://icomoon.io/
80. https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/
81. https://www.sarasoueidan.com/blog/icon-fonts-to-svg/
82. Contextual Chevrons Close Stars Social Map Pins Illustrative ICONS
83. 18px 18px 20px 8px 10px 12px 18px 20px 16px 17px 14px 13px ICONS
84. ICONS • Move from icon font to SVG • Define a specific set of sizes/colors for icons • Make a distinction between UI and illustrative icons • Create a more diverse palette for illustrative icons
85. LAYERS • 21 unique Z-indices • -1 … 9999
86. https://material.io/design/environment/elevation.html
87. https://material.io/design/environment/light-shadows.html
88. Sticky Bottom Modal Tooltip/Dropdown Overlay
89. Bottom (0) Sticky (100) Tooltip/Dropdown (200) Overlay (300) Modal (400)
90. VALIDATING TOKENS
95. CHALLENGES • Building consensus around design decisions • Advocating for and evangelizing the system • Implementing design tokens across web/iOS/Android • Keeping our design tools in sync with the system • Keeping our frameworks in sync with the system EVEN MORE
96. OKAY, THAT’S GREAT
 BUT WE’RE NOT GROUPON
97. • Creates a common language across platforms, disciplines • Less fidelity lost between concept and production • Saves developers time struggling with CSS • Saves designers time marking comps with values, QA’ing • Reduces time to production, code bloat • Provides consistency between multiple projects/teams • Allows rapid scaling, less re-inventing the wheel • Great tool for on-boarding new employees • Enables rapid, high-fidelity prototyping - ideal for user testing • Provides users with a consistent experience BENEFITS OF A DESIGN SYSTEM
98. https://www.invisionapp.com/design-system-manager/expert-advice/selling-your-design-system
99. Top Down Bottom Up person by Guilherme Furtado from the Noun Project
100. A design system isn’t a project. It is a product, serving products. - Nathan Curtis https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935
101. https://medium.com/eightshapes-llc/designing-a-systems-team-d22f27a2d81d
102. https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742
104. https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517
105. VISUAL STYLE UI COMPONENTS • Color • Type • Spacing/Grid • Icons • Borders • Layers • Opacity • Shadows • Animation • Buttons • Links • Form Inputs • Headers • Navigation • Alerts • Cards • Modals • Badges, etc. • Color • Type • Spacing/Grid • Icons • Borders • Layers • Opacity • Shadows • Animation • Buttons • Links • Form Inputs • Headers • Navigation • Alerts • Cards • Modals • Badges, etc.
106. https://patternlab.io/
107. https://www.11ty.io/
108. SOME FINAL LESSONS • Systems are about process and people, not tech • Make a system that solves the problems you have (now) • It’s easier to ask forgiveness than get permission • Sell the results, not the system
109. STAND ON THE SHOULDERS OF GIANTS Rachel Andrew
 @rachelandrew Jina Anne
 @jina Chris Coyier
 @chriscoyier Josh Clark
 @bigmediumjosh Nathan Curtis
 @nathanacurtis Sara Drasner
 @sarah_edo Derek Featherstone @feather Brad Frost @brad_frost Val Head @vlh Alla Kholmatova @craftui Una Kravets @una Zach Leatherman @zachleat Dan Mall @danmall Ethan Marcotte @beep Mina Markham @minamarkham Eric Meyer @meyerweb Diana Mounter @brocollini Yesenia Perez-Cruz @yeseniaa Robin Rendle @robinrendle Dave Rupert @davatron5000 Jen Simmons @jensimmons Jonathan Snook @snookca Sara Soueidan @sarasoueidan Luke Wroblewski @lukew
110. THANK YOU! @peruvianidol mikeaparicio.com/webcon