CultureUX

Inclusivity Is a Design Principle

Erin Couse (She/ Her)
on Mar 18, 2021
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.
  1. Test your copy’s readability using Hemingway App or BethBot.
  2. Review your pronoun usage. If you’re writing about or quoting real people, ask them their pronouns.
  3. Assess your references and examples for assumptions, generalizations, slang, and other non-inclusive language.
  4. 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

Recommended Articles

Join our subscribers

Sign up here and we'll keep you updated on the latest in product, UX, and engineering from HubSpot.

Subscribe to the newsletter