Notes from Day 2 of UXLX 2018 — Designing Connected Content, Carrie Hane

Carrie Hane during her Designing Connected Content workshop (credit: UXLx)

Carrie Hane (@carriehd) presents a framework that is flexible, adaptable, extensible. A way to design content systems.

Models create structure, natural occurring thing. This is what humans do, they structure in order to organise and understand.

System: a regularly interacting or independent groups of items forming a unified whole.

Model-first system

  1. What’s the underlying structure of the domain
  2. Mental model of your audience
  3. How can content be reused?

Structured Content Stack

Structured content is planned, developed, etc., outside of any interface, so that it can be used by any interface.

Modeling context and content

Why should we do this digital project/page/product?

The whole process should start with what and why.

Most of the time, we start with the solution, not the problem. Instead, the focus should be on the problem your model should help fixing.

Whatever you design has a purpose. It also has a broader context: a chair in a room, a room in a house, a house in an environment, etc.

The idea is to create a model for all the things, rather than a model where only one system or channel fits.

For web content, navigation in your information space is part of a larger navigation (e.g. user looking for your content on Google, then navigating to your site.). The context is broader than your content or website.


  • Domain: sphere of knowledge

Each website has a specific domain: Spotify → Music, Nike → Athletes, Tesla → electric vehicles

  • Concept
  • Object: data
  • Attribute: a characteristic or inherent property of something.
  • Content type: a reusable container for storing content that has common structure and purpose.

Approach is based on multiple layers (Structured Content Layers):

  • navigation (more volatile)
  • content representation
  • content
  • content model
  • domain model (more stable)

Exercise: Domain = Live music

Step 1

Research the domain: online search, social media, library, books, blogs, etc.

Research through interviews (max 1 hour):

  • What is your role in (domain)
  • Who do you work with most often in your work on (domain)
  • What do you think it’s the biggest concern for your primary audience?
  • Etc.

Go through the client’s content and find labels and content (e.g. address, owners, capacity, etc. For a live music location)

Difference in vocabulary for users and subject experts

Step 2

Using research data, we create a domain model.

One way of doing it is by creating an entity-relationship model (objects = categories of things and relationships = how objects connect to each other)

Domain model for live music.

Once we have a model for things, validate it with subject experts, by asking questions:

  • Are we using the right terms?
  • Does this make sense?
  • Of any object or relationship: is this always true?

Content model

A content model describes all the content types you have identified as being part of the domain model.

Content types are defined as object + attribute(s)



  • Performance name
  • Date
  • Time
  • Venue
  • Lineup
  • Etc.

There’s rarely a direct line between domain model to content model.

Urban parks content model

Content model is a way to collect and store information about content, not to display information about content.

At this stage we have domain objects and content types. Now we need content to build everything.

If you do an audit, now’s the time to do it, because you have a model to test existing content against.

Content representation

Where you create the resources that will hold the content.

The idea is to identity typical questions about content, and use content in content types and attributes to answer that.


What does the primary user want to know?

  • When will the tickets be on sale?
  • How much do tickets cost?
  • What are the different ticket categories

Content type — Attribute — Example content

Ticket — price

Ticket — price category

Our take on a concert ticketing system model

Content Design Help

Mike Atherton & Carrie Hane’s book on Designing Connected Content

Mike Atherton & Carrie Hane’s book on Designing Connected Content (

Core Model Worksheet

Content Spec Sheet

Sarah Richard’s book on Content Design

Sarah Richard’s book on Content Design (

Definitions slide



Connected Design approach uses Atomic Design methodology (see

With the right information, you can create content attributes and add them to the code. Once they’re in the code, you can create the layout and design.

See slides of HTML and visual representation in Deck


This is where you work on:

  1. Global nav
  2. Contextual nav
  3. URL structure

At the end, we went from:


Main takeaways:

  • Designing connected content is a framework that allows you to design content models that are reusable across platforms and devices. The focus is on content, not pixels.