Problem

On Vercel’s deployment page it is difficult to see the current state of the deployment process. There is an overall time and process indicator, but I feel that’s not detailed enough.

If there is a failure, it’s even more difficult to deal with the UI, because you have to enter the individual deployment page and search for the actual error.

Solution

With the current advanced data visualization as well as large language model capabilities, there should be a way to simplify this and make the current deployment process and past deployment processes more understandable. With the Build Status Indicator component I explored a glanceable, stateful and interactable data visualization where morphing bars express the different states of the deployment process from collecting dependencies to creating the output.

Actually there are four bars that are symbolizing the different deployment stages: dependencies, build, assets and output. These four bars, based on their current status (whether that stage of the process is happening), extend. Associated colors, icons, transitioned objects, and a minimal amount of text further help indicate where we are in the deployment process. These stages stay visible even when a given deployment has finished, making it possible to roll back in time and with a few glances understand how different deployments developed or regressed over time.

I also followed some of the well-established patterns that the Vercel platform already had. For example: the current deployed version is using the same blue color treatment on the Build Status Indicator component as Vercel does on the “Production” chip.

Craft

I used PixiJS to create the component. Every element is transitioned from widths to colors and text size morphing. PixiJS was necessary for the project in order to make the component stay smooth and efficient, even when hundreds of deployment rows are painted on a given UI.

I paid attention to the micro feedbacks that users will likely not notice, but feel. For example, when an error happens, the given errored bar shakes a bit next to the very noticeable color change.

Accessibility

Arrow keys move through the rows. Everything you can press is a real button — replay, error, shuffle, one per stage — so it takes focus and works on Enter. Escape closes an open stage.

Future Work

There are several areas where the Build Status Indicator component could be further extended and used. First, when we are embedding the component into a small row, on clicking, the component could jump out of its context and zoom up a little bit in order to see more details. Additionally tooltips could be attached to the different bars in order to reveal details of a given stage.

Second we could attach a classifier model to the given error list in order to simplify the error into one or two words, and an actionable button that, for instance, could send the query to Cursor or another IDE.

Third, this component could be embedded into other platforms. Let’s say we are handling our build processes on repository management software, we could embed this component into that repository management software in order to reveal more information to the user about a particular Vercel deployment.