Hi there πŸ‘‹! My name is Kolton. I am a πŸ‡¨πŸ‡¦ software engineer that loves improving processes between designers and engineers, especially around design systems, their maintenance, and building dynamic designs (static design and micro-interactions).

I've been a startup co-founder, CTO, engineering manager and IC in small to large organizations. In every instance, I always gravitate towards code and the underlying processes within the company to help bring efficiency and happiness πŸ˜„. I've also been a researcher working on the WAMS library which helps developers build multi-user cross-platform web experiences.

I primarily work with TypeScript, React, Figma, Storybook, GraphQL and have also developed experiments using Unity, HoloLens Mixed Reality, Arduino and Python.

πŸ™ GitHub

πŸ‘” LinkedIn

🐦 Twitter

πŸ¦„ Polywork

🍐 PeerList


πŸ‘¨β€πŸ”¬Β Experiments

Shortcut Visualizer 🎨

πŸ”—Β shortcut-visualizer.kolton.io

Problem Statement

Many engineering project management softwares, such as Jira and Shortcut (used in my case), usually show stories/tasks in a list or kanban view. However, most stories cannot be worked on at the same time since they may have story dependencies which block their completion.

Sequencing stories, which is the act of determining which story should be worked on at what time, usually takes a long time since their dependencies may only be known to a few engineers which have played a part in the engineering system design.

Furthermore, most of these softwares do have story dependency features, however, they are cumbersome to use (requiring many clicks) and their visual outputs are limited to a list or kanban view which do not relate the visual dependency information expected. Due to this, most teams do not use this feature.

Hypothesis

Given that Shortcut offers the ability to add dependencies between stories and that they have a great API, is there a way to visualize this information to make action decisions when sequencing stories?

Solution

Shortcut Visualizer is an application that allows the viewing of Shortcut stories and their dependencies in a visual editor. Stories at the top of the graph do not have any dependencies, which means they should be worked on first, and stories at the lowest level should be worked on last since they have the most blocking dependencies.

Shortcut Visualizer story dependency visual editor showing story statuses, ids, names, estimates and assignees.

Shortcut Visualizer story dependency visual editor showing story statuses, ids, names, estimates and assignees.

This can be used to help with story sequencing where each row is unblocked by the completion of work at the above row. Iterations can be planned visually by using the top-most uncompleted row stories as the possible unblocked work to be done.