How to name your Design System

Adam Stokes | Senior Content Designer at Purplebricks

Design Systems come in all shapes and sizes, but if there’s one thing the majority of them have in common, it’s usually abiding by a distinctive naming convention—whether that be an acronym, abbreviation, unrelated proper noun or otherwise.

So with the likes of Polaris (Shopify), Nachos (Trello), Lightning (Salesforce) and GLUE (just one of Spotify’s many) already setting an example—what can we learn from some of the design industry’s leading players when it comes to choosing that all important name for our Design System?

Explore how we went about forming the name for our new Design System, and how you can use similar methods to ensure you’re putting the right amount of thought and effort into branding your internal tools.

Well, it was quite the journey…

Step 1. Market research

We started by conducting market research to get a good gauge of certain industry practices, as well as understanding what was already out there. This helped to segment the approaches that many leading design teams take, while also helping to kickstart the creative juices for our own brainstorming sessions to come.

Clearly, there are a variety of approaches that can be taken.

I went about defining and segmenting the approaches taken by the teams at Airbnb, Google, Government Digital Service, Gymshark, Spotify and many others. This left us with a handful of templates we could consider when approaching our own naming convention:

  • Acronym
  • Abbreviation
  • Branded abbreviation
  • Explicit naming
  • Related proper noun
  • Unrelated proper noun
  • Unique descriptor
  • [Adjective] + Design System
  • [Noun] + Design system

Step 2. Agreeing a format

Off the back of the market research and categorisation, I presented the design team with our possible options, and gave us all 3 vetoes to help narrow down the avenue we were going to pursue. This helped to influence more informed, targeted brainstorming by not casting the net too wide. It also helped us to get a good surface level agreement from the team as to the naming conventions we wanted to explore, very early on. The results were pretty unanimous:

Turns out abbreviations, acronyms and the plain old branded approach wasn’t for us.

Not a single veto was cast against option number 4, while we only had a small number of votes against the Unrelated noun category, which meant we were ready to get started.

Step 3. Brainstorming and brick voting

It was time for us to start submitting our ideas into our respective categories of [Noun/adjective] + Design System and Unrelated noun. With a design team of 13, we ended up collating 67 ideas in total—which also meant we needed to trim that back down before proceeding with a shortlist.

This included giving every member 3 sets of purple bricks (hold for applause), to use as ‘brick votes’, effectively ruling out an idea. While this meant dismissing some ideas before they even had time to make an impression, with a brainstorming session so productive, it was the only way to start honing in on what we had compiled.

Just some of the ideas submitted along the way.

Naturally we paid respect to the names that, unfortunately, were not meant to be. Amethyst Design System, you will be missed—but on the plus side, it’s still out there for the taking!

Some of those that didn’t make the cut.

Step 4. Casting our votes

With our original 67 ideas now whittled down to 28, it was time to flip the vote and let the team identify those we did like. So, we conducted a dot voting session, where all members of the team had 5 votes each to cast however they liked. This meant we could disperse all 5 votes across 5 individual ideas, or equally place them all on a single idea, if we felt particularly strongly about it. Once the voting was complete, we had trimmed 75% of the shortlist, and were down to just 6 final ideas to take to the polls—3 from our [Noun/adjective] + Design System category, and 3 from our Unrelated noun category.

The final 6, whittled down from more than 10x that amount in the most superfluous act of democracy seen in some time.

Step 5. The final vote

Once we had finally collated a reasonable amount of contenders, we took our shortlist to the polls. This meant opening up the vote to our wider Design System Guild, which is a multi-disciplinary group.

It was important to get involvement from all representations at this stage, given how our design system is utilised. Hosted on Zero Height, Blueprint Design System is much more than just a component library, but a go to for styles, components, patterns and content for UX, UI, Product and Content Designers, as well as our Front End and QA Engineers.

Step 6. And the winner is…

Once everyone had placed their votes, we tallied them up and crowned the winner.

The new name for our Design System.

While the output of our efforts can be condensed to three simple words, the activity itself was important to ensure that we, both as a team and wider department, were happy with our newly crafted design system and the way we were going to continue to refer to it. That it was memorable, made sense and was going to stick.

It had to have meaning and value. And for us, that meant crafting a reasonable yet characterful option that carried meaning in its usage as a design tool, while also containing a nod to the industry in which we work.

From the preliminary market research through to agreeing a template and beginning the brainstorming and voting activity, the exhaustive approach meant that we left nothing down to chance, and everyone had an opportunity to contribute towards a lasting decision.

Blueprint Design System will be publicly accessible soon…

--

--

--

Stories and ideas from Product, Design and Engineering 📚💡

Recommended from Medium

Designing VR: Adrienne Hunter from Osso VR

CROSS CHANGE CURATED #1 revisiting relations with resources

You can’t connect the innovation dots looking forward; you can only connect them looking backwards.

10 must-have features of virtual event planning platforms

How to make good decisions.

Top adorable Emoji Brands for your next Mobile App or Web

Twitter Emoji Twemoji

Instagram Concept: An Alternative to Scrolling Past Posts

Glass Scratch Removal Near Me? | May Not Be Best Option

Glass Scratch Removal Near Me? | May Not Be Best Option

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Stokes

Adam Stokes

Principal Content Designer

More from Medium

Animasi text field dengan Smart Animate di Figma (Part 2)

Project 1: Wicked Problem 🧙‍♂️

What Is Responsive Web Design?

UX and the technology stacks