The following excerpt is from a hands-on guide for UXers that explores the intersection of content strategy and UX design on a website design project.
Our fictitious client is Balmain University, and our example project is the redesign of their international student website. As we reach the content modeling phase below, we’ve already completed an initial discovery and user research phase, the outcome of which is an unprioritized set of user stories. A competitor analysis has been conducted, and user flows are mapped.
We know that the existing site has about 150 pages, there will be a team of 3 writers on the project who will typically spend one day per week adding and maintaining content to the site, and the university has a content style guide that the international student site must follow.
“A content model is as much about the content that isn’t seen by the user.”
As a project team, we now need to start designing the interactions, interfaces, and content to achieve our prioritized user stories. So here we go.
Concept sketching
The core project team attends a “design studio” session to work on concepts for delivering the prioritized 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 6 rough ideas (one per cell) to achieve a particular user story. Our example user story is:
As a higher education agent I can find contact details in the BU International Office so I can ask questions on behalf of my clients (prospective students).
We have 60 seconds per idea, which might be the rough outline of a user interface, or a process diagram. There are no points for good drawing or overthinking the idea.
On this example sheet, several distinct ideas start to emerge:
- Embed a reusable panel with a quick question form for education agents
- Use a simple picker pattern for the education agents to self-identify themselves (and be shown the relevant contact details they need)
- Use simple and clear headings to chunk up the different types of contact details for the distinct user types
- Use tags to filter which contact details are shown
- Embed a reusable panel with the full contact details education agents need
- 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 3 minutes to present our 6 ideas to the group.
Everyone asks follow-up questions, critiques the ideas, and offers suggestions to develop the ideas further.
“There is no one rule for how to present your content model.”
We then vote (with dot stickers) on the strongest ideas on each sheet.
- The voting reveals that the reusable panel/module of contact details for education agents is the strongest idea
- The group is 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 10 minutes to think through and sketch our next iteration, like this one:
- The reusable panel/module can be slotted into different places on a page template to give the site managers more flexibility
- The pick a region interaction idea has been incorporated in the panel
- The contact details of a specific BU staff member (Education Agent Liaison Officer) for the region are shown, including their postal address
- 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 2 minutes to present their refined concept to the group.
Everyone asks follow-up questions, critiques the ideas, and offers suggestions to develop the concept even further.
We repeat these steps for the other prioritized user stories for the sprint until the team runs out of time.
What’s 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 standardized breakdown of regions? Where can we find it?
- How many Education Agent Liaison Officers (EALO) 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 okay 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.
“Articulating the model that underpins our content early gives us more time for insight.”
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, 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 EALO contact panel:
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’s 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 aren’t editable from within the CMS. This is too restrictive.
The modeling exercise also reveals the likely need for a region-controlled vocabulary. The list of regions (Europe, North America, South Asia, etc.) will be needed to populate the region picker and identify which EALO to show for each region.
Templates and content types—what’s the difference?
The 2 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, like event profile, article, or staff profile.
When we say template, we mean the actual HTML interface the user interacts with, like upcoming event index, homepage, article. A template may be an entire page or modules such as our example EALO 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.
“Ideally, you should present your content model in a collaborative space.”
We’ve already uncovered one likely controlled vocabulary for world regions for this single user story. We may need many more—countries, university departments, campuses, and 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’s communicating.
Want to learn more about this? Check out the entire guide from GatherContent to discover how you can embed content-first thinking into popular UX design techniques.
by Robert Mills
Robert is Content Strategist at GatherContent, the content collaboration platform. He is a journalism graduate, ex-BBC audience researcher and author of Designing the Invisible. When he isn't talking, writing, or reading about content, you can find him looking for typewriters to add to his collection, traveling whenever possible, or being held to ransom by his 2 cats.
