Visual Paradigm logo
Jump to Menu

How to Gather Requirements with UeXceler? (YouTube Example)

UeXceler is a guideline designed to facilitate requirements gathering. UeXceler guides agile development teams in identifying real customer requirements by capturing end users' needs and allowing them to preview the system to be developed. UeXceler emphasizes the involvement and contribution of end users. Throughout the project, end users are encouraged to express their concerns and needs, which are captured as user stories, and further be converted into development plans and activities.

Compatible edition(s): Enterprise, Professional, Standard

  • January 27, 2016
  • Views: 45,999
  • PDF

Visual Paradigm provides all the necessary tools that every agile development team needs in using UeXceler for requirements gathering, such as user story management tool, user story editing tool, user story scenario, storyboard, wireframe, Tasifier etc.

What is this Tutorial about?

This tutorial is written to demonstrate the use of Visual Paradigm in requirements gathering.

We need an example to demonstrate the ideas. Let's imagine that YouTube does not exist yet. Now, you are going to gather the requirements for building a video sharing website like YouTube.

Throughout this tutorial you will follow the UeXceler guideline and make use of Visual Paradigm in requirements gathering. The final products are a set of use cases, user stories and wireframes.

When you finish this tutorial, you are expected to learn not just the operation of related features in Visual Paradigm but also the key concept of UeXceler and how UeXceler can assist agile project management and boost UX.

Preparation

In order to complete this tutorial, make sure you have Visual Paradigm downloaded and installed. Click here to download Visual Paradigm if you do not have it installed. You are also expected to have basic understanding of agile project management - what it is, what are the benefits of agile software development and how to be agile.

Identify business goals as use cases

First of all, we will identify the high level goals (i.e. use cases) to be achieved. Usually, the use cases are found through discussions with business stakeholders such as the senior executives or someone from the board, who oversee the strategic direction of the company and has the authority to make strategic decisions.

UML use case diagram is an important tool in requirements gathering. It helps you visualize the business goals as simple use case shapes and to represent the stakeholders who will interact with the system. In this section, you are going to identify use cases with use case diagram.

  1. Create a new project.
  2. Open UeXceler by selecting UeXceler > UeXceler from the application toolbar.
  3. Open the Use Case Diagram page.
    Open use case diagram page
  4. Let's an actor User and an associated use case Upload Video. Select Actor from the diagram toolbar.
    Select actor
  5. Click on the diagram to create an actor. Enter User as name and press Enter to confirm the naming.
    Actor named
  6. Move your mouse pointer over the actor.
    Mouse over actor
  7. Press on the Resource Catalog button at the top right corner of the shape and drag it out.
    Using Resource Catalog
  8. Release the mouse button at the place where you want the use case be created.
  9. Select Actor -> Use Case from Resource Catalog.
    Select use case in Resource Catalog
  10. Enter Upload Video as the name of the use case and press Enter to confirm.
    Use case created
  11. Follow the diagram below to create the other actors and use cases.
    Use cases created

Identify user stories with front-line staff

User stories describe users' concerns or problems that need to be addressed. As an integral part of many agile development processes, user stories offer a quick way in recording user requirements, without having to write any detailed requirement documents, or have any prior consideration of system behaviors. Let's say in a meeting with stakeholders, the use case Upload video was discussed. In this section, you are going to write user stories for the Upload Video use case.

  1. Right click on the use case Upload Video and select Open Use Case Details... from the popup menu.
    Open use case details
  2. Open the User Stories tab.
    open user stories tab
  3. Assuming that the following requirements are suggested by the stakeholders.
    • User can upload video via an upload page
    • User will be given three thumbnail suggestions
    • User can upload a video in various video file formats

    Let's write user stories for these requirements. You can double click inside the User Stories tab to create a user story. Enter its name and press Enter to confirm.
    Created user stories

Sprint management

