FEM Design Systems Thinking
April 05, 2023What 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
- building v1: release it
- growing adoption: make it easy to adopt
- surving the teenage years: build a product team and mindset
- 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
- educate: one-way interaction, create a shared understanding, case vision
- engage: two-way interaciton, learn from your users, give them a say in the way your system grows, recruit adoptors and contributors
- 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
- adding disciplines to your team
- https://sparkbox.com/foundry/design_system_consistency_versus_flexibility_design_system_constraints
- selling DS: Rick Rubin, The creative act: A way of being
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