Lessons From the Coupon Factory: Design Systems at Scale

Slide 1

Slide 1 text

LESSONS FROM THE COUPON FACTORY Design Systems at Scale Senior UI Engineer, Groupon @peruvianidol MIKE APARICIO ANY ^ image: chicagology.com

Slide 2

Slide 2 text

DISCLAIMER • Our design system is still a work in progress. • A lot of what I’ll cover will be largely web-focused.

Slide 3

Slide 3 text

1993

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

2011

Slide 6

Slide 6 text

CHALLENGES • Siloed teams working independently on similar problems • Design delivering static images for implementation

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Internal Tools (2012) Designers Developers

Slide 11

Slide 11 text

Toolstrap (2012)

Slide 12

Slide 12 text

Toolstrap (2012)

Slide 13

Slide 13 text

CSS https://twitter.com/CoreyGinnivan/status/1074287131374145536

Slide 14

Slide 14 text

Groupon.com Redesign (2013)

Slide 15

Slide 15 text

Groupon Interface Guidelines (2013)

Slide 16

Slide 16 text

Mixer (2016)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

DESIGN SYSTEM

Slide 19

Slide 19 text

https://material.io/

Slide 20

Slide 20 text

https://www.lightningdesignsystem.com/

Slide 21

Slide 21 text

https://polaris.shopify.com/

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

PARTS OF A DESIGN SYSTEM • Design Principles • Visual Style Guidelines • UI Components • Content Guidelines (Voice & Tone) • Illustration Guidelines • Resources (Frameworks, Design Tools)

Slide 24

Slide 24 text

https://principles.design/

Slide 25

Slide 25 text

http://carbondesignsystem.com/guidelines/principles

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

https://standardsmanual.com/

Slide 28

Slide 28 text

https://airbnb.design/building-a-visual-language/

Slide 29

Slide 29 text

https://foundation.zurb.com/

Slide 30

Slide 30 text

https://styleguide.mailchimp.com/voice-and-tone/

Slide 31

Slide 31 text

https://www.behance.net/gallery/46062029/Illustration-Guideline

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

image: commons.wikimedia.org

Slide 34

Slide 34 text

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?!?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Our Design System is a common language across design, engineering and product that describes how we create digital products. WHAT IS OUR DESIGN SYSTEM?

Slide 37

Slide 37 text

DESIGN TOKENS

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

https://bradfrost.com/blog/post/atomic-web-design/

Slide 40

Slide 40 text

SUBATOMIC PARTICLES

Slide 41

Slide 41 text

COMING  FALL 2019! (j/k Brad! Please don’t sue me.)

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

iOS Tokens as  Variables (Stylus) Web Design Decisions Token Data (JSON) Token Data (YAML) Android Token Data (XML) Sketch UI Kit

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

VISUAL STYLE AUDIT

Slide 53

Slide 53 text

https://cssstats.com/

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

COLOR http://contrast-grid.eightshapes.com/

Slide 56

Slide 56 text

COLOR • Avoid Brand Light on Brand background • Use Brand Dark for text/icons

Slide 57

Slide 57 text

COLOR • Adjust Dark Gray and Link colors > 4.5 ratio

Slide 58

Slide 58 text

https://webaim.org/resources/contrastchecker/

Slide 59

Slide 59 text

COLOR • Adjusted contrast ratios • 050 to 600 for color names • 600 - text • 050 - backgrounds • 400/200/100 - speciﬁc uses • Added transparent colors

Slide 60

Slide 60 text

TYPE • 60 unique font size declarations • em, rem, px, %, vw, inherit • 7px … 8em (128px!)

Slide 61

Slide 61 text

TYPE

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

TYPE • 60 sizes > 7 sizes • Separate type scale from weight/color • Reset H1…H6 styles to avoid using for   visual vs. semantic value

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

SPACE Linear vs. Geometric Progression image: Nathan Curtis

Slide 69

Slide 69 text

SPACE • Define specific space values • Let content/padding dictate height rather than setting  fixed pixel dimensions • Apply bottom margins only

Slide 70

Slide 70 text

https://getbootstrap.com/docs/4.0/layout/grid/

Slide 71

Slide 71 text

https://labs.jensimmons.com/2017/03-010.html

Slide 72

Slide 72 text

X items evenly distributed 100% width 75%/25% X items evenly distributed Thirds GRID groupon.com

Slide 73

Slide 73 text

Homepage Local Deal Page, Checkout My Groupons 33.3% 33.3% 33.3% 25% 75% 33.3% 66.6% 100%

Slide 74

Slide 74 text

33.3% 66.6% 100% 1080px

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

GRID • Eliminate the generic 12-column grid • Provide common CSS Grid-based layouts • Use grid/ﬂexbox/ﬂoats at the component level

Slide 78

Slide 78 text

common.png  61k places-proﬁle-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

Slide 79

Slide 79 text

https://icomoon.io/

Slide 80

Slide 80 text

https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

Slide 81

Slide 81 text

https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

Slide 82

Slide 82 text

Contextual Chevrons Close Stars Social Map Pins Illustrative ICONS

Slide 83

Slide 83 text

18px 18px 20px 8px 10px 12px 18px 20px 16px 17px 14px 13px ICONS

Slide 84

Slide 84 text

ICONS • Move from icon font to SVG • Deﬁne a speciﬁc set of sizes/colors for icons • Make a distinction between UI and illustrative icons • Create a more diverse palette for illustrative icons

Slide 85

Slide 85 text

LAYERS • 21 unique Z-indices • -1 … 9999

Slide 86

Slide 86 text

https://material.io/design/environment/elevation.html

Slide 87

Slide 87 text

https://material.io/design/environment/light-shadows.html

Slide 88

Slide 88 text

Sticky Bottom Modal Tooltip/Dropdown Overlay

Slide 89

Slide 89 text

Bottom (0) Sticky (100) Tooltip/Dropdown (200) Overlay (300) Modal (400)

Slide 90

Slide 90 text

VALIDATING TOKENS

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

OKAY, THAT’S GREAT  BUT WE’RE NOT GROUPON

Slide 97

Slide 97 text

• Creates a common language across platforms, disciplines • Less ﬁdelity 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-ﬁdelity prototyping - ideal for user testing • Provides users with a consistent experience BENEFITS OF A DESIGN SYSTEM

Slide 98

Slide 98 text

https://www.invisionapp.com/design-system-manager/expert-advice/selling-your-design-system

Slide 99

Slide 99 text

Top Down Bottom Up person by Guilherme Furtado from the Noun Project

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

https://medium.com/eightshapes-llc/designing-a-systems-team-d22f27a2d81d

Slide 102

Slide 102 text

https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517

Slide 105

Slide 105 text

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.

Slide 106

Slide 106 text

https://patternlab.io/

Slide 107

Slide 107 text

https://www.11ty.io/

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

THANK YOU! @peruvianidol mikeaparicio.com/webcon