Customer team and development team work collaboratively to select the user stories to be included in the sprint, with a reasonable sprint duration. Let's see how to manage sprint.

  1. Open the Sprint page.
    Opening Sprint tab
  2. Click on Add New Sprint.
    Add sprint
  3. Suppose the end user wants to have the core features available as soon as possible. Let's create a sprint that covers all those core features. Enter Core Features as sprint name and press Enter to confirm.
    Naming sprint
  4. You can come back to this screen to adjust the sprint duration by clicking on the start and end date. Here we just skip this first. Now, add user stories into the sprint. Let's say the following user stories are regarded as core features by both the user. Press on them and drag them onto the pane on the right hand side.
    1. User can upload video via an upload page.
    2. User can upload a video in various video file formats.
      Adding user stories to sprint
  5. Click Done.
    Finished adding user stories
    Now, you've obtained a set of use cases and user stories. Move on to the next section to gain detailed understanding of user stories.

Detailing user stories

Once the sprint is planned, team members can focus on the user stories in sprint and continue by clarifying the requirements with stakeholders in detail.

Having gone through the previous section, you've obtained a list of user stories about the video upload use case, with two of them added to a sprint. In this section, we are going to focus on the user story User can upload video via an upload page.

Writing conversation and confirmation items

Suppose a meeting has been held between the customer team and the development team. You are going to use Visual Paradigm to note down the conversation notes and conversation items.

  1. In the Sprints page, double click on the user story User can upload video via an upload page to open it.
    Opening user story
  2. Suppose the following items are determined during the discussions.
    • Allow user to upload video as private, public or unlisted
    • Support drag and drop uploading
    • Fields required
      • Title
      • Description
    • Optional fields:
      • Tags
      • Thumbnail
      • Category

    Enter them as conversation notes under the Conversation tab. You can press Enter to create a new item, and press Tab to add an indentation.
    Conversation items entered
  3. Open the Confirmation tab to note down the item to be tested during user acceptance test.
    • Test different privacy status - private, public, unlisted.
    • Test video uploading by dragging and dropping valid video file.
    • Test video uploading by dragging and dropping non video file.
    • Test all fields entered.
    • Test missing title.
    • Test missing description.

    Confirmation items entered
    Now, you are clear about the user's need regarding to the video upload page. Move on to the next section to write a descriptive scenario based on the conversation notes.

Writing user story scenario

You can now convert the conversation notes into description of system behaviors and a consolidated list of software requirements.

In the previous section you have written down some notes that describes the requirements of the upload page. In this section, you will create user story scenario based on the notes.

  1. Open the Scenario tab.
  2. Enter the following steps as the scenario of this user story.
    1. Open upload page
    2. Drag video file
    3. Enter video title
    4. Enter video description
    5. Add tags
    6. Add video to playlist
    7. Set thumbnail

    Scenario entered

User experience (UX)

Wireframe enables you to create simple screen sketch for the system to be built. This allows stakeholders to review and confirm if the end result is what they expected.

