Using Storyboard Prototypes In Your Design Process

Today, I’d like to share a few notes on a processes we’re using when designing UI features on the CRM team. I’ll also point you to a great toolkit that can help you design and create lightweight UI prototypes of CRM solutions.

One of the design techniques we use is to create Storyboard Prototypes. Storyboarding is an iterative, interaction design methodology that uses a series of sketches or pictures to demonstrate an end to end solution for a user scenario. This type of low fidelity prototype is used to illustrate design concepts and obtain feedback early in the design process. Storyboards are particularly useful for refining and validating concepts before writing detailed functional specifications. The technique enables you to work effectively with your multi-disciplinary team to create highly usable, user centered designs.

As an aside: You may be most familiar with it as a technique used in the film industry, where a comic of a section of the film is created to help the directors and cinematographers visualize the scene and rectify potential problems before they occur (i.e. before they are really expensive to fix). As you might have guessed, this technique was developed at Walt Disney studios during the early 1930s.

The Process in a Nutshell

1)      Define the scenario

Start with a crisply defined user scenario based on your user research/requirements analysis. Express the customer intent/goals and success criteria (important so you know when to stop iterating on your design)

2)      Brainstorm concepts (3+)

Grab a pen and paper, white board, or your favorite sketching tools and generate concepts. Get feedback from team members, friends, and colleagues.

3)      Create a Storyboard Prototype

Select the best concept(s) and use your favorite graphical tool (Visio, PowerPoint, Photoshop, etc.) to create the screens. Illustrate an entire scenario from beginning to end, including a screen for each step a user would go through. Focus on working out the interaction problems.

4)      Test

Evaluate the storyboard prototype using a usability evaluation technique:

·         Heuristic Evaluation - “Expert Review”

·         Cognitive Walkthrough - “Virtual Usability Test”

·         Usability Test - “Real Users”

5)      Iterate!

Iterate on the storyboard prototype until you’ve met your success criteria. Now you’re ready to flesh out the details in the functional specification.

A Storyboard Prototype Toolkit

Some like to use PowerPoint to create these storyboard prototypes. A while back Jensen Harris wrote a blog post on how the folks on Microsoft Office do this in SharePoint. You should read his post, if you prefer SharePoint.

Personally, I prefer Visio, as it general saves me a bit of production time, since I’m already building out many of the screens using Visio (and I don’t have to transfer the images to PowerPoint).

In any case, it really helps to have a toolkit of UI elements and controls to get started. There are several options here. You can start with the built in shapes that are included with Visio. Or you can build your own. Or, for those of you specifically building UI for CRM, be sure to check out the Visio Shapes download for Microsoft Dynamics CRM v3.0 that our good friends at Invoke Systems have created. It’s an excellent toolkit for efficiently creating quick mockups of CRM UI Screens.

Storyboard Prototypes in Visio

 Creating these prototypes in Visio is pretty straightforward. Here are a few tips to get you started:

• Insert a new page for each state the UI moves through in the flow that you are illustrating.
• If you have a series of images that change only slightly from page to page, consider creating a base static image as a page background (Insert/New Page, on the Page Properties tab choose Background). When you add new pages, choose this base page as the page background. This will enable you to add/modify only the UI elements that change from page to page.
• If you are creating this prototype for usability evaluations, don’t include callouts that would tip a user off as to how the UI is going to work. If you need the callouts for other purposes, add them in a separate layer (View/Layer Properties, New... ). Don’t forget to assign the callout to the layer (select object and Format/Layer…). Then hide the callouts for the usability evaluation (View/Layer Properties, click Visible checkbox).
• For evaluations and testing, press F5 to go to full screen mode and Page Down/Up to move through the flow.

Ok, that’s the basics for what is essentially a “paper prototype”. If you want to go one step further, you can make the prototype interactive. One way you do this in Visio is by adding hyperlinks to the shapes on your page that link to other pages in your prototype.

Suppose you have a button that opens a dialog. You’ve created pages for both states (screen with button and screen with dialog opened on top of it), right?

For each UI control that you want to make interactive, do the following:

• On the page with the button, select the button and from the Insert menu choose Hyperlinks… (or press CTRL+K).
• The UI for setting Hyperlinks is a bit obtuse, so stay with me. We want to navigate to a page within the Visio file, so we choose “Sub-address”- Click the button to the right of Sub-address.
• On the Hyperlink dialog that opens select the page that you want to go to and click OK. Then click OK on the main Hyperlinks dialog to complete the creation step

Now you’re ready to interact! If you’re in full screen, clicking the shape (e.g. the button) will navigate to the target page. If not in full screen, you can right-click on the shape, and choose the top most item in the context menu – it’s the hyperlink to the target page.

Give it a try! Let me know how it works for you.

- Derik Stenerson