FREE RESOURCE

UX Design And Content Strategy: The Project Guide

This hands-on resource for all UXers is a project guide to UX design and content strategy that explores the relationship through a website project.

A project guide to UX design and content strategy

We’ll show you how to embed content-first thinking into popular UX design techniques to reveal powerful insights about the content, that lead to a better user experience.

We’ve worked up lots of example outputs so you can see it all in action.

Want to read later?


Introducing our client: Balmain University

Balmain University will be the fictitious client for our example project for this guide.

Project

BU International Student website re-design

Scenario

The International Office have commissioned us to run an end-toend redesign and build of their existing International Student site. The initial discovery and user research phase has been completed and we now have an unprioritised set of user stories.

Our objective

We now need to define, design, prototype and validate the core user interfaces and templates required to satisfy the highest priority user stories. We are going to adopt a content first approach at each stage.

Assumptions

This is an agile project that is constructed around user story (needs) that have emerged from the user research.

Content considerations

We have already asked the client some revealing questions that should influence the design process. The design has to be appropriate to the client and their ability to sustain that content.

  • the existing site has about 150 pages
  • there will be a team of three writers on the project to rewrite the content for the new site: two from the Comms Team and one hired writer to support them
  • they have the resources to typically spend one day per week adding and maintaining content to the site %li there are no plans to increase this for the new site
  • The University has a content style guide that the International Student site must follow

Chapter One

Define Content

User Stories

As a project team we’ve identified 80+ user needs which we have articulated as user stories.

Step #1

We prioritise the user stories with the client in an Agile release planning meeting

The user story cards are prioritised into Must, Should, Could and Won’t buckets by the end of the session.

Step #2

We update the user story backlog in our Google sheet

The assigned priorities for each user story were captured in the Google sheet for everyone in the team to refer to.

What is our inner content strategist thinking?

  • There’s already a growing list of likely content types emerging: events, contact details, something around exchange partners
  • Do these types of content already exist on the current site or are there new additions to sustain?
  • How many items are there for each content type? Does BU have a few exchange partner institutions or thousands to list? A dozen accredited agents or hundreds?
  • What’s included in the current versions of the content types?
  • Is there a single source of truth for contact details for BU staff? If so, where is it?
  • Multilingual content was prioritised as a could, but we need to keep an eye on it because that has all kinds of translation and maintenance considerations
  • Is there any likely content that the International Office (our client) does not have direct control over? If so, what? And who controls it?
[Tweet "UX Designers, what should your inner content strategist be thinking?"]

Step #3

Looking at the prioritised user stories we can see that we [the project team] need to work on the Must stories first

We will start with this user story...

#4 Find contact details:

“As a higher education agent I can find contact details in the BU International Office so I can ask questions on behalf of my (prospective student) clients”

The DNA of a user story

If you aren’t overly familiar with them, a user story includes:

  • the person using the service (actor)
  • what the user needs the service for (narrative)
  • why the user needs it (goal)

The UK Government’s Service Manual has some great guidance on writing user stories: https://www.gov.uk/servicemanual/agile/writing-user-stories.html

Prepare for content governance

We are keeping a list of potential risks, considerations and implications of maintaining and sustaining the content as we go through the UX design process.

Example: Who is going to translate content during the project and beyond?

Activity: Competitor Analysis

Let’s look at how BU’s competitors have used content to achieve the user story we’re working on. Asking these sorts of questions will reveal insights to inform our project UX design work:

  • what language and labels do they use? Any patterns emerging?
  • how granular is their content?
  • what content elements / attributes do they include?
  • what content mediums are they using and how?
  • what tone of voice do they use?
  • what content do they leave out?
  • what content are they translating?

Step #4

We review (click around) 5-6 competitor sites and annotate screenshots

We draw the team’s attention to the insights by annotating the screenshots - this one from Sydney University’s International Student site.

What is our inner content strategist thinking?

