Mario Ferrer
← Back to work

Gravity content system

A voice and tone system that gave Shopify's Shop app one consistent voice across two very different audiences, merchants and shoppers.

Company
Shopify
My role
Content Design Craft Lead, Shop app
What I owned
Voice, tone, and UX writing system, paired with visual guidelines component by component
When
Sep 2022 to Jul 2023

The problem space

From here, you'll need a password

The full walkthrough, the screens, and what I learned are behind a password. Reach out and I'll send it over.

That's not it, try again. Ask me for the password

What I worked on

  • Built a 3-point tone spectrum: Straightforward, Approachable, Memorable. Each point got a defined attitude, a frequency (used always, used often, used sometimes), and real product moments as anchors: order tracking and error messages sit at Straightforward, Home sits at Approachable, and Shop Minis and shopping events sit at Memorable.
The Gravity tone spectrum: Straightforward, Approachable, and Memorable, each with attitude, frequency, and paired do and don't examples
The tone spectrum, with a concrete Do and Don't for each point rather than an abstract principle.
  • Paired every rule with a concrete Do and Don't. For example, "Your package is out for delivery" (do) versus "There's activity related to your package!" (don't, wrong tone for a routine update); "Picked for you" (do) versus "Product recommendations" (don't, too generic for the Approachable tone).
  • Wrote the granular mechanical guidelines covering active voice, American spelling, capitalization, contractions, and punctuation: Oxford comma, em dash versus en dash, when to avoid exclamation and question marks. The unglamorous layer that keeps hundreds of strings consistent across many writers.
Gravity writing guidelines: plain language, actionable and inclusive language, and punctuation mechanics, with explicit references to Polaris
Mechanical guidelines, with several rules explicitly deferring to Polaris so Gravity extended the design system instead of forking it.
  • Defined branded terminology with audience tags. "Shop Cash," "Shop Pay Installments," "Shop Promise," each with a definition and correct and incorrect usage, tagged for whether it is merchant-facing or shopper-facing language.
Gravity branded terms sheet with merchant versus shopper tags, definitions, and correct usage
Branded terms tagged MERCHANT or SHOPPER, so the same feature could be described correctly to each audience.
A second Gravity branded terms sheet with more definitions and usage examples
A second terminology sheet. Getting these names right was half the work of sounding like one product.
  • Designed content patterns with the rationale written down. The timestamp pattern, for instance, reasons through cognitive load out loud: we don't communicate how much time has passed since an event (1d ago); we display the actual time or date, so people aren't forced to do the math.
Gravity timestamp content pattern, showing the rule and its stated cognitive-load rationale
Patterns stated the reasoning, not just the rule, so the next writer could extend them instead of guessing.
  • Paired every writing guideline with a matching visual guideline, component by component. This is the part worth foregrounding: Gravity wasn't a writing-only artifact. It was co-developed with visual design, so voice and visual system evolved together rather than in separate documents.

What got shipped

9
Content designers I led
2 audiences
Merchants and shoppers, one system
3-point
Tone spectrum any writer could apply
  • It became infrastructure, not a document. Gravity was integrated into Shop's design system itself and built into onboarding for every designer joining the team, product and content designers alike. As craft lead for the nine content designers on Shop, it was the shared reference we all worked from.
  • And it outlived its original scope. Seven months after I moved off the Shop app, a teammate built the Collabs native-app UI kit by repurposing Gravity's components, and I stress-tested it myself, rebuilding the existing Collabs web experience inside the kit to prove it could carry a native app.
  • It built on Polaris, Shopify's public design system, which still documents the same plain-language, active-voice, and 7th-grade-reading-level rules Gravity extended.

The lesson learned

  • The hardest calls were never mechanical. Punctuation you can just decide. Tone was the tension: a declined payment could read Straightforward ("Your card was declined") or lean Approachable to soften it, and the wrong pick made the app feel either cold or weirdly upbeat about your money not going through. Writing those judgment calls down, with real examples, was the whole point.
  • Pairing every writing rule with a visual one changed how I saw voice. I had thought tone lived in the words. Up close with visual design, it clearly lived in the spacing, the hierarchy, the weight of a button too. Guidelines that only covered words were doing half the job.
  • In hindsight, Gravity reads like an early version of an instinct I keep coming back to: don't hand people, or a model, a list of adjectives and hope. Give them the reasoning behind each call, so they can make the next one without you in the room.
  • Building it as a system rather than a style doc is what let it travel: into the design system, into onboarding, into another team's product entirely. I didn't set out to make infrastructure. That's just what a system turns into when it's built to be extended, not only followed.

There's always more behind a case study.