Content Mockups for UX Writing

Earlier this year, I sent a paper proposal to a couple of international conferences to present on this topic — Content Mockups. But either the conference is postponed or it is canceled, so I plan to talk about it briefly in this post. I am using the term Content Mockups in my work since the year 2012.

Vinish Garg shares an example of using content mockups as deliverables of UX writing work.

Words in Context

UX Writing makes a product understandable and so usable. Right words in an interface inform the users of what they need to do and why, and the possible outcome of their decisions and actions. UX writers anticipate users’ actions and use words to help users to make the right decisions. (For more details on what is UX Writing, see What is UX Writing by UX Writers Collective.)

The bigger question is—how UX Writers actually do their work? Do they write the product copy on the pages in DropBox, Google Drive, or in Notion? Or, they write in the actual design files or in the wireframes on paper? Or, they use a headless CMS with a design tool to collaborate for words on the real interface (see an example: Kentico and Figma)?

How do they plan the space for the text that is generated by the strings?

Imagine letting a user know that their task manager is changed from user Christi to the user Rhoshandiatellyneshiaunneveshenk!

Content Mockups

Back in the year 2008–2009 when anyone would offer me for a blog writing contract work, I would ask for the content experience ownership for how the content is structured and published when viewed on a screen.

Words live on the interface in the context of what the users want to see within their complex or unpredictable customer journey, for how well the team understands the users’ behavior and goals, and how the product interface wants the users to make informed decisions.

This is true for the basic Push or Pull labels on a door. Imagine how will someone design and print the Push or Pull labels if they have never seen a door?

Example: Imagine how a B2B SaaS helps its customer change their account plans. A customer can have multiple objects (businesses in this case) and each object is tied to its own subscription plan.

(A) Design before content

Content mockups as deliverables of UX Writing, by Vinish Garg.

(B) Design with content

UX Writing can lift the users’ spirits for specific actions. They need to buy their space in the interface design by using content mockups.

Content mockups as deliverables of UX Writing, by Vinish Garg.

Also, see how the promotional code message is shared at the time when users make a decision to upgrade, and not on the payment page.

(C) UX Writing for Assurance and Confidence

UX Writing prepares a user for the possible impact or outcome of their decisions to upgrade or downgrade a plan. It results in assured and faster actions.

Content mockups as deliverables of UX Writing, by Vinish Garg.

(Note: Please do not focus on the design or on the words that you see in the above examples. The objective is to share the role of content mockups for UX Writers.)

Content Mockups Framework

How do you get started with UX Writing, and at what stage of the product? It gets easier if the product team has a design system or a defined content style guide. It gives you a reference to the brand voice, the vocabulary, the product narrative arc, and the voice and tone.

I use a specific Content Mockups Framework that I have sort of standardized over the years for my work.

Step 1: Brand Message, Strategic Narrative, Product Positioning — I get into the brand message for its strategic narrative and how the product positioning looks like. It makes me talk about the product in the language that is common for the brand and the users (see First Steps in Strategic Narrative).

Step 2: Words outside the product — I need to understand how the folks in marketing and sales craft their message. Do they follow the brand message, or even the design system (I tweeted)? How does the support team respond to the tickets?

Here is a snapshot of my Content Mockups framework at this stage.

A content mockups framework for the UX Writing deliverables, by Vinish Garg.

Step 3: The interface validation — Users validate a design based on the interface text. I use a UX content cloud to prepare different sets of terms, phrases, and messages. I organize these for different properties such as user sentiment, user goal, user intent, product narrative, interface story.

I use my UX Writing inventory, and draw a matrix for their effectiveness for — best casenormal casefind a workaround. It gives me the option to craft my message when really pushed by the constraints (space or bias).

Step 4: Document the edge cases — I keep pace with the team because the product needs to ship in time but I always document the edge cases (I tweeted).

Step 5: Depending on my exact role in the project, sometimes I own designing the interface including the content. Here is one of my recent tweets on UX Writing.

Not every UX Writer can invest in their own deliverables’ framework because it depends on the product team size, structure, and workflow. However, if you work in relatively smaller product teams, it is not too challenging to have a framework so that you know the starting points, the directions, and how you validate your deliverables.

Press

If you remember a shoe polish tin, the most important word that makes is usable is “PRESS”.

UX Writing: Words make an interface usable.

My Zoom Hours—We Discuss Content Mockups

In my Zoom Hour seriesI hosted a talk on Content Mockups as UX Writing deliverableson 25 June 2020.

To subscribe to my writings or talk, join me here or see newsletters to see why these are relevant to your work.