Integrating content strategy into your UX design process

Karen McGrane @karenmcgrane Webstock 2013 workshop Notes by Jo Orange Workshop topics: 1. 2. 3. 4. Content strategy lifecycle (Content discontent) Content modeling Publishing workflow (states, roles, and permissions) 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 is good 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 of the process. Analogy of an empty gift box as a present. Content of the box is not part 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 Static Centralised Walled Costly Geeky

To Dynamic Decentralised Social Cheap Mainstream

Substituting one set of problems for another (centralised to decentralised). Reacting and move back to centralised. Just a different set of problems, eg bottlenecks. Web is now a more social, community-based experience. Everyone is making content. 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? Just because the tools are cheap doesn't mean the value of content is. Themes

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

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

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

2. Content (mis)management. Content management infrastructure allows content to

be 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 just migrate content, but it costs more in the long run for users to hunt through all the garbage to find what they want.

3. Action, not awareness. "The essence of the web is action. We go to the web

because we have a task, there is something we need to do; there is a problem we need to solve. What helps us do? What helps us act?" Gerry McGovern. The answer to "why" is an action. What do you expect to be different or how to you expect to change users with your action (eg "we should have a blog"; it would be cool to have a video of the CEO on the homepage"). Just because we can, doesn't mean you should. 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 Process Think of process as being more like a toolkit. The more tools we have in our toolbox the more likely you'll have a tool that fits the task. Also feel more confident as a professional 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 is not important. Dubberly Design Office, How do you design? http://interactiondesign.sva.edu/classes/fall10/designmanagement/files/2010/08/Ho w-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?

2. CONTENT MODELING "Content precedes design. Design in the absence of content is not design, it's decoration." - 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 alters your content, designing alters content". Haven't done a good enough job on the web to structure our content. Need to find out what type of content we have and model it. What flexibility is needed in templates? "A lot of bad content management implementations homogenize vastly different content types into the same bland template." Problem isn't too much structure - it's not enough structure. What is content modeling? The process of turning all the "stuff" in the site into a well-organised system of content 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 the content 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 Tumblr Tumblr 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 content up. Constrained the template to make it as easily as possible. Compared Tumblr to Wordpress where you can add anything and let the user figure it out themselves. This is the UX experience. Tumblr, with it's modeled constraints, is more 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.

What is the workflow going to be, who is responsible for it. How are all the pieces going to fit together? Let the content model define how the page design will be, not start with a web page design 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 inventory What content do you have? There's no way you can look at all the pages of your site. Your goal is to ensure you look 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 you have to do the inventory? The job isn't to get everything - but to find the most representative set of the content. Typical content inventory Inventories typically look at pages:

Page title, including the main title and what appears in the meta <title> 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 depend on time available to do inventory. Set yourself up for success by making the right choices at the beginning. Automated Inventories

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; results may not be organised in a meaningful way and difficult to analyse (waste time); don't get first-hand insights about content or get to know the content.

Content Audit Is the content any good? What about the quality of the content? This can be an exercise 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 the business 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 technology shouldn't define how you work - make the technology work for you. Publishing model and workflow model are not the same thing. What are the tasks involved in the workflow model? Jeff Eaton @eaton (on workflow) Strategic content management - http://alistapart.com/article/strategic-contentmanagement Content strategy: a love story / Jeff Eaton http://confabevents.com/blog/contentstrategy-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'll produce." - Patrick Cooper Better workflow equals usability. How to do it 1. Apply user-centred design processes. Treat it as a UX process. An out-of-the-box workflow isn't going to work for you. Analyse task completion like it's an assembly line. Get all the people in your organisation into a room and document all aspect of content creation, from initial idea onwards. Eg what is the process of getting a Word document onto the CMS - how does it need to be formatted? Document this process and how long it takes.

Roleplay + document online and offline workflows. They think it's a feature or requirements problem and having a feature will solve the problem (eg a 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 workarounds are 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 in different ways. Asking "why" is the answer to Stockholm Syndrome. Understand the users goals. Ask the 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 a different 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 what people want them to be named? Use similar visual cues for workflows across the site. Treat it like it's an interface design problem. Place similar fields in a consistent location. Need a consistent interface. And consistent for each role. Makes training easier, makes it easier for the user. "...better content management systems foster better content." Matt Thompson @mthomps http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-contentmanagement-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

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 right balance. A two-step workflow is sufficient.

Exercise 4: Publishing workflow scenario

WWE produces scripted live TV events Roles and permissions Make a sensible workflow out of a chaotic real-world process. How to define the smallest number of roles because we don't have an infinite number 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 apps tablet apps, print, social media, microsites, blogs, intranet, email, print. Localisation + Translation How can I create a repeatable, structured process?

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 unto themselves, could be managed by different teams. Downfall - Content could get out of sync. Need to update content in multiple places. Should be a nonstarter. Need one set of content managed internally). One wrapper per language (Need good decisions about how this content gets stored in the CMS) One field per language.

Social Content Why 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. 2. 3. 4. Multi-channel content must be reusable content. It must be structured content. It must be presentation-independent content. It must have meaningful metadata.

Example - Amazon.com desktop content doesn't work on mobile for product descriptions, etc. Headings on desktop may become navigation links on mobile. The code isn't clean. Content on mobile wasn't created with the idea of how it will be reused. Multiple versions / Alternative fall-backs Think 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 like on the mobile web. Currently CMS's preview button for content pages will only preview 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 think about structural metadata.

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

Headlines

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

Length

- 60 characters, 100 characters, 200 characters

Tone + Style

- SEO-optimised, Colloquial - Combo packages

Superheads + Subheads Summaries

Need custom summaries. Make sure the summary is achieving the purpose or goal of the content. Netflix has two summaries size - long and short. Progressive Disclosure Avoid pogo-sticking (Jared Spool) where users have to click in and out of heading to find the content they want. Scrolling on a mobile device is fluid and easy. Don't break content up into pages where a use has to click on a tiny link. Rather, keep all content on one page and user can easily scroll. Scrolling is okay! Myth - content on mobile screens needs to be short. Users prefer to be able to read the 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