Too often, website content grows old and outdated and loses its usefulness for visitors and the organization. No one pays much attention to this until it is time to overhaul the website. At that point, content becomes a huge obstacle and a seemingly insurmountable amount of work. The fix for this? Routine housekeeping to make sure the content has life-long value for site visitors and the organization. 

To create a process for routine content management, borrow a practice from Japanese lean manufacturing called 5S. 5S is a workplace organization methodology that consists of five Japanese words that loosely translate to sort, straighten, shine, standardize, and sustain. In manufacturing, applying this methodology reduces errors and improves quality - the same thing you need for your web content. Here’s how to 5S your web content. 

Sort  

The first practice is Sort. For this, you’ll want to identify and remove unnecessary content. This can be done by making a content inventory. You can learn all about making a content inventory here, but the basic idea is to make a spreadsheet that lists page titles and links to all of your content, from pages to pdfs and videos. Examine each piece of content and indicate if anything is redundant, outdated, or trivial (ROT). If it is, delete the content or fix it. 

In conjunction with the content inventory, take a look at your website’s analytics. Specifically, examine the least visited pages. What about these pages makes them so unpopular? Are they ROT, or is there a problem that is causing these pages to be overlooked? Fix the problems if the content is still valuable, or move these pages to the trash bin. 

Straighten

The second practice is Straighten, which is essentially the old aphorism “a place for everything and everything in its place.” Going back to the content inventory, now you’ll assess the organization of the content. Has it grown disorderly? Do the navigation or categories still make sense based on the content contained within them? Are callout features and promotions still relevant to your audience? Identify the top tasks for your website and conduct a usability test to check that everything is still functioning well for your users, or to test any proposed changes to your site’s navigation or workflow to make sure they'll solve the problem.  

Shine 

Next up is the Shine step. In manufacturing 5S, this is cleaning everything and eliminating dirt. For your website, do the following: 

• Run a link check to find broken URLs, 

• Use an accessibility tool like Wave to find WCAG 2.0 violations, and

• Look at every page for improper formatting, jargon, and outdated images. 

Standardize

To Standardize is to create and follow best practices for your site and maintain high standards. You might consider doing this by creating a style guide if you don’t already have one, and make sure everyone who is contributing to your website has the right tools to do their best work (such as image and video editing tools). Update documentation and training materials to make sure they are still useful, and make them easily accessible to your content contributors. Re-run trainings if you need to, or if you’ve never held training before, start now! 

Sustain 

This brings us to the final S, Sustain. This step is to “do without being told.” Repeat Sort, Straighten, Shine, and Standardize as part of a systematic process to continuously improve. Do it quarterly or monthly - make it habit! If you do, 5S will help you improve the user experience, quality, and relevance of your content - turning your website into a well-oiled machine. 

One of the most misunderstood UX deliverables are website wireframes. Maybe it's because they are lo-fi, or maybe it's because they are sometimes filled with scary decisions, or maybe it's just because some clients want to get to the fun "marketing" part: creative design. I'm not really sure. But, here's how I usually explain wireframes to clients when they encounter them for the first time. 

What are wireframes?

Wireframes are a visual guide to elements on a page. They represent function, content elements and features, and express navigation and wayfinding.

Though wireframes underpin the visual design, they are not one-to-one layouts of the future creative design composition; rather, they serve to influence and guide the design process.

In development and coding, wireframes transition into a functional specification for the build. 

Why does your website project need wireframes?

The short answer: because someone has to plan for what the site is going to do and how it is going to do it, captured in a language that designers and tech folk understand. Wireframes are these blueprints. 

If you've ever envisioned a new website before (or even a part of one), you know that you have a goal or a strategy in mind. Wireframes are the bridge between these strategies and the technology required to implement them successfully for users. 

What do you need to know before you start wireframing?

Basically, it boils down to these things: 

• Awareness of client's wishes, strategy, objectives or goals. 

• A content outline, beginnings of a content strategy, audiences identified, analytics, calls to action, success measures, etc. 

• Understand the PROBLEM. There is always a problem; take it on.

When it's time to start, look at the content outline or sitemap and decide what should be illustrated. Ask yourself:

