Responsive Content Modeling

September 29, 2014 -

Written by Steve Fisher

Book us to come give a Responsive Content Modeling workshop.

I’ve always told clients that we’re a team, solving problems together. And I believed that, but a missing piece promoted distraction and prevented trust. Turns out that missing piece was a good ole content quarrel.

The most important thing

The most important thing anyone can do on a web project is find its nucleus. The core, that central piece of content around which everything orbits. Finding that reveals how all of the content fits together. It offers clarity to the relationships between the project’s content and the project’s vision, and will make your process far more successful.

A website is a black hole without content, and finding that core piece saves us from being sucked into the gravitational pull of building fancy buckets to hold lorem ipsum. It changes our center of gravity from a negative to a positive and connects people to people. The web exists to connect us—not to machines, but to each other. Unless the machine is Data, then I’m cool with that.

I help teams find the content nucleus through a collaborative responsive content modeling process that anyone can—and should—do.

Finding this core content will speed up the future design, content and development process. The entire team (vendors, stakeholders, audiences) will walk away with a common understanding and vision. Every time you write or revise, you’ll think about that core piece of content and refocus. The content authoring experience becomes what you it was always meant to be: dreamy.

So. Why model?

We live in a multi-device world and that’s not likely to change. Considering the number of current devices alone is mind boggling. Our content could be displayed on TVs, laptops, iPhones, android devices, Times-Square-type displays, projections, watches, audio devices… and this list grew as I typed.

Don’t you want your core idea—your primary message—to be clear and easy to access on all devices? Of course you do! Finding the nucleus of your content will make that happen. Prioritizing core content will also make it display-ready for gadgets like Google Glass and Apple Watches. Maybe that future device will share content wirelessly from a touch-screen watch to an audio interface in your sunglasses. BOOM—your prioritized content will be in place and ready for duty!

The team also orbits this central content. The process unites far flung members who aren’t sure how they’d work together to make a project successful. When they rally to find this central content, they become bonded by its gravitational pull. It’s the number one exercise I lead that causes that aha moment—the moment people understand how the project will succeed. It isn’t just finding the atomic piece that is the big win—it finding it together.

The right expectations

You *will* find a great solution. Everyone on the team needs to believe in the success of this activity. Positive thinking goes a long way to achieving success. And, honestly, I’ve never lead a session that hasn’t been successful.

The activity will be intense. There will be times when everyone’s staring into space, rocking to self-sooth. Pushing through will bring success. I promise.

The right team

You need people in the room who have the right passion and the right information. Here’s a typical team:

  1. UX lead
  2. Content strategist
  3. Developer
  4. Client project sponsor
  5. Client IT lead
  6. Client content specialist

It may not be possible to have these specialists for every project, but there’s probably people with these general responsibilities in their official (or unofficial) job descriptions. The goal is to involve people who understand the problem, are passionate about solving it, and have the authority to make decisions. A lot will happen during the workshop that will be foundational for future work.

The right foundation

How do you find your core pieces of content and your team’s aha moment? This can’t happen without these few foundational steps.

Step One – Know your content

Inventory everything you have. An audit will give you a clear picture of not only what exists, but its quality and reason for existing (OUCH/ROT).

Step Two – Know your purpose

  • Knowing your audiences and their priorities
  • Creating a UX vision for the project
  • Understanding your design principles
  • Setting your high-level goals for the site

We have to know what exists to know its purpose and to see patterns. We need to know our purpose because we can’t know what our central content type is without knowing who we’re communicating with and why. If you don’t know who you’re talking to, its pretty damn hard to write for them.

Getting our hands dirty

Having everyone together is key. Sometimes this means being locked in a room for the better part of a week. Sometimes just a couple days. It might look like a jury talking through the most important case ever.

We take breaks as a group and lunch gets delivered. Responsive content modeling is a team-building exercise—with less trust falls and more post-it notes. But trust will be crucial. Everyone needs to feel safe to speak freely, and that’s tricky without trust.

First the who, the why, and the what

