Today, we are proud to launch a new online presence for Teehan+Lax!

Digital is changing, and so are we. We believe that 2011 will be a defining year for our company, and the new Teehanlax.com is a great way to mark the moment as we move ahead. Here’s a little bit about what you’ll find on our site:

Multi-screen from the start

From the get-go, we wanted to create a site that would work across a wide range of devices and screens sizes. We sketched out our mobile screens first, then worked up to tablets, standard, large and extra-large desktop resolutions. It was important to keep context in mind. For example, the mobile homepage simply displays contact information and a map. For layout and design, Matt and Andy worked together to design and develop a scaleable framework based on a 50-column grid. Design elements, styles and typography were all then built on top of this framework. You can get a sense of how this works by resizing your browser window.

Fresh new work

We finally get to share some of our latest and greatest work! Check out new case studies for Virgin Mobile, Bell, Weather Network and Logitech, to name a few. Travis, our resident WordPress expert, created an incredibly robust back-end solution which will let us content manage the site much more effectively. Stay tuned for more regular updates to this section as well as a new demo reel coming soon.

Dropping the new science

Labs now has a new home at teehanlax.com/labs. This is where you can see what we’re up to in the Lab and join the conversation. We are super stoked about our new labs initiative. If you haven’t heard about that yet, check out the announcement here. Don’t forget to follow the Labs crew on Twitter @tllabs.

Downloads

We love making stuff to share with our fellow design community, and now you can now find all of our biggest hits in one place. Check out teehanlax.com/downloads to see the latest and greatest in templates, stencils, and more.

Big thanks

Thanks so much to everyone who played a role in the project—especially to Matt, Andy and Travis who all dedicated late nights and weekends to pull this off in a relatively short period of time. And thanks to our fans, followers and commenters for continuing to track with us online (and IRL).

You like?

We’re also launching our Facebook page, which is where folks can get more of a behind-the-scenes look at who we are and what we’re getting up to.If you appreciate what we do, enjoy using some of our resources, or are just feeling friendly, give us a like and stay posted on what’s new at T+L!

Live documentation is any artifact we use to express design decisions we make along the way. It’s a malleable and active representation of what we’re creating. Live documentation evolves, grows, changes. It’s an extension of our short term working memory.

Dead documentation is any artifact we use to express the fact that we’ve spent a lot of time working on something. It’s a hard to change, static representation of stuff that has little to do with what we’re actually creating. Dead documentation sits in the project folder or on the shelf.

The trick is to do more of the former and less of the latter.

Content Strategy has recently emerged as “the next big thing” for digital designers and marketers. More than ever, businesses and brands are seeking to provide utility to customers, prospects and partners in the digital channel. At the same time, the proliferation of the mobile web and social media are redefining how we access, consume and engage with content online. As a result, there’s been a collective awakening to the importance of defining, designing, delivering and maintaining compelling content on the web.

Content strategy often requires a systems approach, emphasizing the structural whole as well as the sum of the parts. Unfortunately, there isn’t an easy or standard way to express this organizational structure. We can outline the high-level goals of the content strategy, and we can enumerate the necessary constituent parts (the content itself, people, processes, resources, etc.) But we don’t have a good way to document and describe how these parts relate to each other and the overall goals of the system.

The Content Flow Diagram (CFD) is a modelling technique designed to fill this gap.

Download CFD Omnigraffle Stencil Here

Basic Elements

CFDs can help us visualize and think about a strategic content system’s macrostructure. There are 5 basic elements:

• Entities (box) — the content itself, e.g. articles, media, collections
• Actors (stick figure) – e.g. users, content producers, editors
• Processes (circle) – e.g. publish, approve, rate and review
• Resources (document) – e.g. ontologies, attribute sets, guidelines
• Connectors (solid and dotted line) – directed paths and references

The primary structure of the CFD is the flow, consisting of a subject (usually an actor), a process, and an object (usually an entity), connected by a path. Here is an example of a typical flow:

Notice that in this case the process Create references Guidelines as a resource. This convention is helpful because it shows who will be using a given resource and for what purposes.

When a flow maps one entity onto another (i.e. there isn’t an actor involved), the process encapsulates a functional requirement for the underlying system:

It is often useful to show how resources are generated and maintained. This is achieved by designating a resource as the object of a flow:

Additional Elements

Although the five basic elements outlined above are sufficient to describe a wide range of strategic content systems, there are a few additional elements that can give us even more descriptive power.

• Goals (cloud) help us capture the underlying motivation and intent of the various actors involved. By including goals, we state our assumptions about strategic rationales behind the flows captured in the CFD.
• Portals (trapezoid) indicate what channels, platforms and points of entry actors use to access and manipulate content.
• Systems (cube) are essentially non-human actors. Content strategies often incorporate various proprietary and vendor-based solutions to facilitate community, search, data-flow and processing functions, etc. Incorporating these into the CFD helps us capture functional requirements for these systems and understand how they fit into to a larger operational strategy.
• External links (bracket) indicate where organizational boundaries lie and allow us to embed external resources and entities.
• Areas (rounded rectangle) show contextual groupings of flows. These groupings help readers parse more complex CFDs and understand the contextual domains that exist within the overall strategic content system.

It is also possible to layer on other dimensions of information through visual cues like colour, shading, line weight, etc. For example, one might use colour to indicate update frequency—e.g. evergreen content vs. responses to social media events that occur regularly.

Here is a more comprehensive example showing one possible (and fairly basic) content strategy for enabling online customer support (click to view larger version):

Click to view larger version

Conclusions

Content flow diagrams help us apply systems thinking to our content strategies by standardizing notation and making things visual and concrete. This modelling technique can be used casually—as in sketching ideas out on a whiteboard—or as a formal mode of documentation.

Content strategists should try to make their CFDs as intuitive and simple as possible, in order to promote collaboration. However, the CFD is a network diagram that can very easily grow in complexity. Therefore, it is often wise to break the overall system into logical pieces and model these separately, noting external connections where appropriate. Additionally, we can keep CFDs simple and purposeful by focusing on three primary questions:

• where does the content come from, and how does it lives and flow through the system?
• what are strategic resources necessary for and how will they be used?
• what are the major operational dependencies and responsibilities?

The CFD is one tool among many within the broader practice of content strategy. For example, one might conduct research, define high-level goals, generate resources such as templates, guidelines, policies etc. before or along-side the CFD. That said, the fact that content strategy is so multifaceted and multidisciplinary makes a systems-focused tool like CFDs even more necessary and helpful.

I hope that others find our contribution to this topic helpful and look forward to further improving and refining this technique.