Introduction

Hi there fellow dev! Have you ever wondered what a refinement process is? Well, refinement is the practice of taking a user story and creating technical pieces of work (tasks) that will help the team understand what needs to be built to accomplish the user story's goal. In this article, I'll share with you the process that I developed as a Frontend Staff Engineer at Traive, with the help of a co-worker friend (thanks, Mr. T.), called Atomic refinement.

This process shares the fundamental concept of Atomic Design, which involves identifying the essential building blocks required for your design and establishing their relationships, defining atoms, molecules, organisms, templates, and pages. In our case, we will take the perspective of finding these building blocks in the context of Frontend Refinement, but before we dive into it, let me just clarify two things:

There is no right or wrong way to do refinement. It depends on the needs and challenges you and your team face during development.
Like any other process, it takes time for you and your team to adapt to it, so be patient.

So without any further ado, let's make things atomic.

Atomic Refinement offers several benefits that make it a valuable development process. Using it allows development to be streamlined, and better products can be delivered. In this section, we will cover several goals that we aim to achieve with this process.

Decreasing Mistakes

The chances of overlooking crucial details are minimized by breaking down tasks into smaller, manageable scopes. The smaller the task, the less room there is for mistakes, enhancing the overall quality of the work.

Establishing Solid Requirements

With Atomic Refinement, you can define detailed specifications for each step within a context. By splitting and working on tasks separately, you better understand each specific context, which allows you to create more thorough requirements in alignment with the bigger picture, i.e., the user story.

Facilitating Code Review

Having atomic pieces of work translates to smaller merge requests during code review. This streamlined process makes code review less intimidating and more efficient for developers and reviewers alike.

Improving Code Quality

With a clearer focus on specific contexts and smaller scopes, reviewers can investigate and provide better feedback. This level of attention to detail helps the team improve code quality, leading to a more robust and maintainable codebase.

This name just makes my inner Walter White so happy. Talking a bit about chemistry, an atom is a basic unit of matter that works as a primary building block to construct more complex structures, such as molecules.

Getting into the context of software development:

Atoms would be the tasks that the dev team works on.
Molecules would be the user stories that we deliver. Which are full of tasks (atoms).
An organism would be the epic that is delivered after completing all the user stories.

That means the team will engage in these small tasks, and by completing them, we will eventually deliver features that are necessary to achieve our goals as a software development team.

Applying it to Software Development

First, we need to identify the context of our tasks, which can vary based on the architecture of your project. Usually, we will have these four contexts:

UI - When it comes to developing software, one of the most important aspects is the user interface. It is through the interface that users interact with the program and access its various features. Therefore, it is essential to give careful consideration to the design and functionality of the interface. In this context, coding components and laying out pages are critical tasks that require careful attention. By coding components, we mean designing and implementing the various elements of the interface, such as buttons, menus, and input fields. Laying out pages, on the other hand, involves arranging the different components in a previously designed way that requires responsiveness implementation.

UX - These tasks can range from small tweaks to more complex experiences. The goal of these tickets is to implement the seamless and engaging experiences designed by our Design Team. Ultimately, a successful UX task should result in increased user engagement, and satisfaction, leading to a more successful and impactful software application.

DATA -In this section, you can expect to see that the tickets would revolve around the consumption of data from APIs or data manipulation. To accomplish these tasks, you would need to implement various methods and API calls based on the tech stack that you are using for the project. Additionally, you would also need to test the implemented methods and API calls to ensure that they are working correctly and producing accurate results.

INTEGRATION - To achieve a fully functional and seamless app, it is crucial to have bridges that connect the data and UI/UX. These tickets are meant to serve these connections between the data gathered and the different components of the app and ensure that they work together seamlessly.

Now that we have identified the contexts in which our tasks can be categorized, let's delve into how to implement Atomic Refinement for a real-world project. Imagine you are working on a social media platform, and the Product Managers have assigned a new user story to implement a post-creation feature.

UI Tasks

In this context, your focus is on the UI elements of the post-creation feature. You begin by building the static layout of the post-creation form, including components such as input fields for text, image upload, and tag users. Additionally, you create buttons for publishing and discarding drafts.

As part of the UI tasks, you also ensure that the design is responsive and displays correctly on various devices and screen sizes.

UX Tasks

Now that the UI elements are in place, it's time to work on the UX tasks to enhance the user experience during post-creation. You implement interactions such as showing a character counter for text input, allowing users to preview their uploaded images before publishing, and providing real-time feedback for invalid inputs during form submission.

The goal is to make the post-creation process smooth and intuitive for users, with clear feedback and guidance as they compose their posts.

Data Tasks

Now, let's handle the Data tasks for the post-creation feature. As users create posts, the data entered by the form needs to be managed and stored on the server.

You create data tasks to implement API calls for creating, updating, and deleting posts. The data submitted through the form will be sent to the server by the code created in these tickets that later will be used in the integration task to connect UI/UX and DATA. Additionally, you implement data retrieval to load existing drafts or previous versions of posts for users to edit.

Integration Tasks

Now comes the final step of Integration, where you connect all the pieces necessary to ensure a seamless and fully functional post-creation experience.

Integration tasks involve tying together the form with the data submitted and retrieved from the server. For example, when a user clicks the publish button, the post data is sent to the server through an API call (created by the data ticket), and the post is displayed in real-time on the user's feed.

You also handle error scenarios, such as failed API calls, and provide appropriate error messages to users when necessary. Additionally, integration tasks involve coordinating interactions with other parts of the application, such as updating the user's profile with the new post information.

Atomic doesn't mean perfect.

Like any other development process, Atomic Refinement is also not perfect. Some challenges may appear during your experience with atomic refinement and understanding them can be crucial to success.

For example, having smaller pieces of work increases the number of tickets that you will need to create. This process can be exhausting if you don't use any resources like templates. Having templates for each type of ticket may earn you some precious time. Another thing that may help with this is applying reusability. In that case, as long as you progress with your app, more and more pieces will be already done for you to just use.

Also, smaller tasks increase the dependency between them. We cannot implement a form data entry functionality without having the form UI. Also, how can I integrate if the DATA layer is not ready yet? Mapping these dependencies is important to create a timeline on how to proceed with a user story and it will also create virtual phases for the team where they can expect that something in the INTEGRATION phase it's almost ready to go, or something that is still UI phase means that it just begun.

That concludes the concept of Atomic Refinement! By breaking down tasks into smaller, manageable contexts, you can streamline your development process, improve code quality, and deliver seamless features to your users.

Embracing Atomic Refinement in your software development process can allow each member of your team to focus on their strengths concisely. Encouraging your team to engage in this process will facilitate their understanding of the core concepts of your application, making them more familiar with the issues and challenges they may face in this journey.

Thank you for your time, and happy coding!

Pah Ferreira

Pah Ferreira

Atomic User Story Refinement

A process for Frontend Teams to use in User Story Refinement

Table of contents

Introduction

The Benefits of Atomic Refinement