Draft a Story with Visual Storyboards and / or Mockups
An example of storyboarding for your website project
- Collect the information to include on the Website. e.g. text, graphics, videos, pdfs, presentations, icons, imagery and most important, content for the whole sitemap.
- Sort this information into topics, starting at the broadest and work toward the narrowest.
- For each web page included in the sitemap, determine page title, headings, sub headings and content.
- Plan the structure of the website using the information gathered. This should be logical and offer breadcrumbs for larger sitemaps. We tend to use mindmaps for layouts, but you can use powerpoint or a regular notepad and pen, it's whatever works and is most comfortable for you and/or your team to create your initial vision.
- Define the menu structure for web and mobile viewing.
- Layout your template pages for all devices. Generally there are two main pages to a website, the home page and the internal or sub-page. If you know and have specific pages that require their own style, like for example a project or portfolio page, this is where to storyboard it.
- Test the new website flow and layout. Imagine that you are a visitor to the website. You should be able to enter on any page of the website and navigate with ease. Landing on pages other than the home page will happen if, for example, your website is organically listed on a search engine, or you are promoting specific pages in an advertising campaign.
Disclaimer
Storyboards focus on developing the correct sequence of actions to capture an activity, usually in order to outline requirements. Their primary purpose is to describe. More often, these focus on the technology, not on the user. Scenarios, and storyboards often lack character development, plot, and user goals. Their scope and granularity can vary. Budget allowing, we recommend creating a UX Story to complement Storyboards, which is a deeper and more user-connected plan.
What is a User Experience (UX) Story?
A UX story has the following components:
User
Compelling stories must have a clear, fleshed-out main character (or, in some cases, multiple characters), with whom the audience can empathize. Framing your story allows your audience to relate to your user.
User’s goal and motivation
The goal establishes a clear understanding of the task at hand, while the user’s motivation helps the audience see the meaning behind the user’s behaviors and decision making.
Context
Context is the setting (time and place) in which the UX story takes place. Providing an environment for the story aids in understanding where the designed experience fits in. This context can also act as the starting point from which the plot can be built — it can be the source of story conflict or obstacles that the character must face before achieving his goal. The right context gives your audience something concrete to buy into.
Plot
A plot describes a series of events along a timeline. Often, these events build tension and crisis as the main character (the user) heads towards the climax in the story.
Insight
While the previous four components are straightforward, insight is where storytellers must insert their understanding and communicate to the audience the significance of the situation. Insight can become emotionally engaging when the audience senses that something is at stake or that the main character’s core values are disrupted. Insight is often the “aha moment” of the story — the pain point that the team didn’t know existed, but has been uncovered through research, or the design breakthrough that is going to change the user’s future experience.
Spectacle
Spectacle refers to the visual portion of the story. This could be props, drawn illustrations, or video. The spectacle usually makes the story more memorable and enjoyable, and keeps the audience interested and involved.