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.