Lessons From the Coupon Factory: Design Systems at Scale

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!

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

April 04, 2019
Tweet

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.
  3. 1993

  4. None
  5. 2011

  6. CHALLENGES • Siloed teams working independently on similar problems •

    Design delivering static images for implementation
  7. None
  8. None
  9. None
  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/

  22. None
  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

  32. None
  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.)

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  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

  62. None
  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

  75. None
  76. None
  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

  91. None
  92. None
  93. None
  94. None
  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

  103. None
  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