An organization's website is its face to the world. More people will interact with your website than via any other means of contact. Thousands, or even millions, of people each year visit your site. Are you meeting the needs of your audience? Helping them become loyal customers?

If you are designing your home and landing pages first, defining your sitemap, page templates, and wireframes before defining content types and their attributes, you're working from the outside-in. Starting with the context and meaning of your content, modeling it, and then using it in its constituent parts to create experiences that engage your audience.

Pixel-first design is outside-in

Designing from the outside-in means that you are creating containers that need to have content put into them. The size and shape of the containers may not fit. Kind of like packing leftovers and finding you have a little more food than you thought and now you can't close the lid. Or your container is too big. Or that you don't have enough containers for all the food.

What this typically looks like is auditing and reorganizing existing content into what seems like a more user-friendly way and creating some wireframes for the home page and various templates for interior pages. Once those are done, a mock-up of the home and an interior page get approved and coded. Meanwhile, the CMS is built and then it's ready for the content. Seems smooth sailing, but if you've gone through a website creation or redesign project, you know what happens next. The content you have doesn't exactly fit the interface templates or the CMS. So you do the best you can and get a new site launched.

We've been designing websites and digital products this way for decades now. But it's not working so well anymore. You can tell because websites are fully redesigned every few years. Satisfaction scores go down over the lifetime of a particular version rather than up. Authors blame the CMS for not letting them publish what they think will meet user needs. Staff and visitors alike have a hard time finding content because it's gotten redundant, obsolete, trivial, and disorganized. Fixes get patched together in the quickest way the developers and designers know how, treating instead of curing the underlying condition.

Content-first design is inside-out

However, when you design from the inside-out, you not only get a smoother design process, your content is easier to manage, your customers are more satisfied, and satisfaction scores trend upward because you're iterating by optimization rather than whole-scale redesign.

The inside-out process starts by determining the meaning, size, and shape of the content so you can design custom containers to hold it. Content becomes data. And it's modular. This is similar to any sort of modular building from IKEA furniture to Lego to the Sears homes of the early twentieth century.

To design from the inside-out, you first have to understand the meaning and context of your content. Maybe you are building a non-profit advocacy site to change policy about early childhood development. First, you create a model that represents the types of content you have:

• Events
• Policy Statements
• Sample Letters
• Blog Posts
• Initiatives
• Webinars

For each of these content types, you can define its properties. You know these properties because you know what an initiative is for your organization. Before it's a page on the website, it's a campaign around which you rally your advocates to achieve a stated outcome. For example, an Initiative may have these properties:  

• Initiative Name
• Short description
• Full description
• Dates active
• Goals
• Results
• Ways to help
• Topic
• Related Events
• Related Policy Statements
• Related Sample Letters

Now you can use these properties to determine how each detail template will respond to a user need. It can be helpful to start with questions a person has when they are introduced to this type of information. For an Initiative, a potential advocate might ask:

• What is the goal of this initiative?  
• What are the results so far?
• How can I help?

The properties can answer them. (Of course, we're thinking of the content that the properties contain)

Q: What is the goal of this initiative?  
A: Initiative Name, Full Description, Dates Active, Policy Statement summaries, Goals

Q: What are the results so far?
A: Results

Q: How can I help?  
A: Ways to Help, Attend a Related Event, Send a Letter to your representative, Learn more about this Topic

This is your Initiative detail page template. It gets a unique URL. Maybe something like

advocacysite.org/initiatives/:initiative-name

Now you can point people to this page from anywhere. It always has a home and the home is not tied to a place on a sitemap.

You might also want to create a page that highlights all the things you've got going on now. An Our Initiatives page, perhaps. Whereas in the outside-in method, you would have created this page before the content type, now you know which pieces are available. Without thinking yet about how this will look (or maybe you do have an idea by now, but don't hold the idea too tightly), you know that on the Our Initiatives page, you want people to see what you've got going on and pick an initiative that means the most to them.

For each Initiative, you want to list:

• Initiative Name
• Short Description
• Dates Active
• Topic

Based on the property outlines and some sample content, the interface designer/front-end developer can create a layout and apply formatting to represent them on your website.

Oh, and they are so important that you'll want to feature one on the home page too, as part of a "How You Can Help" area by using just the Initiative Name and Topic. Just like that, you've created your resource, designed an experience, and used the parts in three ways, on three different pages.

Not only that, but if you extend the Initiative an extra month, you go into your CMS, change that one field, hit Publish, and presto chango! it's changed in all the places that date is displayed. Less than five minutes later. Everyone is happy.

Simple but not easy

Maybe this sounds a bit simple. Of course, I've oversimplified the process, and there are many other tools and steps to decide on the content and produce it. And it isn't easy. It may take a few iterations to get your model right. The model might change a little once you get through all the instances of each content type (there are always exceptions to rules). But you're miles ahead from where you were before. And your site is flexible, extensible, and scalable.
 

If you want to learn how to design your website from the inside out, it's all explained in Designing Connected Content: Plan and Model Digital Products for Today and Tomorrow.

Tanzen can help you with your planning. Book a call or send us a note about your challenges.