In 60 seconds we can draw out a bunch of insights (and follow up questions) from this single Sydney University example:

  1. They use the term “contact us” but others are using “enquire” – which term should [BU] use?
  2. They stress that only ‘Future students’ should use these contact details - is this true for BU? How else do we need to screen enquiries?
  3. They are using single letters, e.g. ‘F’ for the fax number - is this convention helpful and meaningful to an international audience?
  4. They have a different number for calls from overseas - Q. do BU have one too?
  5. Does BU have (or need) to present a separate mailing address? If so, what?
  6. They include (if a little hidden) office hours - what are the client’s office hours? What about dates the office is closed like public holidays?
  7. They use Google maps – if we were to include a map does BU have a preferred map type?
  8. And some general insights and questions:

  9. The various contact channels (email, call, form) have the same weighting - but does our client want to encourage users to opt for particular channels?
  10. There are no contact details for individual staff members - are we going to present actual people and their contact details? If so that might require a special content type
  11. How are we going to handle displaying international dialing codes in phone numbers? Does the BU International Office already have a convention for this? We should add this to the content style guide
  12. Presumably BU contact details already exist and we want to use those (and not create a duplicate) - but that will mean syndicating content from another system? Do we know which system?

We upload our annotated screenshots and analysis bullet points to the project team’s shared space (Basecamp).

We present our insights to the project team for a wider discussion.

Activity: Mapping User Flows

We now start to map out the user flows for our priority user stories to reveal the templates and key interfaces we need to design.

We consider where users arrive from, plus the step / actions they will take after their visit. This gives us more context to design the parts of the experience we have control over.

#4 Find contact details

We map out a high-level flow for each of the prioritised user stories to begin to understand how a user could achieve their goal.

What is our inner content strategist thinking?

Which pages will be the top landing pages on the site? Which are the top landing pages on the current site, and what content do they include?

  • Will a regular article page template be sufficient or do we need a dedicated landing page template?
  • Will the contact details for the staff that support the Education Agents be embedded in article pages on the topic or in a dedicated contact us page, or both? Is there a duplication risk?
  • Do we need a content type in the CMS for contact details so we can have a single source of truth that can be published in multiple places on the site?
  • How many BU staff members will actually be taking enquiries from Education Agents - one, two, a dozen?
  • Do the contact details (name, email, phone number) we need to satisfy the user story already exist? Where can we see them?
  • What other info may the Education Agent need to make a successful enquiry? Office hours (especially for calling)?
  • Will we need some screening questions to make sure they aren’t wasting BU staff time? Do any policies and protocols already exist about this?

We will feed these juicy insights directly into our content modelling work later in the guide.

Note potential templates and content types

Build a simple, running list of templates and CMS content types as they emerge during these early UX design activities. A table or bulleted list in a project Wiki, a shared Google doc, or Basecamp writeboard are all perfectly good options at this stage.

Chapter Two

Design (Content Models)

As a project team we now need to start designing the interactions, interfaces and content to achieve our prioritised user stories.

Concept Sketching

The core project team attend a “Design Studio” session to work on concepts for delivering the prioritised user stories for the sprint.

We follow Adaptive Path’s 6-Up, 1-Up brainstorm sketching technique to rapidly develop and refine ideas as a group.

Step #1

6-Up Brainstorm

Each of us in the room has to sketch out six rough ideas (one per cell) to achieve a particular user story. Our example user story is:

#4 Find contact details:

“As a higher education agent I can find contact details in the BU International Office so I can ask questions on behalf of my (prospective student) clients”

We have 60 secs per idea which might be the rough outline of a user interface, or a process diagram. There are no points for good drawing or over thinking the idea.

In 6 minutes the group of five have collectively produced 30 ideas like this sheet.

On this example sheet several distinct ideas start to emerge:

  1. Idea: embed a reusable panel with a quick question form for education agents
  2. Idea: use a simple picker pattern for the education agents to self identify themselves (and be shown the relevant contact details they need)
  3. Idea: use simple and clear headings to chunk up the different types of contact detail for the distinct user types
  4. Idea: use tags to filter which contact details are shown
  5. Idea: embed a reusable panel with the full contact details education agents need
  6. Idea: filter down the contact details based on the region of the education agent

Step #2

Present, critique, and vote on 6-up sheets

We now pin our sheets to the wall and each have three minutes to present our six ideas back to the group.

Everyone asks follow up questions and critiques the ideas, and offers suggestions to develop the ideas further.

We then vote (with dot stickers) on the strongest ideas on each sheet.

