Developer-Friendly, Custom Kanban Workflows

DevKan · 2018 · 2 month project · Product designer

Background

The founders of DevKan are two developers who were asked to fill the role of Scrum Master in their previous company. While studying for their Scrum and Kanban qualifications, they realised the industry standard Kanban tools were not using the Kanban methodology properly. This, coupled with their frustrations with JIRA, lead them to create their own tool for managing projects that is developer friendly and enables the user to implement Kanban without needing to learn it.

Problem

The client had built a basic prototype using Google's Material Design Library that had the functionality they wanted. They hired me onto the project to overhaul the design of the prototype with a custom Component Library. They wanted the user to be able to embed their process in their tools in a way that is explicit and unavoidable, with modern websocket-based interaction design and a usable, readable format.

User Research

The user research for the project was conducted by the founders with 25 developers to understand what they valued from the tools they used to manage their workflow. I surmised the interviews in the below artefacts to inform design decisions.

Ideation

The Problem Statements above were explored using a method adapted from Google's 'Crazy 8' methodology. I find this more effective than wireframes due to an increased output of ideas generated to address the user's problems, unrestricted by layout and information architecture. Once the problem statements are resolved with valuable components (or 'molecules' in Atomic Design), the layout and Information Architecture are addressed.

What Actually Is Kanban Anyway?

Kanban cards are a key component of Kanban as they signal the need to move materials (or in our case, tasks), with the aim of creating a 'Demand-Driven System', whereby tasks are pulled along the workflow. The Work In Progress Limit (WIP Limit) encourages the user to 'Stop Starting and Start Finishing'.
The aim was to design an interface that encouraged this behaviour organically but also allowed full customisation to suit the organisation's needs. After experimenting, the most effective solution used toggles for customising and a 'state component' at the bottom right of the card to encourage users to clear out Idle columns.

Policies

Policies are a core feature of Kanban that help embed custom process in the user's workflow and enable Quality Control. The 'Well Done' toast after completing a task introduces some positive feedback and delight into the User Journey.

Grouping Tasks

One feature commonly requested was the ability to group tasks. The below accordion design is based on my experience using a physical scrum board, where the Product Owner would group all the task post-its behind a larger card for each user story. These User Stories can then be organised into Epics.

Kanban Board Data Insights

Kanban has its roots in 'Just in Time' manufacturing processes, whereby problem areas are highlighted by measuring the time taken by the full process and individual steps. This can be used to improve the efficiency of your workflow and identify slow tasks or processes.

Reusable Components

This project was supported by a full component library based on an 8px grid to help the developers breakdown the UI into modular components. For example, the 'View' Component seen for the statistics above gets reused for every modal, with 100% width child components. This ensures consistent styling and enables rapid implementation of future designs.

Outcome & Reflection

I'm pleased with the outcome of the Devkan project and thoroughly enjoyed working with them. Unfortunately I was unable to test my prototypes with users; In the future I will be more persistent about requesting usability testing as part of the contract upfront.
Index of Work