My Favorite Features: Creating Storyboards with PowerPoint

In my last post on Continuous Value Delivery, I talked the importance of communication between the customer and the engineering team to arrive at a clear project definition. How many times have you built exactly what was asked for, but not what was wanted? Agile teams need the right communication tools to eliminate waste at this stage in the software lifecycle. In this post, I’d like to talk about PowerPoint Storyboarding, a new feature we built to help express and illustrate the intent of each item on the backlog. As the saying goes, “A picture is worth a thousand words”.

While working on my apps, I need a quick way to mockup UI and test different workflows before I start coding. I have PowerPoint on my machine, which I use all the time for presentations, so it’s quick and easy for me to mock things up there. In my case, these designs were primarily for my own review and brainstorming; however, this becomes even more valuable in a team environment where you can attach and link storyboards directly to items on the backlog.

Prerequisites

Here are the specific prerequisite versions that you’ll need to follow along with this post. [Added May 29, 2012]

• To create and modify storyboards by using PowerPoint Storyboarding, you must have installed either Office PowerPoint 2007 or later, and one of the following versions: Microsoft Visual Studio 11 Test Professional Beta, Visual Studio 11 Premium Beta or Visual Studio 11 Ultimate Beta.
• To view storyboards that were created using PowerPoint Storyboarding, you must have either Office PowerPoint 2007 or later installed.

Building the Storyboard

Once you have these components installed, just fire up PowerPoint and open up the Storyboarding tab. Click on the Storyboard Shapes button to open the new shapes toolbar (shown below). The shapes in the toolbar work just like traditional shapes in PowerPoint; however, we’ve added some magic to preserve aspect ratios and help make the process of building a Storyboard really easy.

Figure 1 - Storyboard Shapes

The first think you’ll often want to do is add a background. I’ll do this by double-clicking one of the backgrounds from the toolbar. In this case, we’re going to grab the Tablet (landscape) background. If you’re a more advanced PowerPoint user you can place the background on a Layout slide. Next I’ll add a few additional shapes from the toolbar to create the look and feel we’re after.

Figure 2 - Adding a Background

I’m not too concerned about the details on this first slide as I just want to convey intent (in fact we don’t want to make things look too perfect, or the customer might think it’s done ;). Next, I’ll add a slide that speaks more to the feature I’m designing. In this case, I’m building a feature for my app that allows the user to select from a list of options. First, I’ll add a charm bar to the page that I’ll use to access the options.

Figure 3 – Building the Flow

Next, I’ll build out the options page by grabbing a list object, resizing it to fit the screen, and then adding a few on/off toggle buttons, which you might recognize from tablet and phone applications.

Figure 4 – Designing the Options page

As you can see, in just a few slides, the storyboard is beginning to show my plan for the application.

Custom Shapes

I often find that I’m re-using the same group of shapes. I’ve found the “Add to My Shapes” feature very convenient for this. I can highlight all the shapes I added to my options slide and select “Add to My Shapes” from the ribbon (as shown below). This places this new shape into my shapes toolbar so I can re-use it on additional slides. You can even export the shapes to share with other members of your team.

Figure 4 - Custom Shapes

Gathering Feedback

Before you know it, as I continue adding more slides and inserting more shapes, I end up with a PowerPoint presentation that communicates what I’m planning to build. The real beauty here is that I can get things “right” before I invest too much time coding. A storyboard like this can be used to solicit feedback from stakeholders and can even be linked or attached directly to a backlog item. Your customers all have PowerPoint, so it’s a familiar tool that they can easily pick up and use.

One of the most powerful aspects of Storyboarding is that you can convey the flow of the app you’re building interactively, not just with a set of pictures. Because PowerPoint has built in presentation features like slide transitions, you can create a click-through storyboard, which allows customers to navigate between screens and even simulate the application gestures. Add a new slide for each screen, include a bit of animation, and you’ve got something that looks and feels like the real thing.

In fact, a good portion of Visual Studio 11 and Team Foundation Server 11 was spec’d using this tool. I’ve gotten really used to communicating my ideas in this way, and am using this feature all the time now.

Conclusion

I hope you have an opportunity to give PowerPoint Storyboarding a try, and save some time by communicating with these designs in your team. For more information, please read about Storyboarding on MSDN.

Enjoy!

 

Follow me at twitter.com/jlzander .

Comments

• Anonymous
  May 24, 2012
  I'm surprised you guys don't "dogfood" and use SketchFlow instead of PowerPoint for this... www.microsoft.com/.../SketchFlow_Overview.aspx