The dot voting makes it easy to see what the groups feels are the strongest ideas to develop further.
  1. The voting reveals that the reusable panel / module of contact details for education agents is the strongest idea
  2. The group are also interested in allowing education agents to get contact details based on region because the International Office has staff dedicated to liaising with agents in each region

Step #3

1-up activity

We now each develop and refine our strongest ideas from the 6-up activity on a single piece of paper (a 1-up sheet). We have ten minutes to think through and sketch our next iteration, like this one:

The 1-Up sketch has more thought and detail (and content insights)
  1. The reusable panel / module can be slotted into different places on a page template to give the site managers more flexibility
  2. The Pick a Region interaction idea has been incorporated in the panel
  3. The contact details of a specific BU staff member (Education Agent Liaison Officer) for the region are shown, including their postal address
  4. The Ask a question form has been incorporated

Step #4

Present and critique 1-up sheets

We pin our 1-Up sheets to the wall and each person has two minutes to present their refined concept back to the group.

Everyone asks follow up questions and critiques the ideas, and offers suggestions to develop the concept even further.

We repeat these steps for the other prioritised user stories for the sprint until the team runs out of time.

What is our inner content strategist thinking?

Although the concept sketches are still pretty raw we can start to draw some significant content insights (which are typically questions that need answers):

  • How many pages on the site should include this contact details panel for education agents?
  • Which bits of content are page furniture, e.g. the blurb text and form labels on the panel? How will clients be able to edit this beyond launch?
  • What are the world regions in this context? Does BU have a standardised breakdown of regions? Where can we find it?
  • How many Education Agent Liaison Officers are there? Is there more than one EALO per region? If so, do we show more than one EALO in the panel?
  • Is there already a source of truth for staff contact details (to populate those elements of the panel)? Where is it? What platform? What state? Who to talk to?
  • Is it ok to have staff pictures on the site? Will there be resistance?
  • What will happen to the content from Ask a question form submissions? Is there already a workflow for submitted questions from education agents? Who do we speak to about it?

Start defining your content model

From the rough sketch we can start to define the content elements required to support the user story. These content elements and the way they relate to each other is our content model.

Our early content models will certainly be iterated and refined as we learn more during the unfolding design process, but articulating the model that underpins our content early gives us more time for insight.

To begin with we use a shared project Notebook in Evernote to paste a scan of the sketch with a simple table of the initial content model for our our simple-looking Education Agent contact panel:

Ref ID Content elements Type Content type / template
1 Panel title Text EALO panel template
2 Panel blurb / intro Text EALO panel template
3 Region question title Text EALO panel template
4 Regions Taxonomy term R Regions controlled vocabulary
5 Education Agent Liaison Officer (EALO) text Text EALO panel template
6 EALO first name Name EALO profile content type
7 EALO surname Name EALO profile content type
8 EALO thumb picture Image EALO profile content type
9 EALO email address Email EALO profile content type
10 EALO phone number Number EALO profile content type
11 EALO postal address Address EALO profile content type
12 Ask question text Text EALO panel template
13 EALO first name (again) Name EALO profile content type
14 Question form field labels Text EALO panel template
15 Question form submit button label Text EALO panel template
Meta 1 Taxonomy term Text EALO profile content type

To populate the content for this simple-looking panel we need to consider a dedicated EALO profile content type to give us all the contact details we need for people like Steve Rogers.

It makes sense to have a EALO panel template that can be controlled in the CMS as a module to drop into selected pages. But it is important that all of the content elements in the template, like its title and instruction text, are editable by the client after launch. Such content elements (known as “page furniture”) often get hard coded into the template’s HTML and are not editable from within the CMS. This is too restrictive.

The modeling exercise also reveals the likely need for a Regions controlled vocabulary. The list of regions (Europe, North America, South Asia…) will be needed to populate the region picker and identify which Education Agent Liaison Officer to show for each region.

Templates and content types – what’s the difference?

The two terms are now used interchangeably and the most important thing is the project team means the same thing when they say template or content type.

On the BU project when we say content type we mean a collection of elements (attributes) in the CMS, e.g. event profile, article, or staff profile

When we say template we mean the actual HTML interface the user interacts with, e.g. upcoming event index, homepage, article. A template may be an entire page or modules such as our example Education Agent contact panel.

Confusingly, some things can be both CMS content types and templates - an event profile template on the site will be populated from an event profile content type in the CMS.

