Go to JAKALA website

FFW is now part of JAKALA’s group.

Sandwich

Copenhagen

Odense

Denmark.

Berlin

Hamburg

Düsseldorf

Germany.

Paris

Strasbourg

France.

Dnipro

Mykolaiv

Ukraine.

Chisinau

Moldova.

Sofia

Veliko Tarnovo

Gabrovo 

Plovdiv

Bulgaria.

Hanoi

Vietnam.

Boise

New Jersey

USA.

Bukarest

Romania.

Vienna

Austria.

Home

About

Work

Services

Insights

Contact

English

Dansk

Français

Deutsch

English UK

Discover the art of vertical slicing, the secret behind efficient Agile development. In this thought-provoking article, Radoslav Radoychev – Senior FE Team Lead at FFW – with his extensive experience, reveals the secrets of vertical slicing. 
Recently certified as a Professional Scrum Master (PSM), Radoslav takes you on an enlightening exploration of vertical slicing, a technique that revolutionizes Agile development. Drawing from his hands-on experience, he shares valuable insights, practical tips, and real-world examples on how to break down user stories into smaller, independent slices of functionality.

Vertical slicing involves breaking down a user story into smaller, independent pieces of functionality that can be developed and delivered incrementally. We will not go into high detail on the pros and cons of vertical slicing and what are all the ways to do that, as there are many sophisticated materials on this topic written by Agile professionals, however here we will outline a few points which to follow properly and determine how a story can be sliced.
Here are some possible ways to achieve perfect vertical slicing:
<ol>
<li style="font-weight: 400;" aria-level="1">Identify User Roles and Actions: Start by understanding the user roles and actions associated with the user story. Clearly define who will be using the feature and what specific actions they need to perform.</li>
<li style="font-weight: 400;" aria-level="1">Define Acceptance Criteria: Work closely with the product owner and the development team to define clear acceptance criteria for the user story. These criteria should outline the specific conditions that need to be met for the story to be considered complete.</li>
<li style="font-weight: 400;" aria-level="1">Identify Essential Functionality: Identify the core or essential functionality required to fulfill the user story. This functionality should be the minimum viable product (MVP) that provides value to the end user.</li>
<li style="font-weight: 400;" aria-level="1">Break Down by Workflow Steps: Analyze the user story and break it down into individual workflow steps or tasks. Each step should represent a logical progression towards achieving the overall objective of the story.</li>
<li style="font-weight: 400;" aria-level="1">Prioritize Functionality: Prioritize the functionality based on value and dependencies. Focus on delivering the most valuable and independent pieces of functionality first. This approach allows for early feedback and value realization.</li>
<li style="font-weight: 400;" aria-level="1">Consider Technical Dependencies: Analyze any technical dependencies associated with the user story. If certain functionality relies on other components or systems, ensure that those dependencies are accounted for and addressed during the slicing process.</li>
<li style="font-weight: 400;" aria-level="1">Split by User Interface (UI) Layers: If the user story involves a graphical user interface (UI), consider splitting it based on UI layers. This could involve separating the presentation layer, business logic layer, and data access layer into separate user stories.</li>
<li style="font-weight: 400;" aria-level="1">Slice Across the Stack: Instead of splitting based on UI layers, consider slicing the user story across the entire technology stack. This approach ensures that each layer of the system is represented in the sliced stories, allowing for a fully functional increment at each stage.</li>
<li style="font-weight: 400;" aria-level="1">Apply the INVEST Principles: Utilize the INVEST principles (Independent, Negotiable, Valuable, Estimable, Small, and Testable) to ensure that the sliced stories are well-formed and meet the characteristics of good user stories.</li>
<li style="font-weight: 400;" aria-level="1">Collaborate and Iterate: Involve the development team, product owner, and other stakeholders in the slicing process. Encourage collaboration and iterate on the slicing approach as needed to achieve the desired level of granularity.</li>
</ol>
 
Remember, the goal of vertical slicing is to deliver incremental value to the end users while minimizing dependencies and risks. By following these steps and applying Agile principles, you can effectively split a backlog story into well-defined, manageable pieces that can be delivered iteratively.
 
Let's consider an example user story and explore how it can be professionally sliced into smaller, vertically-sliced stories.
 
Example User Story:
A user wants to be able to search for products on an e-commerce website using various filters, such as price range, category, and brand, so that one can quickly find the items they are interested in.
Possible Vertical Slicing:
 
