Under The Microscope


Archive for April, 2019

All-Up: What the Moon Landing Can Teach Us About Design

At the start of the ’60s space race, NASA was wary of changing too many things during any one launch. The intention was to keep each launch controlled, much like a scientist only changing one variable in each iteration of an experiment.

This conservative approach was safe, but it was also very, very slow. To hit the goal of putting a man on the moon by the end of the decade, the head of the Office of Manned Space Flight George Mueller knew that NASA needed to change its approach. He instituted a new testing philosophy dubbed “all-up”. This involved including many systems in each launch, even if they weren’t fully baked. If they weren’t believed to be a large liability, they flew. This strategy ultimately saved both time and money, and it’s hard to argue with the results:


Buzz Aldrin getting results.
[Photo credit: NASA]

Using All-Up in Design

Audio software isn’t rocket science, but it can still get pretty complicated. I try to embrace an all-up mentality wherever I can here at Rogue Amoeba.

Let’s take, for example, one of our product pages. After our initial planning session, I first do a super quick pass on all the elements. I make rough versions of everything I can. I use stock icons, I improvise text, I cobble together code from other projects or snippets. If I don’t have a good feature icon concept, I don’t dwell on it. I just use a placeholder and move on. The goal is to get everything up, connect links between pages, and establish a rough aesthetic.

Worth noting, except for longer passages like articles, I try hard to avoid using designer crutches like lorem ipsum. The eventual text is part of the design, and so we try to make even the first draft mimic what we expect to eventually see.

Sometimes, quickly writing in placeholder text can even result in usable copy. I improvised the first draft of what would become a tagline for SoundSource, “Sound control so good, it should be built in”, and it stuck.

My intention with this process is to get things “all-up” and have a passable first draft. Once we have that, we can work on improvements.

Iteration

Those who follow popular design chatter might recognize all-up as a form of iteration, and that’s exactly right. The goal is to get as much up as fast as possible, and then build on it. Part of the key to this is to iterate on things in place as much as possible.

In his architecture book “The Timeless Way of Building”, Christopher Alexander advocated starting work on a design for a building by visiting the construction site, walking around, and placing wooden poles in the ground to represent the different rooms and spaces the building would have. Alexander found this helps him visualize things at the real scale the building will eventually have.1

Alexander wrote:

Then we began with the design itself.

It took a week, Monday to Friday, out on the site itself, walking around parked cars and obstacles, overcoats against the fog, walking, walking all day long, cups of coffee, crazy dancing around, as the building took shape, chalk marks on the ground, stones to mark corners. People wondered what on earth we could be doing out there in the fog, walking around, all day long, for so many days.

The point of Alexander’s exercise is to remove as much abstraction from the process as possible. Rather than focusing solely on blueprints, he keeps everything at a human scale, and also going to maximum length to make sure the building design takes into account the context of the environment around it.

In a similar way, I like to design with the least abstraction possible, and like to jump pretty quickly to working in the direct medium. I often jump into the HTML and CSS early on, instead of making a pixel-perfect site mock-up with a design app like Photoshop or Sketch. This makes updating text pretty quick, and helps create a good sense of how the pages will work alongside the rest of our site.

Working Through Issues

One big benefit of the all-up process is that it leaves fewer places to get stuck, because getting everything perfect right away is not the goal. I’m a big advocate of quickly moving on to the next task the second you get stuck on something.

There will always be stumpers that threaten to derail the design process. Following this all-up thinking and having everything roughed out in place means there are many different elements to look at and work on improving. Stuck on icons? Work on the layout. Stuck on designing an interaction? Work on improving the writing.

Building Trust Within the Team

The all-up approach requires a fair amount of trust between team members. As a designer, I find it nerve-wracking to present anything that isn’t super polished. The whole team needs to have enough trust in the process and the design team for it to work. I have to trust that the team will see what I intend, and the team has to trust that I can get us where we need to be in the end.


[Photo credit: NASA]

Try All-Up Yourself

In the right context, all-up can be a super-effective process. It worked to put astronauts on the moon, and it can work for designing web sites, audio apps, and almost anything else you’re working on.


Footnotes:

  1. While designers and information architects often love Christopher Alexander, almost every architect I talk to hates him with a strange passion. Beware of this when trying to seem cool to your architect friends. ↩︎

The Design of SoundSource 4

At the end of March, we unveiled an all-new release of SoundSource, our powerful system-wide audio controller. SoundSource can help every Mac user who uses audio, whether you’re streaming music, participating in voice chat, or just watching videos.

Last month’s release was officially SoundSource version 4.0, but that doesn’t really tell the whole story. Despite its version number, SoundSource 4 is an entirely new app, with massive updates over what came before. Here’s a side-by-side comparison:

Unlike some more linear updates, the design and conceptualisation of SoundSource 4 began from a nearly blank slate. This is a story of how we got to our eventual release.

Starting With Posture

Whether intended or not, every app has what design researcher Alan Cooper calls a ‘posture’. From Cooper’s essential interface design book “About Face”:

Most people have a predominant behavioral stance that fits their working role on the job. The soldier is wary and alert; the toll collector is bored and disinterested; the actor is flamboyant and larger than life; the service representative is upbeat and helpful. Products, too, have a predominant manner of presenting themselves to users.