What hidden content do you need?

A content model is as much about the content that isn’t seen by the user - the string that holds it all together. But that content still needs to exist and needs thought and effort to produce and sustain.

We have already uncovered one likely controlled vocabulary for world regions for this single user story. We may need many more: countries, university departments, campuses, degree courses to support the rest of the user stories.

Content model formats

There is no one rule for how to present your content model. Ideally it should be in a collaborative space and format like Evernote, a Wiki, Google sheet, or a dedicated tool like GatherContent.

The most important thing is that the entire project team has quick access and can understand what it is communicating.

Chapter Three

Prototyping with Proto-Content

Now we have our user interface sketches and initial content model we’re ready to refine and digitise our designs for some early usability testing.

However you prefer to wire-frame / mock-up / prototype designs please use proto-content rather than Lorem Ipsum.

What’s wrong with Lorem Ipsum?

Stuffing Lorem Ipsum into wireframes and prototypes is not a content-first approach. It is the opposite because it is inert, meaningless and lacks context, revealing very little about the relationship between the design and the content.

We don’t need perfect content to design and validate our imperfect prototypes, but we do need something better than gibberish. Fortunately, there are several options for UX and visual designers to make smarter design decisions early:

  • Design with current content
  • Design with competitor content
  • Write your own throw-away content
  • Use draft content (don’t wait for sign off)
  • Commission sample content

We cover each type of proto-content in our Content Strategy: A Project Guide.

Step #1

We use the wireframing and prototyping tool UXPin to develop and digitise our sketched interface of the Education Agent panel into a lo-fi HTML prototype we can play and test with.

Working with proto-content

Rather than pasting in Lorem Ipsum or using generic labels like [email protected] in our prototype, we write our own proto-content. We want to design around the content - to be content-first.

We mainly do this by pasting in actual content from the existing site - names and contact details for example. And we attempt to write new content for elements that don’t already exist.

The 1-Up sketch has more thought and detail (and 1 content insights).

It won’t be the final content for the new site, but that doesn’t matter at this point.

Using proto-content reveals immediate insights:

  1. The panel’s heading quickly widows to a second line at the standard wing width
  2. Will education agents be able to easily self-identify which region they are from? Is Mexico in the region of North America or South America for example? Perhaps we should ask them which country they are from and map that to its region?
  3. South East Asia is the longest region name (that BU like to use) which easily fits into a dropdown of this width

Step #2

We continue to design the expanded version of the panel which reveals the Education Agent Liaison Officer contact details and ask a question form for the selected region.

The panel expands downwards once a region is selected to reveal the contact details and ask a question form for that region’s Education Agent Liaison Officer.
  1. The sentence feels a bit squashed but probably works
  2. Is this mugshot too small? Perhaps we don’t show mugshots on the side-wing version of the panel and only when it is embedded in the body area of the page (with much more width to play with)?
  3. This typical character-count email address is too long for the available width - we will need to rework the layout or the email addresses are going to break the template. What is the longest email address we know about?
  4. This layout can’t handle phone numbers either? Do we even need to say the word ‘phone’? Let’s look at our competitor examples again to see what they do.
  5. This layout is struggling to display a typical address? Is there even sufficient user need to include a post address in the panel? Could that level of detail be shown in the general staff directory area of the site?
  6. Should we limit the character count of questions? Where does the content in the forms actually go and get stored?

Chapter Four

Validating the Content

We’re ready to put our lo-fi prototype of the panel in front of some end users to get quick feedback we can iterate with.

Because we have used proto-content, rather than Lorem Ipsum, we can get juicy insights about the content at this early stage.

A content focus to usability testing

Step #1

We test the panel with four participants, in face-to-face sessions. We ask them to perform these two user tasks (that would largely achieve the user story).

User task #1

Find the most appropriate (BU) contact details to help you with a question you have on behalf of a prospective student client.

User task #2:

Ask your question using the contact method you most prefer. During the session we pay close attention to how the content is performing, trying to walk away with answers to these questions:

  • What content do they find useful (and don’t find useful)?
  • What content is missing (for them to perform their task)?
  • Do they understand the content or misinterpret it?
  • Do the labels and words we’ve used make sense?
  • What language do they use?

