Content-First Design

Content-first Design

Table of Contents

Foreword

Preface

Why content-first design?

Who should read this book

What this book is not

How this book can teach you to learn

How this book is organized

Stay connected

Acknowledgments

1. Content-first design—​because content is design

1.1. Another reason for content-first design

1.2. What makes for good content-first design?

1.3. What happens when there is no content-first design?

1.4. What could happen instead

1.5. Case Study: Introduction

2. Your team’s content-first design process

2.1. What is a content-first design process?

2.1.1. What happens when there is no defined content-design process?

2.1.2. Benefits of a defined content-design process

2.2. Concepts behind content-first design

2.2.1. Design thinking

2.2.1.1. Benefits of design thinking

2.2.2. Human-centered design (HCD)

2.2.2.1. Principles of HCD

2.2.2.2. Similarities and differences between design thinking and human-centered design

2.2.2.3. Combining design thinking with human-centered design

2.2.3. Double-diamond content design process

2.2.3.1. Selecting tools for each project phase

2.2.3.2. Double-diamond content-design process

3. The discover phase

3.1. The project kickoff

3.1.1. Challenges to getting everyone on board

3.1.2. Convincing stakeholders of the value of content-first design

3.1.3. Getting stakeholders on board

3.1.4. How to run a project kickoff meeting

3.2. Case Study: Project kickoff

3.2.1. Why choose each of these discover-phase tasks?

4. The problem statement

4.1. Problem statement workshop

4.1.1. Invite the right participants

4.1.2. Establish rules of engagement

4.1.3. Provide a workshop structure

4.2. Case Study: Problem statement workshop

4.3. Identify assumptions

4.4. Plan project tasks

4.5. Case Study: Create a project plan

5. Interviewing stakeholders

5.1. Get to the heart of the matter

5.2. Benefits of the stakeholder interviews

5.3. Be prepared

6. Taking inventory

6.1. Why conduct a content inventory?

6.2. Creating the inventory

6.2.1. Manually creating the inventory

6.2.2. Creating an inventory with a crawling tool

6.3. Case Study: Content inventory

7. The define phase

7.1. What is a content audit?

7.2. So why do a content audit?

7.3. What type of audit should you do?

7.4. Work with stakeholders before the audit

7.5. Define the attributes to analyze

7.6. Establish a rating scale

7.7. Get to work

7.8. Analyze the results

7.9. Make a plan

7.10. Present to stakeholders

7.11. Case Study: Content audit

8. Learn who your users are

8.1. User journeys

8.2. User interviews

8.2.1. How to conduct a user interview

8.2.2. Writing the questions

8.2.3. Conducting the interview

8.2.4. Analyzing the results

8.3. Case Study: User interviews

8.4. Competitive analysis

8.5. Case Study: Competitive analysis

8.5.1. Competitive evaluation results

8.5.1.1. West Credit Union

8.5.1.2. Seamen’s Bank

8.5.1.3. Web Bank

8.5.1.4. Big Corp Financial

8.6. Empathy mapping

8.7. Case Study: Empathy mapping

9. The design phase

9.1. Priority guide

9.2. Case Study: Priority guide

9.3. Rapid prototyping

9.4. Case Study: Prototyping

9.5. A/B testing

9.6. Prototype

9.7. Iterate

9.8. Case Study: Share the prototype

10. The delivery phase

10.1. Case Study: Compliance and legal

10.2. Quality testing the content

10.3. Usability testing

10.4. Metrics

10.5. A/B testing

10.6. Iterate based on research and testing

11. Test and measure content at every phase

11.1. Evaluating content

11.1.1. Highlighter test

11.1.2. Cloze test

11.1.3. Recall test

11.2. Content heuristics

11.3. Content scorecards

11.4. Design critiques

11.5. Peer-to-peer reviews

11.6. Quantitative research

11.6.1. Benefits of quantitative research

11.6.2. Potential pitfalls

11.6.3. When to use quantitative research

11.7. Qualitative research

11.7.1. Usability studies

11.8. Case Study: User study

12. Stakeholder buy-in

12.1. The conversation

12.1.1. Capture your findings

12.2. Case Study: The team

12.3. Presenting

12.3.1. Content-first design rationale

12.3.2. Understand your stakeholders

12.3.3. Schedule the meeting

12.3.4. Facilitate

12.3.4.1. Get the right feedback

12.3.4.2. Present your solution

12.3.4.3. Next steps

12.3.4.4. Send a follow-up email

12.4. Case Study: Present to stakeholders

