Every design system should have voice & tone defined
Isn't a design system without a defined Voice & Tone just a visual style guide?
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.
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…”
Quite right.
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).
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.
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:
7 best examples of brand tone of voice
Supporting vs Helping, is there a difference