Working with usability testing observations

For general guidance on running effective usability testing sessions check out the {GOV.UK usability testing guidance}.

Testing observations

Step #2

Throughout the sessions we capture lots of observations and direct quotes from the participants:

“Why don’t you just ask me what country I’m in? I will definitely know the answer to that.”

“What’s the advantage of using the Ask a question form rather than just emailing the contact?”

“I can’t think of a situation when I would need their personal postal address - an email or phone number is all I need”

“The universities I work with don’t use fax machines any more so I would always presume that this is a phone number.”

“Education agent is just one title for people who do what we do, so you might want to be careful with that.”

“I know this is an email address - I don’t need to be told that.”

“I like seeing a picture of the person I’m going to deal with - not just a faceless person.”

Hypothesise, iterate, (re)validate

Step #3

We add all our observation notes to a Google sheet that the whole project team can access.

Step #4

We now agree as a project team a hypothesis to improve each usability issue with the Education Agent Contact panel

Observation / comment Hypothesis (to iterate and improve)
Why don't you just ask me what country I'm in? I will definitely know the answer to that. Changing the picker from regions to countries will increase an agent’s confidence that they are getting the appropriate contact details
I can’t think of a situation when I would need their personal postal address - an email or phone number is all I need Removing the postal address for individual contacts will save space and make the genuinely useful contact details easier to see and use.
Their email address was too long to see in the ask your question input field without moving the cursor back and forth - this could lead to input mistakes Increasing the width of the email input field by changing the layout of the form fields will mean users can see their entire email address without moving the cursor.
Education agent is just one title for people who do what we do, so you might want to be careful with that Clarifying what we mean by an “Education Agent” will help such people to self identify
I like seeing a picture of the person I’m going to deal with - not just a faceless person.” VALIDATED
I know this is an email address - I don’t need to be told that.” Removing the “Email” label will not confuse users and save space for the actual email address.
The universities I work with don’t use fax machines any more so I would always presume that this is a phone number.” Removing the “Phone” label will not confuse users and save space for the actual phone number.
Clicked on the email address to ask his question which opened his email browser, but there was no prepopulated subject line. Adding a pre-populated subject line as the email client opens will save the education agent time.
What's the advantage of using the Ask a question form rather than just emailing the contact?" Adding a short description that explains the benefits of using the form will encourage them to use the form rather than the email.

Step #5

We agree the priority of each hypothesis for implementation in the next iteration using the MoSCoW (Must, Should, Could, Won’t) method.

The panel expands downwards once a region is selected to reveal the contact details and ask a question form for that region’s Education Agent Liaison Officer.

Iteration #2

We now apply our hypotheses to the prototype panel.

  1. Tightened the title to work in the restricted width
  2. Clarifies who this is for
  3. Changed from selecting a region to country
  4. Still refer to the region that India is part of
  5. Kept the thumbnail image because of positive feedback
  6. Just the email address (without a redundant label)
  7. Just the phone number (without a redundant label)
  8. Added text benefit for using the form
  9. Form layout changed to give all fields plenty of room
  10. Updated the button to sound more personal and inviting

Re-test

Step #6

We’re now ready to run another round of usability testing and validate our hypotheses.

Some will have worked, some will fail and new issues and insights will emerge. That’s good.

We’ll now continue to follow this cycle of testing, hypothesising, and iterating until we’re confident we’ve got things right.

The End

And this is where we leave the story. Obviously our work is not finished and the site still needs to be built and launched, but that is a story / guide for another day.

Hopefully you will agree that good things happen when we iterate and improve the content and design together from the earliest stages.

We don’t claim that you will tease out all the content and design challenges working this way, but waiting to code and implement all the templates and CMS content types before uniting them with real content is simply asking for trouble.

Some simple additions to your existing UX techniques and a slight shift in perspective to a content strategist’s view of the world can make all the difference.

We would love to hear how you get on!

Free 46 page guide

Content Strategy: A Guide for UX Designers

This hands-on guide for all UXers explores the intersection of content strategy and UX design.

Download full guide

Download: A Project Guide to UX Design and Content Strategy

GatherContent helps you plan and produce website content, learn how.

Great, welcome aboard!

That’s it! You’re signed up to our mailing list and can expect content strategy goodness in your inbox soon.