So we don’t fall into the trap of letting opinion guide our decisions, it’s important that we establish our who: our audience and their needs.

The UX vision is the big WHY statement we’re striving for. Fire off a quick draft to get it out there and ensure it is pointing the group towards the right target down.

For the City of Red Deer our first draft stuck.

A web first organization that empowers anyone to access City of Red Deer information and services in any way they choose.

The next step is to establish the project’s design principles. These are the guideposts for all decision making during the project. They’re the values or why statements that will keep us moving towards the vision. Think of them as the guiding principles.

From the same project for the City of Red Deer we came up with seven design principles.

Users first
Help users get the information they want by focusing on common user expectations.

Plan for content, technical, and information architecture that can be easily maintained for the long term.

Create content that is accessible for the majority of people (using web accessibility guidelines) and the majority of devices (using responsive web design).

For real people
Engage people through a clear and honest voice.

Relevant content
Represent connections within the community through content related to City business and services.

Passion for your content
Everyone – the public, content authors, content champions – own, care for, and love their content.

Progressive enhancement
Start with the core experience available for all, and enhance the user experience when possible. (Ex: additional columns for wide screen, GPS location on certain devices). Protect the core.

With this framework established, we can dig in to the content modeling phase of our workshop. We’re going to prioritize every content type and as a team. We must agree on everything—no compromise. This is a must.

This is where we focus on audience needs and toss opinions aside. This is the secret to delight audiences and give them what they need.

Content Templates

Here we look at all the content views we’ll need, like the home page, landing page, standard content page, news releases, application templates, advanced search, etc. Often there is an established list based on an earlier contract, and this will ensure sure we have everything we need based on audits, audiences, and previous conversations.

We compare content templates with the vision and goals—taking everything we know about the content/audience/message and begin to prioritize them.

  • Where will the content live?
  • Where will the most important content to the primary audiences be found?
  • Will it live on the homepage or a landing page?
  • Is this a page where search is dominant?

Now we prioritize the content templates. Number one being the most important. The higher the number, the less important a content type is. Everything must have a priority and everyone in the group must agree (again, no compromise).

It will be important to know how to argue well and speak your mind.

A good resource is Dan Brown’s listening list from his great book *Designing Together*. I introduce it at the start of every workshop.

[edit]Dan shared a nice printer-friendly version of the checklist. Thanks Dan!

You need a strong facilitator for this piece. This can be anyone who understand a project’s process and purpose. The best facilitators are often the experience architect or the content strategist. Remember, there is no such thing as the client team and the vendor team: there is only the project team. You can’t successfully find that thing that bonds the team and the content by working separately.

For a government project I worked on, as we decided on primary audiences, content, and where the content would live, we discovered that the number one content template was the standard content page. Site visitors were looking for information like how to pay taxes or how to register for a dog license. This kind of information would live on a standard content page. Landing pages, listing page, and search were an important part of their journey, but not the information they were looking for.

Looking for the nucleus (content types)

