Information Architects: The Missing Link in Design Systems

This is a talk I gave at the IA Conference on April 13, 2024 in Seattle, WA. Additional resources are available in this companion Medium article

As design systems mature and scale, the need for organization, hierarchy, taxonomies, controlled vocabulary, and more becomes apparent. This work is all second nature to information architects, but design system teams often overlook the need for this role. Likewise, not all information architects know about this wonderful opportunity of participating in creating a design system. This talk covers the opportunities from documentation site structure to defining component labels to design token taxonomy and naming conventions that await information architects. By the end of the talk, you’ll have an idea of how information architects can help shape and structure design systems for long-term success!

Transcript

1. Information Architects: The Missing Link in Design Systems Michelle Chin she/her Design Advocate @soysaucechin IA Conference 2024
2. Overview • Design systems overview • Design token basics • Design tokens + information architects • Getting involved with design systems
3. 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
4. Who creates design systems? Designers Developers Content Designers
5. 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)
6. 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.
7. What are design tokens? Design tokens can represent: • Colors • Sizes • Font details • Timing • And more! #EF6C00 color-primary 48px space-xxl
8. 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" }
9. 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
10. 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" }
11. 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
12. 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
13. 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
14. 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
15. 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?
16. 1: Design token taxonomy With the team, you can help: • Determine a controlled vocabulary with the taxonomy • Identify any additional hierarchy needed
17. 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.
18. 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.
19. 2: Naming convention–sequence system category concept property state size system category concept property state size or system category concept property state size or
20. 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?
21. 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
22. 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?
23. 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?
24. Getting started Ask around • Design system team • Designers, developers, content people • Brand/marketing
25. 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!)
26. 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
27. Who creates design systems? Information Architects Designers Developers Content Designers
28. 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