• Anonymous
  May 24, 2012
  Wow, didn't know that! Thanks! This will do nicely for 95% of my use cases.

• Anonymous
  May 24, 2012
  Great feature.  Are storyboards available in PP 2010 only?  I have 2007 and cannot find this. -James

• Anonymous
  May 24, 2012
  @Pup5 - SketchFlow is a great tool which allows you to do your design on top of a working engine.  I've found PowerPoint is a super easy way to do mock ups with gestures and share them easily with your customer for feedback. @Sebastian - good to hear, let me know how it goes @James - the requirement is Office PowerPoint 2007 or later (see details here: msdn.microsoft.com/.../hh409276).  We add the storyboarding plug-in to Office when VS is installed.  If you already had PowerPoint installed then installed VS11 but still don't see it please let us know so we can investigate.  

• Anonymous
  May 25, 2012
  The powerpoint should be viewable directly in the work item.

• Anonymous
  May 25, 2012
  Jason, msdn.microsoft.com/.../hh409276 link says, "Choose Start, All Programs, Microsoft Visual Studio Dev11, PowerPoint Storyboarding", but I do not have this in my start menu. I had Office 2007 (w/PP) installed prior to loading "VS 11 Professional Beta". I'm betting the storyboarding is only available on VS Ultimate?  This is what my start menu looks like (Windows 7 Ultimate): Microsoft Visual Studio 11  Microsoft Help Viewer Beta  Visual Studio 11 Betat  Team Foundation Server Tools    Build Notifications  Visual Studio Tools    ARM Cross Tools...    Developer Command Prompt    Dotfuscator...    FMC-ATL TraceTool    Remote Debugger Folder    Spy++    x64 Cross Tools... And that's it.  So do I need the Ultimate distro?  It's great you guys love to show off all the cool stuff, but some of us are limited to a Pro version and it would be helpful if there were a practice of specifying, "this feature is available on Premium and up" or whatever.  Thanks, -James

• Anonymous
  May 28, 2012
  I'm having the same situation as the two James posted. I've just installed the Visual Studio 2011 Beta Professional and did the updates on the extension manager. I also don't have the Storyboarding tab on Power Point. I have Office 2007 Enterprise edition with service pack 3. It shouldn't have anything to do with Team Founder Server permissions, other than To link a storyboard to a work item stored in Team Foundation Server? Please do investigate!

• Anonymous
  May 28, 2012
  I meant to mention on my previous post but got caught up on not being able to try it for myself. That was a great idea! And thank you for sharing it with us!!

• Anonymous
  May 29, 2012
  i hope you have an opportunity to give powerpoint ?

• Anonymous
  May 29, 2012
  Hi Jason - Thanks for the post. It definitely looks like a nice value-add. I'm with the others on here wondering what editions of VS 11 this will be shipping with. I am currently using VS11 beta Ultimate just to play with all the new features, but I'm curious if this will be available in the Pro and Premium editions of VS 11. Thanks, Matt

• Anonymous
  May 31, 2012
  awsome xD

• Anonymous
  May 31, 2012
  Storyboarding will be available in Premium and Ultimate versions.  I found it here: www.microsoft.com/.../compare FYI all.

• Anonymous
  May 31, 2012
  Hi All – The features required to create and edit PowerPoint Storyboards are available in VS 11 Test Professional Beta, VS 11 Premium Beta or VS 11 Ultimate Beta, and should be installed with Office PowerPoint 2007 or later. It looks like Jason updated the post earlier this week with a prerequisites section, containing this information. As James pointed out, these details are available on the Visual Studio compare webpage as well: www.microsoft.com/.../compare Glad to hear the interest in PowerPoint storyboarding. Please let us know if you need any other help getting started. Cheers, Lisa Feigenbaum Senior Community Program Manager Visual Studio Team

• Anonymous
  June 05, 2012
  The comment has been removed

• Anonymous
  June 07, 2012
  The comment has been removed

• Anonymous
  June 09, 2012
  An excellent addition to Visual Studio - I just couldn't get to grips with SketchFlow which seemed way too complicated for simple story boarding and so used the web application Cacoo instead which is awesome. I don't know if I am being thick but an obvious shape that is missing is a simple panel as that would then allow me to group items so that they can more easily be repositioned (a panel with a heading would also be nice).

• Anonymous
  June 14, 2012
  The comment has been removed