integrating content strategy into your ux design process

7/29/2019 Integrating content strategy into your UX design process

1/9

Integrating content strategy into your UX design processKaren McGrane @karenmcgraneWebstock 2013 workshopNotes by Jo Orange

Workshop topics:

1. Content strategy lifecycle (Content discontent)2. Content modeling3. Publishing workflow (states, roles, and permissions)4. Multi-channel content (CMS interface design)

1. CONTENT STRATEGY LIFECYCLE

Case study. No point in doing the whole UX design without reviewing the content.Don't migrate the old content to the new-look website. Ensure content review is

added in to the project plan. The one thing that is going to make the website great isgood content. In this case study the addition to project was - 7000 pages, 45 people,6 weeks, + costs.

Belief that content is just going to take care of itself, and is not an intricate part ofthe process. Analogy of an empty gift box as a present. Content of the box is notpart of the present opening experience.

New redesigns expose content, especially bad content.

Exercise 1:List problems that have happened on your projects because content

didn't get the attention it deserved.

From To

Static Dynamic

Centralised Decentralised

Walled Social

Costly Cheap

Geeky Mainstream

Substituting one set of problems for another (centralised to decentralised). Reactingand move back to centralised. Just a different set of problems, eg bottlenecks.

Web is now a more social, community-based experience. Everyone is makingcontent. How do we extract value from allowing everyone to publish to the web?

Open source tools will allow you to do anything you want to. But should you? Justbecause the tools are cheap doesn't mean the value of content is.

Themes1. Everyone's a publisher. Consumer behaviour has changed. (Brian Solis - "when

blueprinting a content strategy, enthusiasm and support typically derails wenexamining...")


2/9

Publishing is complex - all various roles involved in production - writers, copyeditors, art directors, managing editor, ad sales, etc.

2. Content (mis)management. Content management infrastructure allows content tobe shoveled from one to another. This is "content migration" - should go through

content and sort out what is garbage and get rid of it. We think it is cheaper to justmigrate content, but it costs more in the long run for users to hunt through all thegarbage to find what they want.

