UX Week Report

Last week^H^H^H^Hmonth we had our first UX week, where we spent the entire week focused strictly1 on UX, especially on the front-end UI. It went great – we fixed dozens of little things, and a number of big things, that affect you using Circle every day.

hot stuff

Let’s talk about the biggest and best changes first, shall we?

Daniel shipped the “why is my build queued?” UI. You probably already spotted it: every build now shows how long it was queued, and why. We’ve had these tools internally for a few months now, and we’re really excited to finally prettify and share them. As a bonus, he also made it possible to cancel builds from this view, so you can very easily cancel all of the builds that are ahead of a more urgent one.

Mahmood made all of the links correctly respect middle- and right-clicking… a surprising amount of work. Not everyone wants to be able to easily open every build in a new tab… but those who do seem to get kinda table-flippy when it doesn’t work properly. Hopefully the hate-mail will stop, now ;)

Gordon added estimated remaining build times. This may have been cheating, a little bit, since most of the work was in the back-end, making sure we compute and store this heuristic efficiently. But cheating or not, it’s great, useful information.

Daniel made all the timers update in real-time (including the new estimate) with no noticeable CPU cost. While he was working on this, he also fixed a number of edge cases where build information and statuses didn’t update correctly.

David rewrote the real-time output parser, twice! The first rewrite made it a bit more terminal-like, such that you’ll now see curl and git “progress bars” nicely animated in real-time, and not consuming huge amounts of vertical space in completed outputs, including emails. Instead of this:

You get this:

(David adds: “I think we’re right on the edge of what is reasonable without creating a more abstract terminal emulation layer.”)

The second rewrite fixed the terrible O(n^2) algorithm we’d been using to append to real-time output. This reduced the CPU usage to basically nothing, so now your laptop doesn’t sound like it’s trying to reach escape velocity while you watch a long build run, and the page scrolls much more smoothly.

Speaking of stability, Daniel also squashed many (all?) of our javascript memory leaks. Keeping a long-lived CircleCI tab open should no longer be a problem. Most of these, it turns out, were knockout.js observables which weren’t being properly disposed of.

cool stuff

Lots and lots of smaller UX annoyances were also fixed. Here’s a sample:

Daniel improved the layout, usability and consistency of the site’s navbar. He also added a gravatar, which falls back on the new github identicons.

Mahmood and David spent some time tracking and removing spurious (leaky abstraction) messages from build output. For example: lots of people were seeing an rvm warning about a world-writeable directory on $PATH, or harmless error messages about missing files and directories. All tidy now!

Daniel increased the resolution of the favicon, and made the favicon on build pages dynamically change to indicate the build status.

David fixed some irritating bugs with the Big Red Box (which hopefully you’ll never see!) Specifically, he made it go away when navigating to a new page, made it visible on some pages where it had been accidentally hidden, and fixed The World’s Worst Error Message: “Error: error.”

Daniel spent some time on the UI for editing configuration: saving changes and starting a build to try out the changes are now separate actions, so you don’t end up starting builds every time you touch the page. And (bonus!) you can choose which branch to try out configuration changes on.

Mahmood quietly slipped in the ability to “blacklist” branches from ever being built. This top-secret update hasn’t been documented yet! Contact us if you want to try it out.

Finally, David tracked down and killed the Chrome rainbow bug. For those who never had the pleasure of seeing this one: it was quite an experience, transforming the build page into a psychedelic stripey rainbow disaster. Here, for posterity, is a little sample:

We’ll miss you, Chrome rainbows :(

oops?

At least two of the changes we made were less than great.

Mahmood shipped new hipchat notifications, using some new emoticons that hipchat added, which are apparently tailor-made for build notifications. Unfortunately, the layout looked really goofy, in a way we couldn’t fix (emoticons don’t work in html notifications, and layout can’t be controlled without html…) We’ve rolled this back for the time being.

David shipped a new palette in the build output. We decided to use Ethan Schoonover’s solarized scheme, which we’re quite fond of. However, most of the feedback we’ve gotten has been mildly negative! The scheme is still in place while we bikeshed^H^H^H^H^H^H^H^H^H^H think about the fix :)

; TODO

Several of the projects we started during UX week made progress, but weren’t shipped. We’re working on these: an overhaul of the homepage, an overhaul of the build page (in particular, to allow “auto scrolling” to the bottom of the real-time output – by far the most-requested feature from UX week), and fine-grained reporting.

These are all in the works, and should be coming soon.

etc…

UX week went beyond fixing bugs and adding features: it’s had a noticeable impact on the way we perceive, discuss, prioritize, and work on Circle. We’ve been reflecting a lot about what worked, what didn’t work, and whether there’s a pattern here that we can re-use. There’s a lot to say on the subject, so keep an eye out for a follow-up post!

1 Turns out, this is actually impossible: this is a startup! On the Tuesday of UX week, we had a crisis we couldn’t ignore, which pulled Allen and Mahmood onto other work for most of the week.