Your System is a Language
Jeff Eaton presented “Your System is a Language” at UX Camp Winter 2021. Enjoy!
Jeff Eaton
Partner, Autogram
Jeff Eaton helps large organizations understand, model, and manage their content. For 25 years, he’s tackled digital publishing, web development, and content strategy problems for organizations large and small.
Whether he’s fixing problems with CMS architecture or editorial workflow, his work sits in the overlap between design, communications, and technology. Today, he’s a partner at Autogram, a strategic consultancy focused on the intersection of design systems and high-variance content.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Hello everybody. And thanks for us for the very kind introduction. It’s a real pleasure to be here.
So I’ll just get right into it. If you’re in UX or even just UX adjacent like I am, it’s hard to escape the idea of a design system these days, and I’m not saying that’s bad, but it feels like everybody is making a design system, maybe you have made a design system, maybe you are giving a talk about a design system, and I think it makes sense. A lot of work and a lot of dialogue, and a lot of really good thinking in our community is fairly being shaped by the need for Systems that stretch the value of our work across lots of different projects, not just individual creative artifacts, and depending on how liberally you define it, organizations have been doing that kind of work, in particular, standardizing the aesthetic and structural elements of their designs for decades. I’m a big fan of design, femora, and NASA has made their graphic guide from the 1980s available as a PDF as glorious, you can download it online if you want to, but it’s an example of that, and a lot of the same ideas have been shaping the content strategy and even the software development communities, both front and back in for years as well, this idea of breaking down the work that we do into component pieces and standardizing them and using them to improve the ways that our teams work together and the quality of the artifacts that we ultimately produce.
It’s pretty significant, and it can make a really big impact and how… In the work that we do now, I’m a big believer in the importance of metaphors, and no metaphor is perfect, but they help us understand complicated ideas using ones that we usually already grasp, and the concept of modular reusable work that shared by different people and different projects, that isn’t necessarily an intuitive leap for somebody who hasn’t worked in that kind of way before, and as a cluster of industries, we use a lot of different kinds of metaphors to talk about these component-filled systems that we create, and that’s something that’s interested in that interests me, in particular, the fact that a lot of our metaphors for explaining component-based systems like design and content modeling and stuff like that, focus on what we call the individual elements in those component systems and how we organize them, and depending on how much detail we go into what the individual properties of each component are, but that naming thing is really a big part of it, and a lot of our conversations revolve around it, atoms are atoms and molecules, or tool boxes full of tools or Lego bricks that we build things out of, and all of these metaphors shed important light on the nature of the work that we do with these systems and what we need from the systems.
And I’ll then get awkward in different ways, but today I wanna zoom in on one particular metaphor that I think we have a lot to learn from. And that metaphor is language.
The idea of a design language, not just a design system, the design language has been around for decades in product companies like Apple and Mercedes-Benz.
The land background isn’t really designed specifically, so it probably goes back much further than that, but I know that it goes back at least that far, and even beyond visual design, it’s common for people in a bunch of different industries and disciplines to talk about the shared vocabulary that designers and developers and content managers, and everybody who touches a product uses to communicate effectively with each other, and the language or vocabulary metaphor for component-oriented systems is useful because a lot of our work relies on collaboration across teams and disciplines and organizations, and by definition that cross-team collaboration requires communication, and if you’ve got communication, you’ve got language. And the shared vocabulary that people iron out so that they can just talk about the work that they’re doing with each other, becomes a tool for coordinating everyone, and in addition, it becomes an artifact after the core coordinating is done, a kind of a glossary of the way that the team has self problems. Now, on offer caveat, before we go ahead, this is a fairly abstract talk, it is not like Tori or a quick trick or a new model to accelerate your something, it’s more of a one evolving perspectives and to look behind the curtain at… Some colleagues and I are chewing on these days, it’s been really useful for us, and I hope it will be not promoting for you too, but don’t take this as a gospel, it’s more… The start of a conversation.
So the colleagues that I mentioned as Russia care, migraine, and then Mark to my partners that are in consultancy named auto-ram, and the idea of communicating across disciplines is near and dear to our hearts because… I came from a software development background, I spent years in the dot NET enterprise minds and more than a decade in open source CMS development, and then I made a kind of a hard shift over the last decade, so into content architecture and digital strategy. And Karen is one of the OG crew in the information architecture and digital design strategy world, and Ethan is an incredibly gifted designer and developer who coined the term responsive design and has championed that as well as doing a lot of design systems work over the last several years.
And the fact that we can talk to each other at all, coming from those different backgrounds, I think is a testament to the value of a shared vocabulary. I don’t wanna minimize it. Now, we usually work with clients that are big enough that without systems, without that shared vocabulary, their teams would grind to all, and occasionally we work with clients whose projects already have ground to a halt, but while there’s incredible value in that vocabulary and in the work of establishing it, over the years, we’ve really started that it’s not enough…
Teams can agree on words, but still mean very different things when they use them, and they can use those words in different conflicting ways and they can fall out of sync sometimes without even realizing that it’s happened until things collide and there are huge problems for a project that everyone thought was humming along smoothly. You can get everybody to sign off on the approved list of design patterns, and you can name them and you can document them, and you can ship the React components, and in three months, inevitably discover that somebody’s using half of those components for a radically different purpose and customizing them in different incompatible ways, and your wonderful vocabulary has been turned into a tower of Babel, and it feels like the entire world has just gone, so… Not at all. Speaking from experience on the contests, I’m just speculating, just theorizing as a side, not, This is my absolute favorite photograph in the entire world, I took it at a grocery store many years ago, and I were working into every presentation that I possibly can. Some people notice what’s interesting about it immediately, and some people don’t necessarily see the problem right away, but the labels on those four cans of cat food read turkey, chicken, duck, and getting one of those things is hopefully not like the others, its presence turns what could have been a very straightforward selection of flavors into a taxonomic or tackle dilemma, but what I love about the collision that this picture kind of represents is that it’s a problem we see in a lot of our clients, design systems and structured content models, somebody creates a CAN component names one of its properties. Variety, and everyone says, Yes, we wanna put that on there. And you can design around that, sounds good, and six months later, everything’s going fine until somebody makes a stack of cans component and put four cans into it and they’re all displayed next to each other, and suddenly everybody discovers that there were actually a number of different ways the variety could be interpreted and the system isn’t working the way you would hope on…
If we go back to that language metaphor that we’ve been talking about, I think this gets interesting because in language, a vocabulary doesn’t stand alone, the lexicon of a language, the list of words that are a part of it is only one piece of the puzzle. Words also require a supporting structure, a grammar that defines the kinds of words that serve different purposes, like Now’s verbs, adjectives, how they combine with each other to produce meaningful messages into phrases, sentences, paragraphs, ideas, and then when we talk about meaningful messages, meaningful… That implies that everyone agrees on the underlying semantic intention of the words, not just how they’re written or what they sound like, and that’s… I think that’s where it gets interesting because you apply something like that to a frontend pattern Library, and the failure of a vocabulary-only approach, just making sure everyone names things and agrees on what properties they have and then hope for the best, the failure of that approach feels a little less confusing when you think about it from this language perspective, variety may seem work a good enough name for one of the text properties and react component, and it’s not inaccurate and everyone agrees on it, and it even matches the CMS fields we’re using to populate the components, but the team also needs to agree on more than a name, they need to understand the intention and how that property will ultimately be used and what other properties of anyone… Imagine it will be combined with Ben, just straight up, is variety is a flavor of the food or is it the kind of animal they should be eating, it should title contain the title of a book or the title of the article that’s reviewing it, things like that. And asking these questions and approaching these common problems using the metaphor of language with the grammar vocabulary, meaning divide, and taking those nuances seriously has helped us get a number of stuck clients over the conceptual hurdles and shed some new light on the issues they have faith, they’re facing, it’s been really cool. Now, I don’t know about you, but to me at least, that’s the kind of aha moment that makes me wanna nerd out hardcore.
And a couple of months ago, after walking a client through one of those aha moments, Karen and Ethan and I started asking, what would it look like to take this language thing seriously, what other insights could we find by looking at our pattern libraries, we had… Our design systems, we at our content models through that one friend, let me tell you, that’s what… This is all of that. Again, with some caveats, I’ve been diving into a lot of really interesting material about language and linguistics and the study of it and how people interact with it, and how people in other disciplines have applied these applied to lessons from the world of language in the past, but I am not a linguist, the…
And doubtless an actual language who hears this talk, we’ll probably say, Sir, I object you weren’t giving people the wrong idea about our field, that’s not quite what we mean, that is very likely. This is a talk about design systems and content systems who may be even software components, but we’ll see… And the linguistics is just along for the ride and should not be blind for an inaccuracy, so I just wanna get that out of the way. But with that, on to the fun stuff, having yielded some good fruit from that grammar vocabulary, semantics, distinction, what other kinds of thorny problems could we find that make more sense through the lens of language? Umm, that’s what we started asking ourselves and you know, given our fun new hammer, what nail away us… Or let me tell you, one of the problems that we see a lot in design systems and content models with our clients that have been used in the wild for more than like six months or so, is the endless multiplication of components to handle special needs. The special case, one-off header component or a content type, it’s only ever used one, it just had to be made for the need to be filled.
Those are all over the place, but an effective design system or content model leans more on new combinations of existing things that special one-off solutions for every need, and in Linguistics, that’s referred to as the idea of discrete infinity, is the concept of… A language has a limited or discrete set of components, like phone names, words, all that kind of stuff, but infinite potential for novel combinations of those components.
Like English has a growing but finite number of words, and the magic comes from how people take that set of words within the boundaries of the grammar and use them to build unique messages and synergy, language design systems, content models, similarities. Another one is the idea that the distinction between is and out… When teams use a design system to bring order to a bunch of disparate efforts, one of the questions that were usually asked essentially boils down to, should we just capture all of the things that our designers are doing in the wild and document them, or should we come up with a big rule book of how we want things to be ideally, and then enforce that rule book, what should the design is to be… What is the design system, is it what’s happening or what we want to happen? And both of those are a little bit extreme and nobody really seems happy with either one, but it’s a tension that’s almost always there.
Now, linguistic… Sorry, linguistics has the same tension, and it’s between the prescriptive camp and the descriptive is camp.
One school of thought is that proper language has a set of hard and fast rules, and in speech or writing that violates those rules isn’t a proper use of the language, and if you’re a social sharing car doesn’t have a tag line, it’s not a proper sharing card and you can’t use it on the website. Etcetera, etcetera. The other school of thought is basically that the job of a linguist is documenting the reality of how the language is used, so that isn’t like an anarchist approach to it, they believe that there are rules that people use to turn… Whether something is correct or not, but those rules are more often informal and fluid and they reflect what’s effective at communicating messages and acknowledged as normal in every day use rather than what is specified by a central authority. And I think anybody who’s tried to manage a sort of rolling in use design system or a content model at a CMS is probably familiar with that tension. This is all, by the way, real actual merchandise from the ling enthusiasm podcast, which is glorious and excellent, but what I think is really useful about this idea is that linguistics, to decide which one of those approaches is…
Right. Grappling with the complexity of a language involves a degree of both both describing real world usage and prescribing correct. Standards, at least for certain contexts, and realizing that there are sort of two angles that we can approach from two different ways of looking at the larger system of communication helps us explain the strengths and weaknesses and complementary qualities of both.
Another one that I’m really fond of is the concept of productivity, it’s in the same neighborhood as discrete infinity as far as what aspect of language it comes out of, but it gets at a slightly different principle, basically ran the symbols in the language be combined creatively to communicate previously on imagined or unplanned messages.
I guess to explain one metaphor with another, a jigsaw puzzle is a component tied picture, it’s been broken down into little bits that it together, but you can’t use it to make a new picture, at least not without breaking the grammatical rules of jigsaw puzzles a 10-gram puzzle though, that’s another story, its pieces are explicitly meant to be rearranged and combined in different ways to produce different shapes
And design systems and content models with a lot of jigsaw puzzle components may seem fine as long as you’re building out the one thing that they were planned for, but if you can’t figure out how a component would ever be reused or the majority of your components are hyper-focused and difficult to adapt to other contexts, your system will struggle long term, and we’ll probably end up just accumulating more and more, and more and more one-off components rather than achieving the sort of flexibility and reuse that you’re hoping for…
I don’t think we’ve ever seen a design system or a content model that didn’t have to deal with exceptions, we talked about that a little earlier, but all some exceptions in the form of teams that needed to add fields to content types or override behaviors in a pattern, or a React component or something with that, or variations on the accepted standard versions of things for their project or their product, organizations tend to either freak out and try to stamp out those edge case half from tweaks and oftentimes fail because they’re often based in real needs, or they give up and they shrug and they accept that the whole consistency thing is just sort of a pipe dream, and they just say, and maybe we’ll fix it in version 2 of the design system now, rather than treating those pockets of unique usage as a symptom of brokenness, the lens of language gives us a different way to look at them basically as unique dialects or maybe regional slang or something like that.
But it allows us to frame that less, I guess less compatible in language, the catch-all term for it is like linguistic drift, and it’s actually how innovation happens, that’s how new languages form and new words appear. It’s so cool. Now, team still need to figure out in the context of systems that are being maintained when to absorb those edge cases into the mainstream, like If fetch happens, Will it appear in the dictionary or will it just stay on the margins, but it doesn’t have to be cause for alarm inherently, and often it’s where the next big thing emerges or where new needs are spotted.
Okay, so here’s where it’s kind of wild, there isn’t really time to get into the details in this talk, but this particular scenario is when we’ve been seeing more and more, especially in big marketing organizations and corporate sites with lots of promotional and communications needs and high loss entertainment news companies too.
I’ve heard people talk about this also is like the landing page problem or rich long form content, or sometimes they just set up a square space to color use Gutenberg. I tend to think of it as the 800-pound gorilla in the content design room, but whatever you call it, the problem crops up with teams when they produce enough material to meet the rigor of a good content model and consistent modular design, but they’re page by page, interaction, right? Interaction needs vary so much that they can’t rely on canned templates like article or interview or profile or event details. The most common solution right now seems to be giving people like a catch-all content type or a container that can hold smaller components like cards and hero rotator and wrinkles and rich text, and that approach can work, but doing it well requires that you’ve built useful rules around what components can be used, where and what combinations are valid, and it requires training the content debaters to understand not just what the various modules they’re placing and using to assemble message, not just what they look like, but also what their communication intent is.
So the design tweaks in the future changes to the system or changes the styling, don’t sort of pull the rug out from under them and result in a kitten flavored cat food situation where what they put in seemed right, but in new context, it just goes terribly wrong. And oh, month, you start putting those pieces together and suddenly you’re talking about providing not just a vocabulary components, but also a grammar of how they work together and the semantics of shared understanding of the meaning of how they’re used in congratulations. Your modular content is now a language that you use to communicate with your end users inception. Now, I’m pretty sure this is where hearing and Ethan say that I am, and I quote back on my bullshit, but we do what we have to do in these troubled times to get by, so you find your happy place, and sometimes you just gotta take a metaphor all the way and enjoy it. Anyways, we’re running for on time, I will dial it back a bit and I’ll get back, I get us back on to some traditional takeaways, if you work with a system of communication like a content model, pattern library, design system, what ideas can you take back and apply practically, without building a conspiracy theory wall to explain it to your co-workers…
At least right now, I’ve got two.
First, it’s pay attention to the connections between things, and probably a little too fond of using atomic design is my go-to example of grammar list vocabulary for component design. Brand Frost is pretty explicit about the fact that he sees the atomic design vocabulary of atoms and molecules and organisms and so on as a starting point, not a magic wand, but a lot of teams start and end with the idea of define your atoms to find your molecules design the organisms and just start laying out pages, but then they get frustrated when the vocabulary doesn’t really capture the interactions we’re talking about, or does it capture the boundaries quite… Right. Of the different types of things that they have. And if your teams are hitting that point with any system, not just atomic design, is worth spending some time paying attention to how the components connect to each other, how they relate to each other, both technically and like its code and visual elements and conceptually is like the building blocks in your designers and your team member’s heads, sort of pushing ahead with this idea of atoms and molecules, caffeine is a molecule near and dear to our hearts, and it’s not just a pile of hydrogen and carbon and nitrogen, oxygen, it’s…
Those things were arranged and connected in very specific ways, and a very specific set of potential interactions that are implied by the connecting points at the edges that remain unused, and that style of notation to capture that isn’t random or ad hoc, and depending on how much tension I paid in high school chemistry, you might remember that as Louis notation, it is it explicitly designed language for talking about the links, the whole molecules together, it’s like, I guess the grammar of Adams and oftentimes, even if you’re working with a system that you think lacking closer at the connections between the pieces will reveal some kind of meaningful Grammer and teasing that out and developing it and sometimes help you make progress when things feel stuck. Second, be sure you plan for system-level consistency, not just component level consistency, the way elements connect to each other and a grammar, we’ve been talking about… It can have far-reaching impact. Sometimes much farther than any nidal component. Because in a way, it’s like a promise to your future self, and if you mess up those rules that you’ve made changing them, the future breaks all of the components that rely on them from a language perspective, it’s like it would suck if the word Apple vanished tomorrow but it would be way worse if the concept of nouns went away entirely and we had to come up with some entirely new way of categorizing words. My Hampton wrote a really excellent article last year, it’s partially about measuring the business value of design systems, but also the underlying nature of those systems and how the consistency of their rules is what keeps the system valuable even as the individual pieces change and evolve.
She says the most important aspect of Leo is not so much the bricks themselves, but the system of tubes and stubs that holds them together, a brick made today will still connect with the first one produced in 1958, and as you iron out the grammar of your systems the ways that we connect, ask yourself like what other kinds of pieces could play by those rules too, even if we don’t need them, and when you throw hypothetical curve balls at your system, like Can you figure out how to construct good answers to those questions within its rules, or you have to sort of toss everything and start over and start making more special cases and special exceptions, it’s impossible to plan for everything, but pay attention to how much room you giving yourself to grow and what you would have to break in order to give yourself more.
So finally, if this idea of treating your system like a language in treats you, then I would say keep digging.
We’ve found it really valuable, especially for teams that deal with lots of that high variation content we were talking about, but as far as I can tell, this idea hasn’t really been discussed a lot in the context of our industries, and it’s a perspective not like a system, and other perspectives would be great, so lessons from other teams, examples from other systems or projects you’re working on, it could really help us figure out if we were onto something fundamental or if we’re just like polishing the edges of one more metaphor.
So give me a shout on Twitter, we would love to hear from you and what you think, and obviously if your organization is wrestling with some of the stuff, we’d love to get together and talk about them.
Thank you.
