PULSE DESIGN SYSTEM
While working to develop a best-in-class internal UX design system for NYC & Company, our Director of Product Design and Strategy tapped me to contribute some guiding principles on voice and tone. In addition, I developed a UX glossary, providing a lexicon for clear and consistent communication across our digital, editorial, and creative/content teams.
In-Situ Example
Design + Strategy: Miguel M.
Voice & Tone
UX language is how we speak in the context of the NYCgo.com user experience.
It includes all words on nycgo.com that do not constitute editorial or marketing copy. Often, these are elements with which the user will interact (hover, click, scroll). These include, but are not limited to, site navigation, buttons, search fields and forms.
UX language is a stripped-down application of our voice—but it still has NYCgo DNA. It is:
1. Human.
Speak in the first-person plural (us, we).
Note: “We” are NYCgo or New Yorkers, not New York City. NYC is “it.”
Address the user in the second person (you).
The first person (I, me) may be used for logged-in settings (My Account, My Favorites).
Try Choose your preference or What is your preference? over Select a preference.
Avoid robotic directives like submit and enter. Opt for human terms like sign up and browse.
Include pleasantries, like welcome, please and thanks—but keep it casual.
2. Straightforward.
Write in the present, active tense.
Keep it ASAP—as simple as possible. Avoid embellishments, redundancies and inverted or compound phrasing.
Can Google translate it correctly? If not, consider simplifying.
3. Universal.
UX language universally assumes the NYCgo identity. The tone need not vary by campaign.
4. Intentional.
Ask of every piece of UX copy: What do we want the user to do? Use the below guiding principles to ensure a piece of copy is serving a clear purposes.
Actionable: Initiates a user’s interaction, but no exchange of information. Example: CTA Button
Transactional: Initiates a purposeful exchange of data between the user and NYCgo. Example: Forms
Informational: Explains or elaborates on site content. Example: Terms & Conditions
Inspirational: Supports our overarching brand message and is geared toward long-term impact but not immediate action. Example: Masthead Text
Glossary of UX Terms
Breadcrumb - A line below the page title and above the byline showing the content path.
Card - A module with image and text that links to site content.
Tile Card - Image with overlaid hed, optional dek, and optional icon. Dims and reveals dek on hover.
Simple Card - Image with adjacent plain text.
List Card - Image with adjacent listing details.
Carousel - A masthead cycling through multiple images. Can rotate automatically or manually.
Carousel Preview - A series of images and titles directly below the carousel indicating slide content.
Collection - A curated set of site content displayed as a grid of Cards.
Badge - A descriptive tag linking to aggregated content of the same topic.
Cross Promo Box - A section promoting another internal program or piece of content.
Dek - A line or two of descriptive copy under a hed. Sentence case. Standard punctuation.
Dropdown - Any menu that expands on click to show multiple options or sections.
Email Signup Form - A modular signup form that is consistent regardless of placement.
Eyebrow - On a card, the small piece of text above the title indicating which site vertical houses the content.
FAQ - An article page outlining frequently asked questions for a given program.
Fine Print - Any details, T&Cs or other required legal copy in small text at the bottom of the page. Sentence case. Standard punctuation.
Footer - The bottom section of the page featuring navigation, email signup, social icons, partner logos, etc. Appears sitewide.
Global Nav - The main site navigation that appears sitewide, but may be collapsed in places.
Hamburger - The collapsible global navigation menu on mobile.
Header / Hed - Any title text in the page body or UX. Not to be confused with page title or in-line headline. Title Case. No periods unless for stylistic emphasis (e.g. Best. Day. Ever.).
In-Line Ad - An ad farther down the page that requires scrolling to view.
In-Line Headline - An Editorial headline within the body of an article or landing page. Not to be confused with header. May be in Title Case or Sentence case at Editorial’s discretion.
In-Line Nav - Icons within the body of a page linking to key sections of the site. Yellow on hover.
Icon - A custom symbol designed to describe content. May or may not be paired with words.
Intro Copy - A section of introductory text below the masthead and before the page body.
Masthead - A static image at the top of the page, which may include creative/copy.
Masthead Ad - An ad that appears “above the fold” and overlaps with the masthead ime.
Modal - An overlay on top of a page inviting the user to take an action like sign up for newsletters. Users can exit or engage without leaving the current page.
Nested Ad - An ad that appears “above the fold” but below the masthead image.
Nudge - A subtle intervention (like a small message triggered by scroll depth) to guide user behavior and inspire engagement—for example, saving an item to My NYC.
Page Body - Everything on the page between the masthead and bottom nav.
Page Title - A large headline at the top of the page, usually overlaid on the masthead.
Partner Promo Box - A section calling out external partner promotions for a program.
Primary Button - A filled-in yellow button featuring a strong call to action. Darkens on hover. Title Case. No periods.
Program Promo Box - A section calling out internal promotions/activations within a program.
Promo Code Box - A box or banner with text clearly detailing the promo code for a program.
Secondary Button - A yellow-outlined button featuring a secondary call or action or a 1-2 word description of the content it links to. Title Case. No periods.
Secondary Nav - The menu that drops down from the global nav and links to various sections of the site.
Widget - Any embedded module engaging the user with interactive features like search/filte
Terms to Avoid
Bucket - A vague term often used to describe sections of a landing page or modular page elements. Always use the appropriate component name instead.
CTA - A “call to action” is a marketing directive—like “Buy Now”—but it can take many forms (button, sentence in a body, etc.). The term “CTA” shouldn’t be used to describe site elements.
Lightbox - A commonly misused term for “modal.” A true lightbox is a design treatment of a modal that darkens the backdrop when it appears.
Pop-Up - A commonly misused term for “modal.”