Structured Content Design Workflow

Update 2022: This article has been revised! The updated version includes new examples, expanded use cases, and a reframing of the final phase to focus on maturity, instead of simply measurement. Check it out here.

Over the last several years I’ve become an ardent advocate of “structured content design.” This is the process of designing digital resources (like websites and apps) from the content out, as opposed to creating interaction and visual design first, then shoehorning the content into it right before (or right after) launch.

A structured content approach to digital work has a number of advantages over typical “interface first” processes.

More than any individual benefit, however, structured content focuses on communicating effectively to an organization’s patrons, constituents, and customers, wherever they are and however they choose to consume content. While it is the cornerstone of effective, scalable content design for the web, it’s also much more than a “web” technique: it is a way to prioritize effective communication across contexts.

This case study is drawn from a music appreciation and education project I recently restructured with community stakeholders in Seattle. My goal in sharing this is to provide an end-to-end example of what a structured content design workflow looks like in action. I’ll walk through the steps of a structured content approach, show examples of each step in practice, and discuss how the parts of the process scale to different types and sizes of engagements.

The work I show here follows and synthesizes a number of important and ground breaking approaches to content design developed by colleagues across information architecture, content strategy, and interaction design practices. This work is my own, but it is built on mighty precedents. I’ll provide links to these as we go, and a summary list of key resources to help you get started on your own.

The Project

Ravenna flamenco is a niche arts and culture website intended for practicing flamenco guitarists. It was created in 2005 and grew in size and variety of content over the next several years. In 2015 it got a visual design update, but since then it has remained virtually untouched. In spite of this wanton neglect, traffic to the site’s content and tools remains healthy. At the end of 2018 I decided to give its structure and underlying information architecture an update—and to move the whole thing to a structured content model.

Screen capture of the Ravenna Flamenco website in 2015
Flamenco arts and education site “Ravenna Flamenco,” circa 2015.

The Process

At a high level, a structured content design workflow moves through four interconnected phases: Meaning, Structure, Expression, and Performance. Each phase focuses on particular activities and outputs, each of which drives the next phase of design.

Diagram showing the flow of the structured content design process, from meaning, through structure, expression, and finally performance. Steps move from one to the next, and include loops back through each step for revision and optimization
Structured Content Design Workflow

Meaning

Use research data to understand structure and content resources relative to organizational goals and user needs

For Ravenna Flamenco, work in the “meaning” phase was driven by a discovery phase of foundational design research, including

From these inputs, community stakeholders and I identified a clear purpose and vision for the redesigned site, identified measurable goals, and created a set of design principles to help us adhere to our purpose and goals as we continued through the design process.

Purpose, vision, and design principles for Ravenna Flamenco. Purpose: Provide content, resources, and tools to help guitarists learn, understand, and perform flamenco music that is accurate, authentic, and respectful of and informed by flamenco’s cultural and artistic traditions. Vision: Communicate an understanding of the integrated whole of the art of flamenco guitar playing that provides genuine, unique value for practicing musicians. Design principles: holistic learning
, Multi-exposure discovery, Openness, Complementary, not competitive, Value over revenue
Ravenna Flamenco Purpose & Vision

To measure progress against these goals, we identified six month targets, to be measured against current Domain Authority, Search Visibility, Analytics rankings. These gave us concrete, quantitative metrics based on business and user interests, and will guide us as we continue to adjust and fine tune over time.

Once this foundation of purpose, vision, and goals was clear, we then created a domain model. In this context a domain is “a sphere of knowledge, influence, or activity” (Atherton & Hane, 33), or, more technically, “the particular context of application for the organizing system being designed and the kinds of interactions with resources it will enable” (Glushko, 319). The domain model allows us to create alignment around concepts, terms, and relationships important to the content we’re organizing, and to identify gaps in knowledge and conflicting points of view among stakeholders.

For Ravenna Flamenco, as is often the case for all but the most narrowly focused domains, “the” domain model turned out to be two overlapping models. “Learning Flamenco” and “Flamenco Guitar Playing” proved to have sufficiently distinct elements, relationships, and behaviors that it was easier to understand the relationships between concepts in each space by mapping them separately.

