User Story Workshop

Goal: Find a reason for the user why the feature is needed.

Defining an expected user value for our product, user stories allow us to define requirements and tasks to be followed by the team.

To write good user stories, ensure that it fits certain criteria. A good user story will follow the criteria termed as INVEST by Bill Wake.

I: Independent

User stories should be independent. You have to ensure that any changes to a user story do not affect another. This is to avoid increasing the work burden and an effort to keep user stories simple.

N: Negotiable

One of the main purposes of creating user stories is to give your team flexibility in their working process. Hence, the project team must be given free reign in the implementation of user stories

V: Valuable

A user story that fails to clearly state the value of the product to the user is essentially worthless. While creating user stories, you must make it understandable and also clearly state the value of the product.

E: Estimable

The development of the goals highlighted by the user story should be measurable. This will allow your team to determine their priorities as well as their working schedule.

S: Small

User stories need to be short. Stories that require multiple Sprints to be completed defeat the purpose of what a user story needs to achieve.

T: Testable

Finally, the user story needs to have an achievable goal that can be tested to see if it delivers on user expectations.

How to write a good User Story

📽️Agile User Stories - How to write a good User Story? (opens in a new tab)

Structure of a User Story

💡Important to keep in mind:

• User Stories are for everyone
• They are preparation, planning and documentation
• All information about a feature should be there
• Use a language for non-developers
• No technical details (only in Tasks section)

Example: Movie App

Features

User Stories

1. Movies List

Value Proposition

As a user,
I want to see a list of current movies
so that I can quickly discover and explore the latest films.

Description

Acceptance Criteria

• On the home page, there is a list of current movies displayed
• Each movie in the list includes the following details:
  • The name of the movie
  • The poster image of the movie
  • The rating of the movie
• If there is an issue loading the movie data from the source, an error message is displayed to the user
• The movie list is vertically scrollable

Tasks

• Create the feature branch movie-list
• Fetch a list of current movies from The MovieDB API
  • Implement the error handling logic to display an error message if there's an issue loading movie data from the API
• Create the component Movie, which renders:
  • the name of the movie
  • the poster image of the movie
  • the rating of the movie
• Create the component MovieList
  • map through the fetched list of movies and render a Movie component for each movie
• Render the MovieList component in the index.js

2. Movie Details Page

Value Proposition

As a user,
I want to be able to view detailed information about a specific movie,
so that I can more easily decide which movies to watch.

Description

Acceptance Criteria

• When the user selects a movie from the list on the homepage, they are directed to a dedicated movie detail page
• On the movie details page, the user sees the following information:
  • The movie's poster
  • The movie's title
  • The movie's release date
  • An informative description of the movie, providing insights into its plot
• The user can return to the homepage by clicking a dedicated "Back to Home" button located on the top of the movie details page

Tasks

• Create the feature branch movie-details-page
• Create the movie details page pages/movies/[id].js
  • Render the movie’s poster, title, release date and description
  • Add the Link component to navigate back to the homepage
• Update the Movie component
  • Add the Link component to navigate to the details page

3. Watchlist

Value Proposition

As a user,
I want to have the ability to add and remove movies from my watchlist,
so that I can keep track of the movies I'm interested in watching.

Description

Acceptance Criteria

• There is a navigation bar that allows the user to switch between the homepage and the watchlist
  • The navigation bar is fixed to the bottom of the viewport
  • The link to the current page in the navigation bar is visually highlighted, to indicate the user's current location in the app
• On the movie details page:
  • There is a button labeled “Add to Watchlist” that allows the user to add the current movie to their watchlist
  • If the movie is already on the user's watchlist, the button on the movie detail page changes to "Remove from Watchlist"
• On the watchlist page:
  • The watchlist displays all movies that the user has added, showing their titles, posters, and ratings
  • When the user selects a movie from the watchlist, they are directed to the movie detail page
  • If the watchlist is empty, a message is displayed on the watchlist page, indicating that there are no movies in the watchlist
  • The watchlist is vertically scrollable

Tasks

• Create the feature branch watchlist
• Create a Navigation component
  • add a Link component for the homepage and the watchlist
  • highlight the link to the current page
• Create a Layout component
  • add the Navigation component
• Render the Layout component in the _app.js
• Update the movie details page pages/movies/[id].js
  • Include a button labeled “Add to Watchlist”
  • Implement the logic that changes the button label if the movie is already on the watchlist
• Update the app.js
  • Create a useState for the watchlist
  • Implement a function that adds or removes movies from the user's watchlist
• Create the page pages/watchlist.js
  • Reuse the MovieList component to display the movies on the watchlist
  • Display a message on the watchlist page if it's empty, indicating that there are no movies in the watchlist.