3. Action, not awareness. "The essence of the web is action. We go to the webbecause we have a task, there is something we need to do; there is a problem weneed to solve. What helps us do? What helps us act?" Gerry McGovern. The answerto "why" is an action. What do you expect to be different or how to you expect tochange users with your action (eg "we should have a blog"; it would be cool to havea video of the CEO on the homepage"). Just because we can, doesn't mean youshould. If you can't articulate the value of why, then you don't have a content

strategy. What business value will you get out of it?

Design + Content ProcessThink of process as being more like a toolkit. The more tools we have in our toolboxthe more likely you'll have a tool that fits the task. Also feel more confident as aprofessional having more tools.

Most organisations don't have someone with the title "Content strategist".

The map is not the territory. It's still the same activity - what you choose to call it isnot important.

Dubberly Design Office, How do you design?http://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/How-Do-You-Design.pdf

Content, Technology, People = Content Strategy

Content

What will we publish why? When will we update it? Content lifecycle, who will manage it? How will it be structured? Appropriate fields, metadata

People

Who will create and maintain our content? What roles and permissions do we have? Where are the bottlenecks? How

can we streamline the process?

Technology

How will our tools facilitate publishing? What constraints will be set by the system?
http://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/How-Do-You-Design.pdfhttp://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/How-Do-You-Design.pdfhttp://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/How-Do-You-Design.pdfhttp://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/How-Do-You-Design.pdf


3/9

2. CONTENT MODELING

"Content precedes design. Design in the absence of content is not design, it'sdecoration." - Jeffrey Zeldman (@zeldman).

Idea of content first can also create similar problems as leaving it to last. It's

unrealistic to do content first.

Mark Bolton (@markbolton) - "Content needs to be structured and structuring altersyour content, designing alters content".

Haven't done a good enough job on the web to structure our content. Need to findout what type of content we have and model it. What flexibility is needed intemplates? "A lot of bad content management implementations homogenize vastlydifferent content types into the same bland template." Problem isn't too muchstructure - it's not enough structure.

What is content modeling?The process of turning all the "stuff" in the site into a well-organised system ofcontent types, attributes, and data-types.

What type of content is it? Article, product spec, recipe, slideshow... What fields or content attributes need to be entered? What limits are set on each field? Date, format, specs, content character

count in a field....build in tools to keep people on track, can you take thecontent to mobile? Too many constraints can be a user experience problem -eg not enough content characters in a field.

What relationships are shared between types and attributes?Case study - Wordpress vs TumblrTumblr modeled content types - what they thought their users would use most.They've modeled the interface to make it dead-simple for you to get your contentup. Constrained the template to make it as easily as possible.Compared Tumblr to Wordpress where you can add anything and let the user figureit out themselves. This is the UX experience. Tumblr, with it's modeled constraints, ismore flexible - uses better front-end design decisions.

Made easy by trying to understand the user and understand their goals (Tumblr).Trying for the best experience possible. The more constraints, the more flexibility.

Exercise 2:Content modeling

What are the business rules for attaching an image to a page, for example.Each attribute of the model needs to have business rules around them.

Have the right constraints been put on each field? Are some fields not editable, eg publish date? How does this

affect versioning? How do you define the order of which items appear - in what order? Are there fields that will be updated automatically through a set of metadata

business rules?

Content modeling is not a one-to-one matching of existing content on your website.May require a whole taxonomy structure to work through the content modeling.


4/9

What is the workflow going to be, who is responsible for it. How are all the piecesgoing to fit together?

Let the content model define how the page design will be, not start with a web pagedesign context. The design should not define the content. What do we want to do

with the content?

What content do you have?Giant spreadsheet FTW!

Content inventory - quantitative objective list of all the site content Content audit - subjective assessment of quality - put value judgements on

how good the content is - should it stay or should it g Gap analysis - what's missing that you need? Sourcing plan - Who, how and where you're going to get new content. Who's

responsible for the editing, writing, reviewing process and who's going to do

it and how long it's going to take.

Content inventoryWhat content do you have?There's no way you can look at all the pages of your site. Your goal is to ensure youlook at a representative sample of your content:

How broad will you go? Will you look at every section or just a subset? How deep do you need to go? Will you stop after a set number of levels?

What about orphan pages? How do you ensure you see examples of all the different content types? Will you follow common pathways that users are likely to take? Can you find content that has been lost or hidden?

Remember - you can continue updating this document as you go. How long do youhave to do the inventory? The job isn't to get everything - but to find the mostrepresentative set of the content.

Typical content inventoryInventories typically look at pages:

Page title, including the main title and what appears in the meta tag Content type or CMS template Page URL Content owner and last updated Date page was created Keywords that describe the page Page rank and number of visits Notes

Try not to gather too much stuff, or don't miss important stuff. Balance will dependon time available to do inventory. Set yourself up for success by making the rightchoices at the beginning.

Automated Inventories


5/9

Use tools to gather information - Power Mapper, HTTRack (PC) Get help from the CMS team - output data or metadata from the CMS Benefits of automated tools - When you just need a page count; helps find

"lost" pages; useful when scanning thousands of similar pages (products,articles)

Limitations of automated tools - may only index to a certain depth; resultsmay not be organised in a meaningful way and difficult to analyse (wastetime); don't get first-hand insights about content or get to know the content.

Content AuditIs the content any good? What about the quality of the content? This can be anexercise in persuasion.

Jargony - is it useful information or marketing-speak? Outdated - is it important that the content is fresh? Unnecessary - agree that sometimes the content isn't necessary. Does it help

achieve the business goals? What are the shared values between thebusiness and the web? Unavailable - make sure the content that is important is available on the

website.

Exercise 3:Content Modeling

3. PUBLISHING WORKFLOW

Often we allow technology to define the workflow process for us. The technologyshouldn't define how you work - make the technology work for you.

Publishing model and workflow model are not the same thing. What are the tasksinvolved in the workflow model?

Jeff Eaton @eaton (on workflow)Strategic content management -http://alistapart.com/article/strategic-content-managementContent strategy: a love story / Jeff Eatonhttp://confabevents.com/blog/content-strategy-a-love-story

Tasks are more important than the content model. What is the user's mental model?What sort of screens do they want to see.

"The happier people are, the better their content will be, the more content they'llproduce." - Patrick Cooper

Better workflow equals usability.

How to do it1. Apply user-centred design processes. Treat it as a UX process. An out-of-the-boxworkflow isn't going to work for you.Analyse task completion like it's an assembly line. Get all the people inyour organisation into a room and document all aspect of content creation, frominitial idea onwards. Eg what is the process of getting a Word document onto theCMS - how does it need to be formatted? Document this process and how long ittakes.
http://alistapart.com/article/strategic-content-managementhttp://alistapart.com/article/strategic-content-managementhttp://alistapart.com/article/strategic-content-managementhttp://alistapart.com/article/strategic-content-managementhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://confabevents.com/blog/content-strategy-a-love-storyhttp://alistapart.com/article/strategic-content-managementhttp://alistapart.com/article/strategic-content-management


6/9

Roleplay + document online and offline workflows. They think it's a feature orrequirements problem and having a feature will solve the problem (ega dropdown menu). Having control over how things are ordered on the page.

2. Don't just migrate the content, understand how the fields are used.

Content creators invent all kinds of workarounds. Diagnose what the workaroundsare as users are trying to achieve something that your system doesn't allow them to.Learning how fields are used will save you countless hours.You cannot escape the giant spreadsheet of doom.

3. Keep asking "why?" and iterate, iterate, iterate.Don't just replicate existing mental models. Design a new system that can work indifferent ways.Asking "why" is the answer to Stockholm Syndrome. Understand the users goals. Askthe user why they need to do something that way. Why do they make these choices.Then you'll get to what their real goals are.

Fast-and-crappy turns to polished-and-good with the right feedback.

4. Optimise the workflow, not individual screens.Real content production is a process, not a screen.Metadata makes flexible sites but complex workflows.Create different workflows for different behaviours. Eg photo editor will have adifferent workflow from the content creator.Bulk tools. Easy turns hard when you have to repeat it 10,000 times.

5. Use repeating concepts, not just UI elements.Proper categorisation and consistent labeling go a long way. Are they named whatpeople want them to be named?Use similar visual cues for workflows across the site. Treat it like it's an interfacedesign problem.Place similar fields in a consistent location. Need a consistent interface. Andconsistent for each role. Makes training easier, makes it easier for the user.

"...better content management systems foster better content." MattThompson @mthompshttp://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/

You publishing workflow is more than your CMS.

Anticipate what the problems could be.

The Publishing Lifecycle

Work-in-progress content Multiple participants (editors, photographers, lawyers) Updates and corrections Translation Review and approval

Roles and permissions (metadata administrator, editor, publisher, writer, etc)Roles
http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/


7/9

Who can do what? It's like content modeling - with people More roles are not better Roles should be based on requiring different access permissions or workflow,

not just on job title - Approver not "Senior Management" - "Photo editor" not "Marketing" Security (don't give people more power or access than they really need).

Don't want more roles, want fewer roles.

Permissions

Common actions: Create, Read, Preview, Publish, Update, Delete Possible actions: Promote/Feature, Unpublish Identifying organisation-specific actions.

Previewing

Write and Preview vs Save a Draft Previewing in context Preview for content, or preview for the site Anticipating the impact of metadata Remember multi-channel?

Approval Processes

Everyone wants one-click publish, no one wants one-click embarrassment

Document states affect approval permissions Hard process vs soft process (iteration and review vs submission and

approval) Here be specification dragons.

Too much workflow and a complex system just pisses people off. Find the rightbalance. A two-step workflow is sufficient.

Exercise 4:Publishing workflow scenarioWWE produces scripted live TV events

Roles and permissionsMake a sensible workflow out of a chaotic real-world process.

How to define the smallest number of roles because we don't have an infinitenumber of staff to fill a huge number of roles. Writers could also approve content -a contributer and an editor roll.

4. MULTI-CHANNEL CONTENT

Your content is being published everywhere - website, mobile web, mobile appstablet apps, print, social media, microsites, blogs, intranet, email, print.

Localisation + TranslationHow can I create a repeatable, structured process?


8/9

The big three:

Translation vs localisation Human vs Service vs Machine Right-to-left and "big alphabet' languages.

Three language models (can also apply to your mobile site):

One site per language (entirely distinctive websites, own silos untothemselves, could be managed by different teams. Downfall - Content couldget out of sync. Need to update content in multiple places. Should be a non-starter. Need one set of content managed internally).

One wrapper per language (Need good decisions about how this content getsstored in the CMS)

One field per language.Social ContentWhy would you ever do this?: Get users to do your work for you.

Promoting your site or services Supporting each other Generating valuable content

Proliferation of workflows and a proliferation of analytics.

Mobile Content

1. Multi-channel content must be reusable content.2. It must be structured content.3. It must be presentation-independent content.4. It must have meaningful metadata.

Example - Amazon.com desktop content doesn't work on mobile for productdescriptions, etc. Headings on desktop may become navigation links on mobile. Thecode isn't clean. Content on mobile wasn't created with the idea of how it will bereused.

Multiple versions / Alternative fall-backsThink through the structured content.Chunks, not blobs. Too many interfaces that create too many blobs.

Visual styling is not presentation-independent, eg bold titles in print media.

Build a tool into the system where editor can preview what the content will look likeon the mobile web. Currently CMS's preview button for content pages will onlypreview the desktop version.

"Metadata is a love note to the future" - Jason Scott @textfiles

The Guardian has a mobile algorithm that looks at the print edition. Need to thinkabout structural metadata.


9/9

Content PackagesHow do we design alternatives or fall-back versions?A package of image crops. Have a standards set of image crops. Designers need tofit the images within these image crops.

HeadlinesDon't allow headlines to be cropped (The Daily Beast has headlines cropped)New York Times - more flexibility

Length- 60 characters, 100 characters, 200 charactersTone + Style- SEO-optimised, ColloquialSuperheads + Subheads- Combo packages

SummariesNeed custom summaries. Make sure the summary is achieving the purpose or goal ofthe content. Netflix has two summaries size - long and short.

Progressive DisclosureAvoid pogo-sticking (Jared Spool) where users have to click in and out of heading tofind the content they want.Scrolling on a mobile device is fluid and easy. Don't break content up into pageswhere a use has to click on a tiny link. Rather, keep all content on one page anduser can easily scroll.

Scrolling is okay!

Myth - content on mobile screens needs to be short. Users prefer to be able to readthe whole article.

Other mobile techniques:

Anchor links Show/Hide

Don't create content for a specific context.

Exercise 5:CMS interface design

ADDITIONAL READING

Content strategy for mobile / Karen McGrane Content strategy at work / Margot Bloomstein Content strategy for the web / Kristina Halvorson

integrating content strategy into your ux design process

Documents