The rise of microcopy at Typeform

From UX wronging to UX writing: why we started paying attention to the words in our product.

Bristol, England. It’s 2:00 a.m. A hooded figure, identity unknown, climbs a ladder and begins to deface the name of a store. It’s not Banksy, although he comes from the same city. He’s no graffiti artist, either.

He’s the “grammar vigilante.”

He comes out at night to correct errant punctuation. His weapon of choice? The “apostrophiser,” a broom-like contraption for reaching the highest storefronts to add—or remove—punctuation.

I joined Typeform around three years ago as a copywriter. Copy for job descriptions. Landing pages. Signs for the toilet doors. Anything that needed words.

Then Typeform version 2 happened and suddenly all eyes were on the product. Does the design feel intuitive? What kind of backend architecture makes sense? And like the Bristol grammar vigilante scanning the streets for rogue store signs, my eyes inevitably fell on the words.

Words like these:

Imagine popping into the attic for a quick tidy-up. You fumble around in the dark and find the light switch. Doesn’t look too bad, you think. You move a box, only to find another box behind it. And another one behind that.

You dive in. There’s stuff you vaguely remember from years ago. It’s a mess. Dust everywhere. Before you know it, you get sucked into a rabbit hole.

This is going to take a lot longer than you thought.

Clearing out the attic

The feeling was that the words in the product had been abandoned. Superfluous explanations, unclear labeling, inconsistencies. Oh, the inconsistencies. We’ll get to those later.

First, we did a content audit. We swept the product for the most eyebrow-raising messages and noted them down.

What did we find? Well, on a ‘friendliness’ scale, this red error message leans towards terrifying:

Our product was stuffed with tooltips—those hints that appear when you hover over a question mark. We crowbarred them in everywhere, even when the ‘hint’ was, well… a bit obvious:

And you don’t have to be a copywriter to spot the problem here:

Yep—turns out not all Typeform users are male.

So we immediately locked away the worst crimes against language and introduced friendlier, more helpful, gender-neutral messages. But there was more to do. Much more.

Doing away with dummy text

In theory everybody agreed that words were important. “Content is king!” someone would declare to a sea of nodding heads and grunts of affirmation. But in practice, people just left ‘the words bit’ for ‘the words person’ to do at the end.

To avoid more word fails, we needed to make copy a core part of the design process. That meant getting ‘influential stakeholders’ on board. So I turned to the Product Design team.

Product Designer Marianna recalls how things used to go down:

Sometimes I spent hours on the copy, which meant less time designing. And sometimes I designed without the copy, which made my wireframes misleading when I presented them.
Marianna Ne, Product Designer at Typeform

It turned out design needed copy as much as copy needed design.

Our product’s language was an afterthought—not a carefully crafted tool that helped people get stuff done. We’d pull aside anyone with a pulse to add “just a few quick words” so the design had at least something to communicate. But using dummy text instead of something more thought-through made early designs harder to understand.

And in some cases, we forgot to remove the dummy text altogether:

Here’s Sarai, a former product designer at Typeform:

Words are like anchors—they’re key to communication. So when we use placeholder text in our designs, it makes things more ambiguous. Say no to lorem ipsum!
Sarai Sanchez, UX Designer

As per Sarai’s plea—just like I’d done at school—I said no to Latin. We got rid of ipsum and started using useful, workable copy in the design process. The Product Design team invited me to their review meetings, and I stepped into a baffling world of pixels, information architecture, and components.

Copy and design were becoming one.

Talking the same language

When no one’s responsible for UX copy, everyone’s sort of responsible. So in the years BC (Before Copy), our product had developed ‘too many cooks’ syndrome.

Designers added copy. Then it was refined by a product owner. An engineer perhaps added something if it was needed last minute. Not all those people were native English speakers.

In other words, everyone threw in their dos centimos. Which was great for fostering a we’re-all-in-this-together glowing team sensation. Not so great for consistency.

Check out the random capitalization in this dropdown menu:

It helped that we now had one person responsible for words in the product. But even so, there was still no source of truth on which to base decisions. It wasn’t just about capital letters—it was about the way we spoke as well.

We needed a style guide. Here’s our chief storyteller Paul:

We need a style guide.
Paul Campillo, Storyteller at Typeform

How do you find your style? We looked at our founders. Literally.

We observed them doing monkey impressions at a company meeting. Breaking into fits of laughter trying to deliver a speech at the Christmas party. Sumo wrestling at our annual summer event.

We decided their easygoing personalities had to inform the style guide. They became the inspiration for our voice and tone.

Here’s Marianna again on how that helped:

I really believe in our product’s voice and tone. It’s part of our identity. Before, we were communicating things in too many different ways. Now, we’re all talking the same language.
Marianna Ne, Product Designer at Typeform

The guiding principle? SURF: simple, useful, remarkable, and friendly. And sometimes weird.

Now we could look at a bland, uninformative message like this…

…and change it based on our style guide.

But we didn’t always get it right. Once you find your personality, it’s tempting to go overboard:

If you don’t adapt your tone to make your message clear, your ‘sparkling personality’ falls flat. It becomes the reason your audience avoids you. Our founders did monkey impressions at an informal company meeting—not at a pitch to potential investors.

Here’s attempt number three:

Clarity > clowning around.

Taking the words out of their mouths

The sticky-fingered Pablo Picasso once said: “good artists copy, great artists steal.”

We didn’t steal much before. When we built a new feature, we’d name it based on gut instinct.

For example, there’s a feature that lets you take information from one place in your form and feed it into another. We reasoned that the information you take can vary. So we called the feature Variables.

But when we ran a test asking new users to feed info from A to B, they skipped right past Variables—assuming it was for something else. One of them said:

I need to be able to recall the answer to this question. If there is a way, there’s not an obvious way.
A new Typeform user

Recall the answer to this question.” That sounded… nice. Simple. Human.

So we changed the name of Variables to Recall information and ran the test again. The task success rate increased from 25% to 100%, which means everyone tested found the feature they needed based on the new label.

Making the change permanent was a no-brainer:

Stuck with what to name a particularly abstract feature? Ask your customers to try it out, then do a Picasso and steal their words.

Obsessing—it’s healthy

Why obsess over things like pronouns, capitalization, tone, and labels? Who cares?

Well, our users care. We know because they tell us.

Our job is to care about what our users care about. That’s why we’ll continue to prowl around our product, armed with an apostrophiser.

Liked that? Check these out:

Footer Section