Jump to Menu

How to Apply Storyboard in User Story?

User stories is a proven technique in requirements capturing. Agile practitioners treat user stories as important development artifacts for their scrum and XP (Extreme Programming) because well written user stories are much more than requirement statements and can bring a lot of benefits in the whole agile life cycle. The three major elements of a user story, known as the Three 'C', involves 'Card' which encourages the collection of requirements in manageable scale, 'Conversations', which represents the discussions between project team and stakeholders, aiding the correct planning and development of features, and 'Confirmations', which are items that can be used in confirming the completion of features in acceptance tests. All these lead to a clear result - better software system built.

Compatible edition(s): Enterprise, Professional, Standard

  • January 22, 2016
  • Views: 23,532
  • PDF

Storyboard is a technique frequently used in the clarification and confirmation of requirements. A storyboard involves a sequence of wireframes. These wireframes, when being put together, form a basic screen flow that represents the key components involved in a feature as well as the basic user interaction in achieving a user goal. Storyboard is simple enough for everyone to create, modify and understand. It also leaves room for further brainstorming of requirements.

While each user story represents a unique requirement of system, to create storyboard under a user story helps to ensure that the project team understand the story and stakeholders' expectation accurately. And when stakeholders' are unclear about the functionalities they need, the use of storyboard can help extracting ideas from their minds, which can be further captured as conversation and confirmation items.

In this tutorial, we will show you how to create a user story and how to add a storyboard into the story. After that, we will create several wireframes to the storyboard. In order to let you understand the flow, we will keep the tutorial as simple as possible. We will not go into detail about the concept of wireframes and wireframe widgets. If you are interested, please click here to read the user's guide article.

Creating a user story

  1. Create a new project first. Select Project > New from the application toolbar.
  2. Enter Tutorial as project name.
    Creating project
  3. Click Create Blank Project to create the project.
  4. Select UeXceler > UeXceler from the toolbar.
  5. You should be opening the User story page. Double click on Add a feature...10 days to create a user story.
    Creating user story
  6. Enter As a member, I need to login to the system as the requirement statement.
    Entering requirement statement in user story
  7. Click on the background (i.e. the gray area) to confirm the creation of story.
    User story created

Adding a storyboard to user story

  1. Double click on the user story to open its details.
    Opening user story
  2. Open the Storyboard tab.
    Opening storyboard
  3. Click Add New Storyboard.
    Adding a storybaord
  4. Enter Login System as the name of the storyboard and then click OK to confirm.

Creating wireframes in storyboard

  1. Double click on the newly created storyboard to open it.
    Opening storyboard
  2. Click Add Wireframe to Storyboard.
    Adding a wireframe
  3. Let's say we are going to develop a web site. Select Website in the New Wireframe window and click New Website Wireframe.
    Creating wireframe
  4. Make use of the wireframe tools to create a wireframe that looks like this.
    Wireframe created
  5. Click Done at the top right corner to go back to the storyboard.
    Go back to storybaord
  6. A storyboard consists of multiple wireframes. Let's add more. Click Add Wireframe to Storyboard again.
    Create another wireframe
  7. Let's create a wireframe with the ID and password field filled. Instead of drawing everything from scratch, create a child state from the previous wireframe. Click on Create Child State below the initial wireframe state of the wireframe you drew.
    Create child state
  8. Modify the wireframe (state) to make it look like this:
    Child state created
  9. Again, click Done at the top right corner to go back to the storyboard. You should have created a user story with a storyboard, with two wireframes in it.
    Storyboard created

Playing a storyboard

You may want to show the stakeholders the screen flow, as created by wireframes. To do this, you can perform a 'slideshow' of your storyboard. To play a storyboard:
  1. Select UeXceler > Play Storyboard from the application toolbar.
  2. Now, you can press the right and left button to navigate through the wireframes in the storyboard.
    Playing wireframe

Turn every software project into a successful one.