The Short Story
I audited Spreetail’s design system’s current guidelines around language and implemented a re-organization and added new guidelines for practical use cases.
Spreetail’s design system isn’t public, so you can check those out here and here.
Meta and Toolkit and Bears, oh my. Okay, actually, no bears.
Meta is the design system for Toolkit, Spreetail’s internal system that includes tools for all aspects of the business, from shipping and logistics to vendor management. Meta may be used by designers, front end engineers, or project managers. The language guidelines guide the microcopy used throughout Toolkit.
So, how do you decide if copy guidelines are “good?”
First, I conducted an audit of all current language guidelines in Meta. Prior to my work, all language-related design system guidelines were under the “Grammar” header. These guidelines ranged from a primer on voice vs. tone to capitalization guidelines.
Next, I did a language audit on the ten most used Toolkit pages. I wanted to better understand any areas where further guidance could create more consistency and clarity in Toolkit’s microcopy.
I also discovered that the language section within Toolkit was very under-utilized – most stakeholders didn’t know what was in the language section, so many copy conversations were happening ad hoc without checking Meta for guidance.
Finally, while people could understand the concept of some guidelines, they struggled a bit with how to apply those guidelines.
Making it easy to find what you need, when you need it.
After my language audits, I proposed breaking the language guidelines into three sections: Grammar, Voice & Tone, and UI Content.
Grammar encompasses all general grammar guidelines within Toolkit – elements of microcopy such as use of nouns and pronouns, capitalization, punctuation, and which style guide can be referenced for grammar questions that aren’t covered.
The Voice & Tone section educates Meta users about the less cut-and-dry aspects of microcopy. It includes the elements of the Toolkit voice, and examples to make speaking in that voice easier for an inexperienced user of Meta.
UI Content covers specific ways microcopy is used in Toolkit – such as on buttons, empty states, or forms.
My other contributions
Not much changed in the Grammar section. Some subsections were moved to other language areas, and I edited some copy for clarity. I also added a section that explicitly addresses racist & sexist language.
The Voice & Tone and UI Content sections are where most of my contributions live. My language audits, paired with discussions with designers, called attention to the fact that Meta users needed more concrete guidance around microcopy in specific common use cases.
Since most users had difficulty understanding how to implement Meta’s voice principles, I added further clarification to the current system’s pattern of “Toolkit is <x>, but never <y>” by changing it to “Do this: <x>, Not this: <y>.”