At mStoner, we believe that storytelling is one of the foundations of an effective website and a way to better communicate with and engage audiences. When we talk about storytelling, we often talk about finding better ways to tell specific stories, such as stories about students, faculty members, or alumni. As mStoner’s content strategist, I like to use a specific tool to organically incorporate story elements into the design of a website, and that’s the storyframe.

What is a storyframe?

A storyframe is a text-only narrative outline for a web page, inspired by Fabricio Teixeira, creative director at R/GA.In a similar way that a wireframe shows you where a component or module will go on a page, a storyframe shows you where a story or message component will go. At mStoner, before we plan for specific modules and content types, we take a step back and write out what the page will say, not in marketing copy, but in natural language. This helps us focus on both the message hierarchy and the story structure of a particular page.Storyframes are most effective when they are relatively short, potentially as brief as a few lines, depending on the page. While anyone can use a storyframe, as a content strategist, I find that it is an especially helpful tool for translating a creative strategy into effective page content.

So what does a storyframe look like? By way of example, if you were to storyframe Johns Hopkins’ homepage, it might look something like this:

We’re Johns Hopkins University.

We’re America’s first research university.

We pursue big ideas and share what we learn to make the world abetter place.

We work hard to be a university that is:

• Intellectually diverse
• Driven by curiosity
• Recognised for our scholarship
• Globally focused

Let’s take a look at how we put that vision into practice. Along the way, you’ll meet some of our students and faculty. They each have a story about what makes Johns Hopkins a unique place.

We have nine distinct academic divisions. Though we have a lot to offer, we still operate as one unified university.

We are based in Baltimore, but we also have campuses around the world. This gives us a global presence and perspective.

These opportunities further our vision to be globally focused:

• Study Abroad
• Research and Education
• Campuses
• Fulbright Grantees

Research isn’t just something we do—it’s who we are. You can see this in our latest findings …

Our president, Ronald J. Daniels, knows that our commitment to research and experimentation is at the core of our identity; let’s hear from him…

As you can see, we offer a breadth of academic programs. Now let’s explore one that you might be interested in …

The storyframe, as demonstrated above, is a relatively straightforward document. This particular storyframe includes story elements such as:

• A distinct setting — Baltimore
• Memorable characters — the students, faculty, and university president who appear on the homepage each tell a small story about the university

When used thoughtfully, the storyframe creates a critical opportunity to reflect on your core messages, see the narrative you’re establishing, and tweak your message hierarchy. It’s an effective internal tool that allows you to take an extra moment to think about your page content early on so that it can inform and be informed by the design process.

When should you storyframe?

Creating a storyframe for every page of your site is not an effective use of your time. Some pages, such as Johnson & Wales University’s A to Z directory, for example, are more tactical and don’t have a narrative arc. Creating a storyframe for routing pages and directories may slow down your process, with little payoff.Your time is best spent storyframing for the following three higher education webpages:

1. Homepage

Your homepage is typically the first opportunity you have to tell your institution’s story. Therefore, it is essential to take the time to think about the order and flow of messages. Regardless of whether you want a homepage that is lush and filled with video, or clean and minimalist, the storyframe process will be the same.You have two options when it comes to your homepage: You can tell the entire story or you can tell the beginning of a story. In the first option, you tell a story that will be repeated, expanded, and deepened across a visitor’s experience. In the second option, you establish the very beginning of the story, just enough to tease a visitor’s interest, and create a larger narrative that unfolds across subsequent pages. If you choose the second option, storyframing the first two to three levels of your site will serve you well. But whether you want a homepage that tells a stand-alone story or functions as a Chapter One, we strongly recommend that this page establishes your setting and the key themes.

2. About Page

Your About page is another place where you have a tremendous opportunity to craft a clear narrative. Here you can tell the story of where you’ve been, who you are, and where you’re headed. Because About pages tend to be more text-heavy than homepages, your storyframe may be more closely aligned to the text on the final page. Regardless, creating a storyframe first will give you an opportunity to reflect on the core message, and then on the best way to convey that message. You may realise that your homepage and About pages are repetitive, or you may see gaps in the story that you want to convey.If the process starts to open up conversations and questions about specific content types, that’s OK. When you write out your story in natural language, it may spark an unexpected idea and help you see whether photography, video, infographics or pull quotes may ultimately tell your institution’s story in a more effective, dynamic, and engaging way.

3. Academic Program Pages

You’re meeting a prospective student at a highly emotionally charged point of his or her educational journey. As prospective students contemplate what to do with the rest of their lives, they’re visiting your site to try to determine if your institution will help them achieve their life and career goals. At that moment, using storytelling elements to present the case for your programs is not only more persuasive, but it also takes into consideration your audience’s state of mind.So how do you move from a program page that simply lists information to one that creates a narrative? Consider the following questions:

• Why should a student choose this subject?
• Why should they study this subject at your institution?
• Where could this course of study take them in their lives?

Telling a story that answers these questions allows a prospective student to imagine themselves as the hero of a journey set at your institution.Here’s what it might look like if you were to write a storyframe for Saint Louis University’s Geology program page:

If you major in geology at Saint Louis University, you’ll understand our planet and its natural process.

Imagine yourself here.

At SLU, you can get a B.A. or a B.S. in geology. You’ll take many of the same courses, but the B.S. degree emphasises chemistry, physics and calculus. Pick this degree if you intend to go on to graduate school or become a professional geologist.

No matter which degree you choose, you’ll learn about the building blocks of the planet. You’ll also develop leadership skills through lab exercises and field trips.

Here are a few courses you might take …

If you study geology at SLU, you could become a geoscientist, a civil engineer, or assess the environmental impact of projects.

Our faculty is dedicated to our students. They’re also involved in important research all around the world; this will enrich your classroom experience.

If you’re worried about affording the program, know that Barron’s and Kiplinger have both named SLU a best-value school. Here are a few links to more information about tuition and financial aid …

If you’re not sure this major is for you, consider a minor.

Still not sure? Explore our course catalog and a fact sheet about the program. Or maybe you’d like to explore other undergraduate or graduate programs. You can do that here …

Before you go, we want to tell you about a very special part of the program: our annual geology field trip. Imagine yourself spending a week exploring the United States and traveling through its national parks. You’ll see natural systems in action and learn firsthand about the Earth and its environment. At SLU, we offer real-world experience.

This storyframe offers a clear setting and themes. But it also takes the storytelling one step further than the Johns Hopkins homepage by putting the audience right at the heart of the story. Because this page speaks specifically to prospective students who might be interested in geology, Saint Louis University can very intentionally and directly invite a visitor to imagine SLU as the setting for his or her own adventure.As you can see, the storyframe, though simple, can be a powerful tool in your content strategy arsenal. It creates a valuable moment that lets you briefly pause, reflect, and craft the narrative you want your pages as a whole to tell.This article was originally published on the mStoner blog, and has been republished here with their kind permission.

Keen to learn more?

mStoner presented a webinar to help content teams in Higher Edcreate a roadmap for better content, regardless of the size and structure of their institution. Watch the recording: Content planning and delivery for Higher Ed websites.

Also, check out how GatherContent can help Higher Ed institutions take control of their content.