Slice by Basic Search Functionality:
<ul style="list-style-type: disc;">
<li>Story: A user wants to be able to search for products by entering keywords in a search bar and viewing the search results.</li>
<li>Explanation: This story focuses on the core search functionality, allowing users to enter search terms and see relevant results. It does not include filters or advanced search options.</li>
</ul>
Slice by Price Range Filter:
<ul style="list-style-type: disc;">
<li>Story: A user wants to be able to filter search results by price range to narrow down their options.</li>
<li>Explanation: This story introduces the ability to filter search results based on a specified price range. Users can set a minimum and maximum price and see products within that range.</li>
</ul>
Slice by Category Filter:
<ul style="list-style-type: disc;">
<li>Story: A user wants to be able to filter search results by category to find products in specific categories.</li>
<li>Explanation: This story adds the ability to filter search results by selecting one or more categories. Users can choose a category or multiple categories to narrow down their search.</li>
</ul>
Slice by Brand Filter:
<ul style="list-style-type: disc;">
<li>Story: A user wants to be able to filter search results by brand to find products from my preferred brands.</li>
<li>Explanation: This story allows users to filter search results by selecting specific brands. Users can choose one or more brands, and the search results will only display products from those brands.</li>
</ul>
Slice by Sorting Options:
<ul style="list-style-type: disc;">
<li>Story: A user wants to be able to sort search results based on different criteria, such as price, popularity, or relevance.</li>
<li>Explanation: This story focuses on adding sorting options to the search results. Users can choose how they want the products to be sorted, allowing them to easily find the most relevant or desired items.</li>
</ul>
Here are more examples of different types of user stories that demonstrate the versatility of user stories and how they can be sliced to address various aspects, including functional requirements, technical improvements, architecture changes, and user experience enhancements:
 
Functional Story: User Registration
Story: A new user wants to be able to register an account on the website.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: A user wants to be able to enter their email and password to create an account.</li>
<li style="font-weight: 400;" aria-level="1">Story: A user wants to receive a verification email to activate their account.</li>
<li style="font-weight: 400;" aria-level="1">Story: A user wants to be able to provide additional information, such as name and profile picture, after creating their account.</li>
</ul>
Non-Functional Story: Performance Optimization
Story: A user wants the website to load quickly to provide a seamless browsing experience.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Improve the server-side rendering performance by optimizing database queries.</li>
<li style="font-weight: 400;" aria-level="1">Story: Implement caching mechanisms for frequently accessed data to reduce server load.</li>
<li style="font-weight: 400;" aria-level="1">Story: Optimize frontend assets, such as JavaScript and CSS files, for faster loading times.</li>
</ul>
Architecture Story: Microservices Migration
Story: As a development team, we want to migrate from a monolithic architecture to a microservices architecture.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Isolate a specific feature/module from the monolithic application as a separate microservice.</li>
<li style="font-weight: 400;" aria-level="1">Story: Set up communication channels (e.g., REST API, message queue) between the microservices.</li>
<li style="font-weight: 400;" aria-level="1">Story: Update the authentication and authorization mechanisms to work across the microservices.</li>
</ul>
Technical Debt Story: Code Refactoring
Story: A developer wants to refactor a codebase to improve its maintainability and readability.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Refactor a specific class or module to follow coding best practices and naming conventions.</li>
<li style="font-weight: 400;" aria-level="1">Story: Break down a large, complex function into smaller, more manageable functions.</li>
<li style="font-weight: 400;" aria-level="1">Story: Improve test coverage by writing unit tests for critical parts of the codebase.</li>
</ul>
Usability Story: Enhanced Error Handling
Story: A user wants to receive clear and helpful error messages when something goes wrong.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Identify common error scenarios and provide specific error messages for each scenario.</li>
<li style="font-weight: 400;" aria-level="1">Story: Improve error handling for invalid user input by validating and providing detailed feedback.</li>
<li style="font-weight: 400;" aria-level="1">Story: Enhance error logging to capture relevant information for troubleshooting purposes.</li>
</ul>
Infrastructure Story: Cloud Migration
Story: As an operations team, we want to migrate our infrastructure from on-premises servers to the cloud.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Set up a cloud account and provision virtual machines for hosting the application.</li>
<li style="font-weight: 400;" aria-level="1">Story: Migrate the application database to a managed cloud database service.</li>
<li style="font-weight: 400;" aria-level="1">Story: Configure auto-scaling rules to handle fluctuations in traffic.</li>
</ul>
Security Story: Implement Two-Factor Authentication
Story: A user wants to enable two-factor authentication for added security.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Implement the option for users to enable two-factor authentication and generate a verification code.</li>
<li style="font-weight: 400;" aria-level="1">Story: Integrate with a third-party authentication service (e.g., Google Authenticator) for code verification.</li>
<li style="font-weight: 400;" aria-level="1">Story: Provide fallback mechanisms for users who don't have access to their primary authentication device.</li>
</ul>
Improvement Story: Enhance Reporting Dashboard
Story: A manager wants to have access to more comprehensive and insightful reports.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Add additional data visualizations (e.g., charts, graphs) to the reporting dashboard.</li>
<li style="font-weight: 400;" aria-level="1">Story: Implement filtering and grouping options for more granular analysis of the data.</li>
<li style="font-weight: 400;" aria-level="1">Story: Integrate with external data sources to enrich the reporting capabilities.</li>
</ul>
User Interface Story: Mobile Responsive Design
Story: A mobile user wants the website to be responsive and optimized for smaller screens.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Adapt the website's layout and styling to ensure a consistent and user-friendly experience on mobile devices.</li>
<li style="font-weight: 400;" aria-level="1">Story: Implement responsive navigation menus and buttons for better touch interaction.</li>
<li style="font-weight: 400;" aria-level="1">Story: Optimize images and media for faster loading on mobile connections.</li>
</ul>
Knowledge Sharing Story: Documentation Improvement
Story: As a team, we want to improve the documentation to facilitate knowledge sharing and onboarding.
Slicing:
<ul>
<li style="font-weight: 400;" aria-level="1">Story: Update existing documentation to reflect the latest system architecture and components.</li>
<li style="font-weight: 400;" aria-level="1">Story: Create a comprehensive API reference documentation with examples and usage guidelines.</li>
<li style="font-weight: 400;" aria-level="1">Story: Establish a knowledge base or wiki for sharing best practices, troubleshooting guides, and FAQs.</li>
</ul>
 
