Published in

Content First Design: Our Story

When we began the internal discussion around our upcoming redesign for the 33 Degrees website, we had a good number of ideas regarding where we wanted to focus our attention. After some debate, it was decided the content and marketing language would benefit from a complete refresh to better target and engage our audience. Let us explore how we used a content first design approach to organize the conversation we were having with our audience.

What’s the story?

For centuries, storytelling has been the mechanism for passing morals, survival techniques, and historical events between community members. A story can engage an audience and help them remember key moments or points, this can translate online to an increase in visitor engagement and retention. To do this in our upcoming redesign, we decided that the content needed to be organized around engaging the viewer’s interest in the moment.

Outline the Content

We began outlining the content to ensure the story was being told properly. On sticky notes, all the various content that needed to be included on the site was written down and taped to a wall. It became clear when looking at all the notes which content was related and could be grouped together into larger categories. We ended up with four major content areas: Projects, Blog, About, and Contact. This provided a great starting point to begin the discussion around how we could tell a story across each of the four areas of content.

Pages as Chapters

Imagine each content area as a chapter in a book. These chapters can be long or short and can contain as many subsections as needed. It is important to organize the content around the key points, to progress the story and achieve the desired goal for the visitor. Here is how we decided to organize our content.

Website diagram #1

Sometimes, action summaries are beneficial to keep each content area focused as the outline is being formulated. In our case, we wanted: Projects to shed light on our work process; Blog to share industry thoughts; About to introduce our business culture and set project expectations; and Contact to engage with prospective clients.

Introducing content in the moment

With a rough content outline completed, we turned our focus to where the interaction points should be located within the story. These are the moments when we anticipate the visitor will be engaged with the content and most receptive to an actionable message to help guide them towards the desired goal. In the outline, these interaction points are marked with a highlighter for the content writer.

Website diagram #2

How would someone get here

Once we understood the content and where the interaction points were located in the story, our focus turned towards how the visitor will navigate through the story. That is to say, the web isn’t linear like most books but rather a choose-your-own-destiny story. Understanding how you intend the visitors to navigate between the content is just as important as the story itself. In our case, a majority of visitors enter our website on the homepage. Making it a great location to introduce the story, frame the experience, and set visitor expectations. Here is the outline we created for the homepage that was prepended onto the previous outline.

Website diagram #3

Where would they go next

As mentioned previously, a website is like a choose-your-own-destiny story. Visitors can be guided to another location through buttons, call-to-actions, or links within the content. By strategically guiding the visitor through the content they are interested in, you increase the probability that they will remain engaged and reach the desired goal. Once all interactions are mapped, the content outline is handed off to the content writer(s) to pen the story.

Benefits of Content First Design

There are two big benefits to using a content first design approach. The first is that the designers and developers involved on the project will find it easier to create an interface with actual content and the constraints imposed by that content. This helps to avoid character limit conflicts and accommodating additional content late in the development process. Secondly, this allows the content writer(s) more time in refining the message during the development process when they can see the content in all its various states.

Try a content first design approach on your next project to save resources and time early on.

Follow our blog via RSS or Email.

Privacy Policy We do not sell or share your information.

Ted is a graphic designer and front-end developer who specializes in branding, marketing, and website development.