When it comes to building a website, the typical path (if there is such a thing) is to:

1. Create a strategy based on preliminary research
2. Develop an information architecture (IA)
3. Use wireframes to lay out content and UX elements
4. Design and develop the full website

As you can imagine (or have experienced) there are many chances in this process to disconnect the strategy from execution. It’s not the strategic direction, or the designer’s fault. More times than not it's a simple lack of information about the content needed to create a strong user story.

As it stands, the only piece in between the strategy and wireframe is the sitemap. This is an adequate tool to establish a hierarchy of interconnected pages, but does very little to communicate the elements that should go into each page or create a representation of user flow, intent and functionality that will be needed to connect it all together.

Big User Questions go Unanswered

Using just a sitemap to convey strategy for each page leaves some big questions like: “How does strategy inform the elements that the UX designer uses to construct the visual hierarchy?” Or, maybe the most important: “What are those elements in the first place?”

As a team, we’ve explored several practices that boasted their ability to tie these two important sectors together. None have worked as well as the Page Narrative. This is a document that holds information that spans from strategy to development and unifies each element under the same narrative.

Before we can go into detail about the Page Narrative, we need to start by looking at a past solution, the Page Description Diagram -which was created years ago to serve the same purpose, but with many flaws.

The Introduction of the Page Description Diagram

One of the ways information architects tried to solve the problem in the late 90’s and early 2000’s was through a Page Description Diagram (PDD). This was a document that gave IA professionals a way to communicate information hierarchy, without tying it to anything visual.

In an article published in Boxes and Arrows in 2002, Dan Brown, the creator of the system wrote:

By demonstrating priorities and providing a context for the content and functionality, [the Page Description Diagram] gives visual designers the information they need to create an effective layout.

In theory, these would solve a problem of IAs stepping into UX, or as later in his article, Dan Brown says become: “a tool to allow designers and information architects to stay comfortably within their own realms without compromising communication.”

Where Page Descriptions Fail

But Page Description Diagrams fizzled out, only working for a short amount of time. Today, very few teams still use this model, despite the efforts of even big publications like UXmag, who published an article titled: “Re-Introducing Page Description Diagrams” in 2013.

This is simplifying, but one of the biggest reasons for their demise was that they put a lot of emphasis on page features, rather than story.

As the web matured, and website features became more accessible (and therefore less impressive), companies were forced to look in other places to differentiate themselves from others. They went back to something elemental: story. And began focusing on the messaging and narrative of a website over features.

Since the Page Diagram didn’t quite account for this shift, it began to fail in its service to Information Architects and designers and has been mostly lost to time.

The Page Narrative

Today, the hole between strategy and design still needs to be filled, so we’ve been working out several ways to do it. The Page Narrative has risen to the top of our process.

In an article published by Smashing Magazine, UX designer, Francisco Inchauste, writes “With storytelling, a diverse team creating a website or application can collectively link together the tangible elements and create something that is a meaningful experience and is more than just bits and bytes...We can evolve the focus of creating a simple task-driven and functional website/application into a valuable human connection.” Better User Experience with Storytelling

A page narrative attempts to do just this,

“Collectively link together the tangible elements and create something that is a meaningful experience.”

Created for each of the pages of a site (for smaller sites) or the foundational pages for larger projects, it allows us to look at individual pages from both a macro and micro level and ensure that each page:

• Is aligned to the goals of the site
• Speaks to the primary, secondary and tertiary audiences
• Recognizes the intent of the visitor
• Satisfies the visitor’s needs and moves them to the next stage

This type of thinking requires that we start at a strategic level, conducting competitive analysis, audience research, content audits and others to create a single page narrative that lays out the ultimate goal of the project and informs all the page narratives after it.

Elements of a Page Narrative

THE WHY AND WHAT OF THE PAGE

Each page, no matter where it is on the site, serves some sort of purpose. If it doesn’t, there’s a good chance it shouldn’t exist. In that vein, the page narrative clearly and succinctly communicates the “why” of the page. Why does it exist?

For example, a nonprofit could have several pages under their “About” section that talk about its History, Directors, and Staff. The first part of a page narrative would describe why each page is important to the visitor’s ability to learn about the organization. It answers why “History” is separate from “About" and what about the content is different.

In addition to the why, the “What” about the page goes in this top section as well. It share at a high-level what functionality will be needed for the page. Is there a contact form or a newsletter signup? Does the page pull from social accounts? is there pagination? These things are laid out here.

PRIMARY MESSAGE

Speaking of the what, “what does this page say,” is the second element of a page narrative. It communicates the high-level concept of the message this page will present to a visitor. Is the message, “we’ve been around for a long time,” or “we’re a forward thinking company,” as you can see, these are two very different ways to communicate information about a company. Defining the primary message of a page will align stakeholders, content producers, designers and developers, all on the side of the end user.

DATA, ASSETS AND FUNCTIONALITY TO SUPPORT THE PRIMARY MESSAGE

For a page narrative to be useful to the whole team, it has to talk about the content elements the page will have/need to support the “why, what and primary message of the page.” Will this page need photography (assets)? What are the calls to action (UX)? Does it feature different bios that are selected at random (development)? This section of the document communicates these elements for each of the team members involved in the project.

THE INTENDED ACTION/RESULT

After the user consumes the information, what do we want them to do or where should they go? The last bit of this narrative communicates what would be considered a successful conversion or user experience for the page.

Final Thoughts

While not as precise in its structure as a page description diagram, the page narrative goes a long way in satisfying the present communication needs that exist between strategy, content, design and development. As the web continues to reward companies who are able to more powerfully tell their stories through digital content, a page will become less about its singular features and more about moving a user from one place in the story to the next.