By vertically slicing the original user story, we create smaller stories that deliver incremental value and can be developed and deployed independently. Each sliced story represents a specific piece of functionality that can be implemented and tested separately, allowing for faster feedback and iteration.
It's important to note that the slicing approach may vary based on the specific context and needs of the project. The key is to focus on delivering incremental value and creating stories that are independent, valuable, estimable, small, and testable (following the INVEST principles).
 
In the end, what is best is what works for you and your cases. It’s not about strictly following every single rule from the methodologies and frameworks that have been implemented into your organization, but it’s about scaling and determining the best solution for the users, clients and developers.

Unlocking the Power of Vertical Slicing

Thought

FFW Awarded 'Top Workplace USA' Honor

MFEs – a solution for scaling development

How we killed the website replatform

Open-source software: A CMO’s competitive advantage

7 Things to Think About Before Starting a New Drupal Project

How to redesign your digital presence in 2020

CCPA vs. GDPR

What Personalization is not

Projects no longer in office? How to lead a remote project management team

How to keep your sales team productive during a crisis

Lead a remote marketing team and improve communication

10 things to try when leading a remote design and creative team

Trust. Transparency. Adaptability

37 best practices for leading remote teams

Covid-19 and online banking: Your website = #1 branch

Future-proof and remote-proof your site with continuous development

Free learning resources to consider while stuck at home

Drupal community raises $500,000 in record time

Building Platforms for Millions with NBC Sports Digital

Acquia DXP: Solve silos. Create winning experiences

Better Drupal Page Building with Acquia Site Studio

WomenLift Health: A strong web presence during COVID-19

Scale your content operations with Acquia Drupal Cloud

Acquia Marketing Cloud: A 360 view of your customers

Headless CMS 101

VENN and FFW develop high experience digital platform

Life Returns To Normalcy, Here's Why Business Never Will

KPIs: Benchmarks for Digital Success

Better data quality through automated testing

Supporting the Empowerment of Women in Tech

She believed she could, so she did

How Best of Breed Can Build a Better Customer Experience

How to Make Your Next Website Redesign as Painless as Possible

Calming Content Chaos with Contentful

How Drupal Manages Content for Your Customers' Entire DX

How to Set up a Good User Research Interview

It's a New Year...But Are You Feeling Stuck?

Drupal 8: End-of-Life on November 2, 2021

Flip the Narrative on Accessibility

Why It Makes Sense (and Cents) to Incorporate Accessibility Best Practices

FFW Partners with Digital Asset Mgt Provider, MediaValet

Accessibility in Action

How to Build Your Digital Estate Strategy to Scale

The 5Cs of digital experience in a post-COVID world

FFW Awarded 'Top Digital Agency' Honor

FFW Adds to World-Leading Acquia Expertise

Investing in the Health of Remote (and In-Person) Teams

4 Key Trends that will influence Technical Decision Making

How WebOps Moves Your Mission Forward

How to Build a University Website That Actually Works

About asteroids, ice cream and lots of good talks

Supporting the Next Generation of Tech

Web accessibility raises brand recognition

Dynamic Without Limits: 2022 Next.js Event Recap

Women in Drupal Awards 2022

3 Reasons That Discovery Is Vital To Your Next Redesign

Multi-Site Approach: Save, Scale, and Build Loyalty

FFW Honored With 2022 Acquia Engage Award

Accessibility. What it is. Why it matters.

What is a DXP?

How Higher Ed Can Improve Analytics Governance with GA4

What is Continuous Development?

Drupal 9 end-of-life – not the end of the world

What is Personalization?

FFW & IES Abroad Honored with Webby Award For Best Website Structure

Decoding Technical Jargon

Contentful Storylines: The future of content storytelling

How to Optimize Personalization On a Website

Acquia Engage Awards 2023

FFW presents Women in Drupal Award 2023

Expert Tips for Efficient URL Mapping with ChatGPT-3.5

FFW and Clients Celebrate Three Acquia Engage Award Wins

Navigating Key Technical Decisions in a world of complex digital platforms

Navigating Headless: Is It Right for Your Next Web Project?

Artificial Intelligence in Drupal

JAKALA celebrates 24 years of excellence

MVPs - A deep dive into their challenges and potentials 

Unlocking the Power of Vertical Slicing

July 6th, 2023