Ruter Design System A design system for public transport 12.2.2019 Christian Nordström, Design Manager, Ruter Ingrid Hagelund, Designer, Making Waves Ronny Siikaluoma, Designsystem Lead, Making Waves

60+

50%

DIGITAL

VEHICLES

WAYFINDING

INDUSTRIAL

PRINT

SERVICE DESIGN

MARKETING

EXPERIENCE

OUTDATED

Defining

DESIGN SYSTEM MATURITY Living Design System A process built into the organization Automatic Reusable components as part of application build process Hard-to-cross «chasm» for most organizations Manual Style Guide Simple copy/paste code snippets Static One-time PDF with brand guidelines Inconsistency The lack of a design system

DESIGN SYSTEM MATURITY Living Design System A process built into the organization Automatic Reusable components as part of application build process Hard-to-cross «chasm» for most organizations Manual Style Guide Simple copy/paste code snippets Static One-time PDF with brand guidelines Inconsistency The lack of a design system

DEFINING THE DESIGN SYSTEM Product What is offered?

DEFINING THE DESIGN SYSTEM Product What is offered? UI Kits Code components Documentation

DEFINING THE DESIGN SYSTEM Operations Product How to cooperate? What is offered? Planning UI Kits Tools Code components Communication Documentation Management

DEFINING THE DESIGN SYSTEM “Ruter Design System consists of tools, components, guidelines and processes that enable teams to create rich, cohesive and meaningful experiences.”

Tools

TOOLS RuterBrand https://ruter.frontify.com RuterComponents https://components.ruter.as

WHERE DO YOU SAVE YOUR DESIGN FILES? Ruters Dropbox My companys Dropbox My personal Dropbox Locally on my machine Google Drive External hard drive Ruters file server My companys file server Axure team-disk 0 2 5 7 9

TOOLS Abstract Sketch Libraries Sketch App

TOOLS React Sass

TOOLS React Lerna Sass Webpack Babel

Essentials

COLOR

COLORS

CSS Stats https://cssstats.com/

COLORS

DESIGN TOKENS

COLORS AS DESIGN TOKENS YAML COLOR_RED_10: “#A20000” COLOR_RED_20: “#B80000” COLOR_RED_30: “#D60606” COLOR_RED_40: “#E60000” COLOR_RED_50: “#EB3333” COLOR_RED_60: “#ED4D4D” COLOR_RED_70: “#F28181” COLOR_RED_80: “#F7B3B3” COLOR_RED_90: “#FACDCD” COLOR_RED_100: “#FDEBEB”

DESIGN TOKENS SCSS Design Decisions CSS JSON Web iOS YAML SWIFT XML UI Kit Android

COLORS AS DESIGN TOKENS YAML COLOR_RED_10: “#A20000” COLOR_RED_20: “#B80000” COLOR_RED_30: “#D60606” COLOR_RED_40: “#E60000” COLOR_RED_50: “#EB3333” COLOR_RED_60: “#ED4D4D” COLOR_RED_70: “#F28181” COLOR_RED_80: “#F7B3B3” COLOR_RED_90: “#FACDCD” COLOR_RED_100: “#FDEBEB” SCSS $colors-map: ( ‘color-red-10’: (#A20000), ‘color-red-20’: (#B80000), ‘color-red-30’: (#D60606), ‘color-red-40’: (#E60000), ‘color-red-50’: (#EB3333), ‘color-red-60’: (#ED4D4D), ‘color-red-70’: (#F28181), ‘color-red-80’: (#F7B3B3), ‘color-red-90’: (#FACDCD), ‘color-red-100’: (#FDEBEB) ); CSS :root { —color-red-10: #A20000; —color-red-20: #B80000; —color-red-30: #D60606; —color-red-40: #E60000; —color-red-50: #EB3333; —color-red-60: #ED4D4D; —color-red-70: #F28181; —color-red-80: #F7B3B3; —color-red-90: #FACDCD; —color-red-100: #FDEBEB; }

SPACING

SPACING NONE XXXS XXS XS S M L XL XXL XXXL

VS

.rds-mycomponent { @include p(spacing-m); } .rds-mycomponent { padding: 1.5rem; } /* 24px / .rds-mycomponent { @include pr(spacing-m); } .rds-mycomponent { padding-right: 1.5rem; } / 24px / .rds-mycomponent { @include my(spacing-xl); } .rds-mycomponent { margin-top: 3rem; margin-bottom: 3rem; } / 48px / / 48px */

<MyComponent className=”rds-p—xs”> My Component </MyComponent> <MyComponent className=”rds-p—xs rds-p—xl@l”> My Component </MyComponent>

SPACING AS DESIGN TOKENS YAML JSON { SPACING_NONE: ‘0px’ SPACING_XXXS: ‘2px’ SPACING_XXS: ‘4px’ SPACING_XS: ‘8px’ SPACING_S: ‘16px’ SPACING_M: ‘24px’ SPACING_L: ‘32px’ SPACING_XL: ‘48px’ SPACING_XXL: ‘64px’ SPACING_XXXL: ‘128px’ “SPACING_NONE”: “0px”, “SPACING_XXXS”: “2px”, “SPACING_XXS”: “4px”, “SPACING_XS”: “8px”, “SPACING_S”: “16px”, “SPACING_M”: “24px”, “SPACING_L”: “32px”, “SPACING_XL”: “48px”, “SPACING_XXL”: “64px”, “SPACING_XXXL”: “128px” } JS ARRAY module.exports = [ {key:’SPACING_NONE’, value:’0px’}, {key:’SPACING_XXXS’, value:’2px’}, {key:’SPACING_XXS’, value:’4px’}, {key:’SPACING_XS’, value:’8px’}, {key:’SPACING_S’, value:’16px’}, {key:’SPACING_M’, value:’24px’}, {key:’SPACING_L’, value:’32px’}, {key:’SPACING_XL’, value:’48px’}, {key:’SPACING_XXL’, value:’64px’}, {key:’SPACING_XXXL’, value:’128px’} ]

COMPONENTS

Block - Element - Modifier

Block - Element - Modifier

Team

DESIGN SYSTEM TEAM Christian Nordström Design Manager Ronny Siikaluoma Design System Lead Martin Dahl Frontend Developer Marte Mettenes Frontend Developer Maria Sætre Designer Ingrid Hagelund Designer Åse Lindersen Delivery Manager

DESIGN SYSTEM TEAM Christian Nordström Design Manager Ronny Siikaluoma Design System Lead Marte Mettenes Frontend Developer Ingrid Hagelund Designer

ORGANIZING THE TEAM Makers Users Customers

DESIGN SYSTEM TEAM

Takeaways

SHARE

PROTOTYPE

ASSIST

GET FEEDBACK

REACH OUT