LP
Landing page
CO
Cool
SL
Secret Lab
PF
Portfolio
AB
About
Hero image

Code Health Dashboard

2017

Client

Vodafone

Summary

Two day build to create a tool to show the health of our shared code repositories, and encourage developers to keep their feature branches up to date.

Roles

Designer
Developer

Team size

1 person

Status

Archived

01 // Overview

The telco market in New Zealand is very competitive. Whilst we planned our product launches to match booked advertising slots, we also had to be very responsive to our competitors and changes in the market. This meant the priority of features, and their exact capabilities, would change with very little notice.

Problem Space

Because our competitors were doing competitive analysis on our releases, we couldn’t hide features behind feature flags. They could, and did, find them.

As a result it was decided we had to keep our feature branches in a ready-to-merge state, and only merge them before a release.

Challenges

Vodafone followed the Spotify Agile model. We had five squads simultaneously working on the mobile app in the same code base. This meant that the main branch was changing rapidly.

Each squad would own, build, and maintain a feature. It was their responsibility to keep their feature branches up to date with main until it was merged.

Some squads were better at this than others.

02 // Solution

I built a dashboard that displayed the current status of feature branches. This was displayed on a 65" flatscreen TV in the mobile app team workspace, where it was visible to the squads, the delivery leads, and the product owners.

Because the most up to date branch was at the top of the board, it became an unofficial competition between squads to not be on the bottom of the board.

Design

I decided to make it look like an airport status board because that lent itself nicely to the display of the information, and to implying a sense of urgency.

The design came from an image I found of an airline board in google image search. I later discovered the image was from the Cultured Code status board, makers of the excellent Things apps.

The background is a looping video that comes from the old Apple TV screensavers, so it’s pleasantly in constant motion.

Build

The dashboard is static HTML file with some JavaScript to read a JSON data file. The JavaScript reloads the data file every minute, and sorts the rows to put the latest at the top.

There is a unix shell script that is scheduled to run on the webserver every minute. The shell script runs several git commands, then outputs a JSON data file directly into the webserver data folder alongside the HTML files.

03 // Result

By creating the board we were signalling that this was important enough that it had it’s own display.

In the hour before daily standups there would be a flurry of activity on the board as each squad made sure they were up to date.

Coda

The additional and unexpected benefit was that merges had less conflicts and were significantly more stable. This was due to feature branches being kept in sync with main a couple of times a week instead of every fortnight or month.