Hands-On LabBuilding the Right Software: Generating Storyboards and Collecting Stakeholder Feedback with Visual Studio 11Lab version: 1.2.0

Last updated: 2/28/2012

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: INTRODUCTION TO STORYBOARDING...........................................................................4

EXERCISE 2: ELICITING FEEDBACK WITH THE MICROSOFT FEEDBACK CLIENT.........................25

Overview

How often have you built the software that your users asked for, but not necessarily what they wanted? In a world of increasingly complex software projects, it is critical that we can accurately capture requirements from users, which can then be translated into working software. In this lab, you’ll learn how new capabilities of Visual Studio 11 will make it possible to both rapidly storyboard your requirements, and – as your software evolves – get rich, actionable feedback from users of your software which can help shape what you deliver.

Prerequisites

In order to complete this lab you will need the Visual Studio 11 virtual machine provided by Microsoft. For more information on acquiring and using this virtual machine, please see this blog post.

About the Fabrikam Fiber Scenario

This set of hands-on-labs uses a fictional company, Fabrikam Fiber, as a backdrop to the scenarios you are learning about. Fabrikam Fiber provides cable television and related services to the United States. They are growing rapidly and have embraced Windows Azure to scale their customer-facing web site directly to end-users to allow them to self-service tickets and track technicians. They also use an on-premises ASP.NET MVC application for their customer service representatives to administer customer orders.

In this set of hands-on labs, you will take part in a number of scenarios that involve the development and testing team at Fabrikam Fiber. The team, which consists of 8-10 people, has decided to use Visual Studio application lifecycle management tools to manage their source code, run their builds, test their web sites, and plan and track the project.

Exercises

This hands-on lab includes the following exercises:

1. Introduction to Storyboarding

2. Eliciting Feedback with the Microsoft Feedback Manger

Estimated time to complete this lab: 60 minutes.

Exercise 1: Introduction to Storyboarding

In this exercise, you will learn how to use the PowerPoint storyboarding add-in to create application storyboards. This will be accomplished by examining an existing storyboard file and by adding in some additional storyboard slides to address an additional user story.

Note: Please note that in the virtual machine you may notice delays when attempting to open the team project portal while the necessary SharePoint services are started for the first time. You may notice timeouts, or errors such as the screenshot below.

In most cases, you can keep refreshing the page until it loads. Note that it may take a few minutes depending on the performance of the hardware you are hosting this virtual machine on. If after a few minutes it still doesn’t load, please confirm that you have configured this virtual machine according to the proper setup instructions. This includes ensuring that you have at least one network adapter installed and configured (an internal network adapter is recommended).

1. Log in as Annie, who is responsible for representing customer interests and user experience. All user passwords are P2ssw0rd.

2. Let’s get started by locating the existing storyboard. Launch Internet Explorer and click on the TFS Project Portal button in the favorites bar to load the dashboard.

Figure 1Fabrikam Fiber project portal

3. Select the Shared Documents link to view the library where the PowerPoint file named “FF Storyboard – Start” is located.

Figure 2Location of Shared Documents link

4. Select the link for the “FF Storyboard - Start” file to load it in PowerPoint.

Figure 3Location of starting storyboard file

Note: We are using a shared location in SharePoint so that the entire team has access to the file.

5. Select the yellow Enable Editing button towards the top of the PowerPoint window.

Figure 4Enable editing of storyboard file

6. Select the Storyboarding tab at the top of the PowerPoint window.

Figure 5Initial view of storyboard in PowerPoint, showing the Storyboarding tab

Note: If you wanted to create a new storyboard from scratch, you could do so from Start | Microsoft Visual Studio 11 | PowerPoint Storyboarding.

7. These storyboard slides show how the new PowerPoint storyboarding add-in can be used to mock up UI for web and mobile applications. You can take advantage of slide masters and different layouts to create re-usable templates that are set up for your application. Select the

Layout button to see some of the layouts that are available in this storyboarding PowerPoint file.

Figure 6Slide masters and layouts

Note: If you wanted to make modifications to the slide master layouts, you would do so by selecting the Edit Layout button in the Storyboarding tab.

8. Press the F5 key to view the storyboard in presentation mode. Click through the slides with the mouse or press the right arrow key until the presentation is finished. Note that the storyboard provides the look and feel for certain pieces of a web application and a Windows Phone 7 application. Animations are used to show how the user is interacting with the application.