Domain models for flamenco guitar playing and for learning flamenco`
Ravenna Flamenco domain models

Each of the elements identified in these models were defined collaboratively with the input of stakeholders and informed by domain research. Once we agreed on the relevant concepts and their relationships, we could then identify which ones were the most likely content types: the concepts around which we could build a reusable structure for common resources across the subject domain. These content types provide a starting point for the content modeling that happens in the next phase, “Structure.”

How Does It Scale?

The “meaning” phase focuses on creating an explicit, common understanding and alignment on an organization’s goals, content, and value proposition. Though these activities scale relatively unchanged to larger projects and organizations, in some cases it can be helpful to use additional tools and techniques to generate insight. For a recent healthcare client, for example, I ran an “alignment personas” workshop (developed by my colleague Tamara Adlin) to elicit clear project goals and success metrics. For a recent lifestyle app startup client, we analyzed and synthesized two years (and thousands of entries) worth of “unsubscribe” surveys to help build an informed picture of how best to situate project goals in the larger context of user wants and needs.

Structure

Define and map content resource types and attributes to support clearly defined, goal-oriented activity of organizations and users

Inputs from the “Meaning” phase provide the raw material from which to define structure. This foundation gives us an informed basis from which to:

Work in the structure phase culminates in a Content Model that creates a schema for all of the content we’ll be organizing and maps content type relationships within our subject domain. At a high level, the content model can be represented as a simple diagram that shows the connections and connecting elements between content types.

A content model for Ravenna flamenco showing the relationships between articles, metronomes, and lessons.
The Ravenna Flamenco content model

Below that simple surface, however, types, attributes, and taxonomies need to be worked out in detail in order to provide the connective tissue that holds the structure together and allows it to be articulated effectively across contexts.

A screenshot of a spreadsheet depiction of the Ravenna Flamenco content model
Content model descriptions, source content, and common attributes are explicitly defined. View in Google Sheets
A screenshot of a spreadsheet depiction of Ravenna Flamenco content types
Individual content type schemas define which shared attributes are used by each type, how they are applied, and which data elements are used to connect them across the system. View in Google Sheets
A screenshot of a spreadsheet depiction of Ravenna Flamenco content attributes
Attributes are centrally typed and defined to maintain consistency across content types. View in Google Sheets
A screenshot of a spreadsheet depiction of Ravenna Flamenco taxonomy overviews
Like content types, taxonomy descriptions, source content, and uses are explicitly defined. View in Google Sheets
A screenshot of a spreadsheet depiction of individual Ravenna Flamenco taxonomies
Individual taxonomies are created to fit the scope and scale of the current (and projected) collection of content. View in Google Sheets

In addition to the design principles and domain model from the Meaning phase, the existing content of Ravenna Flamenco provided valuable guidance into how best to structure its resources. As part of this phase, we performed a Content Inventory, linked with analytics data, and a qualitative Content Audit.

A screenshot of a spreadsheet depiction of the Ravenna Flamenco content manifest
Ravenna Flamenco content audit results, mapping content to be deleted, revised, and consolidated. View in Google Sheets

This work revealed which resources were performing well, or otherwise had value, and which were redundant, outdated, or trivial. “Blog post” content, for instance, was both of poor quality and performing miserably, which made the decision to cut that content from the new site easy to defend—despite the fact that it made up nearly half of the site’s pages.

As a holistic record of what to keep, delete, revise, and consolidate from the old site, the content audit also provided a starting point for the Content Manifest which would guide content revision, creation, and migration to the new structure.

How Does It Scale?

The number of content types needed by a given collection depends largely on the scope of its domain, but the process for delineating and describing content models scales proportionally to larger projects. By properly structuring inventory and audit data, even large content sets of thousands of resources can be analyzed and structured using commonly available, easily accessible tools.

I like to start this process with platform agnostic tools (hence all the spreadsheets) because this helps the content design team focus on the inherent structure of concepts, as opposed to adapting from the start to the varying strengths and weaknesses of specialized tools. For all but the smallest organization systems, taxonomies and content types will eventually be managed by a CMS or standalone vocabulary management tool. Starting with a simple representation of structured content makes it easier to export these design foundations in formats specialized tools can use (like CSV of JSON files).

Expression

Create platform-specific modes of access to content resources and functionality in order to meet organization and user goals in context

The structure defined in the previous phase provides a foundation for communicating the meaning we defined in the first phase. Since that structure isn’t dependent on a specific platform or technology, it can be used as a starting point from which to express content across any number of contexts.

The primary task in the Expression phase, then, is to communicate meaning most effectively given a particular medium’s opportunities and constraints. For many stakeholders (and practitioners), this will be the first phase that “looks like design.” While it is the first place we begin to sketch out traditional user interfaces, these interfaces are not “the start of design”: they are an articulation of the meaning and structure we’ve already established.

In the case of Ravenna Flamenco, the most explicit way to move from “content model” to “web user interface” is to use content type attributes, defined in the content model, to construct “block templates,” and then use those to create “priority guides.”

Block templates for the redesigned Ravenna Flamenco website showing basic content elements as simple blocks in a mobile screen-like layout
Ravenna Flamenco block templates
Block templates as evolved into priority guides, which use real website content to increase the level of content fidelity
Moving from block templates to priority guides

Mapping out the attribute contents and priorities in block templates helps us verify early on in the design process that the system for expressing content works globally, and that resources are connected in ways that express and are supported by the structure we’ve defined. Once we’re confident this big picture view supports project goals, we can then “expand” our block templates into priority guides, using actual, prioritized content as the foundation of the interface design process.

Because they emerge from the inherent structural connections of domain content, priority guides create an implicit sense of how the content collection “hangs together” by themselves. Related content, shared attributes, and shared taxonomy terms all work to create a sense of “aboutness” and interconnection. Global navigation subsequently makes these connections explicit, and layers in additional opportunities for meaning making and discovery that go beyond what individual resources can offer at the page level.

Clients and colleagues are sometimes surprised that the design of global navigation occurs this late in the design process. Once we recognize that the primary “connectedness” of the content is embodied in the content itself, however, this order makes perfect sense. It also means that we can design navigation that supports these inherent connections, instead of mandating an arbitrary structure and forcing content to fit into it.

A document describing in text the high level goals of the redesigned Ravenna Flamenco navigation model: Site navigation provides users with an understanding of what Ravenna Flamenco has to offer, orientation to where they are in its information structure, and guidance on where to go next as they discover, use, and reuse resources on the site.
Ravenna Flamenco Navigation Model

For Ravenna Flamenco, I first defined the navigation model as a set of high level recommendations based on the site’s underlying design principles, as defined above. This principled approach meant that by the time I fleshed out my priority guides into mobile and desktop wireframes, answering design questions about page layout and interaction patterns could be done in a goal-oriented way, informed by project-wide definitions of success.

Wireframes of the redesigned Ravenna Flamenco site showing an article detail page
Ravenna Flamenco mobile and desktop wireframes, created from purpose-driven priority guides and designed with live site content.

For this project, the final step in expressing this content on the web was visual design. Since our project goals were primarily structure focused, we simply carried over site visual design from the existing styles defined in 2015. We fine-tuned and simplified the style in the browser as templates were being built, again using site content as defined in the content model to populate components and pages.

Mobile phone screenshots of basic templates in html build from wireframes
Ravenna Flamenco templates-in-process running on a local server.

In a structured content workflow, because the content model is defined early in the process, content migration to the new structure (and, if need be, a new CMS platform) can begin in parallel with UX and visual design. In the case of Ravenna Flamenco, I was responsible for both tasks so there were no efficiencies gained, but on multi-person teams this work can be performed in parallel, cutting out the migration bottleneck that often plagues (and delays) the final days of larger projects.

Screenshots of the redesigned Ravenna Flamenco home page on desktop and mobile
Ravenna Flamenco, fully populated and structurally redesigned for 2019

How Does It Scale?

“Expression” is where scaling can differ widely from project to project, and from platform to platform. To express a content set on the web, a small site might need a small team or just one person, as was the case in this example. For a recent county government client with thousands of pages, on the other hand, my team split up the website IA, interaction design, visual design, content migration, and development between a dozen individual contributors.

As with other steps in this process, Expression will often require additional tools from the UX skillset. User flows and use cases, prototyping and usability testing, tree testing, and other iterative and evaluative methods are all potentially on the table. The steps described here are not intended to supplant user centered design best practices, but rather to integrate with them in a way that brings structured content into our workflows early and uses it as an asset in the design process.

Performance

Measure, evaluate, and iterate on performance of meaning, structure, and expression against measurable, clearly defined goals.

The goal setting and metrics definition done in the “meaning” phase of a structured content design workflow provide the core elements we need to begin setting up a long term plan for the evolution and continued success of a content collection. Likewise, the content manifest used to migrate and revise content in the expression phase gives us a template to use as a foundation to measure, track, and prioritize optimization and revision work moving forward.

For Ravenna Flamenco, performance is assessed by measuring:

In keeping with the idea of “communicating content resources,” this lightweight governance plan takes into account the effectiveness of content across contexts, not just on a site or an app. As Ravenna Flamenco is “expressed” on different platforms, such as native mobile or voice, inputs from each of these contexts will be integrated into this performance perspective in order to better inform the whole.

How Does It Scale?

Since the content and development team for Ravenna Flamenco is a small, close-knit group of volunteers, the site’s plan for performance monitoring and revision is a fairly simple goal and metrics driven backlog. For a recent startup client for whom I performed a content usability and findability assessment, on the other hand, the core governance deliverable was a web writing style guide. For digital properties with wider scope, multiple stakeholders, or competing priorities, more robust plans including editorial calendars, responsibility matrices, and systematic workflow and approval chains are generally called for.

Outcomes

Visually, the 2018 version of Ravenna Flamenco looks almost unchanged from the 2015 version. Color palette, typefaces, and general page-level layout have largely been carried over untouched. Structurally and semantically, however, the site has been thoroughly overhauled. This new structure brings a number of benefits to the new site:

Ravenna Flamenco Performance Statistics

In order to accurately account for the time needed to index and assess search and keyword performance, success metrics for Ravenna Flamenco were set against a six month target. As such, a definitive account of “how we did” is not yet available. In the six weeks since the new site went live, however, some initial measurements show support for the positive impact of the structural changes made:

Six Month Metrics Update

Updated September 27, 2019

When I originally posted this article, I captured six week metrics above to give a glimpse of how the changes I discuss here could affect site performance long term. Now that we’ve passed the six month mark (in July of 2019), here’s an update of how the redesign has performed over that six month period (as compared to the six months preceding the redesign, where appropriate):

While I did make some content additions following the redesign, there were no major shifts in subject matter or style, and I didn’t change my overall approach to promoting content. The bounce rate actually increased — which would normally be a bit alarming — but the pages with the highest bounce rates (in the 60 and 70 percent) are the interactive flamenco practice metronomes I built for practicing musicians, so this behavior is expected. These are also the pages with the highest direct traffic.

Overall, I’m pretty happy with these numbers. Your mileage may vary, of course, but given the other benefits of a structured content approach to design (and a structured content result at the end), I can whole-heartedly recommend you seriously consider it.

I now return you to February 2019’s original post …

Resources and Getting Started

For reference and as a guide to help those who would like to dig deeper into these concepts, here is a summary of the sources I’ve referenced above, plus a few more that have indirectly influenced how I think about and practice structured content design:

This case study reflects insight and advice of dozens of colleagues and innovators, as well as my own threading together and evolution of these techniques where appropriate. I’ve endeavored to give credit where it is due above, but if I’ve misrepresented, mis-attributed, or otherwise left something or someone out, please do let me know, either directly via email or in the comments below.

And please do share your own experiences, questions, hesitations, and insights. The knowledge we share is bigger than any one of us can master, but I’m pretty sure that by sharing we can get a bit closer.