FEM Design Systems Thinking

April 05, 2023

What is a design system?

Audience | Printed Materials, in store experiences, digital experiences | design system | brand: identify, mission, vision, positioning, brand colors

Do i need a design system?

  • scale vs longevity

scale: number of teams, maturity, complexity of the org, number of products, channels longevity: stability or market and product

If you are less than a year? maybe not

Foundations layer (fundamental)

Base branch layer

  • design principles
  • logo and typeface
  • sound guidelines
  • iconography
  • illustration guidelines
  • voice and tone
  • photography
  • motion
  • layout
  • elevation
  • how we think about color

Tokens (fundamental)

set of codified design decisions based on foundations. [token-name] = [token-value]

  • cohesive experience
  • consistent design
  • ease of change
  • multi platform support
  • type, color, spacing, elevation, opacity, radii, volume, borders, timing

core sytems layer (fundamental)

applys the tokens

  • iconography
  • layout and grid
  • theming
  • color systems
  • type scale systems
  • animations systems

Components layers

what most people think of when thinking of design systems. reusable pars of a digital interface.

  • constructed from foundations layers
  • consumers care most about this
  • buttons, search bars, text inputs, tabs, tooltips, breadcrumbs, radio buttons

Pieces

Assets

  • content files
  • ux and design files
  • dev repos
  • foundations: logo files
  • tokens layer: css primitive color tokens
  • core systems: sass layout system
  • component: figma button component

Processes

  • communication
  • goverance and testing
  • contribution
  • synchonization
  • deprecation - maintain trust
  • release and versioning
  • extension & variation
  • onboarding

Documentation

explains why something is the way it is and breakdown of how to use it

  • what do we believe about this?
  • why do we believe this?

Examples

group Foundations Tokens Core Component
Assets Logo files css primitive color tokens sass layout system figma button component
Processes communication between brand and ds teams modifying th evalue of token deprecating an old core system accepting component modifications from subscribers
Documentation Point of view on color explanation of how to name tokens hos to use the theming system breakdown the pieces of a comonent

Big takeaway

  • lots of confusion
    • develop a common language
  • teams aren't realizing the full benefits of a systematic design practice

Consistency

The layers gives some level of consistency. Design systems do not give this automatically.

Levels of consistency:

  • The buttons in my product look the same
  • All digital products we offer look and feel the same
  • Every interaction a customer has with us aligns with our brand

Efficiency

What people want from a DLS.

Levels of effiency:

  • I can design of build a feature faster
  • Our product organization gets to market faster
  • We understand each other, common language.

Stages

  1. building v1: release it
  2. growing adoption: make it easy to adopt
  3. surving the teenage years: build a product team and mindset
  4. evolving a healthy program: mature into stable leadership

origin storis

  • grassroots: executive leadership was uninvolved. less visibility, informal or no budget, unsanctioned team, narrow scope, low pressure to deliver
  • top down: high visibility, formal budget, santioned team, broad scope, high pressure to deliver
origin stage 1 stage 2 stage 3 stage 4
top down maybe on the way
grassroots multiple iterations and skunk works teams
  • clear location of documentation and single source

Mature

  1. educate: one-way interaction, create a shared understanding, case vision
  2. engage: two-way interaciton, learn from your users, give them a say in the way your system grows, recruit adoptors and contributors
  3. evolve: team effort, make the system better, iterate and test your design system assets, documenation and processes

Stage 1

Find top left (sabateur and high influence) imagine one year from today.... identify subscriber groups understand subscriber metrics design system archiologist

stage 2

  • show value to the potential subscribers and stakeholders
  • growing adoption, #1 metric is level of effort to onboard a single subscriber
  • what is the journey like? excitement vs frustration
  • define the pieces and parts that are adoptable on their own
  • define what adoption means
  • health metric, client adoption
  • maintaining adoption is about maintaining trust with your subscribers

stage 3

stage 4

  • consistency of behavior
  • trustworthy and predictable
  • proactive
  • cofiy the maturity
  • unite a system for multiple framworks

Stability

  • authority
  • tradition: the way we build
  • value

Culture

  • artifacts
  • espoused beliefs
  • underlying assumptions
  • competing values, four primary types

y: flexible to focused x: internal to external orientation

flexible/internal: do things together (clan culture) internal/focused: do things right (hierarchy culture) flexible/external: do things first (adhocracy culture) external/focused: do things fast (market culture)

moving forward

  • start how you want to end
  • measure adoption first
  • plan for using your gains
  • discoverability
  • transparency vs parity