TED is featured in Smashing Magazine’s new book, Design Systems

Pattern libraries are all the hotness right now. Every org that values quality UX has one. Except us.

Published in
5 min readOct 23, 2017

--

About a year ago, designer and writer Alla Kholmatova reached out to ask me if I’d be willing to share insights about TED’s UI pattern library for a Smashing Magazine book she was writing. She said her book was going to feature an interesting variety of orgs including AirBnB, Atlassian, Eurostar, Sipgate, and, if we agreed, TED. That’s pretty nice company to be in!

Nonetheless, my first response to the request was, “Well, we don’t actually have a pattern library.” I figured that was that, but she was intrigued. She’d assumed, given the quality and consistency of our site, we must have a well-developed, codified pattern library. She thought our story was worthy of note, if only because it was different from the other organizations she was planning on featuring. And, she was more interested in design systems, and systems thinking, than a strict focus on pattern libraries.

We agreed, and several months ago Alla interviewed me, my UX colleague Aaron Weyenberg, and our lead front-end developer, Joe Bartlett about the ways in which we maintain brand and UI consistency without relying on a detailed pattern library. We stressed that we’re not anti-pattern; we’re just a small, scrappy team working for a non-profit. We noted that it’s easier to keep things codified and consistent when you have a tiny team and not several dozen designers and developers working across different time zones.

“Among the people who support TED, a small handful of UX practitioners and front-end developers are responsible for design system decisions. The team has a deep shared knowledge of their patterns, which are documented in a simple way. So far they haven’t felt a need to establish a comprehensive pattern library.”—Design Systems

We also talked about the simplicity and timelessness of TED’s visual system, and how its reductive nature makes it easier to keep things from going off the rails—mostly.

We’re rarely re-inventing the wheel, mostly inflating the tires

“Instead of detailed specs, TED’s team can often use a whiteboard or low-fi paper sketch with rudimentary notes. It is then shared in person or posted in Dropbox or InVision, where the team exchanges comments and feedback.”—Design Systems

Of course, we do employ some tricks to keep things consistent and repeatable. For example, I’ve created Sketch libraries for our internal and external sites, and we tend to share our work with each other as often as possible. Plus, we’re fortunate to work with developers who have a solid sense of design and a passion for good UX. Oh, and while it’s not a pattern library per se, we do have our own set of core swatches.

TED Swatches

Behold, an animated gif of our design swatches in Sketch! This Sketch file serves as a library from which we can pull standardized UI components.

It’s also worth noting that consistency is good only insofar as it doesn’t prevent you from trying new things or breaking out of your box when the context justifies it. Like rules, patterns are occasionally meant to be ignored.

“Design acumen and sensitivity to context will always come first, even if it means that in some cases patterns will be ignored or modified.” —Me, trying to sound smart for a book

It’s still pretty neat to see my name in actual ink

After 18 months of research and writing, Alla finished the book and Smashing Magazine is actively promoting it. Last week, I received my very own copy, and am about a third of the way through. It’s a beautiful book, and well written to boot.

Seeing how the other orgs are approaching their design systems and pattern libraries is inspiring and informative. I particularly like the way the book is broken down into two major parts: Foundations (the fundamentals of designs sytems) and Process (practical steps and techniques to establish and maintain a design system). Woven throughout the book are case studies and examples from the various design teams Alla interviewed, including us. These are the topics Design Systems aims to address:

  1. How to get support for a design system in your organization
  2. How to conduct a purpose directed interface audit
  3. How to establish and evolve a shared design language within your team
  4. How to think in patterns without losing sight of the whole
  5. How to shift your team’s design process from thinking in pages to connected systems
  6. How to define effective design principles
  7. How to identify patterns early in the design process
  8. How to strike a balance between reusability, consistency, and creative expression of the brand
  9. How to eliminate duplicates and inconsistencies
  10. How to establish foundations for a pattern library
  11. How to define patterns and integrate them into the system
  12. How to document and evolve design patterns.
Image via Smashing Magazine

So while we don’t currently have a rigorous design system or pattern library, we are always looking for ways to bring consistency and scalability to our work. While I haven’t finished Design Systems,so far I’ve gleaned some great insights and ideas that will definitely be of use even to our small team. As Smashing Mag says, “The book is aimed mainly at small and medium-sized product teams trying to integrate modular thinking into their organization’s culture.” That’s us!

Design Systems is available in both digital and print versions.

--

--

Michael McWatters
Made by TED

VP, Product Design at Max | HBO Max. Formerly TED. Better after a nap.