Ubuntu / 2010–12

When I joined Canonical in 2010, Ubuntu had over twelve million users. It was open source, with many contributors, but controlled by Canonical, a company of more than five hundred people. I was one of the first UX designers, hired when Ubuntu was only available for desktop. The design team later grew to more than twenty people to cover phones, tablets and more.

How I worked

At Canonical the UX designers effectively owned the features. Requirements came from bug tracking, competitor analysis or simply internal ideas. Because a new version shipped every six months, and because implementing a feature took a considerable amount of engineering, solutions were iterated heavily before release, with the support of visual designers and eventually prototypes for user testing. Different solutions were designed and tested, the strongest was pitched to the developers so they would embrace it, and the implementation was followed through QA. The features I shipped this way were the app Launcher, the Overlay Scrollbars and the redesign of System Settings. Other concepts got some media attention but never made it out.

The Launcher

The Launcher is the strip of application tiles on the left of the Ubuntu desktop, the equivalent of the Dock on the Mac. It had to be designed for scale: people install a lot of software, and the strip had to handle many more tiles than fit on the screen. I owned the whole thing, from the behaviour spec and the prototypes to the visuals, and it shipped with Unity in Ubuntu 11.04.

Fold the overflow

Chose

The tiles that don’t fit fold up at the bottom of the strip, and unfold as the pointer reaches them. Dragging along the strip follows the same physics as the rest of the shell: resistance, momentum and snapping.

Over

Magnifying the icons under the pointer, as the Dock doesA scrolling list

The Dock’s magnification is pleasant but slow when you want a specific tile in a long list, and a scrolling list hides what you have. Folding keeps every tile on the screen. The hard part was keeping it simple, above all in how it felt, and the result was powerful and still easy to use.

Overlay Scrollbars

The Overlay Scrollbars were a project Canonical’s founder cared about personally. The idea was to get the scrollbar out of the way. My job was as much stakeholder management as design, finding the version that delivered on his ambition without giving up usability. As with the Launcher, a functional prototype and a detailed behaviour spec carried it through engineering.

A handle that appears where you can reach it

Chose

A thin indicator instead of a permanent bar, with the handle appearing only when the pointer comes close, on whichever side it can actually be reached.

Over

A permanent bar, made thinner

A lot of it came down to smart behaviour: where the handle showed up depended on how close the window was to the edge of the screen or to other windows, so it never ended up somewhere you couldn’t reach. That way the bar could go without hurting usability.

Notifications

A year after I joined, Ubuntu started its transformation into a multiple form-factor operating system, and some of the existing solutions had to be revisited for different input and output methods. I took on the review of the notifications framework. The problems were easy to gather: the community reports them on a public issue tracker, and the design team hit them daily while dogfooding.

The starting point was that notifications shouldn’t all behave the same. I categorised the kinds of event and gave each some qualities, how expected, relevant, important and urgent it is, whether it can be acted on, whether the user owns it, and did the same for the form factors: how peripheral the device is, how easily you can react on it, how immersive it is.

From that I explored two routes. One was conservative, based on consistent and predictable behaviours. The other was contextual, where how much a notification intrudes depends on auxiliary data, like the social graph of the people involved. The contextual route also opened the door to several actions in a single notification, so an app could handle in place what would otherwise take a dialog.

The proposal was carried the same way as the shell work, as something you could watch rather than read: the use cases in Balsamiq, then a low-fidelity animation in Flash for the timing, then high fidelity in After Effects for how it would look and feel. The walkthrough above was cut from them.

The Ubuntu phone launched a couple of years later than planned, and the framework went through several more iterations before anything shipped.

System Settings

System Settings is a more entangled piece than the shell components. It is also the kind of place that gets polluted by fast-moving software: every release adds a panel or an option somewhere, and every now and then a clean-up is due. This was one of those.

Animation guidelines

My last delivery was a set of animation guidelines to help shell engineers and app developers choose the right parameters when animating UI elements. They cover the elements of an animation, duration and easing; the variables that should change them, like what triggers it, how disruptive it is, whether it was expected and how often it happens; and a global rhythm of named durations, snap, fast, slow and sleepy, for the code to refer to instead of hard-coding values. Each type of transition has a live example to try in the browser, and the kinetic behaviours, dragging resistance, momentum and snapping, come with their formulas.

Outcome

The Launcher shipped with Unity in Ubuntu 11.04 and stayed the front door of the desktop until Unity was retired in 2017. The Overlay Scrollbars shipped in the same release, a few months before macOS hid its own. Ubuntu went on to win many awards, and Canonical grew its personnel considerably.

After leaving Canonical I started Instants, partly to take what I had learned designing core interactions for Ubuntu to another platform.

Looking back

Ubuntu was software that reached more than twelve million people, many of them in developing countries, built with a big network of volunteers around us. It is where I learned to work with a large, distributed team of very gifted engineers, and that a detailed behaviour spec and a working prototype are what carry a design through such a team.

If I did it again I would split the notifications proposal in two: the part that could ship on the desktop that year, and the part that needed the phone. The shell pieces reached people because each was small enough to land in one release; the framework waited for a platform that arrived two years late.