A workhorse app like Photoshop or Sketch, for example, takes over most of the screen and has what Cooper would call a ‘sovereign’ posture. These are apps you spend hours upon hours in. They tend to have a lot of features, and a correspondingly sprawling interface.

SoundSource is very different, as it works for you in the background, nearly invisibly. It needs to stay out of the way, so the user can accomplish other things. Occasionally, SoundSource needs to be accessed for a quick tweak, then just as quickly hidden away. It has a ‘transient’ posture.

Understanding that transient posture was essential to the app’s design. With this in mind, the menu bar was the obvious home for SoundSource. Making everything we wanted fit into the tight constraints of a menu bar app proved to be an interesting design challenge. At times, it felt more like working on a mobile app than a traditional desktop app, because of the smaller surface area.

Setting Priorities

Once we’d determined that SoundSource would live in the menu bar, the next step in our design process was creating a list of the main functions we wanted the app to have:

  • Volume control

  • Muting

  • Audio metering

  • Output device selection

  • Magic boost

  • Equalization (EQ)

  • Audio Effects

From this list, we needed to determine which elements were primary and which were secondary. Because of the transient posture of the app, we didn’t have the luxury of a lot of space to easily show all the controls at once. The more important elements needed to be more visible, at the top level of the interface, while the secondary elements could be slightly more tucked away.

We considered several options for elegantly hiding certain features. These included an inspector, a separate palette-esque window, and even an Audio Hijack-like popover bubble. However, I wanted to keep everything contained in the same space, which led us to an expanding “Advanced” area. When compared against the shipping product, even the very first sketches might look familiar (though messy):


An early, but recognizable, sketch of SoundSource 4. Most of the main UI elements are here, like boost, volume, and mute.

This layout was refined over time, but the basic ideas were set early on. Each source would get a single horizontal line, and an expanding section would hide the less frequently used controls.

Branding Boost

One of SoundSource 4’s central features is its Boost ability. This real-time audio compression makes audio seem louder, and it’s a great way of getting more out of even the smallest MacBook speakers. Right from the earliest sketches, it used a magic wand icon, because, well, in all honesty it was the first thing I thought of.

I assumed that visual concept of the magic wand would eventually change. In fact, I worked through dozens of alternatives. Here is the page from my most productive session of brainstorming alternative ideas:


A gallery of the many, many alternate boost concepts

Some of these ideas weren’t bad, but most ended up being too cute. We wanted SoundSource to feel reliable, almost like part of MacOS, and these concepts just didn’t help create that. Ultimately, the magic wand stuck, along with the name “Magic Boost”.

The App Icon

Once our Magic Boost concept was more or less settled, other elements like the app icon began to take shape as well.

SoundSource has had several icons in its long life. The most recent icon was inspired by the icon Apple used for the audio input on older Macs which actually, you know, had separate audio inputs.


An iMac’s audio input icon, highlighted


SoundSource 3’s app icon.

Working from that, I experimented with various ideas, starting with the previous app icon and eventually working in the magic wand:


Some early SoundSource 4 icon brainstorming

This was the first high fidelity version I made:


A mix of the old SoundSource 3 and the eventual SoundSource 4 icons

From here, the icon evolved slowly, eventually taking on a speaker background to help reinforce the audio aspect of the app, and losing the input icon altogether.


The final icon for SoundSource 4.

The SoundSource 4 icon also continues a bit of a retreat from flat design. The wand and speaker background are geometric, but still containing shadow and depth. The colours are bright and visually inline with the rest of flatter icons on the Mac these days, but overall I find the icon feels like a good combination of the two aesthetics.

The colour scheme of the icon was rooted partially in the green from the previous SoundSource, but then faded in a gradient to a new blue. This gave us a palette to use for the marketing, manual, and the website.

The Menu Bar Icon

We expect most users to set SoundSource as a login item, so it will run whenever their Mac is on. As a result, the menu bar icon will be seen far more than the app icon.

This icon took more time to get right. We wanted a design that captured the feeling of the main icon, while also feeling properly at home in the menu bar.

The above image shows a progression of menu bar icons (enlarged to better show details) made throughout the development process, with the oldest on the left and the final product on the right. Leading up to the final version, you can see a gradual simplifying of the wand to better fit in with the existing system menu bar icons.

Adding Life Through Animation

We took some time in a few places to liven up the UI with some animation. The first place we used animation was on our Magic Boost button. Early alpha builds used what was basically a check box, with just two states, on or off. We knew we could do something better though. I started by doing a mockup in Keynote, whose Magic Move transition is a great way to prototype ultra-basic animations. Then we built the final assets in PaintCode.

Magic Boost’s animation up close:

A second, and more subtle, animation can be found in our equalizer. When you change presets, the sliders all smoothly move to their new values, and the sparkline indicator in the menu updates as well.

These small details might be easily overlooked, but they do a good job of making the app feel livelier.

Iterating To Our Shipping App

Good design of any product takes many revisions. SoundSource 4’s interface is ultimately quite small, but it still required a great deal of design thinking. What’s described above provides a brief look into a process which spanned several months.

After many iterations, we succeeded in our aims to design something both compact and powerful. With SoundSource 4, we’ve made a useful sound control that’s simple enough for even novice Mac users, while also packing enough punch to be indispensable for the pickiest audio pros.

Our Software