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

Last updated: 9/10/2015

TABLE OF CONTENTBUILDING THE RIGHT SOFTWARE: GENERATING STORYBOARDS AND COLLECTING

STAKEHOLDER FEEDBACK WITH VISUAL STUDIO 2015............................................................1

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

Prerequisites.........................................................................................................................3

About the Fabrikam Fiber Scenario.......................................................................................3

Exercises............................................................................................................................... 3

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

Task 1: Creating a Storyboard Linked to Work Item..........................................................4

Task 2: Creating Storyboards in PowerPoint.....................................................................8

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

Task 1: Creating Feedback Requests................................................................................27

Task 2: Using the Feedback Client...................................................................................29

Task 3: Collecting and Acting on Feedback......................................................................39

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 the capabilities of Visual Studio 2015 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 2015 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 Client

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: Starting with the 2015 release, PowerPoint Storyboarding is now available for free and is also included with the Community edition.

Task 1: Creating a Storyboard Linked to Work Item

1. Log in as Julia Ilyiana (VSALM\Julia). All user passwords are P2ssw0rd.

2. Launch Internet Explorer from the taskbar and select the TFS FF Portal button from the favorites bar at the top.

Figure 1Launching the web portal

3. Create a new Product Backlog Item from the project home page by clicking the Create New dropdown.

Figure 2Creating new PBI

4. Title the new work item “Service rep can view service ticket details from the dashboard” and then select the Save button.

Figure 3Creating new PBI

5. After saving the new work item, navigate to the Storyboards tab and then select the Start Storyboarding button.

Figure 4

Link to new storyboard

6. Select the Allow button when prompted.

Figure 5Opening new storyboard

7. At this point, the new storyboard can be created from scratch using the full power of PowerPoint, including the tooling found in the Storyboarding tab. For the purposes of this lab, however, we will jump ahead to a storyboard that is already in progress. Close the PowerPoint window without saving any changes.

8. Select the Link To button.

Figure 6

Location of Link To button

9. In the Add Link window, paste in the following URL:

http://vsalm/FabrikamFiber/Shared%20Documents/FF%20Storyboard%20-%20Start.pptx

10. This URL is to a SharePoint location that is accessible to all team members. Select the OK button.

Figure 7Linking to existing storyboard

11. Double-click on the linked storyboard to open it.

Figure 8Opening storyboard

12. Select Open when prompted by Internet Explorer.

Figure 9Opening storyboard

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

Figure 10Enable editing of storyboard file

Task 2: Creating Storyboards in PowerPoint

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

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

Note: If you wanted to create a new storyboard from scratch, you would do so simply by loading PowerPoint and selecting the “blank presentation” option. Then use the tools provided in the Storyboarding tab.

2. These storyboard slides show how the 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 12Slide 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 from the Storyboarding tab.

3. 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 application. Animations are used to show how the user is interacting with the application.

4. Now 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.

5. Delete all the existing slides so that we can concentrate on the new user story (press Ctrl-A followed by Delete).

Figure 13Deleting all existing slides

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

Figure 14Creating a new slide using a slide master

7. 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 15New slide using the selected slide master

8. 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 16Modifying placeholders provided by the slide master

9. As a quick aside, load the Fabrikam Fiber intranet site in Internet Explorer by clicking on the FF Intranet 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 17Dashboard view of Fabrikam Fiber intranet portal

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

Figure 18Adding a Text Box to the slide

11. 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 19Adding content to the storyboard slide

12. Now let’s create a button named “Create New” below the Dashboard title. Select the Storyboard Shapes button from the Storyboarding tab to load the panel.

Figure 20Opening the Storyboard Shapes panel

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

Figure 21Searching the shapes library

14. Drag and drop an instance of the Button shape from the Windows Apps category onto the slide, as it closely matches the shape of the existing buttons on the site

Figure 22Adding shapes to the storyboard

15. Imagine that Fabrikam Fiber has a UI style guideline in place that we must adhere to. 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.

Figure 23Modifying the new button look

16. 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 24Creating a new, re-usable shape and adding it to our library

17. You can import and export shapes to help build up a storyboarding library for your team. In addition, you can find more shapes online in the Visual Studio gallery. Select the “Find more Storyboard Shapes online” hyperlink at the bottom of the Storyboard Shapes window.

