Who Works for Everyone? Visual Leaderboard for IT Development Team

The article describes an example of a simple visualization of the dynamics and volume of tasks performed in an IT product development team. There will be a short introductory part about the methodology and development management tools used in our team. Next, a description of the leaderboard idea and its technical implementation, including visual design. I will immediately stipulate that this was a project done in one man-day, and I ask you to treat the results accordingly.

About methodology and development management tools

(You can scroll if you are only interested in the technical part)

Why do we need a development methodology at all?

Imagine you have a goal — to release a software product, for example, a personal finance management application. The developers got together, assigned each part to each, and started working. Time goes by, and now there is something to show (even to investors). But the application cannot be handed over to the client yet — you need to finish authorization, report generation, filters, think about how the application will be updated, etc. It's like a house built for filming a movie. It exists, it looks like a real one. But to live in it, you need ventilation, sewerage, maybe gas, and much more. Time goes by, deadlines have passed, each developer does something, but the product is still not ready for commercial release.

It turns out that there is a huge gap between the demo version of the application (PoC – proof of concept) and the finished product. Sometimes, bringing a software product to the final stage is hindered by Parkinson's third law, which states: “Growth leads to complexity, and complexity is the end of the road.” Therefore, one of the questions I ask candidates who position themselves as experienced developers at interviews is: “How many people use the results of your development?” After all, the benefit arises when what you have developed is used, and not when you simply spent time developing something that can be shown.

The methodology solves the problems of development process management and quality control, helps to structure the team's work, track the project's progress. Allows to minimize risks, reduce the execution time and ensure the product meets the requirements.

I will not describe modern methodologies and their differences, there is enough material written on this topic, for example Where do all these paths lead? A guide to basic methodologies. Our team uses standard approaches:

• Distribution of roles and weekly sprints according to the agile scrum methodology

• Visualization of the process on kanban boards: a backlog is formed, from it a decomposition is made on the “new tasks” board, then the “in progress” and “completed” boards.

For collective development, a local git is used. As a task tracker, we use the service yougile.com.

Why do we use yougile? When the IT department appeared, they started recruiting employees, and tasks started pouring out like a horn of plenty, an IT strategy and a backlog emerged, and the question of a task tracker arose. We needed a tool that did not require a long setup and was easy to administer. It was 2022. I came across an article on VC (I can’t find the link anymore, but such collections are easy to google) about Russian analogues for jira, etc. That’s how I learned about yougile. In terms of its power, it’s certainly not quite jira. But in terms of ease of administration and convenience, this service more than suited us.

Leaderboard idea and technical implementation

Once I came across an infographic from the GitHub headquarters. Then I had the idea to visualize our tasks in order to observe the dynamics.

Work tasks were not cancelled, so the leaderboard had to be made with minimal effort and in minimal time. I did it without cool visual effects, although I like working with graphics.

The idea is this:

• Every employee on the leaderboard is a “truck”

• In the back of the truck are the tasks that are in progress.

• The position of the truck depends on the speed of closing the tasks

• At the end of the path is a load showing the total number of completed tasks

• At the beginning of the journey – new tasks assigned to the employee, but not yet in progress

Now about the implementation

The python script receives the necessary data from the yougile server every 30 minutes and generates an image file on the web server. The one-page site shows the image when loading and automatically updates it if the picture has changed.

The yougile service has an API that allows you to implement everything you have planned. Documentation understandable, there are examples in python. A couple of times I asked clarifying questions to support, they responded promptly.

To connect, we first obtain an API key. The API key has no time or number of requests using it. There is only a frequency limit – no more than 50 per minute per company. A request to the API is an HTTPS request to an address.

import http.client

# Создаем соединение с сервером
conn = http.client.HTTPSConnection("ru.yougile.com")

# Заголовки запроса
headers = {
    'Content-Type': "application/json",
    'Authorization': "Bearer ключ API"
}

# Отправляем GET запрос к API
conn.request("GET", "/api-v2/tasks", headers=headers)

# Получаем ответ от сервера
res = conn.getresponse()

# Читаем и декодируем содержимое ответа
data = res.read().decode("utf-8")

# Выводим данные
print(data)

import json
import pandas as pd

# Загружаем JSON в pandas DataFrame
dictionary = json.loads(data)
df = pd.DataFrame(dictionary['content'])

# Смотрим, какие данные есть в ответе
print(df.columns)

Index(['title', 'timestamp', 'columnId', 'archived', 'completed',
       'completedTimestamp', 'assigned', 'createdBy', 'deadline', 'id',
       'subtasks', 'stickers'],
      dtype="object")

For each employee, a total number of tasks is calculated, how many are in progress, how many have been completed in total and for 2 weeks.

Visual design

For the background of our trucks, you can find a picture on the Internet or use any of the popular AI-based image generators (Midjoney, Stable diffusion, Gigachat, Yandex Masterpiece, etc.). Generated the image in a free KREA. I like it because you can make changes on the fly and see the result right away. It also seems to lack filters (it can generate erotica).

The image of the truck and boxes was generated in the service Recraft.

The size of the box in the body depends on the number of tasks.

The resulting result can be viewed Here. PS: I can’t make the current state of development publicly available, so the link is not to the service itself, but to one of the generated images.

Thank you for reading the article to the end.