Don’t worry about sketching out content you won’t be changing or touching, like side menus or elements of a page that will stay the same. This will help people focus on the new or changing sections and not get distracted by an area that’s out of scope.

Have everyone sketch alone and then present their ideas to the group. This is a great time to have an open discussion about why everyone picked certain terms. Does the language reflect how your users think and the words they use?

As you move to wireframes or low fidelity mockups, you’ll have a much better understanding of how content comes into play. As John Zeratsky from Google Ventures says in his wise blog post, “You wouldn’t settle on one layout without exploring a few alternatives, so make sure you try different text solutions before deciding which direction is best.”

Wireframing with the right amount of content

If we think of sketching as step 1 in the design process, wireframing is step 2. We take our rough ideas and turn them into more solidified ones and try to answer questions that came out of sketching.

An activity that I find really helps inform wireframes is mapping out all my content elements and then determining their hierarchy.

Mapping out content elements

By content elements, I mean all the individual pieces of content on a page. You can use a tool like Mindmeister, write them out in a spreadsheet, or jot them down in a Sketch file.

I find it really helpful to have the content elements separated from the wireframe because it:

Documents all the possible things that could show on a page, especially since all the elements rarely appear at the same time

Keeps mockups realistic — we don’t need to show all the possible scenarios or ways information could be displayed in wireframes

Helps developers know what pieces of information are being incorporated

Establishes content relationships between different elements

Makes sure we don’t forget about pieces or skip over things down the line

For example, here are all the different content elements that could appear on a bank’s app landing page.

Content elements and wireframe for a bank’s app landing page

Determining content hierarchy

After you’ve got your content elements listed, start ordering them based on user priorities and any business goals you have. This exercise makes sure you’re thinking strategically about why you’re putting certain elements above others and will help you provide a strong rationale for why you settled on a certain layout and content hierarchy.

Using content in low fidelity mockups

By the time you’re moving into low fidelity mockups, you should be using detailed, realistic content for everything. Write the best content for your scenario, even if you know it’ll be replaced by someone down the line. Consider it a solid first draft. I use real sounding data, like real dates, times, and names, which helps people understand functionality without over-explaining.

We never use lorem ipsum at any stage of the design process. We can’t know if we’re solving the right problem, can’t get proper feedback from our peers, and can’t test anything with users if there aren’t real words in our designs. Content heavily informs our decisions, so if we don’t use real stuff, we end up trying to create misinformed experiences. The words on the screen are essential for helping users understand features, find what they’re looking for, and actually accomplish their tasks (this is especially true on small screens)! Thinking about content early gives us lots of time to get feedback from colleagues and users, and iterate on different options.

We often use fonts that we’d obviously never ship (sorry Comic Sans), so people understand the exact wording is still a work-in-progress, and we’re looking for feedback on things like flow and hierarchy.

This should go without saying, but avoid any inappropriate or funny placeholder content. If it ships accidentally down the line, it can erode trust with users very quickly.

Gather all the context you need to feel confident in what you’re writing. Talk to project managers, developers, and subject matter experts. Read feature documentation if your company has any (I’m so thankful for the Shopify Help Center). One of the most valuable groups of people to talk is your support team — tap into that wealth of knowledge. They have conversations with customers every day, they know what terms customers use to describe things, and they’ve got thousands of support tickets just waiting to be analyzed.

As you’re getting ready to move into high fidelity mockups, and you’ve got your core problems worked out, you’ll want to think about the end-to-end experience:

Touch points across the product

Error messages

Confirmations

User onboarding

Low fidelity still means high quality content and design.

Polishing content in high fidelity mockups

From a content strategist’s perspective, most of the heavy lifting should be done by this stage. If you skipped ahead to high fidelity mockups and didn’t do some of the earlier activities like mapping out all your content elements or documenting all the possible error messages, now is the time to do that.

“The best time to plant a tree was 20 years ago. The second best time is now.”

- Chinese Proverb

At this stage you’re ironing out any kinks with content. You’re not changing anything fundamental about the experience. At Shopify, after content and design is finalized, and a front-end developer has built the experience, our team sits down together and does what we call a polish review.

Our UX team doing a polish review before shipping

We review the final product that will ship and look for any small edits that need to be made. From a content perspective, we’re looking for incorrect punctuation, old versions of content that slipped through the cracks, dates formatted wrong, and anything else that doesn’t follow our design system.

We take notes during these sessions and follow up with the front-end developer to make sure everything’s updated. We’ll do another polish review if there were multiple changes that needed to be made. This helps make sure what ships is high quality, and something we’re proud of.

Make it work for you

I’m constantly adjusting these techniques based on what project I’m working on and its scope, and I totally get that the real world’s more messy than a step-by-step process! We go back and forth, we skip some steps for one project, we spend more time on a certain phase for another project.

I’m interested in hearing what you’re thinking about and doing. How do you incorporate content strategy into your design process? What level of content fidelity do you aim for at each stage?