Design system: from bookkeeping to championing

How an impact measuring tool turned into a stakeholder management system

Design system

from bookkeeping to championing

How an impact measuring tool turned into a stakeholder management system

Varya Stepanova @ Into Design Systems 2021

Me

Varya Stepanova

Design Systems Architect
engineering manager, frontend architect, independent consultant

Contacts

What the talk is about

How a design system team asked for more resources

Based on a true story

team and boss

Actually

The value of design system is not clear

Design system is a great thing! But how much exactly?

Business has no idea how DS is helping

Everyone has a deisgn system, so do we. How much it helps us? I dunno...

DS team operates feelings not numbers

We are doing great! But this is not knowledge supported by data :-(

Growing from seed

Measuring a design system

Why? What? How?

When?

Timeline

Measuring production costs

to reflect, how easier (and more cost-effective) the life is for the projects

past

Costs and savings w/o DS

1 component, 1 project

$ = production time + (support costs * component lifetime)

same component, many projects

$ = (
    production time + (support costs * component lifetime)
  ) * amount of projects

Costs and savings /w DS

1 component, in the design system

$ = production time + (support costs * component lifetime)

same component, at the projects

$ = integration costs * amount of projects

altogether

$ = $(design system) + $(projects)

Where to get this data from?

production time β€” survey, tracker, documented time

support costs - estimation

integration costs - survey, tracker, documented, estimation

component lifetime - git history, data from design files

amount of projects - github search, figma data, survey

Example: button component

production time = 10 h         integration costs = 2h
support costs = 20 h/year      amount of projects = 5
component lifetime = 3 years

costs and savings

$(without ds) = (10h + 20h*3y)*5 = 350h
$(with ds) = (10h + 20h*3y) + 2h*5 = 80h

SAVED ON THE BUTTON FOR 3 YEARS: 350h - 80h = 270h

How accurate is that?

The formulas don't have to be perfect.

They help to start a conversation with the business.

Together, you will co-create better formulas for your paricular organisation.

Costs formula, whole system

Cost savings: 752 hours = 18.8 weeks = 4 months

WOW{ .shout }

Measuring the past

1. Production costs

2. Availability of a design system

How easy to start? How fast are updates? Quality of documenttaion. Level of support needed.

3. Involvement and contributions

Design system's acceptance. Level of contributions.

Measuring the process of DS

to reflect, how DS resources are used and if they correspond to the workload

future

Workload estimation

Learn backlog capacity

"Compund" number, can be obtained from JIRA, GitHub issues, etc.

Apply given resources

Let's count our chickens

With numbers, we can

  • Set up goals
  • Build hypothesis
  • Validate
  • Speak to the business

Timeline

present
past
future

happy boss

report

Great numbers! Report to me every hour about the dynamics.

Measuring the reality

To get instant guidance towards right direction

present

Same data

But instantly available

Where to store the data?

  • Company wiki
  • Intranet website
  • Documenting system

Was not good for the business people

Shared office solutions

Excel (cloud) / Google Sheets

What DS components are used at the projects

Search script (GitHub API) -> CSV -> Excel 

Other options

Figma stats   ->
Surveys       ->   Excel
Code analysis ->

How design system is doing?

Example link: http://bit.ly/ds-matrix-example

Workflows

Workflow examples

  • Library has critical updates in particular components
  • Ask teams about upcoming changes
  • Someone is not using the component. Why?
  • Design system team is searching for contributors
  • Team search for other teams using the same component

Stakeholders

Stakeholders in teams

πŸ’‘ Color-coded based on the recent survey

Stakeholders on business levels

Link data and people

Open in-company solution

Data and the tool available for everyone in the company

For the design system team

For the teams to connect

For business people

Timeline

present
past
future

Who?

Get data from people

at projectin dsat business level
how much ds helps?production costshow do we count?
integration costssupport costsupcoming challenges
ui coverageare contributions enough?

Are you sartisfied?

How we could help?

Can you help us?

Design Systems are for people

Also available in a text version

Why? What? How? For whom?

Making design systems successful is just as much about creating a people system as it is about creating a technical or operational one.

Magera Moon,Β The people part of design systems

To build a design system, don’t start by writing code and choosing tools; start by talking to the people who will use the system. Learn about their needs and constraints, and help them solve problems.

Ryan DeBeasi,Β Design Systems Are About Relationships

To boost
aΒ design system

focus on people

connect

proven with numbers :-)

Thank you

Slides: varya.me/into-design-systems-2021

by Varya Stepanova

Welcome to hands-on-workshop.varya.me

Discount code INTODS

Credits

Icons made by Freepik from www.flaticon.com