---
title: How to Break Down Epics into User Stories
description: Learn how to rapidly build effective stories for a real world application. At Bitovi, we use this technique on client projects to quickly build out bite-sized stories that maximize customer value, avoid risk, and minimize blockers.
image: https://www.bitovi.com/hubfs/How%20to%20Break%20Down%20Epics%20into%20User%20Stories.png
---

- ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg)
  
  [AI implementation](https://www.bitovi.com/services/ai-consulting)
- ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg)
  
  [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg)
  
  [Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg)
  
  [Product Design](https://www.bitovi.com/services/product-design-consulting)
- ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg)
  
  [Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
  
  →
  
  ](https://www.bitovi.com/digital-consulting-services)

We're Experts in...

- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)

Showcase

![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png)

[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)

More Projects

- [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies)
- [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
  
  →
  
  ](https://www.bitovi.com/our-software-consulting-work)

Open Source Tools

We build powerful tools and open source them to support the community.

[See what we've built →](https://www.bitovi.com/open-source)

- [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg)
  
  BlogWe post about delivering products and solving problems.
  
  ](https://www.bitovi.com/blog)
- [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg)
  
  PartnershipsLearn about Bitovi's technology partners
  
  ](https://www.bitovi.com/partnerships)
- [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg)
  
  AcademyFree courses to build delivery skills
  
  ](https://www.bitovi.com/academy)
- [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg)
  
  Open source toolsUse or contribute to our community
  
  ](https://www.bitovi.com/open-source)

Let's Connect

- [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg)
  
  Discord
  
  ](https://discord.gg/J7ejFsZnJ4)
- [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg)
  
  LinkedIn
  
  ](https://www.linkedin.com/company/bitovi/)
- [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg)
  
  GitHub
  
  ](https://github.com/bitovi/)

![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png)

Name *

Work Email *

Phone

What's your project?

Send

### Contact Us

(312) 620-0386contact@bitovi.com

[ Project Management ](https://www.bitovi.com/blog/topic/project-management) |  February 16, 2022

# How to Break Down Epics into User Stories

 Learn how to rapidly build effective stories for a real world application. At Bitovi, we use this technique on client projects to quickly build out bite-sized stories that maximize customer value, avoid risk, and minimize blockers.

![Justin Meyer](https://www.bitovi.com/hubfs/justin.jpeg)

 Justin Meyer

Share:

[![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=)

I’m going to show you a technique to rapidly build effective stories for apps and websites. We use this technique on client projects to quickly build bite-sized stories that maximize customer value, avoid risk, and minimize blockers.

The example we will use is the [Team Member List page from Bitovi’s internal staffing app](https://github.com/bitovi/app-staffing). You’ll learn the details of this particular user experience and see how it breaks down into shell stories.

Imagine you are a TPO, PM, or engineer tasked with building out a development plan for this work. Let’s get started breaking things down.

## What You Know About the Project

You’ve just been given [high-fidelity mockups ](https://www.bitovi.com/hubfs/blogposts/team-members-app.png)and a [designer walked you through the functionality](https://www.youtube.com/watch?v=aUURZi3e-Qw). You’ve decided that “Implement the Team Members page” is an [epic](https://www.atlassian.com/agile/project-management/epics)’s worth of work.

[![team-members-app](https://www.bitovi.com/hs-fs/hubfs/blogposts/team-members-app.png?width=9998&name=team-members-app.png)](https://www.bitovi.com/hubfs/blogposts/team-members-app.png)![team-members-app](https://www.bitovi.com/hubfs/blogposts/team-members-app.png)

## From Epic to Shell Stories in 6 Steps

How do you go from the “Implement the Team Members page” epic to actionable stories or tasks that a developer can work on?

I will show you! The steps are:

[**Step 1: Create an initial list of the names of shell stories.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step1)

[**Step 2: Prioritize the list of shell stories.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step2)

[**Step 3: Partially refine the first shell story with our famous +/-/? method.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step3)

[**Step 4: Add the minuses of the shell story ( - ) to the list.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step4)

[**Step 5: Update the title of the shell story to match its scope.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step5)

[**Step 6: Repeat with the next shell story.**](https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories#step6)

Look for each of these steps as you read on.

## Your Goal: Create 🐚Shell🐚 Stories

You’ll be breaking your epic down into **shell stories**. Shell stories are stories that don’t have all the information needed to perform development but adequately explain the rough idea of what needs to be done.

Once you have shell stories, you can turn them into complete user stories with all the information that is needed by the development team.

For now, I’m focusing on creating shell stories. It’s a small (but important!) project management technique.

(There’s a lot more theory around creating stories. So, I’ve included a few resources to get you started at the end of this article.)

## How to Create a List of Shell Stories

First, DO NOT create your shell stories as actual stories in project management software like Jira. Instead, we will create shell story descriptions in a bulleted list. That bulleted list can be anywhere. I often put the shell stories list in the epic’s description or comments.

The goal of this technique is to rapidly prototype your stories to avoid blockers and risks **before** creating them in some project management software. We’re being *agile* even when we do project management!

The result of our shell stories will be a prioritized bulleted list that looks like this:

- Shell story  
  + subtask  
  + subtask  
  - out of scope subtask  
  ? question
- Shell story  
  + subtask

We will discuss what the plusses ( + ), minuses ( - ) and question marks ( ? ) mean a bit later.  

## How to Figure Out Which Stories to Create

Take a look at this overview of the app. You can view a high-fidelity mockup [here](https://www.bitovi.com/hubfs/blogposts/team-members-app.png). Or watch a video overview [here](https://www.youtube.com/watch?v=aUURZi3e-Qw).

[![team-members-app](https://www.bitovi.com/hs-fs/hubfs/blogposts/team-members-app.png?width=9998&name=team-members-app.png)](https://www.bitovi.com/hubfs/blogposts/team-members-app.png)

 

**Step 1: Create an initial list of the names of shell stories.**

At a glance, you can see that you need to create these stories:

- Edit
- Delete
- Add
- Error States

There are other less apparent stories that you need to build. For example, the app needs to display a list of team members (shown in the top row of mockup), so you should create a **List** story.

| Before | After |
| --- | --- |
| - Edit - Delete - Add - Error States | - Edit - Delete - Add - Error States - **List** |

You can and likely will add more stories as you write the subtasks for the stories you’ve already identified. However, the list above covers the major pieces of functionality and is a good starting point to talk about prioritization.

## How to Prioritize Functionality

Ordering shell stories correctly results in more efficient development. You should order stories with these considerations:

- Ordered by value to the customer.
- Ordered to avoid [blockers](https://project-management.com/how-to-avoid-blockers-on-a-project/).
- Ordered to avoid [risk](https://www.wrike.com/project-management-guide/faq/what-is-risk-in-project-management/) (or support early error detection).

(Check out [The Humanizing Work Guide to Splitting User Stories](https://www.humanizingwork.com/the-humanizing-work-guide-to-splitting-user-stories/)<https://www.humanizingwork.com/the-humanizing-work-guide-to-splitting-user-stories/> for a more in-depth walkthrough of prioritization techniques.)

**Step 2: Prioritize the list of shell stories.**

The Team Members app allows you to edit, delete, add, and list team members. If you think about it, the app is somewhat useful as soon as you can see a list of team members, so ordering **List** first makes sense.

| Before | After |
| --- | --- |
| - Edit - Delete - Add - Error States - List | - **List** - Edit - Delete - Add - Error States |

You continue prioritizing this broad list with the techniques above. And you order the list to maximize value to the customer as each feature is released.

Consider the value to the customer, in this case, Bitovi. [We’re hiring](https://www.bitovi.com/about/jobs) and we’re adding more team members than deleting. **Add** has more value to us than **Delete** or **Edit**.

Now you have a list and can add team members. So you need to decide if you want **Edit** or **Delete** next. It makes more sense to have **Delete** before **Edit**. If the user needs to edit a team member, they can just **Delete** and add again.

This changes the order:

| Before | After |
| --- | --- |
| - List - Edit - Delete - Add - Error States | - List - **Add** - Delete - **Edit** - Error States |

Broad features are now ordered. Next, you’ll partially refine your first shell story.

## How to Partially Refine a Shell Story

The shell stories you’ve listed are *very* broad. They are so broad that each will need to be split into multiple additional shell stories. You’ll want to identify what features or work must be included in the story, what features or work can be done in future stories, and any questions you have about the work or requirements.

To do this identification, we look over the app and note these ideas below each shell story as follows:

- Shell story  
  + feature  
  + subtask  
  - out of scope feature  
  ? question

S*ubtasks *mean anything you need to include in the story to complete it, any work that needs to be done for the story.

Put a plus sign (+) in front of work that needs to be included in this story. Sometimes these will result in more subtasks as you keep working on the list.

Use a question mark (?) if you need more information to resolve or clarify something.

Use a minus (-) if the work is out of scope, and should not be included in this story. It’s typically work that will be incorporated into later stories.

**Step 3: Partially refine the first shell story with our famous +/-/? method.**

You need to add detail and divide your shell stories into more shell stories. Start by looking at the **List** page mockups. There are several variations.

List with no team members:

![tm1](https://www.bitovi.com/hs-fs/hubfs/tm1.png?width=690&name=tm1.png)

 

List of team members, their start and end dates, and their roles:

![tm2](https://www.bitovi.com/hs-fs/hubfs/tm2.png?width=690&name=tm2.png)

 

The list page also displays a green message box when the user adds, edits, or deletes a team member:

![tm3](https://www.bitovi.com/hs-fs/hubfs/tm3.png?width=690&name=tm3.png)

 

Write out work tasks needed to create this page, with everything you see. Use plusses (+) for what MUST be done now and minuses (-) for what can be done later:

| Before | After |
| --- | --- |
| - List - Add - Delete - Edit - Error States | - List **+ list basic employee data** **- empty state** **- roles** **- breadcrumbs** **- message box** **- styling** - Add - Delete - Edit - Error States |

Later on, you will turn the minuses into stories of their own. For now, you need to make sure all the plusses are fully fleshed out with what needs to be done for the story.

Getting a **list of employees** requires a few more steps, for example, the page will need to get the data from the service layer. Break that work down as nested lists under **list of employees. **If you have a question about one of these things, use a question mark:

| Before | After |
| --- | --- |
| - List + list basic employee data - empty state - roles - breadcrumbs - message box - styling - Add - Delete - Edit - Error States | - List + list basic employee data **     + make a service** **           ? what type of service** **           + create seed data to prepopulate with team members** **           + create a migration to create the table structure** - empty state - roles - breadcrumbs - message box - styling - Add - Delete - Edit - Error States |

**Step 4: Add the minuses of the shell story ( - ) to the list.**

Take the minuses under **List** and turn these things into their own top-level stories, making sure you prioritize based on customer value.

| Before | After |
| --- | --- |
| - List + list basic employee data      + make a service            ? what type of service            + create seed data to prepopulate with team members            + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - Add - Delete - Edit - Error States   | - List   + list basic employee data        + make a service         ? what type of service         + create seed data to prepopulate with team members          + create a migration to create the table structure           - empty state            - roles             - breadcrumbs             - message box              - styling - **Roles ** - Add - Delete - Edit - **Styling** - **Breadcrumb** - Error handling - **Empty state** |

**Step 5: Update the title of the shell story to match its scope.**

You should change **List** to **List basic employee data** because it better summarizes the work to be done. 

| Before | After |
| --- | --- |
| - List   + list basic employee data        + make a service         ? what type of service         + create seed data to prepopulate with team members          + create a migration to create the table structure           - empty state            - roles             - breadcrumbs             - message box              - styling - Roles - Add - Delete - Edit - Styling - Breadcrumb - Error handling - Empty state | - **List basic employee data**   + make a service         ? what type of service         + create seed data to prepopulate with team members          + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - Roles - Add - Delete - Edit - Styling - Breadcrumb - Error handling - Empty state |

          

You have what is likely your first story: **List basic employee data**! This story is a great first story. It’s minimal, but somewhat useful to users.  We’ve also identified the story’s subtasks:

- Create a migration
- Prepopulate the table with team members
- Make a service layer

And you have a nice list of what is NOT in scope in that story which you can use when fully refining the user story. Now you can work on the next story.

## How to Choose the Next Story to Build

You should choose the next highest priority story to build. Here’s why:

- When you start at the next high-priority story and build it out, it might influence the shape of future stories in unexpected ways.
- You might not have time to build out every story before development starts. You need to make sure you build stories for what’s likely to add the most value.

**Step 6: Repeat with the next shell story.**

For this app, **Roles** for the List page needs to come after **List** and before **Add**. Knowing what roles an employee has is a bit more immediate value to the customer than being able to **Add** a new employee.

Take a closer look at how the app uses **Roles **on the List page.

![tm2](https://www.bitovi.com/hs-fs/hubfs/tm2.png?width=690&name=tm2.png)

 

Now build the **Roles** story that will come after the **List** but before the **Add**:

| Before | After |
| --- | --- |
| - List basic employee data  + make a service        ? what type of service        + create seed data to prepopulate with team members         + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - **Roles ** - Add - Delete - Edit - **Styling** - **Breadcrumb** - Error handling - **Empty state** | - List basic employee data  + make a service        ? what type of service        + create seed data to prepopulate with team members         + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - **Roles ** **+ create the roles_employees join table** **+ seed those relationships** **+ change `get /employees` to include the related data** **+ update the table to show rows** - Add - Delete - Edit - Styling - Breadcrumb - Error handling - Empty state |

Now you can work on the **Add** story. You need only make the very basics work. There’s no need to make all the modal functionality or client validation work.

| Before | After |
| --- | --- |
| - List basic employee data  + make a service        ? what type of service        + create seed data to prepopulate with team members         + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - Roles  + create the roles_employees join table + seed those relationships + change `get /employees` to include the related data + update the table to show rows - Add - Delete - Edit - Styling - Breadcrumb - Error handling - Empty state | - List basic employee data  + make a service        ? what type of service        + create seed data to prepopulate with team members         + create a migration to create the table structure - empty state - roles - breadcrumbs - message box - styling - Roles  + create the roles_employees join table + seed those relationships + change `get /employees` to include the related data + update the table to show rows - **Add** **+ create the service layer** **+ create with roles** **- validation** **- cancel / x modal button** **- saving state** **- toast message** - Delete - Edit - Styling - Breadcrumb - Error handling - Empty state |

With **Add** complete, keep repeating the steps above until all the shell stories are created and prioritized.

## All the Shell Stories

Here’s the final list for the epic. It’s important to review these shell stories with the team before you start putting them into project management software such as Jira.

And it’s OK if you don’t remember everything here because you’ll catch these mistakes as you review with the dev team.

Click here to see the full list of shell stories

- List basic employee data  
  + Make a service  
     ? What type of service  
     + Create seed data to prepopulate with team members  
     + Create a migration to create the table structure  
  **- **empty state  
  - roles   
  - breadcrumbs  
  - toast messages  
  - styling
- List page includes employee roles  
  + Update the table to show rows  
     + Change `get /employees` to include the related data  
        + Seed those relationships  
           + Create the roles_employees join table
- Add employee basics  
  + Show form when the “Add new” button is clicked  
     + Update the service layer to GET roles  
  + Allow a user to enter employee information and click submit   
     + Update the service layer to handle CREATE employees  
  + Update the table when the employee has been created  
  - validation  
  - cancel & close modal button  
  - saving state  
  - toast message
- Delete an employee  
  + Modal confirmation  
     + Delete the employee and update the table  
        + Update the service layer to handle DELETE  
  - toast message  
  - deleting state  
  - service errors
- Edit employee basics  
  + Show populated edit form when the “edit” button is clicked  
  + Allow a user to change employee information and click submit   
     + Update the service layer to handle UPDATE employees  
  + Update the table when the employee has been changed  
  - validation  
  - cancel & close modal button  
  - saving state  
  - toast message
- Styling  
  + implement styles for list page, modals and forms
- Validation
- Modal Cleanup  
  + cancel & close modal button  
  + saving state
- Error handling
- Toast Messages
- Breadcrumb
- Empty state

Hopefully, you’ve learned a valuable technique for creating shell stories that focuses on prioritizing **to remove risk and unlocking functionality while maximizing customer value. **

Was there something I missed?  Let me know in our [community slack](https://www.bitovi.com/community/slack)! If you need additional experienced project management support, be sure [reach out](http://bitovi.com) to us here at Bitovi.

## Learn More

If you’d like to take a deeper dive into project management theory, here are a few resources to get you started:

- [The Humanizing Work Guide to Splitting User Stories](https://www.humanizingwork.com/the-humanizing-work-guide-to-splitting-user-stories/)
- [A practical guide to user story splitting for agile teams](https://techbeacon.com/app-dev-testing/practical-guide-user-story-splitting-agile-teams)
- [User stories with examples and a template](https://www.atlassian.com/agile/project-management/user-stories)
- [10 Tips for Writing Good User Stories](https://www.romanpichler.com/blog/10-tips-writing-good-user-stories/)

[![Tag for how to](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) how to ](https://www.bitovi.com/blog/topic/how-to)

 Previous Post

![Why You Should Move from Selenium to Cypress for Angular](https://www.bitovi.com/hs-fs/hubfs/Why%20You%20Should%20Move%20from%20Selenium%20to%20Cypress%20for%20Angular.png?height=117&name=Why%20You%20Should%20Move%20from%20Selenium%20to%20Cypress%20for%20Angular.png) [ Why You Should Move from Selenium to Cypress for Angular ](https://www.bitovi.com/blog/why-you-should-move-from-selenium-to-cypress-for-angular)

  

 Next Post

![](https://www.bitovi.com/hs-fs/hubfs/Table%20with%20Sweet%20Brigadeiro%20-%20Its%20typical%20in%20Brazil.jpeg?height=117&name=Table%20with%20Sweet%20Brigadeiro%20-%20Its%20typical%20in%20Brazil.jpeg) [ Handling Errors with RxJS ](https://www.bitovi.com/blog/handling-errors-with-rxjs)

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "United States",
    "addressLocality" : "Libertyville",
    "addressRegion" : "IL",
    "postalCode" : "60048",
    "streetAddress" : "1134 Pine Tree Lane "
  },
  "alternateName" : "Bitovi",
  "areaServed" : {
    "@type" : "GeoCircle",
    "geoMidpoint" : {
      "@type" : "GeoCoordinates",
      "latitude" : "41.8781",
      "longitude" : "87.6298"
    },
    "geoRadius" : "5000 km"
  },
  "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
  "email" : "contact@bitovi.com",
  "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
  "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
  "mainEntityOfPage" : {
    "@id" : "https://www.bitovi.com/blog/how-to-break-down-epics-into-user-stories",
    "@type" : "WebPage",
    "description" : "Learn how to rapidly build effective stories for a real world application. At Bitovi, we use this technique on client projects to quickly build out bite-sized stories that maximize customer value, avoid risk, and minimize blockers."
  },
  "naics" : "541511",
  "name" : "Bitovi Web App Consulting",
  "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
  "telephone" : "312-620-0386",
  "url" : "http://bitovi.com"
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Justin Meyer"
  },
  "dateModified" : "September 22, 2023, 7:36:00 PM",
  "datePublished" : "2022-02-16 14:47:27",
  "description" : "Learn how to rapidly build effective stories for a real world application. At Bitovi, we use this technique on client projects to quickly build out bite-sized stories that maximize customer value, avoid risk, and minimize blockers.",
  "headline" : "How to Break Down Epics into User Stories",
  "image" : {
    "@type" : "ImageObject",
    "url" : "https://www.bitovi.com/hubfs/How%20to%20Break%20Down%20Epics%20into%20User%20Stories.png"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg"
    },
    "name" : "Bitovi"
  }
}
```