SDXD: The Craft of Content-First Design
Overview
San Diego Experience Design’s (SDXD) October meetup was The Craft of Content-First Design, led by two of ServiceNow’s rising stars: Morgan Quinn, Senior Manager, Content Design, and Jen Kim, Senior Content Designer. Their goals for the workshop were to practice UX writing and content-first design in a safe, collaborative learning environment (check!), give designers and writers tools and templates they can use in their own work (check!), and help create more consistent, user-centered content experiences (check!).
Other met goals not explicitly noted by SDXD nor Morgan and Jen were to feed a full house (thanks to Abstract for sponsoring pizza), provide a great space in ServiceNow for networking with friendly folks in San Diego’s Design community, and welcome a decent handful of newcomers to SDXD events (check, check, check!).
What is Content-First Design and Why Does it Matter?
Morgan and Jen explained that content-first design aims to squash the square peg/round hole conundrum, where:
1. Visual design/layout and content are created separately, without regard for the other
2. The content (square peg) must abide by the layout (round hole)
3. Result: Your product’s offering isn’t clear, your customers don’t convert, and your teams are misaligned
What Issues Does Placeholder Text Raise?
Layout and design is often established without regard for the content, and content placeholder text (lorem ipsum) is used until content is developed. Consequently, the page may look great, but your content may suffer because of it. Without thinking through content first, the visitor may have no context for why they landed there or what they’re doing. This is a cousin-issue to dribbblisation of design — yes, your design may look sharp, but is it appropriate for the information you’re trying to deliver? How can you design something without knowing what its intent is?
This isn’t to say that we should revert to waterfall, create all the content first, and only then create the visual design. Iterative design means taking those steps together — teams need to outline the intent before they craft the content. This can be done in content storyboards or copy documents, along with very low-fidelity sketches to help explain the intent of the content or story. I repeat: sketches to help explain the intent of the content or story — not the UI. Communication before, during, and after is essential for getting it right.
“Content precedes design. Design in the absence of content is not design, it’s decoration.” — Jeffrey Zeldman, Co-Founder of A List Apart Magazine and the Web Standards Project
The Content-First Alignment Tool: Content Playbooks
Jen and Morgan provided everyone with a copy of an example “content playbook,” which contains high-level, yet also specific, guidelines for product positioning and content. This booklet is something they recommend creating with the various stakeholders in your product team: sales, marketing, UX, UI, etc.
Some pages this playbook can contain:
Guidelines: Artifacts teams can use as a source of truth when crafting the content and design.
- A persona based on research with simple language around her needs.
- Product positioning, including brief descriptions of the customer problem, the benefit of using the product (the promise), reasons to believe or adopt it (data we can show you), and proof points (the main features of the product that deliver the promise inside the experience).
- A breakdown of the proof points (features) and why they matter.
- Tone guidance.
Execution: Documentation of the touchpoints that the customer experiences, with the goal of facilitating alignment and accountability.
- Marketing messaging: What messaging is fixed? What is flexible?
- Display ads: What are the touchpoints we’re putting out to the world?
- The landing page: What do people see when they get to the site? Does it align with the display ads?
- The customer journey map: a high-level understanding of the customer’s thoughts and actions, and how the tone or experience should flex throughout conversion.
Morgan and Jen’s example product was an app called “Fido” that connects dogs and owners with compatible matches for playdates while owners are away.
Putting Content-First Design into Practice
After skimming the content playbook, Jen and Morgan invited us to try content-first design ourselves, and here’s how you can do it, too:
Once you have an understanding of the persona, product positioning, proof points and journey map, you can begin crafting the content in a content storyboard for the customer story. You can do this with storyboards or copy docs (Morgan prefers more handwritten storyboards, while Jen prefers templated copy docs).
Then, you can pick a proof point and create a content-only wireframe for it. Share that with your design team and you’ll be more likely to wind up with a design that caters to the content, and not the other way around.
What it Comes Down to: Alignment
Silos are not uncommon in any organization, even (and sometimes especially) one that’s at any stage of digital transformation. Visual designers build the layout, look and feel, and may create content. Marketing delivers the brand and ads, and creates content. Sales could have decks filled with yet another product presentation: different content. If everyone is creating the product’s content in a silo, without establishing a common standard for it, the product can end up lacking a cohesive identity. And if everyone in your organization sees your product’s identity differently, the customer will have little confidence in what your product is, or who it’s for.
I left this meetup wanting to immediately craft a content playbook for products I’m working on. It’s tempting to want to hunker down and study it to death by myself. If you’re feeling the same way, know that while it’s a cool exercise to want to tackle and get familiar with, be sure that when you do the real thing, you’re talking to the stakeholders in your product and taking them along with you. As experience designers, we all know that the experiences you have and make together are more valuable, more effective, and longer-lasting than the ones you do in a silo with only a can of diet coke to keep you company.
Visit SDXD’s meetup page to learn more about networking, volunteering, sponsoring, or just to see what it’s all about. We hope you’ll join the next one!
Katherine Zimmerman is a UX Architect at American Specialty Health with an unquenchable thirst for good design, genuine connections, and diet coke.