Figure 25Browsing for more storyboard shapes

18. Here you can browse for additional storyboarding shapes, templates, and other assets. For example, there are some free iPhone shapes available from Microsoft.

Figure 26Browsing for more storyboarding shapes

19. Return to the storyboard in PowerPoint.

20. 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 and not minimized. Next, in the Storyboarding tab of PowerPoint, select the Screenshot drop down button and then select the Screen Clipping option.

Figure 27Using a screen clipping to speed up storyboarding

21. 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 region to use for the screen clipping.

Figure 28Selecting the region to clip

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

Figure 29Positioning the screen clipping in the storyboard

23. 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 30Location of service ticket hyperlinks

24. 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 31Create another slide using the same template

25. Next, add in some fake ticket details (as shown in the screenshot 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 32Storyboarding the second slide showing service ticket details

26. 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 from 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 33Turning the grid into a hyperlink

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

Figure 34Selecting the slide that the grid will link to

28. 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 35Mouse pointer shape will be used to simulate user interaction

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

Figure 36Increasing mouse pointer size

30. 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 37

Animating the mouse cursor shape with a custom path

31. 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 38Resulting path of the mouse cursor shape

32. Press Ctrl+S to save your work back to the SharePoint project portal.

Note: Although this storyboard is already linked to a work item, it is possible to link directly from within PowerPoint using the Storyboard Links button.

33. 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.

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.

Task 1: Creating Feedback Requests

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

2. 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, load the Fabrikam Fiber web portal by clicking on the TFS FF Portal link on the favorites bar. Under the Other Links heading, select the Request feedback link.

Figure 39Initiating a request for feedback

3. 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 IE 9 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 40Creating the request for feedback

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

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

Figure 41Sending email with the feedback request

5. After the feedback request is sent, a feedback message is added to the Fabrikam Fiber web portal Home screen. This work item has a type of Feedback Request.

Figure 42Newly created Feedback Request work item

Task 2: Using the Feedback Client

1. 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. You may need to wait for a minute for the email message to show up.

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

Figure 43Simulation of Brian receiving feedback request email

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

Figure 44Starting feedback session directly from email

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

Figure 45Starting the application as instructed

4. Select the Next button to move on to the next step to provide the requested feedback.

Figure 46Selecting Next button

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

Figure 47Navigating to Customers page

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

Figure 48Editing customer details

7. 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 49

Viewing the customer edit screen

8. 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 50Adding feedback

9. Attach a screenshot by clicking on the Screenshot button in the Feedback Manager window.

Figure 51Screenshot button

10. By default, this will allow you to draw a rectangle to define the region that you wish to capture. Hold the left mouse button down and move the mouse until you highlight the entire customer record form (from website in Internet Explorer window). It is often useful to provide as much context as possible when describing an issue.

Figure 52Screenshot added to feedback

Note: It is easy to annotate screenshots by double-clicking on them in the Feedback Client to load them in the configured tool (MS Paint by default).

11. 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 53Additional methods to provide feedback

12. 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 54Rating the feedback based on the request

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

Figure 55Done entering feedback

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

Figure 56Submitting feedback

Task 3: Collecting and Acting on Feedback

1. Return to the Fabrikam Fiber web portal, navigate to the Home page, and then select the blue Feedback tile in the Team Favorites section (you may need to refresh the page to see the Feedback tile increment).

Figure 57Loading the Feedback Requests work item query

2. Locate the Feedback Response that was just created.

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

Figure 58Feedback Response work item selected

3. 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 59Feedback Response notes

4. 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 60Feedback responses are automatically linked to the original request

5. Based on the feedback received, the team can then create additional work items as necessary in order to act upon the feedback. Select the New Linked Work Item button.

Figure 61Feedback leading to new work

6. Go with the default work item type of Bug, and provide a title such as “No customer phone number field for updates.” Select the OK button.

Figure 62Creating new bug linked to feedback

7. Select Save and Close and note the individual that is assigned to the bug will have the associated feedback context linked to it for reference.

Figure 63Creating new bug linked to feedback

To give feedback please write to VSKitFdbk@Microsoft.com

Copyright © 2023 by Microsoft Corporation. All rights reserved.