13. Advocate for content-first design

13.1. Build relationships with stakeholders

13.2. Demonstrate the benefits of content-first design

13.3. Work with leadership

14. Implement, learn, keep going

14.1. Getting a seat at the table

14.1.1. A phased approach

14.1.2. Be creative

14.2. Community

14.3. Case Study: Project outcomes

A. The art of the difficult conversation

A.1. How to approach a difficult conversation

A.1.1. Three deep breaths

A.1.2. Identify a practice example

A.1.3. Prepare for the conversation

A.1.4. Stop. Breathe. Notice. Reflect. Respond. (SBNRR)

A.2. The 5 steps

A.2.1. Step 1

A.2.2. Step 2

A.2.3. Step 3

A.2.4. Step 4

A.2.5. Step 5

A.2.6. When to use the 5 steps

A.2.7. Listening exercise

B. Tips on writing for a digital product

B.1. Getting started writing for digital products

B.2. The elements of content-first writing

B.2.1. User-centered

B.2.2. Simple and clear

B.2.3. Scannable

B.2.4. Visual hierarchy

B.2.4.1. Visual hierarchy critique

B.2.5. Relevant

B.2.6. Consistent

B.2.7. Accessible

B.2.8. Inclusive

B.3. Writing microcopy

B.3.1. Types of microcopy

B.3.1.1. Error messages

B.3.1.2. Instructional text & tooltips

B.3.1.3. Notifications & alerts

B.3.1.4. Onboarding

B.3.1.5. Dialogs/Modals

B.3.1.6. Dashboards

B.3.1.7. Empty states

B.3.1.8. Forms

B.3.1.9. Transactional emails

B.3.1.10. Success messages

B.3.1.11. Why is microcopy important?

Bibliography

Index

C. Copyright and Legal Notices

Content-first Design

Moving Content Forward

Sarah Johnson

Foreword

Hello, friend,

You know, it wasn’t that long ago that content folks like us felt a bit friendless at times. It wasn’t unusual for content designers and User Experience (UX) writers to feel we had to spend most of our time explaining what we did, why we should be involved, and just how involving us on a project might work. We used to spend far too much of our time talking about what we did, instead of just doing the work.

These days, I’m delighted to report that things have changed. These days, we have friends everywhere. In every organization. On every team.

Our numbers are growing. And I don’t just mean people with content designer or UX writer in their job title. I mean more people in all kinds of roles know that content design is essential—​essential—​to the work that they do.

I’ve always believed that UX writers and content designers are surrounded by friends and allies. Sure, some of them are often invisible at first. Most of them aren’t exactly walking around with brightly colored name tags on their blazers that say Hi! I’m a big fan of content design. Most of them aren’t even wearing blazers. Which is a bit of a shame. I love a sharp-dressed colleague, don’t you?

Right. Friends. We’ve got loads of ‘em. And they need our help.

Because even our most enthusiastic partners can struggle sometimes to define what we do. And to explain just how they and their teams should plan to work alongside us, and how they can get the most out of us when we’re involved.

Now that we’re at this point in the journey, it’s time to give them that plan. That map through the woods of content design.

First, let’s take a moment to enjoy how far we’ve come.

When I started out as a new UX writer, I literally didn’t know a single other person who did what I did. I’d tell my friends I was a UX writer. Not a lot of people knew what those words even meant. Least of all the designers, engineers, and product managers I was trying to work with. How exactly was I going to help them ship better products, help more users, and connect the dots across a complex product landscape, if all I did was work on the words?

Well, I love a challenge. And I bet you do, too.

UX writers and content designers started getting to work. We moved—​sometimes slowly, sometimes quickly—​from late-stage proofreaders and copy editors of strings into real active partners of our peers in UX design. We started doing more and more foundational work. Content audits, user journeys, empathy mapping, product narratives, prototyping, content-first wireframing, and more, always keeping content first.

That was a watershed moment, right there.

When we finally realized that the content can come first in a design process, we saw that we could be starting with the real building blocks of the solution—​the ideas, concepts, metaphors, mental models, and goals—​not just the boxes and bubbles that would later contain them.

In retrospect, it’s not even a little surprising. When you think about it clearly, putting the content design first in a project makes perfect sense.

But it’s still a new practice for most teams I know. That’s why this book is landing at just the right time.

More people than ever are realizing that the content is the experience. More teams than ever are starting to ask for—​and get—​the chance to work with a content designer by their side. At the same time, more content-ready product designers are trying to learn how to infuse more of the practice of content design into their work. And they’re not alone.

