Words matter, and how we use them matters. According to the Linguistic Society of America, inclusive language “acknowledges diversity, conveys respect to all people, is sensitive to differences, and promotes equal opportunities.” It makes concepts more understandable, copy more readable, and products more usable. That’s why we made it part of the design system at HubSpot.
Identifying a gap
Our product is built on a design system called HubSpot Canvas. It’s home to our design components, patterns, and voice and tone guidelines. Among other things, the voice and tone section outlines the core mission of our product voice: to be clear, helpful, human, and kind. However, until recently, there wasn’t much information about designing for inclusivity — especially when it came to designing with words. Along with brief instructions to avoid jargon and use they/them pronouns, this is about as far as it went:
“We use humor to include, not exclude. We use inclusive language and the singular they. We don’t demean anyone, or refer to differences in any way that could cause people to feel excluded or unwelcome. We convey a sense that we’re all in this together. We assume that our users are good people who want to do good.”
While that was a start, it was vague and lacked actionable guidance. An update was overdue, and HubSpotters across multiple teams started collaborating to make it happen. After a few weeks of research, drafts, and feedback from our Product Diversity, Inclusion, and Belonging manager, we published a new Inclusive Content page to our internal Canvas site. Which was great… but it’s easy to talk the talk in a style guide. How do you walk the walk and put words into practice?
Putting words into practice
Next, we turned our attention to BethBot, HubSpot’s automated copy checker. When added to a Github repo, BethBot flags any copy that doesn’t follow its grammar and style rules. To apply our inclusive language guidance to product copy, we created new rules, changed old ones, and identified where we were using language that didn’t meet our standards. With the help of multiple engineering teams, we were able to quickly correct our code and copy.
These changes mean that going forward, non-inclusive language will be flagged before it goes into the product. While our design org is continuously evaluating and updating our guidelines, we also created a new BethBot update process so anyone at HubSpot can request a change or new rule. Making our product more inclusive is an ongoing effort that doesn’t belong to any individual or team — everyone can contribute.
What we added to our design system
Use plain language
The average reader can easily read and understand content written in
plain language. It makes concepts more understandable, copy more readable, and products more usable. Using plain language doesn’t mean oversimplifying. It means you’re making ideas available to a wider audience.
Here are the most important things to remember about plain language:
- Write for the average reader. The average adult reads at a U.S. eighth-grade level (about 12-14 years old). Literacy standards for different ages may vary by country.
- Write in the second person (you)
- Use the active voice
- Use the present tense
- Use simple verbs (i.e. “use” instead of “utilize”)
- Write in short sentences (15 words or less)
- Don’t use jargon
Check your content’s readability using tools like Hemingway App or BethBot.
Remove bias
Bias isn’t always obvious. "Implicit bias" describes the attitudes or stereotypes that affect our understanding, actions, and decisions in an unconscious manner. Keep the following things in mind to combat bias:
Use neutral pronouns
Use “they” or “their” when the gender of the subject is unknown or unimportant. Use “a,” “the,” or “you/your” instead of pronouns in generic product copy.
Content about issues facing women, the LGBTQ community, and real people should use the subjects’ pronouns.
|
Do
|
Don’t
|
|
they
|
he/she, (s)he, he or she
|
|
their
|
his or her
|
|
a document, the document
|
his document, her document
|
|
When a new user is added, they'll be able to edit their password.
|
When a new user is added, he or she will be able to edit his or her password.
|
|
Once the user creates a document, they can upload it to HubSpot using the files tool.
|
Once the user creates his or her document, he or she can upload it to HubSpot using the files tool.
|
|
Select a user’s name
|
Select his name, select her name
|
Don’t make assumptions
Content must be inclusive of all ages, races, genders, sexual orientations, abilities, and socioeconomic levels. Our customers are all over the world, and the way we talk about our product should reflect that.
References and examples must be diverse, culturally sensitive, and avoid appropriation.
- Don’t use references that won’t make sense to a global audience
- Don’t say something is simple or easy — what’s easy for one user may be difficult for another
|
Do
|
Don’t
|
|
Use HubSpot’s email tool to send reminders about special discounts and promotions.
|
Use HubSpot’s email tool to send reminders about your Fourth of July sale.
|
|
Write for the average reader.
|
Write at an eighth-grade level.
|
|
Use HubSpot’s new ABM tools to create a personalized buying experience for your top accounts.
|
HubSpot’s new ABM tools make it easy for anyone to create a personalized buying experience for important accounts.
|
|
Hi everyone, welcome all
|
Hey guys
|
Don’t generalize or stereotype
This includes individuals, groups of people, cities, countries, regions, and cultures. Common workplace examples include stereotyping women as administrators and men as executives or engineers.
|
Do
|
Don’t
|
|
Ask your Super Admin for access.
|
Contact your Super Admin and ask her for access.
|
Don’t use content that doesn’t translate
HubSpot software is available in English, Dutch, French, German, Japanese, Portuguese (Brazil), and Spanish. Avoid content (including video, audio, or screenshots) that can’t be easily translated into all supported languages.
Don’t use slang, idioms, or acronyms
Don’t use phrases that won’t make sense across regions, countries, cultures, or languages. Some U.S.-based examples include:
|
Do
|
Don’t
|
|
You're right.
|
You've hit the nail on the head.
|
|
Keep going.
|
Hang in there.
|
|
Because of
|
In light of
|
|
Aware
|
In the loop
|
|
Doing better than others
|
Ahead of the curve
|
|
In a short time, quickly
|
In no time
|
|
Take shortcuts
|
Cut corners
|
|
Good job, success
|
You've hit it out of the park!
|
|
As soon as possible
|
ASAP
|
Don’t use ableist language
No person or group should be defined by a disability, and disabilities shouldn’t be mentioned unless they are relevant to the subject. If a disability is relevant to your content, don’t use euphemisms or phrases suggesting victimhood.
|
Do
|
Don’t
|
|
Has
|
Suffers from, challenged by
|
|
People with disabilities
|
Differently abled, disabled, handicapped
|
|
People without disabilities
|
Normal, healthy, able-bodied, standard
|
|
Turn on/off
|
Enable/disable
|
Use inclusive terms and phrases
Many common industry terms have racist or otherwise problematic origins or implications. Use these replacements instead.*
|
Do
|
Don’t
|
|
blocklist
|
blacklist
|
|
allowlist
|
whitelist
|
|
core feature/built-in/top-level
|
first-class
|
|
legacy, exempt
|
grandfather
|
|
parent, primary
|
master
|
|
helper, secondary
|
slave
|
|
lunch & learn, tech talk
|
brown bags
|
|
folks, everyone
|
guys
|
|
hours of effort, effort
|
man hours, manpower
|
|
huddle, standup, discussion
|
pow wow, powwow
|
|
institutional knowledge
|
tribal knowledge
|
|
blocked days, restricted days
|
black/gray days
|
|
full disclosure
|
open the kimono
|
|
shortcoming
|
blind spot
|
*This is not an exhaustive list and will be updated as needed.
Make it accessible
Accessibility isn’t a want, it’s a need. About 15% of the world’s population — a staggering
one billion people — lives with a disability.
Seven out of ten users with a disability will immediately leave a website if it isn’t accessible. Inaccessible content creates a bad user experience, and it also creates legal liabilities. Improving accessibility
improves the overall user experience — it’s a win-win.
Readability is a big part of accessibility, but it goes beyond that.
Audio/Video
Include captions and transcripts on all audio and video content.
Images
Attach alt text to all images. Avoid using images with text in them unless you’re going to create versions for all supported languages.
Organization
- Use headers and bulleted lists to provide structure
- Write descriptive page titles
- Create clear navigation and functional search capabilities
- Use legible fonts and font sizes
- Provide context for links and CTAs. Instead of saying “Learn more here,” try “For more of HubSpot’s guidelines on everything from character counts to capitalization, check out the Written Style Guide.”
Visual elements
- Include non-text visual elements (icons, illustrations, etc.)
- Use high-contrast colors, especially for text and important interactions
Check everything off the list
Before you publish or share your content, use this list to make sure it’s ready to go.
- Test your copy’s readability using Hemingway App or BethBot.
- Review your pronoun usage. If you’re writing about or quoting real people, ask them their pronouns.
- Assess your references and examples for assumptions, generalizations, slang, and other non-inclusive language.
- Use one of these five accessibility tools to see how users with a variety of disabilities will experience your content.
More resources for inclusive language and accessibility
HubSpot blog and Medium posts