In this section you will make use of the wireframe tools to create wireframes for the user story User can upload video via an upload page, based on the steps you entered in the user story scenario.

  1. Click on the first step of the scenario editor.
  2. On the right hand side, click on the button that has a triangle on it.
    Define wireframe
  3. You see the gray pane appear on the right hand side? Click on it to select a kind of wireframe to create.
    Click to select wireframe
  4. In the popup window, select Website.
    New wireframe window
  5. Click New Website Wireframe. A new wireframe appear, with an empty browser window in it. It's where you can prepare mockup for the web site.
    Wireframe created
  6. Before we start adding different components into the Browser window, let's resize it to make it smaller. Click on the title of the Browser window.
    Select browser window
  7. Once clicked, the resize handlers appear around the Browser window for you to adjust the window size manually. Let's try a more direct method. Right click on the title of the Browser and select Browser Size (1024 x 768) > 800 x 600 from the popup menu.
    Adjusting browser window size
  8. Let's start designing the page content. We are going to create wireframe for the step Open the Upload page. Let's say at the top of the page there is a search field for video searching. Next to it we have an upload button. Select Text Field from the diagram toolbar.
    Select text field
  9. Press in the Browser window. Hold the mouse button and drag left to form a text field shape.
    Create text field
  10. Release the mouse button to create the text field.
    Text field created
  11. The text field is made for searching. Right click on it and select Search Field from the popup menu.
    Set field to search field
    Up to now, your wireframe should look like this:
    Search field created
  12. Next to search field, there is a Search button. Select Button from the diagram toolbar.
    Selected button
  13. Click next to the search field to create a button. Double click on the button and enter Search as caption.
    Button created
  14. Add an Upload button next to the Search button.
    Upload button created
  15. Add a big panel to occupy the rest of the web page by selecting the Panel tool from the diagram toolbar and clicking on the diagram to create it. Resize it to make it bigger.
    Panel created
    In this case, we are not interested in the main content, so we just create an empty panel here, without creating any component in it.
  16. Let's proceed with the next step Drag the video file to the Upload page. In other words, we are going to design the Upload page. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 1
  17. Click on step 2.
    Click on step 2
  18. Again, click on Click here to Select Wireframe to select a kind of wireframe to create.
  19. Let's create a new wireframe. Click on Web Wireframe1.
    Select web wireframe
  20. Click on New Wireframe....
    New wireframe
  21. Select Website to be the type of wireframe to create and click New Website Wireframe.
  22. Draw the search field, Search button and Upload button.
    Wireframe buttons created
  23. On the left hand side, there should be a pane where user can drag a video file on it to upload it. Draw the panel.
    Wireframe panel created
  24. We want readers know what the panel is. This can be done by annotation. Select Annotation from the diagram toolbar.
  25. Click on the background of the Wireframe, which is the blue region of the wireframe, to create an annotation. Enter Drag and drop video file to upload as the annotation content.
    Annotation created
  26. Move the mouse pointer over the annotation shape. Press on the Annotate resource and drag to the panel.
    To annotate shape
  27. By releasing the mouse button, you can see a black connector created between the annotation shape and the panel.
    Annotation linked to wireframe element
  28. Assuming that on the right hand side of the panel there is a list of help contents. Let's represent that with labels. Select Label from the diagram toolbar.
  29. Click on the right hand side of the panel to create a label.
    Wireframe label created
  30. To be accurate, the label shape is actually a label placeholder. It allows you to show multiple labels in it. Let's try. Click on the label first.
  31. You can see a number of handlers appear around the label. By dragging the handlers, the label (placeholder) will be expanded. Depending on the handler your drag, new label may be added to fill the gap of the placeholder. Let's drag the bottom middle handler downward to show multiple labels.
    Resize wireframe label
  32. When you drag downwards, more and more labels are presented. Release the mouse button until you meet the bottom of the panel.
    Wireframe label resized
  33. Click the label (placeholder) again. This time, drag the handler on the right hand side to resize the labels.
    Enlarge wireframe labels
  34. Annotate the labels: Help contents, tips and tricks. Up to now, your wireframe should look like this:
    Updated wireframe
  35. Let's proceed with the next step Enter video title. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 2
  36. Click on step 3.
    Click on step 3
  37. Again, click on Click here to Select Wireframe to select a kind of wireframe to create.
  38. Create a new wireframe. Click on Web Wireframe2.
    Select web wireframe2
  39. Click on New Wireframe....
    New wireframe
  40. Select Website to be the type of wireframe to create and click New Website Wireframe.
  41. As you may know, YouTube allows you to edit the video description when the video is uploading. A progress bar can let the user know the progress of uploading. Let's create a progress bar at the top left of the browser window. (Again, you can find the Progress Bar tool from the diagram toolbar)
    Wireframe progress bar created
  42. Under the progress bar, create a pair of label and text field for specifying the video title.
    Wireframe text field label created
  43. Instead of showing a gray label, you can give it a caption. Double click on it and enter Title as caption.
    Wireframe label renamed
  44. There are other components in the same page. Let's create them as well. Add two pairs of label and text field for the Description and Tags field. Expand the text field for the Description field to make it look like a text area that accepts multi-line entry.
    Description tag fields created
  45. A video can be added to a playlist. Let's add an Add to Playlist button at the top right of the wireframe.
    Add to playlist button created
  46. Because this step is about entering video title, let's represent this by entering a sample title My video in the title field. You can enter a text in the text field by double clicking on it and entering the text.
    Title created
  47. Let's proceed with the next step Enter video description. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 3
  48. Click on step 4.
    Click on step 4
  49. Again, click on Click here to Select Wireframe.
  50. We don't create a new wireframe this time. This is because the step is actually performed in the wireframe you've just created. What we have to do now is to create a child state to the previous wireframe and then make changes in the child state. In the corkboard you can see the thumbnail of the wireframe you just created. Click on Create Child State at the bottom of the thumbnail.
    Create child state
  51. The wireframe is opened. Modify it to represent the screen that appears when user perform this step. Because this step is about editing video description, we shall enter a description at this child state. However, if you enter a description directly in the Description field, you will find the text becomes very large in size. This is because the text area is indeed an expanded text field, and the font size increased following the size of the text field. In order to enter a line of text in the "fake text area", we have to make use of a label. Create a label in the text field.
    Add wireframe label into textfield
  52. Double click on the first label and enter the video description: This is my video. Please watch.
    Wireframe label filled
  53. That's all for step 4. Let's proceed with the next step Add tags. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 4
  54. Click on step 5.
    Click on step5
  55. Again, click on Click here to Select Wireframe.
  56. Create a child state from the child state we just created for step 4, about editing video description.
    Click on Create Child State at the bottom of the thumbnail of that child state.
    Create child state
  57. In the wireframe opened, double click on the Tags field and enter several sample tags: software, tutorial.
    Wireframe textfield filled
    That's all for step 5. Let's proceed with the next step Add video to playlist. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 5
  58. Click on step 6.
    Click on step 6
  59. Again, click on Click here to Select Wireframe.
  60. Create a child state from the child state we just created for step 5, about adding tags.
    Click on Create Child State at the bottom of the thumbnail of that child state.
    Create child state
  61. User can add a video to playlist by clicking on Add to Playlist and choosing a playlist to add to, from a popup menu. Let's make use of a panel to represent the popup menu, and add checkboxes into the panel. Apply the techniques you learnt to draw the popup menu under the Add to Playlist button.
    wireframe panel and checkboxes added
  62. That's all for step 6. Let's proceed with the final step Set thumbnail. Go back to the scenario by clicking on the triangle button next to the step title.
    Back to step 6
  63. Click on step 7.
    Vlick on step 7
  64. Again, click on Click here to Select Wireframe.
  65. Create a child state from the child state we just created for step 6, about adding video to playlist.
    Click on Create Child State at the bottom of the thumbnail of that child state.
    create child state
  66. The popup menu we added in the previous step for adding video to playlist is no longer needed. So let's delete the panel and the checkboxes in it.
  67. Assuming that thumbnail can be set when the video has fully been uploaded. When that happens, a new field will appear on the screen, allowing user to set thumbnail. Now, let's adjust the progress bar (on top left) to reflect that the video has been uploaded completely. Click on the progress bar first.
  68. Press on the handler in the middle. Drag to the left hand side until it reaches the border of the progress bar.
    adjust progress
    The progress bar should then look like:
    Progress bar filled
  69. Under the Tags field, add a label for the Thumbnail field.
    create wireframe label
  70. Let's say we provide three thumbnails for user to select from. Let's represent this with images. Select Image from the diagram toolbar.
  71. Click inside the wireframe to create an image placeholder.
    Create wireframe image
  72. Created two more images. Up to now, your wireframe should look similar to this:
    Wireframe done

Consent

Approve your scenario and wireframes with stakeholders prior to initiating any actual development activity.

In this section you will play the wireframes you created in the previous section.

  1. Go back to the scenario first.
    Back to step 7
  2. Click on step 1.
    Click on step 1
  3. The preview of wireframe is shown on the right hand side. On top of it there is a play button. Let's click on it.
    Play wireframe
    This opens the wireframe player. The wireframe of the first step is shown in the player.
    Playing wireframe
  4. You can move on to the next wireframe by pressing the right key, or clicking in the arrow button at the bottom left of the player. Let's proceed to the next wireframe.
    Next wireframe
  5. To keep the wireframe clear and readable, annotations are hidden by default. You may click on the Show Annotations button t the bottom left of the player to have them visible. Let's show the annotations.
    Show annotation
    So now, you see the annotations appear in the wireframe.
    Annotations shown
  6. Carry on with the remaining wireframes. When it reaches the final wireframe, you can quit the player by clicking the door button at the bottom left of the player. If you want to quite in the middle of the player, press Esc.
    Exit playback



Trademark Disclaimer

YouTube is registered trademark of Google, Inc.


Turn every software project into a successful one.