Every design system should have voice & tone defined

Isn't a design system without a defined Voice & Tone just a visual style guide?

Xindeling Pan
Sep 18 · 5 min read

After creating many Design Systems for different clients, I realize that the power of Voice & Tone has mostly been undervalued, or even ignored. Even though I always believed in the way a brand sounds is just as important as the way it looks, I didn’t appreciate how much Voice & Tone could make my design life easier until I saw the effect first hand. So today, I want to share a story on how Voice & Tone can help not only represent your brand, but it can also clear up tactical decisions.

One day at work, a designer on my team presented a new page design for an e-commerce website called the “Resources” page. The purpose of the page was to provide answers to FAQs, contact info, and tips on how to use its service. No one from the scrum team, including stakeholders, liked the page name ‘Resources’ because it didn’t seem to be very helpful. So in the new design, we changed the page title to “Support” in the top navigation instead.

“Why don’t we use Help?” a stakeholder asked.

I was puzzled because the design team thought “Support” sounded better as a page title. We were not able to land on a conclusion of which one was better because no one had a strong argument for or against either term.

So, it was time for some research.

Apparently “Help vs Support” is a debate I was completely unaware of. There have been many discussions about those two words. First, let’s take a look at the definition from the dictionary. Based on definitions from Merriam-Webster, it’s not hard to tell these words are synonyms because each of the words has been used to define one another.

definitions from Merriam-Webster
definitions from Merriam-Webster

Psychologist Brendan Mooney used an imaginary line to draw the differences between the two in his article.

“If we imagine a line, when we support someone we essentially go all the way to the line, but not beyond it.”

“Helping another is when we essentially go over the line and enter into the other person’s space in an attempt to bring them to the line.”

His theory aligned with my understanding of the two words, where I found “Support” to sound more professional while “Help” has some sort of emotion attached to it.

My favorite definition found on the internet is a comment from this thread

“Help is free… Support costs more money…”

In addition to my secondary research findings, I created two polls with two internal design groups, asking about their preferences on the two words as a page title. Unfortunately, each group had a different preference, but “Help” got more votes.

“Customer Service” was recommended as another option because of its popularity among e-commerce websites. However, we couldn’t afford to have a two-word title in the design.

As time went by, we needed to make a decision so that we could close the user story by the end of the day.

Suddenly I realized that I missed a very important aspect: Why not refer back to the Voice & Tone principles I just established for the new Design System from the last sprint?

The first trait of the brand voice is “Welcoming & Friendly”.

Well, I quickly saw the clear winner here, “Help.”

Even though both “Help” and “Support” imply the idea of assistance, “Help” sounds more friendly. It’s probably because Help will go over the line and enter our personal space, like the imaginary line concept we discussed earlier.

This is just one example. When I referred to a defined Voice & Tone, it helped me frame up the problem in context of the feeling I wanted the customer to have. To create a human connection between the customers and the brand, I thought of the brand as a friendly person and this person would rather offer HELP (warm) than SUPPORT (cold).

A friendly and welcoming shopping experience
A friendly and welcoming shopping experience
Photo by Christiann Koepke on Unsplash

Content is like the quieter child we tend to ignore, but it’s everywhere when you think about it. Writing is part of a design system from the moment we start to define the Typography. I have designed, managed, and developed several design systems in my career, but not every Design System consisted of a section about Voice & Tone. The majority of the time when we build a Design System, we heavily focus on creating components, colors, icons, etc. Voice & Tone is often on the low priority list. Since then, I wouldn’t consider the Design System complete without the Voice & Tone defined.

Voice expresses the brand personality and values via words in a consistent style through all communication channels. Tone is the attitude that changes based on the audience and occasion. Without them, you may have two webpages that sound like two different people. Especially in this world of e-commerce, how you sound in the content will lead your customers to form an imaginary personality unconsciously, since your customers won’t meet you in person.

Every brand has its own personality and voice
Every brand has its own personality and voice
Photo by Morning Brew on Unsplash

Having a well developed Voice & Tone can also help your brand stand out. From websites to social media to email campaigns, pairing it with visuals can differentiate and make a brand more unique, recognizable, and ownable in a crowded market.

A design system without a defined Voice & Tone is more like a visual style guide. A comprehensive design system should address both content and visuals, especially now that voice UI and conversation design have been growing so fast. Sometimes your brand may have multiple products and each requires a different flavor of visual design, but a consistent writing style that extends your brand’s personality can help you connect across the product lines. Branding is a combination of visuals and words.

So if you haven’t included Voice & Tone in your Design System, it’s time to define the language that your brand will speak.

Reference:

Shopify — Voice & Tone

7 best examples of brand tone of voice

Supporting vs Helping, is there a difference

What is the difference between voice and tone

Carbon Design System

Bootcamp

From idea to product, one pixel at a time.

Xindeling Pan

Written by

Design Consultant, Design Thinking Coach, Data Storyteller, XR Enthusiast

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Xindeling Pan

Written by

Design Consultant, Design Thinking Coach, Data Storyteller, XR Enthusiast

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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