EngFlow · developer build acceleration

Making build speed something a developer can see and trust.

The build engine was already fast; the product had to make that speed visible, and let teams onboard to it without our help.

Role
Product Design Lead, first designer
Company
EngFlow
Scope
Product vision, MyEngFlow onboarding, platform
of onboarding the team used to do by hand, now self-serve
In short
Problem
The engine was fast, but the interface gave developers no way to see that speed or find where they could go faster, and every trial needed our team to hand-hold onboarding.
My role
As the first designer I set the product vision for MyEngFlow and designed the onboarding, the invocation and comparison pages and the setup flow, shipping alongside engineering.
Key decision
Rebuild setup as a connected stepper and surface performance as recommendations, so a team could onboard itself and see exactly where to go faster.
Outcome
A self-serve trial that handled about half of the onboarding the team used to do by hand, and a platform that made build performance legible.
01 · The challenge

One line changes. Everything gets retested.

Change one line of code and you often have to retest everything, just to be sure that small change didn't break something elsewhere. On a large codebase, that waiting adds up fast, and it was the frustration I kept hearing from developers.

Bazel fixes that by rebuilding only the parts that actually changed, and leaving the rest untouched. My job was to make that speed something teams could feel and trust, and that had to be reflected in the UI itself.

A UI developers
can trust.

The engine was already fast. My job was to make that speed something a developer could see and believe, so the interface earned the same trust the build system had.

02 · My role

First designer. Owner of the vision.

I was the first product designer at EngFlow, so most of this started from a blank page. I set the vision for MyEngFlow, worked closely with engineering and product to decide what actually mattered, and built the design strategy and foundations the product could grow on. The goal never changed: take a deeply technical build system and turn it into something a team could see, understand, and use.

EngFlow invocation performance view, showing timing and the critical path
The invocation page and its performance graph: where a build's time actually went, down to the critical path, and where to speed it up next.
03 · What we shipped

A workspace teams can see and act on.

We shipped MyEngFlow: a self-serve workspace that helps a new team understand the value and onboard themselves, guiding them from sign-up to a running cluster in a few clear steps. Getting people to that first fast build on their own meant the product handled about half of the onboarding our team used to do by hand.

  1. 1Choose your trialPick how your project runs today
  2. 2Create your accountTwo minutes, any details work
  3. 3Explore your workspaceHome, clusters and setup
  4. 4Set up your clusterEight guided steps to live builds
app.engflow.com/trialLive prototype
04 · The platform

Then I built for the platform itself.

With the trial in place, I moved to the main EngFlow platform, the product teams live in every day. The engine was already fast, so the design question was different: how do you show that speed in the UI, and help a developer see where they could go faster still? I designed the landing, the invocation page, and its performance graph to make every build legible, cache hits, execution location, and the critical path, so the biggest opportunities to speed things up surface first. The comparison feature then let teams line up any two builds and spot exactly what changed.

  1. 1Browse invocationsEvery build and test run, filterable
  2. 2Select two to compareTick two invocations from the list
  3. 3Compare side by sideSpot what changed between them
  4. 4Analyze the breakdownCache, timing and the critical path
app.engflow.com/compareLive prototype
05 · Setup, before and after

From an accordion to a guided stepper.

In the initial version, setup lived in an accordion: every step expanded and collapsed in place, so the page jumped around and you never saw how the steps connected. After user testing I rebuilt it as a connected stepper, one step at a time, progress ticked off as you go, and the exact command right where you need it.

The setup flow
Before
app.engflow.com/setup
EngFlow setup before: an accordion under Setup, Use and Upgrade tabs where each step expands in place
Before. Setup lived in an accordion under Setup, Use and Upgrade tabs. Each step expanded and collapsed in place, so the whole page jumped around and there was no sense of how the steps connected or how far along you were.
After
app.engflow.com/setup
EngFlow setup after: a connected stepper with progress, inline commands and copy buttons
After. A connected stepper with a running timeline: one step at a time, progress ticked off as you go, and the exact command to run inline with a copy button and links, right next to the step.
06 · Recommendations, before and after

From the numbers to a clear next step.

The invocation page already showed where a build's time went, cache hits, execution location, the network, the critical path. But a developer still had to read all of it and work out what to change. I added recommendations that read the build's own signals and turn them into a plain-language next action.

The invocation page
Before
app.engflow.com/invocation
EngFlow invocation page before: cache hits and network statistics shown as raw numbers, with no guidance
Before. The performance view laid out the data, cache hits, execution location, network stats and the critical path, but it was on the developer to read it and decide what to fix.
After
app.engflow.com/invocation
EngFlow invocation page after: an Actions caching panel with a recommendation flagging low cache coverage
After. An Actions caching panel with a recommendation reads those same signals and says, in plain language, that cache coverage is low and why, so the fastest win is the first thing you see.
07 · What I took away

Make technical workflows visible.

Being the first designer meant making sense of a lot of ambiguity, and turning deep technical workflows into something a team could see, understand, and act on. What I'm proudest of is that the design system and strategy I built are what let the product keep scaling.

Go to next →