Information Architects: The Missing Link in Design Systems Michelle Chin she/her Design Advocate @soysaucechin IA Conference 2024

Overview • Design systems overview • Design token basics • Design tokens + information architects • Getting involved with design systems

But first, what are design systems? A design system is a collection of reusable components, patterns, and usage guidelines. Teams use design systems to create websites and apps with efficiency and consistency. Foundations Design libraries Code libraries Documentation guidelines

Who creates design systems? Designers Developers Content Designers

The evolution of design system trends* Pattern Libraries Style tiles Atomic design Reusable components in design and code tools Design tokens *general evolution (some orgs evolved faster than others)

What are design tokens? A design token is a shorthand phrase that represents a collection of UI specs and their usage. Teams have the freedom to create and label design tokens as they see fit. Hi, shredded potatoes with spicy jalapeños, diced hickory smoked ham, and melted cheese, please. Hi, hashbrowns peppered, chunked, and covered, please.

What are design tokens? Design tokens can represent: • Colors • Sizes • Font details • Timing • And more! #EF6C00 color-primary 48px space-xxl

Designers and developers use design tokens as a dialect to represent information in ways they understand. Design token color-primary What are design tokens? Design bits #EF6C00 Code bits { "color-primary": { "$value": "#EF6C00", "$type": "color" }

Why design tokens? Design token color-primary Design bits #EF6C00 Code bits { "color-primary": { "$value": "#EF6C00", "$type": "color" } Serve as a repository of design decisions Controlled vocabulary Allow for global changes at scale Provide context for design choices

Why design tokens? Design token color-primary Design bits Code bits Serve as a repository of design decisions Controlled vocabulary Allow for global changes at scale Provide context for design choices #004F59 { "color-primary": { "$value": "#004F59", "$type": "color" }

Providing context to design choices… Colors Devices UI elements Sizes Opacity States Themes …is overwhelming! Primary Secondary Alert Blue Green Grey100 Medium Thin Thick xs 8px rem em Inactive Loading Default Enabled Active 100% 40% Medium Full Half Light Dark Flagship High-contrast Sub-brand iOS Android In-flight Desktop Watch Mobile Border Fill Radius Background Shadow

Naming is hard! Design system makers are in uncharted territory • No standards for naming • Ultimate flexibility with building a system of tokens • Tokens are foundational structures, so (self-imposed) pressure looms

How information architects can help We need information architects to help make sense of this mess! 1. Design token taxonomy 2. Naming convention–sequence 3. Naming convention–labels 4. Mapping and documenting tokens

1: Design token taxonomy Design tokens have a basic hierarchical classification. color-blue #004BAD Core tokens represent raw values color-info Semantic tokens represent intended use color-info-banner-border Component tokens represent the specific element of a component

1: Design token taxonomy Taxonomy Core Semantic Component • token levels • token types • token tiers • token layers • token groups • base tokens • basic tokens • brand tokens • choice tokens • first-tier tokens • foundation tokens • global tokens • meta tokens • option tokens • palette tokens • primitive tokens • alias tokens • application tokens • applied tokens • common tokens • purpose tokens • second-tier tokens • semantic tokens • overwrites • overwrite tokens • scoped tokens • third-tier tokens Controlled vocabulary, anyone?

1: Design token taxonomy With the team, you can help: • Determine a controlled vocabulary with the taxonomy • Identify any additional hierarchy needed

2: Naming convention–sequence Hi, I’d like a hot, grande, hazelnut, oat latte, please. color-info-banner-border Creating a logical sequence for token names helps people read the shorthand.

2: Naming convention–sequence temperature size syrup milk drink hot grande hazelnut oat latte Hi, I’d like a hot, grande, hazelnut, oat latte, please.

2: Naming convention–sequence system category concept property state size system category concept property state size or system category concept property state size or

2: Naming convention–sequence There’s no right or wrong answer. As a team, you can help figure out: • What order works best for our design system? • What elements get included in the order? • When people read this, do they understand the dialect?

3: Naming convention–labels Size Small Medium Large X-large X-small sm md lg xl xs 2 3 4 5 1 muskrat nutria beaver capybara vole

3: Naming convention–labels • What do we call these facets? • What are the labels within each facet? • What scales are we using and when? • What makes most sense for our products? • Are these labels easily understood?

4: Mapping tokens • How do we map tokens so people know how they’re related? • How do we document design tokens so people know what to use and when?

Getting started Ask around • Design system team • Designers, developers, content people • Brand/marketing

Getting started Ask around • Design system team • Designers, developers, content people • Brand/marketing So, an information architect walks into a bar… A who?! Advocate for the field and the people • Many design system makers don’t know much about information architecture. • If they do, it’s about organizing their docs site. (Also a great opportunity!)

There’s room for you to participate! • Design systems aren’t just about design and code bits • Naming and organizing design tokens is difficult • This space is new to many and not completely defined

Who creates design systems? Information Architects Designers Developers Content Designers

Let’s get nerdy! • More resources: bit.ly/tokens-for-ia • LinkedIn: michelletchin • @soysaucechin So, an information architect walks into a bar… ...and after scanning the room, comments, “This place could really use some breadcrumbs, I have no idea how I got to this point. Joke by ChatGPT