Design systems Questions & Answers

Starting a design system How to create a design system from scratch (for a smaller product/startup) What components are a must? And what to consider?

Design System Lifecycle MONTH 1 2 3 Strategy 4 5 Formative S1 S2 S3 0.1 6 7 Operative S4 S5 0.5 S6 Product adoption 1.0 8

Design Ops Survey, Ruter april 2018 Ruters Dropbox Mitt firmas Dropbox Min personlige Dropbox Lokalt pĂĄ min maskin Google Drive Ekstern harddisk Ruters filserver Mitt firmas filserver Axure team-disk 0 1 2 3 4 5 6 7 8 9 10

Product Fleet Design System supports and serves other products

Product Fleet Design System supports and serves other products

Product Fleet Design System supports and serves other products

Interface Inventory aka UI Inventory, Interface Audit

Interface Inventory Template

Interface Inventory

Component Cut-Up Workshop

Component Cut-Up Cut Group Label Groups Tape Prioritize Label Components

The Component Cut-up Workshop

Parts, products and people A Team Activity to Start a Design System

16

Picking Parts, Products & People

Cost vs Gains, ROI

The Design System Efficiency Curve Productivity With a design system How long does this take? Without a design system Time

Design + Develop = đź’•đź’• How to coordinate a design system with developers? Best practices and different ways to do it.

Brad Frost & Dan Mall «Hot Potato Process»

Design Pipeline Android Core iOS App Web TRANSFORM VERIFY GENERATE Specify Github Style Dictionary Web ? ? New Hotness Design Token generation Development

Build your own, or…? Use or buy a design system

It Depends

Across Teams & Products Considerations when building design systems across teams and product. What can be common, when to be specific?

Use the existing one Ja Does it look the way you want it to? Ja Nei Change the existing one Can it still be used? Nei Ja Can it be altered to fit better? Ja Does a similar component already exist Nei Ja Create a new variant Can it be solved with a variant of the existing one? Nei Nei Ja Is it likely to be used in multiple locations? Put it into the design system Nei Keep it outside the design system

Creativity vs Systematic How to combine design exploration while laying the ground work for building design system?

Does systems make it hard to be creative?

Does systems make it hard to be creativity?

Pace Layering Stuff Space Plan Services Skin Structure Site Shearing layers of change. Because of the different rates of change of its components, a building is always tearing itself apart

Steward Brand “The power is in the slow parts, but the fast parts get all the attention.“

Pace layering Constructive turbulence Fast Fashion Rate of change Commerce Slow Discontinous, experimentation, innovation What works goes to building wealth, products, services Infrastructure Energy, transport food production, education Governance Stability, continuity law, democratic institutions Culture Beliefs, values, ideologies Nature Natural ecosystem

Gartner Pace Layering Strategy Systems of Innovation • New ideas • CompetitiveThreats Systems of Differention • Better Ideas • Unique Processes Systems of Record • Common Ideas • Greater Efficiency

Pace layering Fast Marketing Rate of change Product Design System Stratgey Goal Brand Slow FAST LAYERS Churn ideas & get all the attention SLOW LAYERS Regulate change & hold all the power

Workflow How far along in the design process to start creating a design system?

Workflow In what order to create design system content

A Typography Color Iconography Spacing 39

Examples Various examples of design systems (beyond Figma)

Entur Designsystem by ENTUR

Jøkul by Fremtind

Spor by Vy

Elvia Design System by Elvia

Ruter Design System by Ruter

Material Design by Google

Tegel Design System by Scania

Human Interface Guidelines by Apple

Atlassian Design System by Atlassian

Carbon by IBM

Fluent by Microsoft

Audi Design System by Audi

Clarity by VMware

Quickbooks by Intuit

Lightning Design System by Salesforce

References • Ben Calahan, 2021 – «The Never-Ending Job of Selling Design Systems» • https://alistapart.com/article/selling-design-systems/ • Nathan Curtis, 2017 - «Starting a Design System» • https://medium.com/eightshapes-llc/starting-a-design-system-6b909a578325 • Nathan Curtis, 2015 - «The Component Cut-Up Workshop» • https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517 • Nathan Curtis, 2016 – «Picking Parts, Products & People» • https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742 • Brad Frost, 2013 – «Interface Inventory» • https://bradfrost.com/blog/post/interface-inventory/ • Interface Inventory Template • https://docs.google.com/presentation/d/1GqFmiDV_NqKi36fXAwD3WTJL5-JV-gHL7XVD2fVeL0M/edit#slide=id.p • Steward Brand, 2018 – «Pace Layering: How Complex Systems Learn and Keep Learning» • https://jods.mitpress.mit.edu/pub/issue3-brand/release/2

Thank you! Ronny Armas Siikaluoma Principal Frontend Developer & Lead Design Systems @siiron ronny.siikaluoma@noaignite.com En del av NoA-familien