All those friends and allies we talked about a minute ago? They’ve always been eager to adopt the lens of content design in their work. You don’t need to wear the title of content designer to see the value in our practice, or to want to do what we do.

I don’t care if you’re a product manager at a tiny startup or the Director of UX at a multi-billion dollar unicorn. I see you. You’re holding this book, too. And you want to know if content-first design can help you create better products, too.

The answer is yes. So let’s skip right to that part.

Content-First Design gives you a practical approach to solving the challenges we all face today. How to align with internal stakeholders. How to set realistic yet ambitious goals. How to plan, prototype, test, and iterate in a content-first way.

Whether you’re a solo content designer supporting multiple products, a product manager trying to embed content thinking into your process, or part of a mature content team looking to scale your impact, this book offers clear, actionable guidance that will get you there.

And yes, it’s more than just inviting certain charming people to an earlier meeting. Content-first design is a blueprint for action that anybody can use.

Think of this book as your map through the complex terrain of modern product development. You’ll find regular rest stops for reflection, scenic overlooks for perspective, and plenty of shade for rest and contemplation.

The path is well-marked, but the journey is yours.

But every journey is better when you set out with a friend.

You know what they say: If you want to go fast, go alone. If you want to go far, go together. So pack your bag, lace up your boots, and bring along your whole team. The sky is clear, the path beckons, and so many fellow travelers are waiting to walk with you, just around the bend.

Welcome to the journey. Happy travels, friend.

Beth Dunn

Author of Cultivating Content Design (Dunn 2021)

Preface

Content-first design is the process by which research, exploration, and evaluation of content requirements and user needs inform the structure, layout, flow, and visuals for a digital product.

A content-first design approach is not a new concept. While the focus of this book is a content-first approach to web and mobile design, form follows function is a tried and true formula we see in countless other industries. Just as architects consider their clients’ visions and accommodate construction and budget constraints when designing spaces, understanding the user, the user problem, and the user’s goals is paramount in developing successful products.

While I demonstrate a methodology that has worked for me, I want to point out that this is a flexible concept and can be adapted to your organization in many ways. Also, this process can be introduced in phases, even tiny phases if that works best for you. That said, read on with an open and critical mind, see what you can learn, and I hope this book helps you improve your design process and ultimately your customer experience.

I first began to think about content-first design when I was working on a re-brand of the Teachers Insurance and Annuity Association (TIAA) website, mobile experience, and app. In preparation for the user experience design, we conducted countless customer interviews, listened to call-center conversations, held empathy mapping exercises, and organized regular usability testing sessions.

From this pre-design work, we learned about our customers’ fears, aspirations, and goals for conducting business online, as well as how they navigate and speak about their finances. By sitting through the research phase, we were able to come up with a list of principles to help guide us in writing about financial services online.

As I dug in to work with designers, I realized that we were creating a conversation with customers, many of whom are retired seniors, guiding them through potentially complex financial tasks and simplifying complex ideas into easy-to-follow instructions, reassuring them along the way, as we now understood their fears.Together with our user-interface designers, we used this pre-design work to create a content-first design for our website, mobile experience, and app that created a conversational interface with our customers.

The outcomes were off the charts. The percentage of customers successfully completing tasks went up by as much as 76.4%. This told me that looking into content-first and gaining a deep understanding of the user helped us deliver successful solutions.

Content-first design happens in collaboration with the UX designers, UI designers, accessibility experts, product managers, compliance or legal experts, and other key stakeholders who can help further your exploration into requirements and user needs to create best-in-class product solutions.

One of the things we learned at TIAA was that users require simple language to explain complex ideas, no jargon, no figures of speech, nothing that can be misunderstood across geographic, socio-economic, sexual orientation, race, and other factors weighing into a user’s background. Today this is called plain language and is a guiding principle in UX writing, but this work at TIAA took place prior to that thinking and the development of plainlanguage.gov. It also refers to inclusive design, which means that anyone who visits the site or app understands the message, next best actions, and how to achieve their goals.

Why content-first design?

One of the biggest frustrations of content designers is that we are brought to the table too late in the process, left out of strategy meetings, and asked to fill in the blanks for a finished design. We’re thought of as glorified copywriters. If I hear content referred to as copy one more time, I’ll go bananas.

Frustration continues when there is no collaboration between content, design, and other stakeholders. During a content-first design process, stakeholders participate in content discovery and definition. Additionally, stakeholder participation emphasizes the complexity behind content-first design and educates them about the measurable results you can achieve with this process.