Yay us! We found and prioritized the core content templates. Now we really need to get more granular and find the unique content type that everything orbits—the content nucleus or the atomic content type (Science! #FTW!).

We need list the discrete content types of our content templates: page title, contact module, featured image, teaser copy, main body copy, related items, location, etc. Each content type needs to be written out, probably on a whiteboard, until we’re sure everything is on the list. This may include items that we’re not sure we want included—that’s okay in a greenlight stage like this. We’ll deal with these later.

Step One!

Attach a high level priority of one, two, or three to each content type or item on the list.

  • One = essential. This view wouldn’t be able to function or communicate the core message without this item.
  • Two = great to have. These items fully support the core purpose of this view.
  • Three = nice to have. If these items didn’t exist it wouldn’t have a huge impact on the view.

If you start to label items with a four, they’re probably pointless. Make note, but remove them. Everything should point people towards the core purpose of this content.

Some priority three elements might reveal themselves as necessary and some priority ones could get demoted.Things will shift as the team progresses, but remember that everyone in the group must agree.

Content Model and Sketches on whiteboard

Step Two!

We’re not done yet. Now we go back through the three priority groups and assign a priority order to each element within each group. Be prepared to duke it out, laugh, cry, and sweat through this hard, but essential work. It’s not about compromise, it is about focusing on what’s best for the prioritized audiences.

This is why we established a framework through our UX Vision, design principles, and high level goals. We return to those guideposts for every decision, because opinions won’t move us forward. Considering the needs of our audiences will.

Something must be the very first priority and something must be the last. Try this mantra. EVERYTHING MUST BE PRIORITIZED OR ALL WILL DIE. Okay, don’t do that. But do take it seriously and resist the urge to quit—I promise it will be worth it. This is essentially a less technical, but more human-centered method of content modeling.

Sara Wachter-Boettcher captures this wonderfully in her book, *Content Everywhere*.

Content modeling requires you to simultaneously understand your goals at the highest level and get intimate with your content’s most minute attributes, and there’s a pretty big chasm in between. Luckily, there’s an entire discipline dedicated to bridging that divide: content strategy.

This step is when we begin to understand what we’re working to accomplish. The team continues to set priorities until every content type on this template has a unique priority.

Once these priorities are set, content type 1-1 is the most important. This is your core content type. Sometimes it can be 1 and 2 together, which was the case in the government site I mentioned earlier. It was the page title and the clarity copy on the content page that described to the audience what to expect from the content. Everything else connected to that content type.

These thousands of pages, inventories and audits flow out from this unique content type. This is how new design systems, content systems, and web communications tools become successful, gain purpose, and allow people to consistently find the information they’re looking for.

In a multi-device world where content can live anywhere, this is one of the most important things you can do to make your content successful.  Content should adapt to all platforms and be represented consistently. We can do this by making sure that priority 1-1 content is the first users see on any device.

Regardless of content being accessed on a pebble watch or a billboard with constraints, the fundamental message is as clear as it would be on a desktop. And for the 90% of people who start a task on one device and complete it on another, they’re seeing the congruence of this atomic piece of content and the connections it brings.

Basically, you just became a jr. content strategist. Achievement unlocked!


Now it’s time to sketch! We start to draw out the content and interaction patterns while thinking about priority, audience needs, vision, and principles. Keep in mind that priority doesn’t necessarily mean something comes first in a linear fashion. It could mean it has a higher placement in the visual hierarchy.

To make this work for responsive web design (RWD) projects, it’s important to do at least two sketches for each unique content template. One small screen and one large screen. As it isn’t practical to sketch the thousands of possible moments between break points on a RWD, these two sketches won’t cover everything, but they’’ll give your future in-browser wireframes a head start and force you to think in both contexts.

The goal is to keep priorities across all breakpoints that you sketch while representing them with the right interaction and content patterns for each screen size. Congruency in experience and content.

Get it on the web

Get the documented content types into in-browser wireframes to help demonstrate the content priorities and interaction patterns. This will allow us to test it on multiple devices and make sure our priorities hold up—do they align with the vision and principles?

This also allows the design to be informed by the content. As the design continues to progress into visual design, we make decisions based on the content—we can’t do our design work properly without understanding our content. A website is a black hole without content and so is a design system.

Document everything

As you move through each phase, take pictures of the whiteboards, keep notes, and save post-it notes. This will help you move into the next steps and help you communicate the value of what you just accomplished.

Fixing the Web

You too can find the core piece of content and move your project forward while focusing on the the important bits.

The content modeling notes will become annotations on future wireframes, your sketches will be the blueprints for the wireframes. Content authors will understand how it all fits together and project stakeholders will see rapid progress with high value.

People love this process. I’ve had an IT manager stifle a giggle while he announced to the team, “I love this process so much.”

Finding the core piece of content really is the key to every web project, big or small. It will make your projects more successful and build a better, more thoughtful web, one content type at a time.

Book us to run this workshop for your event, project, or team development day. We’ll guide participants through the discovery of their core piece of content and mapping all the relationships that orbit around it.

Join the conversation

comments powered by Disqus