Maturing to Content Elements
Late in 2019, just seven months after the launch of Uniform, I shared a brief look at how we made words a focus of every possible guideline. Not the words within the design system (though those were important), but the words within the product itself.
The tl;dr boils down to two key features. First, we added a Microcopy anchor for any component where writing may come into play. Second, we created a full-blown “words” section of Uniform — called Words. At the time, it had a decent selection of overarching content guidelines not tied to a specific component, but still relevant to building the product. Voice and tone, using “your” or “my”, and tying CTAs to the headline were all part of our first release.
We were trying to serve a larger audience than the design system was meant for.
Even then, we knew there would be updates and additions, and were able to accommodate a number of new guidelines without major organizational changes — which is crazy, seeing as our two subcategories were titled “Copy” and “Voice & Tone”. One had everything, the other had exactly what you’d expect. We didn’t realize it at the time, but we were trying to serve a larger audience than the design system was meant for.
It wasn’t until we began our work on patterns that the need for an improved structure came to light.
Identifying Content Elements
The very first pattern we created for Uniform was the empty state. After that it was forms. Two patterns made almost entirely of content. But we didn’t want the pattern guidelines to turn into content guidelines, and we didn’t want content guidelines to live under Patterns and Words. That would just create the original problem Uniform was built to solve — scattered info people may never be able to find.
And if you’re wondering how this is different than the Microcopy anchors (which exist in patterns like they do in components), we use those sections to discuss how content should plug into a specific item, not how the content is actually written.
So yes, we could do the same thing we’d done for components in keeping the Microcopy anchors while also adding relevant guidelines to Words, but there’s still the trick of connecting what’s in Words to a specific pattern.
That’s when our Lead Information Architect, Caroline Sheridan, introduced us to the concept of *content patterns and their content elements.
In order to create any content pattern, you need specific elements. Think date and time, calls-to-action, team abbreviations, event details — all things with a number of possible formats that can and should be standardized before even being added to the pattern.
That formatting is exactly what makes the pattern content different from our other words. It doesn’t flex depending on context like headlines or body copy would. It’s the same everywhere, so how do we avoid writing the same guidelines every time one element appears in a number of patterns?
It was time to revisit Words.
Burying Voice & Tone
Housing content elements under Copy would make sense, but it would also make Copy even bigger while Voice & Tone stayed relatively small. It would also hide the content elements, which are absolutely necessary to creating effective content patterns. Could we just create a third section for content elements? Sure, but would they all carry the same weight?
Everything would make sense in one section, which may as well be Words.
Copy was already lot heavier than Voice & Tone, and we had a hunch Content Elements would be just as meaty. Not only that, but the three didn’t feel overtly different from each other. Voice & Tone dealt with a lot of copy, and content elements are actual copy, so technically everything would make sense in one section, which may as well be Words — and we did not want to do that.
So we demoted Voice & Tone. This sounds bad, but it wasn’t large enough or important enough to the product designers and engineers Uniform was meant to serve. It still mattered, just not to the extent that it should sit alongside the Great and Powerful Copy.
But we also renamed Copy to “Writing Guidelines” and turned that into the spot for actual overarching tips and tricks. Voice & Tone now lives there, as does when to bullet lists, how we write emails and what punctuation can do. Now, no matter your role at Hudl, you can visit Writing Guidelines specifically and feel comfortable perusing the subsections for universal info.
Tying to Patterns
With Writing Guidelines housing pretty much the entirety of Words 1.0, we’d officially made room for content elements to sit front and center, and I’d love to tell you the decision to name this new section “Content Elements” was quick and easy, but that’s not how my brain works.
We considered “Product Copy”, “Formatted Content”, even “Pattern Content” which is literally Content Patterns (a section we fully intend to create) in reverse.
Thankfully, Caroline swooped in as the voice of reason again, and called out that if we were committed to clearly categorizing Content Patterns, we should just as deliberate with Content Elements. Not only would the titles alone connect the two, but we’d make extra sure to cross-reference pages whenever possible.
With the new section created (and named), existing pieces like Date & Time, CTAs and labels were transplanted to Content Elements, and we’ve since created guidelines for event details, team details and action words — arguably the most common elements in Hudl.
We still have an entire Patterns section to build out before Content Patterns becomes its own bit, but knowing exactly how those guidelines can and will link to the elements has us excited to tackle the two in tandem. Our goal is to identify additional patterns and extract the elements first. That way the building blocks are already in place once the larger guidelines are released.
Things like invoices, schedules and profiles call for more information on dollar amounts, scores and abbreviated positions, just to name a few. It’s a lot to plan, but having clear homes for everything should at least help streamline the publish phase of every update.
