Telling stories with your designs

Websites are incredibly versatile as a medium, to be used to display information and other content, and if well designed they can do this in an enjoyable way that’s easy for the reader to digest.

This can be done through combining a site persona with an ongoing narrative, consistent throughout, which will all come together to create a ‘story’ through which you can deliver relevant content.

It’s important to recognize as a designer that the story, which the content is then based on, comes before anything else in the site.

The content can’t simply be ‘dropped’ into the site post-design; it needs to be built up in the correct order: story, content, and then, finally, design.

Putting together the ‘story’ for your site involves two main components, a persona, and a narrative.

Personas

When designing a website, any seasoned designer will tell you is that the most important piece of information they need is the target audience. This is necessary information in styling the website, layout, what content (both text and images) to include, even what color schemes to use.

Once this information is found, either through market research, or through your primary objective as a site being to appeal to a particular audience, you can then work out how to adapt that into your site design. Whilst the content will often dictate what the target audience is—an e-commerce site selling kids toys is clearly aimed at parents—obviously there will always be exceptions. But this is an important part of knowing what your story needs to be conveying. Your ideal target audience has preferences and personality; this is your user persona.

Next comes the site persona, which is effectively a fictional individual, representing your site (not audience) in all ways: style, looks, ideas, age—all symbolizing various aspects of your site. These characteristics come together to form a personality—a persona—that defines your site and helps to provide a clear picture of how it should behave, what it should look like, and what content it should contain.

The importance of this in web design cannot be stressed enough, as it stops designers from falling into the trap of focusing on individual elements from the site, which combine to create a poor site with lack of coordination. A designer with an overall picture of the site, right from the conceptualization stage at the very beginning, will create a far better end product.

To create your site persona, you will need to have the following:

• A good idea of your Target Audience: as mentioned above, you can use your user persona to help mold your site’s persona, however it only needs to relate to the user persona, not mirror it directly, otherwise your site will be far too specific
• References to key figures in your organization (if any): this will help if your brand identity is based on the people in your organization, as your site persona can reflect elements of theirs, just as Apple did with Steve Jobs, and mojang.com, a game development company does with their lead title, Minecraft, referencing it in their site title and various other prominent places.
• Promotional Content: this will make up the user experience on your site, and will be partly influenced by your site persona, but by being a part of it, and so influences it in return. The content will tell your user what the site is about, and what the persona is, playing an important role in the persona of your site. This will be a topic I will return to later in this article, however it is a point worth touching on in relation to personas.
• Any other relevant documentation/content: this may seem incredibly vague, however sites can be so varied, and any relevant content or aspects of a site can be useful in creating a persona for it, and even subtle and seemingly inconsequential things can make a noticeable difference to the front-end of your site.

Narrative

The narrative of your site is the essence of your story, and encompasses all your content. Your narrative is the video embeds in your site; it is the content on your about page; it is your background image; it’s virtually all your content coming together to bring the user an overall experience that forms a narrative.

It’s easy to think of a narrative in a similar way to a thematic site. However, it’s slightly different as themes focus on design, where narrative focuses on all aspects including, and especially, content. The importance of the narrative is that it dictates your site’s pacing and how the user interacts with it, everything from your navigation bar to your ‘transaction complete’ screen.

The best narratives come organically grown, and it helps to have some existing content to define your narrative from, rather than working out your narrative and then artificially creating content around that. In a nutshell, the narrative is the journey the user experiences on their journey throughout your site, and you’ll need to get it right for your user to have an enjoyable experience. Just as a narrative needs to hang together well in a novel, so does your site’s narrative.

As with the ‘references to key figures in your organization’ under Personas above, your narrative can benefit from input from the story of your company, or a figure in your company, highlighting the highs and lows—anything that will make your user/reader care, and take an interest in your site. If your site has a blog, then your users will, if you have an interesting story, return time and again, to check for updates, and to participate in your site. This is especially evident if you have a forum on your site, as users can directly contribute.

A far too often used narrative method is the splash page—usually an all singing, all dancing entrance to the main event of your site. In most cases it doesn’t tell a story, it just gets in the way. It breaks up the structure of the site, and offers a facade that might not reflect the true content of the site.

Where narrative can be more practically useful in your site is in this context (focusing specifically on navigation):

In the story of this site, you learn about the product of the site, you try it, and like it, so subsequently buy it. After purchase you need support for any reason, a fault, or a query of some description. And then, at the very end, we can contact the company, for business queries, or as a customer.

The natural inference of the layout of this navigation bar, unfortunately for the site, is that SUPPORT follows PURCHASE because something has gone terribly wrong, and CONTACT is our last hope of getting satisfaction after SUPPORT has failed. (Support must have failed, not only because it has a terrible reputation across various industries, but also because it fits the plot: if support succeeded, who would we need to contact?)

This may seem like far too much psychoanalysis for a web designer, but if your story is based around a basic navigation system, then it’s important to think of the process in which your user will go through each page. Getting the order of the navigation wrong is similar to killing off a character in a book before introducing them: it simply does not make sense in the narrative of the story.

Another helpful way to think of layout in relation to your narrative and story is by visualizing a newspaper, or a comic. For comic book/graphic novel artists, there is always an issue with the positioning of panels, insofar as they need the reader’s eyes to be drawn from one panel to the subsequent one, rather than out of order. You can see how this would be an issue with the comics in a Sunday paper. With only a few panels to work with, an artist has to make sure that the punchline (usually the final panel) doesn’t detract from the final product so much that the reader looks to it first.

In this way you can visualize the layout of your site, and how it flows, as users are often channeled subconsciously through the same order of pages and links, creating their first impression of the site based on ad positioning or content below the scroll line that they can’t see, where you wanted the initial viewing of the site to be so different!

To conclude, your site, small or large, will have a user experience, and if you haven’t taken the time or care to create a story, it won’t be as coordinated or flow as well as it could do. The sites you see where you think, ‘that’s really slick’, or ‘I wish my site worked as well as that’, have most likely been storyboarded with a narrative, and taken care over styling a persona.

So next time you visit Apple.com, think about what sort of persona it has, and how the site has been designed to flow, placing their leading Mac product first, but the iPhone product in the center of the navigation, rather than second, and having their Apple logo instead of a home button for brand recognition.

Dan Rajan

Dan Rajan is a film student, creative content designer, and passionate writer from the UK, follow him on twitter!