• What content templates or page types will the site need?  
• Are there processes that should be paper-prototyped? Paper prototypes are essentially wireframes that express a workflow. For example, a registration process or shopping cart.  
• Is there a content management system (CMS)? If so, do you know the CMS's capabilities? If you do, great! Try to work within these capabilities. If not, talk to tech people as you go and prepare to adapt. 

Once you've produced the wireframes, expect tweaks throughout the rest of the project. Though "approved," or even endlessly vetted with coders, developers, designers and the client, nothing is ever final on the web.

There's a bagger at my local market who frequently packs my groceries. He's very organized.

Here's a breakdown of today's purchases to illuminate his orderliness:

3 Fettuccine Alfredo Lean Cuisines
3 Macaroni and Cheese Lean Cuisines
2 pints ice cream (don't judge)

Here's how he packed the items:

1 plastic bag: 3 Fettuccine Alfredo Lean Cuisines
1 plastic bag: 3 Macaroni and Cheese Lean Cuisines
1 plastic bag: 2 pints ice cream

Then he packed the three bags into a brown paper bag, and then the paper bag went into another plastic bag for a grand total of five bags for 8 items, but only one bag to carry.

Now, I suspect that the bagger in question has a compulsion or something else going on. But, that's beside the point. The lesson in this story is for information architects, and that lesson is twofold.

1: How you categorize or group items may not match how the user would group items. If I were packing my bags, I'd put it all in one or two plastic bags, jumbled together.

2. You could be going overboard, categorizing and consolidating for the sake of imposing order, rather than usefulness, resulting in an unnatural effect for the user. 5 bags! 8 items! Enough said!

Now, back to that ice cream...

Since January, I've been on a content outline streak. Two large higher ed sites and a smaller policy site are in the can, and now I'm moving on to another higher ed site. So, I thought I'd share a little bit about this deliverable.

---

What is a content outline?

Where I work, content outlines are the primary information architecture deliverable for the new or redesigned site. It's in outline format (0.0 Home, 1.0, 1.1, 1.1.1, 2.0, 2.1, etc.), and it becomes the supporting structure for the sitemap (the familiar boxes-and-lines rendering of an outline). Here, the information architect or copywriter combs through the existing source material, and working from the site's new strategy and goals, forms the written outline of pages.  

---

Why do you need a content outline for your website? 

The content outline is basically the Bible for the new, revised and old content on your site. Copywriters or editors will use the outline for guidance when revising and writing the new website. Generally, the content outline will capture at least the first three or four levels of the website's navigation, so that the project team can see where and how the majority of the site's content fits into the new structure. The goal is to have an intuitive home for all the content that has to be on the site.   

---

Where does it fit in the process? 

To put the website content outline in context, here's when it happens. 

• Goals and strategy for the site have been identified, and any primary user research needed to inform the content architecture has taken place. 

• An inventory of all the existing website content has been done. (To be honest, I think this step is wholly skippable.)

• Content outline time! 

• Sitemap

• Wireframes 

• Design, development, coding, testing, qa, etc.

Really, though, a content outline should be done any time you want to rework your site's content (or even a small section of content), independent of design or coding. It's a content thing. 

---

How do you write a content outline? 

So, you know whatever it is that you need to know about the strategy or goals of the site. Maybe you're just working on fixing a section of a site, and you know that you just need to repair the awful mess. That's a valuable goal. Or maybe you need to especially target an audience, or seek conversions, etc. Whatever it is, you're aware of it, and thus, you can begin. 

Step 1: Immerse yourself in source material. 

For sites with hundreds of pages, it's okay to spend a couple of days reading the site, particularly if you are unfamiliar with the project or the client. I find that coming into some sites is totally disorienting, like a bomb has gone off. As you click through the website, you'll notice wacky navigation schemes, hidden pockets of pages, wildly outdated pages and utterly confusing or contradictory text. This is totally overwhelming. 

After hours of reading and poking around, you'll strangely begin to know where everything is and what exactly it is that you are working with.

At this point, any print materials you can get your hands on can be helpful. People seem to invest more time and money organizing and writing quality published material than they do for their web copy.

Step 2: Draft the top level navigation. 

Once you've grown to understand the beast that is your project, jot down the main navigation labels--the big buckets. I'll use higher ed--let's say generic undergrad liberal arts college--as an example, since that's been on my brain lately. 

0.0 Home

1.0 Admissions

2.0 Academics

3.0 Campus Life 

4.0 Paying for College

5.0 Athletics

6.0 Alumni

7.0 Parents & Families 

8.0 Giving

9.0 Intranet

(various footer links) 

Group them into sets if need be. Move things around. Give them new labels. Sketch out the homepage. Once you feel comfortable starting with what you have, move on. 

Step 3: Fill it in with the ideal. 

What I like to do next is fill out the next level from memory. So, I might say for 1.0 Admissions, I want a page for a checklist, a page for requirements, class profile, request information form, dates and deadlines, open houses/tours, etc. I do this rough sketch for every section, thinking more about the goals than the content that exists right now. 

Step 4: Add in the reality. 

Next, I start to pick through the source material and fill in the blanks. I make notes in the outline for combined pages, new copy, or stuff that is pretty good as-is. I write in ideas for the wireframes, if I have any, like "consider adding an event feed from the calendar." I note when I see a form, or when a new form is needed. I write basic descriptions for the page and suggestions for callouts.

By now, I've touched every page on the site several times, and I've officially become some kind of expert. 

Step 5: Add some notes about your vision.

Corny as it seems, it helps to write an introduction to the outline where you clearly state what your guiding idea or plan was and highlight the major technique(s) you used to accomplish it.  This is not about teaching best practices for writing for the web, but should be your rationale or approach. Include any major issues that you've identified and hope to address. 

Step 6: Make a sitemap (if you need one), test it if you can, then relax.

You are now a subject matter expert! 

---

In a nutshell

A quality content outline expresses the vision for the new website. It sets expectations for how many pages and how much work is ahead. It's also the fundamental building block of a site...you've set the navigation and the IA, now writers can begin working on the content. You'll also have the exact navigation items needed for the design. From here, projects big or small, are off to a solid start. 

Here's a true story that serves as a metaphor for why your website needs good navigation and information scent. 

This weekend I conducted a search for chaat masala. I had a Mark Bittman recipe variation for dal, and figured I could just get it at my local super-sized grocery store. This store is, in fact, the largest grocery store in southwest PA, and I had gotten garam masala at smaller stores before. I checked all the obvious places: International, spices, where they keep boxed dinners, to no avail. 

Since I live in an area with a significant Indian population (for Pittsburgh), I am rather close to two Indian groceries, and I knew they would carry my spice. 

Grocery K

I walk in, and it's dark. The store is crowded with products, and things are everywhere. To me, it seemed like the organizational principle of the place was "put the product wherever there is room."    

Grocery M

I walk in, and it's brightly lit. The store makes sense instantly. Dry staples like beans, dal and rice are along one wall. Across from the rice and beans, rows upon rows of spices, herbs, tamarind, sesame seeds... Another aisle has boxed dinners, another for frozens, prepared foods, and even mark-down section. Candy is in front of the register. 

Why I chose Grocery M

Grocery M is familiar. Sure, the other shoppers were speaking in another language, and my knowledge of what I was looking for was slim (spice blend?). But, it was organized. A glance at the store's shelves told me what was in each section, and I found the spices in seconds. Once I found the spices, it took a little while to find my specific spice, but after I briefly browsed the shelves, there it was. 

Organize your content like store M, not store K.  

• Make sure your store is clean and brightly lit. Can someone glance at your website and get the gist of its contents? Or is it cluttered with distractions?  

• Are your aisles organized? Your content organization and navigation structure should make sense and feel natural. 

• Can a new shopper transfer knowledge? I had keywords, nothing more. But based on my experiences at other stores, I had a general idea where to look. I had a mental model. 

• Did the customer convert? Ultimately, I found what I was looking for at store M. Store K? Honestly, I bailed. I knew there were other stores in town, and I didn't want to waste my time. Ask your users and check your stats: are users fleeing your content because they can't find what they are looking for, or did they successfully complete their task?