8 steps to content-first design
Get strategic about content to create more successful user experiences.
Any digital experience is about creating a conversation with users. Conversations consist of words, tone, even gestures. How can you create a conversation with users if we’re not looking at the content of that conversation first?
Of course, there are many elements, such as research, analysis, and writing, that go into creating a streamlined, thoughtful conversation. In this article, I’ll outline 8 steps for putting content first in everything you design.
“Words are essential for helping users accomplish their tasks, and by thinking about them while you sketch, you’ll uncover problems early and be able to move faster later.” — Biz Sanford, Shopify
While it’s common to see placeholder text and images used throughout the prototyping process, oftentimes real content is only introduced at the end of the prototyping process. Using placeholder text, such as lorem ipsum, doesn’t help you get the real feedback you need on designs, and it:
- Doesn’t help you develop an accurate prototype for testing
- Doesn’t lead toward developing real solutions that can help users accomplish their tasks
- Hinders your ability to develop solutions that achieve business goals.
Check out these great articles on the pitfalls of designing and testing with dummy text: BetaTesting Blog, UX Planet, Prototypr.io
The idea of “content first” design was first introduced by Jeff Zeldman, the founder of A List Apart. He wrote that in order to create the right layout and structure for any digital experience, you have to know what the content is first.
Putting content first means implementing a multi-phase design process. Rather than creating a design and filling in the content, we’ll use a content analysis and creation approach that will lead to a user experience design in the form of wireframes and visuals .
First, you evaluate and gather information about content:
- Set the rules for content-first design with a definition of the practice and a content strategy process
- Evaluate what you have with a content inventory and audit
- Conduct pre-vision work with a conversation map, a content map
Then you can dig into sketching out your designs.
For the purposes of this article, I’ll use an example by Aaron Routses, Digital Media Manager at MFS Investment Management, from a class I teach in the Bentley User Experience Center. In the last 2-day workshop, the participants looked at gatesnfences.com for a redesign using the steps in this article.
#1 Define what your team’s content strategy is, and what it is not
Here are some of the definitions for content strategy floating around in the world of UX…
“Planning for the creation, delivery, and governance of useful, usable content” — Kristina Halvorson, Brain Traffic
“Getting the right content to the right user at the right time.” — Kevin P. Nichols, SapientNitro
“A high-level vision that guides future content development to deliver against specific business goals.” — Hannah Smith, distilled.net
My definition: Delivering the right content to the right people at the right time based on business goals, research (metrics, audits, testing), and the audience you’re trying to reach.
I stress business goals and research here, because what’ the point of content without a deep understanding of what you’re trying to accomplish and who you’re trying to serve?
What would your definition for content strategy be? There’s no right answer. Your definition of content strategy will be based on how content flows through your organization and what you do at the vantage point of content and design. The point is to define it so that you create consistency in roles and design processes.
#2 Develop a process for creating and delivering content that counts
A content strategy process defines where content strategy interacts with project stakeholders, identifies what the deadlines and deliverables will be at each point, and sets exception for how content will be developed and delivered. An effective content strategy process will help align team members and provide context for working with content strategy team members at each stage of a project.
Some projects won’t use all of the steps of a content strategy process, and other times, a project might be larger in scope and require a more refined process. Either way, having something in place to build from can make the difference between a cluster of miscommunication and missed deadlines or a a successful project outcome.
#3 Take inventory and conduct an audit
A content audit is an inventory and evaluation of existing website content. A content inventory can be conducted by a wide range of inventory tools available for free online. An inventory lists all of the pages on your website with basic information such as URL, Page Title, meta data, pages hits, and addition information that can help you understand user engagement.
Content Audit Tools — 8 Best Web Content Inventory Tools
Benefits of taking inventory and auditing:
- Scope and budget a project
- Get a handle of what you have and where it lives to understand maintenance and what you can get rid of
- Provide reference for content during content development — helps keep track of what’s getting done
Three types of audits
- Quantitative inventory — identifies page titles, URLs, metadata, traffic stats, etc.
- Qualitative audit with best practices assessment — looks at content from outsider’s point of view and measures against best practices and user needs. Is content useful, usable, enjoyable, and persuasive?
- Qualitative audit with strategic assessment — how does content align with content and business strategies based on pre-vision work? Where are the gaps? What’s working and what needs help?
How to go about a qualitative audit:
- Conduct a content inventory either by hand or using a free content inventory tool, which you can find online
- Decide what factors you want to evaluate and how you’ll be measuring them
- Create a spreadsheet with the pages and factors you measure, such as this one that Aaron did for gatesnfences.com follows:
#4 Conversation mapping
Conversation mapping helps you get inside the customer experience with a role-playing exercise: a conversation with an imaginary user in your audience.
- What is the customer looking for or what is their goal or need?
- Why have they come to this website?
- How much do they understand about the topic?
Conversation mapping can help us:
- Have empathy with the customer’s experience
- Better understand their needs
- Learn how to speak their language (words, tone, knowledge level)
- Explore a user-experience that is more informed by the customer’s point-of-view
Of course, you have to identify the traits of the user you’re conducting your imaginary interview with. In the example here, the user was a private, residential customer looking to purchase a fence.
Here’s an example:
In the next step, Aaron will use this conversation map to work toward developing a content model.
#5 Telling the story with content maps
Good content tells a story…what’s your story?
Based on the conversation map and what you know about the business goals, how can you lead customers through an experience that helps us all achieve our goals? Working with the UX Lead, with another content strategist, a business owner, or on our own, you can begin to sketch out ideas for a user experience.
Start by identifying the following:
- What does the customer want?
- What are the steps to help them get what they want?
- What are the possible pain points? (Lousy search capabilities, not enough product information, hard to navigate checkout process)
Next, look at some elements of the user flow:
From the walk through of the user’s experience, based on the conversation mapping, and the content audit and analysis, you can begin to sketch out a page with directionally correct content.
Here’s the original:
Here’s Aaron’s design:
Wow! What an improvement. Do you think content first is a great idea, or what?
Here’s Aaron’s rationale:
- The current display of the remote control product page features a stacked list of product modules.
- The products appear to be grouped by brand but do not appear to have any additional grouping. Page copy is included between groups of products and alternates between product description, brand information and customer service information. Page CTAs vary between “Buy it Now” hyperlinks and “Add to Cart” CTA buttons.
- The filter options represent the product information determined to be high value from the existing product details.
- The user can now enter their filtering options which will automatically refresh and load the product selection below.
- The ability to customize a product inventory allows the customer to make a purchasing decision faster which improves the overall purchase process.
#6 Test and iterate
Now that you have a content map or a sketch, you can do some user research or usability studies, both formally and informally. Before you take your sketches to the real world, run them by people you work with or the folks at home.
- Create a list of scenarios for users that will illuminate pain points in your content
- If the user doesn’t understand, ask how they would explain it.
Be sure to ask other specific questions to direct the user’s attention:
- What are you seeing overall?
- How likely are you to read the page (scale)
- What would you do next?
- What’s missing?
Here’s what Aaron came up with for gatesnfences.com
As a content strategist, you should attend any and all sessions, as there may be gaps in the interview that only you see and can help with Also, it’ll give you a better understanding of who you’re creating content for and what that group’s specific needs are. You’ll also gain an understanding of how users process information about the product or services you’re testing for. Get to know your users!
Do your best to get invited to and make time for user testing, as this places you closer to the strategy and allows you to ask questions pertinent to content and comprehension in real time. Try to get a sense of how the sessions will be run, who the participants are, and then observe how they react to what’s on the page — fear, doubt, confidence, curiosity?
But, if you can’t make it–which is totally understandable in the busy life of a content strategist–you can still look at the transcripts of the interview, or the interview summary for a lot of information that will inform your strategy moving forward.
Then it’s back to the drawing table–revise, test, revise, test. That’s the way to roll.
#7 Write your final content
Here are some tips to help you write good UX content based on your research and business strategy:
- Speak in the users’ language — no jargon, marketing or industry terms. Use plain language. Check this out: Plain Language for UX Writing.
- Be succinct with short rather than complex sentences with a lot of phrases
- Use the active voice. Here’s what you need to know about why.
- Write for a 8th grade reading level as this simplifies the language and makes it more readable in a digital environment.
- Make content scannable with headlines, subheads, short paragraphs and sentences, bulleted and numbered lists
- Create intuitive buttons and links
- Write with localization in mind–this means don’t use jargon or colloquialisms and keep it as succinct as possible
- Make it scannable–this helps performance in responsive sites and apps as well as online. Be sure to read Karen McGrane’s book Content Strategy for Mobile, to understand more about how chunky content improves the user experience both online and in mobile.
That said, here are some great articles for you:
- UX Writing Guidelines
- Best Practices to Improve Text Readability for Optimal User Experience
- Great information about UX Writing with statistics and research
- 11 Practical Examples of Good UX Writing
- 10 Key Ingredients of Top-Notch UX Writing: Pro Tips and Examples
Here’s Aaron’s rewrite and a sample of his rationale:
- Focused the copy to core messaging consistent with customer’s goals
- The headline displays the subject of the page content while the subhead copy describes the large selection of products available to the customer.
- Prominent text Hierarchy has been limited to brand name and model names with all other product copy remaining at paragraph-level scale to promote consistency across the page.
- Redundant mentions of product brands have been removed and now exist as data fields on each product card.
Needless to say there’s a lot more to effective digital writing than I can teach you about here, but you can find some great books on the subject. Check this out:
Top 19 books anyone in UX must read in 2020 (designers, writers and researchers)
#8 Evangelize content first design within your organization
Now that you have a plan for using a content first design approach, it’s important to work within your organization with your many stakeholders to educate them about the methodology, the importance of each step, and the benefits to the company, i.e. saving $$$!
Each of the previous seven steps can help you put together materials to distribute to your stakeholders.
- Identify content champions — who’s got your back? There are always naysayers, so you need to find allies who support content first design.
- Hold educational workshops that illustrate the efficacy of the approach.
- Get stakeholders involved — walk them through a project where you used this process.
- Prove it–the proof is in the metrics. Capture proof that your content first designs achieved or exceeded business goals. You can also use these metrics to refine your design process.
“Words matter. Content is design.” — Andy Knight, Senior Director of UX at TIAA
Keeping the focus on the conversation with your users, understanding those users, and working from there can help you deliver solutions that delight users but still meet your business goals. Following these 8 steps for content first design can help you deliver great designs that meet your organizations business goals. Now go out there and design content first!
Let me know how you plan around content-first design, what challenges and questions you have.
This article wouldn’t exist without the encouragement and creative support of Melinda Belcher, Sr. Director, Digital Experience at MasterCard.