Let’s create some additional storyboards for the Fabrikam Fiber intranet site, where employees interface with customer data and service tickets. When creating storyboards, it can be helpful to document specific scenarios that translate to user stories for the development team to implement and test. In Team Foundation Server, assume that there is a product backlog item

representing a user story that states “Service rep can view service ticket details from the dashboard.”

9. Delete all the existing slides so that we can concentrate on the new user story by repeatedly pressing the Delete key (or Ctrl-A followed by Delete).

Figure 7Deleting all existing slides

10. Select the New Slide drop-down button and choose the “1_Default” layout from the “Web Browser” slide master.

Figure 8Creating a new slide using a slide master

11. Take a look at the new storyboard slide to see everything that is provided by the slide master. The entire chrome for the web application is there, which helps keep our storyboard slides looking consistent.

Figure 9New slide using the selected slide master

12. Note that the slide master also includes some placeholders for the web page title and address, which are editable. Modify the “Web page title” placeholder by entering “Dashboard” instead. This slide is going to represent the Dashboard page, which is designed to show a rollup of tickets, alerts & messages, and other company-wide information.

Figure 10

Modifying placeholders provided by the slide master

13. As a quick aside, load the Fabrikam Fiber intranet site in Internet Explorer by clicking on the FF Intranet Portal button in the favorites bar (http://intranet.fabrikam.com ) . This loads the Dashboard page. Take a glance at the UI shown here so that we can duplicate some of it in the storyboards.

Note: Although storyboards normally precede implementation, in this lab you will occasionally refer to both storyboards in development and the finished product in order to help speed up the demonstration.

Figure 11Dashboard view of Fabrikam Fiber intranet portal

14. Back in PowerPoint, add a new Text Box to the first slide.

Figure 12Adding a Text Box to the slide

15. Enter the text “Dashboard” for the new text box to create the heading for this page and position it as shown in the following screenshot. Make the text bold, use font size of 16, and select a gray font color.

Figure 13Adding content to the storyboard slide

16. Now let’s create a button named “Create New” below the Dashboard title. Select the Storyboard Shapes button if the panel is not currently open.

Figure 14Opening the Storyboard Shapes window

17. In the Storyboard Shapes panel on the right-hand side, type “button” into the search box to locate the Button shape.

Figure 15Searching the shapes library

18. Drag and drop an instance of the Button shape onto the slide.

Figure 16Adding shapes to the storyboard

19. Change the text from the default to “Create New”, choose a white font color, and choose an orange shape fill color to match the required design. Imagine that Fabrikam Fiber has a UI style guideline in place that we must adhere to.

Figure 17Modifying the new button shape

20. As you are storyboarding, you can create your own shapes to reuse later. Select the new button that you just created, select the Add to My Shapes button, and name the new shape Fabrikam Button.

Note: Make sure you select the outer edge of the button shape (not the center part) in order to make the Add to My Shapes button available.

Figure 18Creating a new, re-usable shape and adding it to our library

Note: You can import and export shapes to help build up a storyboarding library. In addition, there are plans to provide an online community where more storyboarding shapes may be found.

21. You can sometimes speed up the storyboarding process by reusing existing assets. In this case, let’s take a screen clipping of the rest of the existing Dashboard page, rather than adding an actual data grid and manually populating it with data. First, ensure that the Internet Explorer window currently showing the Fabrikam Fiber intranet portal is visible. Finally, in the Storyboarding tab of PowerPoint, select the Screenshot drop down button and then select the Screen Clipping option.

Figure 19Using a screen clipping to speed up storyboarding

22. After PowerPoint minimizes itself to show the greyed-out Fabrikam Fiber Dashboard page, click and hold the left mouse button on the upper-left corner of the grid, move to the bottom-right to include Network Alerts, Messages, and so on, and then finally let the left mouse button up to select the screen clipping to use.

Figure 20Selecting the area to clip

23. Back in PowerPoint, position and size the screen clipping so that it fits in nicely right below the Create New button.

Figure 21Positioning the screen clipping in the storyboard

24. Back to the scenario we are storyboarding, imagine that the employee sees this dashboard and is concerned about one of the tickets that has been open for a long time without resolution or escalation, so she decides to view it by clicking on the reference number link. This should then load a view that shows the service ticket details.

Figure 22Location of service ticket hyperlinks

25. Start storyboarding this scenario by creating a new slide using the same layout as before. The new slide should go right after the first one that you created.

Figure 23Create another slide using the same template

26. Next, add in some fake ticket details as shown below using the techniques shown in this lab so far. In addition, make use of the Street Map and Map Marker storyboarding shapes to help represent the location of the customer residence.

Note: Alternatively, you can load the “FF Storyboard - Finish” PowerPoint file from the shared documents library and then copy / paste the needed content to save time.

Figure 24Storyboarding the second slide showing service ticket details

27. When storyboarding in PowerPoint, you can also build in a representation for the flow of an application using hyperlinks from shapes. Select the first slide that shows the Dashboard, then select the image that shows the grid of tickets, and finally select the Hyperlink button in the Storyboarding tab.

Note: If we chose to create this slide using a proper grid from the Storyboard Shapes menu, instead of a screen clipping, we would be able to create a hyperlink from a specific cell instead.

Figure 25Turning the grid into a hyperlink

28. In the Insert Hyperlink window, select the Place in This Document option, choose the second slide, and select OK to create the link.

Figure 26Selecting the slide that the grid will link to

29. We can also take advantage of PowerPoint animations in order to improve the presentation of the storyboards. Return to the first slide if not already there and search for the “mouse pointer” shape in the Storyboard Shapes window. Drag and drop an instance of the mouse pointer onto the slide. This shape will be used to represent the user clicking on one of the service tickets on the Dashboard.

Figure 27Mouse pointer shape will be used to simulate user interaction

30. Make the mouse pointer shape larger so that it is easier to see.

Figure 28Increasing mouse pointer size

31. In the Animations tab, select the Add Animation drop-down and select the Custom Path option near the bottom (scroll down to find it).

Figure 29Animating the mouse cursor shape with a custom path

32. Use the mouse to draw a path from the current location of the Mouse Pointer shape to one of the service ticket hyperlinks (the grid is just a picture). To do this, hold the left mouse button down near the Mouse Pointer shape and draw a line to the hyperlink, letting go of the mouse button and pressing the Escape key when done.

Figure 30Resulting path of the mouse cursor shape

33. Press Ctrl+S to save your work back to Team Foundation Server.

Note: If you are prompted to refresh and try the save again, go ahead and do so.

34. Press the F5 key to view the storyboard in presentation mode. Press the right arrow key to start the mouse cursor animation. When it reaches the hyperlink for the service ticket, press the right arrow key to navigate to the second slide. Press the Escape key when finished.

35. At this point, let’s say that we have completed development of the storyboards and would like to link this file to a user story in Team Foundation Server. Select the Storyboard Links button from the Storyboarding tab in PowerPoint.

Note: If prompted to connect to a team project, go ahead and select the VSALM -> DefaultCollection ->FabrikamFiber team project and then connect.

Figure 31Location of Storyboarding Links button

36. In the Storyboard Links window, select the Link To button to link the storyboard to a work item.

Figure 32Location of button to link storyboard to existing work item

37. In the Choose Linked Work Items window, select the Title Contains search method, enter “service ticket”, and select the Find button.

Figure 33Searching for the correct work item

38. Select the work item with title “Service rep can view service ticket details from the dashboard” and then select the OK button.

Figure 34Selecting the correct work item

39. After the link has been made, you will see confirmation in the Storyboard Links window. Select the Close button to finish.

Figure 35Confirmation showing that the storyboard has been linked to a work item

Exercise 2: Eliciting Feedback with the Microsoft Feedback Client

In this exercise, you will learn about the new Feedback Client. During the course of software development, it is important to capture feedback from project stakeholders (end-users, product owners, and so on) to ensure that the progress the team is making is on track to meet the requirements that the stakeholders have in mind. It enables the capture of audio, video, screenshots, and other attachments to be linked to Team Foundation Server feedback work items.

1. Log in as Annie, who is responsible for representing customer interests and user experience. All user passwords are P2ssw0rd.

2. Launch the Microsoft Feedback Client from Start | All Programs | Microsoft Visual Studio 11.

Figure 36Starting the Microsoft Feedback Client

3. As the application loads, it will connect to Team Foundation Server. Select the FabrikamFiber team project.

Figure 37Connecting to the FabrikamFiber team project

4. When project stakeholders launch the Feedback Client in this manner, it will operate in a voluntary feedback mode, which you can see indicated in the instructions section. This allows project stakeholders to provide feedback to the team without being prompted to do so. Any feedback will be saved to the team project that was selected during launch.

Figure 38Feedback Client after loading

5. Select the settings button in the bottom right-hand corner of Feedback Manager.

Figure 39Location of settings button

6. Note that we can modify screenshot settings and select an audio recording device here. Since this virtual machine does not support audio, we will not attempt to make a selection. Press the Escape key to continue.

Figure 40Viewing settings for Microsoft Feedback Client

7. Let’s say that we have a suggestion for the Fabrikam Fiber intranet site. We have heard from our management team that the intranet site should not be able to delete employees from the database, because this should be done by the Fabrikam Fiber Human Resources team using a separate application. Select the Provide tab at the top of the Feedback Client window.

Figure 41Provide tab of Feedback Client

8. Launch Internet Explorer and click on the FF Intranet Portal button in the favorites bar to load the Fabrikam Fiber intranet portal.

Figure 42Launching Fabrikam Fiber intranet portal

9. We can now interact with the Fabrikam Fiber application to provide feedback on the working software. Select the Employees link at the top to view the employees grid.

Figure 43Selecting the Employees link

10. Note that there is a Delete link next to each of the listed employees. This seems like a good place to raise the issue to the product team.

Figure 44Locating the Delete employee link

11. In the Feedback Client, enter “We do not want to be able to delete employees directly from the intranet portal.”

Figure 45Providing feedback

12. Attach a screenshot by clicking on the Screenshot button. By default, this will allow you to draw a rectangle to define the area that you wish to capture. Hold the left mouse button down and move the mouse until you highlight the employees edit screen.

Figure 46Selecting the area to capture for the screenshot

13. Note that the screenshot is placed in line with the other feedback. We would like to highlight the area of the screenshot that we are referring to, so double-click on the screenshot to load it with Paint.

Figure 47Double-clicking on screenshot opens image in editor

Note: By default, MS Paint is used, but you can use your tool of choice by configuring this in the settings dialog that you saw at the beginning of this exercise.

14. In Paint, select a red color and draw a circle around the column showing the Delete links.

Figure 48Annotating the screenshot

15. Close Paint and save the changes to the image to return to the Feedback Client. Note that the update is immediately shown.

Figure 49Annotated screenshot

16. Note that it is also possible to record video and audio, add additional file attachments, and edit the feedback text using rich text capabilities of the Feedback Client.

Figure 50Feedback Client provides for flexible, natural feedback

17. Now that we are done with our feedback, select the Submit tab or the Next button to continue.

Figure 51Move to the Submit step with Feedback Client

18. Here you can review the feedback one last time and see where it will be saved. Select the Submit and Close button to finish.

Figure 52Submit the voluntary feedback to the team

19. Launch Internet Explorer and click on the TFS Web Access button in the favorites bar to load the FabrikamFiber web access site.

Figure 53Launching FabrikamFiber web access site

20. After the FabrikamFiber web access site loads, select the Work link.

Figure 54Navigating to Work page

21. On the Work page, select the Work Items tab.

Figure 55Navigating to Work Items page

22. Find the Feedback Response work item that we submitted and single-click on it to load the details.

Figure 56Voluntary feedback is submitted as a Feedback Response work item

23. During the next planning meeting, the team can look at the feedback responses, triage them as appropriate, and the determine how to address the feedback. Some feedback responses may be classified as a bug, whereas some feedback may translate into new user stories or tasks. With the new Feedback Response work item still selected, select the context menu drop-down

button to the left of the work item and then select the “Link selected item(s) to a new work item…” option.

Figure 57Linking feedback to a new work item

24. In this case, we would like link the feedback as a child to a new Product Backlog Item. The new Product Backlog Item will show up during the next iteration planning meeting and can then be broken down into tasks. Take a look at the link types that are available and notice that the new relationship is shown in a diagram. Make the selections as shown in the following screenshot, and then click the OK button.

Figure 58Creating a new work item that links to the feedback

25. Select the Save and Close button.

26. The Feedback Client also operates in a mode where stakeholders can be directly solicited for feedback via email. This could be useful at any point during development. Perhaps a prototype is finished and the team would like some general feedback, or a specific task was completed and the team would like feedback for validation.

27. For our purposes in this lab, let’s assume that we would like to get some feedback on the Fabrikam Fiber intranet portal’s ability to edit customer records. In Internet Explorer, return to the FabrikamFiber web access Home screen. Under the Activities heading, select the Request feedback link.

Figure 59Initiating a request for feedback

28. In the Request Feedback window, select Brian Keller as the stakeholder to request feedback from. Use the Web Application option and enter the URL to the intranet site, http://intranet.fabrikam.com. In the textbox just under the URL, provide the instructions to go along with the web application, “Please use IE9 or higher.” Title the feedback request “Please provide some feedback on the current customer records editing functionality.” Also provide some instructions below the title text box, such as “Go to intranet portal, click on Customer link, then Edit link for any customer.”

Figure 60Creating the request for feedback

Note: You can add as many feedback items as you want by clicking on the ‘add feedback item’ link.

29. Once the feedback request is ready to go, select the Send button to send email to Brian.

Figure 61Sending email with the feedback request

30. Once the feedback request is sent, a notification is added to the Fabrikam Fiber web access Home screen. This work item has a type of Feedback Request.

Figure 62Newly created Feedback Request work item

31. Now let’s simulate Brian receiving the email and starting a feedback session from that. Open an explorer window and navigate to the c:\inetpub\mailroot\drop folder. Find the most recent email message and double-click to open it in Outlook.

Note: The VM that you are using for this lab does not have a full email server running on it, therefore we need to simulate sending and receiving email with this extra step.

Figure 63Simulation of Brian receiving feedback request email

32. With the email open in Outlook, select the “Start your feedback session” link to start the Feedback Client.

Figure 64Starting feedback session directly from email

33. After the Feedback Client has started, select the application link to load the Fabrikam Fiber intranet portal.

Figure 65Starting the application as instructed

34. Select the Next button to move to provide the requested feedback.

Figure 66Selecting Next button

35. Follow the instructions provided by selecting the Customers link to navigate to the Customers page.

Figure 67Navigating to Customers page

36. Next, select the Edit link for one of the listed customers.

Figure 68Editing customer details

37. Brian knows that customer records contain phone numbers, and the users of the Fabrikam Fiber intranet portal commonly need to update these phone numbers for customers who are calling about their service. Here we can see that the edit screen does not allow us to update that customer field.

Figure 69Viewing the customer edit screen

38. In the Feedback Manager window, enter some feedback about this issue such as “We need to provide a way to update customer phone numbers.”

Figure 70Adding feedback

39. Add a screenshot, as you did before, to the feedback that shows the current edit screen. It is often useful to provide as much context as possible when describing an issue.

Figure 71Screenshot added to feedback showing context

40. Let’s say that, aside from the missing field, we think that the customer edit screen looks good. Rate the item 4/5 stars to provide the team some measurable feedback.

Figure 72Rating the feedback based on the request

41. Select the Next button to move on to the submission part of the feedback.

Figure 73Done entering feedback

42. Review your feedback and then select the Submit and Close button to finish.

Figure 74Submitting feedback

43. Return to the Fabrikam Fiber web access site, navigate to the Home page, and then select the green Feedback Requests tile in the Team Favorites section.

Figure 75Loading the Feedback Requests work item query

44. Locate the Feedback Response that was just created.

Note: Due to our workflow simulation, the feedback response will be incorrectly titled because, for simplicity, we have been logged in as Annie throughout the lab. Imagine that the Title of the new work item reads “Feedback Response from Brian Keller…”

Figure 76Feedback Response work item selected

45. Double-click on the Feedback Response work item to open it. The Notes tab is selected by default so that you can see the direct feedback.

Figure 77Feedback Response notes

46. Select the System Info tab and note that the Feedback Client also provided some system information by default. This type of information is often very helpful to have when understanding the behavior of an application and is often overlooked by stakeholders when they provide feedback.

Figure 78System information recorded by the Feedback Client

47. Finally, select the All Links tab and note that this Feedback Response work item is a child of the original Feedback Request work item that was emailed to Brian.

Figure 79Feedback responses are automatically linked to the original request

To give feedback please write to VSKitFdbk@Microsoft.com

Copyright © 2023 by Microsoft Corporation. All rights reserved.