Write First: The Craft of Content-first Design
Creating powerful products by examining content and fostering meaning
This post is part of “Words go here”, A series about writing’s role in product design. Marin Licina contributed drawings and ideas cited in this post.
Writing is excruciatingly hard to do.
Most adults of a certain generation have written a book report. You may have written an email love letter. Or at least a tweet. You can blunder through writing, or you can study and practice and develop the skill. Even if you never reach artistic heights, you’ve done something hard. The commitment ceremony of words on a screen (or on a page, if you’re old-fashioned) converts ideas into something more than notional. Writing is a fundamental design skill.
Good writing feels like witchcraft. An elegant narrative is a near-rapturous experience that beguiles without the mechanics showing. I love reading and re-reading passages to detect the subtle structure that makes good work land with aplomb. To practice content-first design, you don’t have to be a great writer, but recognizing it in the wild, and understanding the basics of narrative structure, certainly help.
This essay isn’t about creating content, or writing even, it’s about how to design meaningful products by starting with an examination of the contours of your content. It’s also about how content exists only to create meaning for users.
- What’s content-first design?
In a product design space, “content” is shorthand for “copy”. But it’s not just that. It’s data, images, video, and user-generated content. It’s broad and borderless when considered as a whole, but the content for a given product or project probably has a discernible shape and texture that will start to inform it’s designed incarnation.
Content doesn’t exist unto itself; it serves a communication need. As product designers, everything you build is, in essence, a conversation between humans and technology. This communication is the basis of interface design, and it’s very reason for being.
2. Speak, write, show
Every UX writer has encountered situations where they’re asked to write for a container that’s ill-suited for the message. We’re either cramming important disclosures into too-small boxes, or filling space with superfluous repetition or editorializing.
As a hybrid writer/designer I get the appeal of the abstracted wireframe where text is represented by boxes or squiggles. However, we do ourselves a disservice by skipping straight to designing interactions without first mapping out the content that’s meant to be communicated.
Living in liminal space is uncomfortable. However, allowing yourself to explore abstraction can help you better articulate your product’s meaning to users. Before committing to mocks, flows, and specific choices, try experimenting with a couple content-first methods.
These methods call for nothing more than skills you’d grasped by elementary school, paired with a willingness to view your work as an opportunity for play and exploration.
3. Speak: Conversational prototyping
One of the silliest things you can do at work is act out a dialog between a user and a product. On occasion, silly things should be compulsory because they help people loosen up a little. We (weirdly, sadly) live in an age where face-to-face conversation is growing scarce. To self-edit, writers are often instructed to read their work out loud. Spoken, run-on sentences reveal themselves in your inability to draw a breath. Or style and rhythm shows its musicality. Talking through an interaction can uncover weak or awkward points, or highlight the good stuff.
My coworker Marin and I had a conversation role-playing the Google Assistant and ourselves, trying to set up to shop for household goods. After some smirking, we stumbled through a conversation, unexpectedly balking when we had to ask for personal stuff, like credit card information and brand or price range preferences. It also let us explore the boundaries of tone — where does casual need to converge with reassuring, and where is authoritative an appropriate tone to ensure trust?
“Conversational prototyping”, as Marin named it, is one of the easiest, fastest ways to prototype a flow. Play acting your product’s character is unexpectedly revealing. We begin to remember that trust is built through subtle gestures like tone, consideration of people’s time, and clear, compassionate explanations for why we’re asking for sensitive information. From this practice, you can begin to explore more formal wireframes, or artifacts like tone maps, too.
4. Write: Narrative PRDs
Designers may find it counterintuitive to sit down and start a project with a writing assignment, which is all the more reason to do it. Working in unfamiliar creative modalities opens up new pathways for your brain to explore. I love referencing Anne Lammot’s Shitty First Drafts because it’s forgiving and encouraging (and well written). It also addresses the hardest part: just starting.
In what form should you start “writing” a product? Product managers often start with a “PRD”, or product requirements document. Some PMs write beautiful PRDs where the business case is enlivened by the communication of their vision. Most PRDs are more concerned with technical specs, timelines, and of course, the business case.
A narrative PRD is the designer/writer’s interpretation. It gets to the germ of the idea by first describing, in everyday language, what the thing is and what it does. I’ve started design explorations by just describing the project through prose, as if I were explaining “it” to an alien. Applying very little structure, and hewing to natural, unfussy language, helps you stress test ideas, perhaps removing nonsense features or avoiding dead ends. Write your narrative as an email to a friend, or a series of back-and-forth texts.
Some people prefer the more polished version — writing a future news story. Structuring your narrative PRD as a news story encourages you to explain your product in language suitable for wider distribution and understanding.
Importantly, the narrative PRD allows you to organize your ideas as a narrative — the basic structure of a story. Sequences of events emerge, as do characters. Eventually you might end up writing something that’ll help your team start designing with a shared vocabulary and mutually understood goals – elements that fuel more efficient collaboration.
5. Show: Character-driven storyboards
Storyboards can be an incredibly powerful and persuasive tool for influence. Before Google, I worked at Airbnb. A professionally-illustrated series of storyboards, mounted in the office hallways, became a cornerstone of the culture, and a powerful symbol for the company. Their power wasn’t so much in the execution (though they are the work of pros), it was in the immediate and emotional storytelling.
The storyboards were successful because they depict people living life. The characters, their excitement about travel, and their trepidation about opening their home to “strangers”, are vastly more relatable than looking at a series of wireframes.
Writers (and some designers too) may not be as acclimated to drawing, and representing their ideas through representations of humans. As with writing, getting over the self-consciousness of drawing poorly can help you discover new creative pathways.
Most people can draw a stick figure, and stick figures can be very expressive.
Marin’s drawings are beautifully realized works of art. Yours might be too. Or they can charm with their wonkiness.
A three-frame storyboard can help you break down a simplified user journey, before diving into screens that show concrete interaction models. Show users in their home or work space. Imagine how your product can enrich their day-to-day lives.
This technique works nestled within a design sprint, or as a standalone exercise. Or better, as a means to communicate ideas to stakeholders and partners. Product and engineer colleagues, and those less familiar with the iterative, creative design process, can easily grow attached to early, low fidelity wireframes, and understandably so. In a fast-paced, metrics-driven culture, seeing a concept brought to life, even in early-stage mocks, is exciting and affirming. However, committing to UI decisions too early makes the ongoing exploration and evolution essential to good design more difficult to sell through.
Telling a story is more relatable and deeply communicative then showing where buttons are relative to other ghosted-in UI elements. A storyboard should center on your users and their needs, which allows you to begin with the content (the message, the meaning), before formalizing an approach. Your users, or characters, and their needs and desires drive the narrative forward. Even simplistic drawings achieve this end; a few sticks and a face can convey great emotion.
Words can be explicit, but they also carry coded meaning that hints at how inclusive, exclusive, or mindful your products are. There’s a lot of content out there competing for our time and attention. Helping people easily find their way is a small grace that content-first designers can provide. Designers and writers play a vital, perhaps under-acknowledged role as digital stewards, whose decisions help people get things done more efficiently, and ultimately, put down their devices to be fully present in the non-digital world.
