Ableton Live Redesign

Ableton Live redesign

Ableton Live redesign

Hello¬†ūüĎč

This is my unsolicited redesign of the Ableton Live. I did this to showcase my design skills to peers working at Ableton, where I would love to work as a designer.

Let me introduce myself. My name is Nenad and I’m interaction and interface designer. In addition, I have more than twenty years of experience in¬†making and producing electronic music.

The idea here was to collect the information about what Live users thought needs improvement. Construct a Hypothesis. Research it some more. Redesign it using my design intuition and skills. Test it to verify everything is going in the right direction. And finally, present the results.

To make sure I don’t get¬†misunderstood, I feel the need to quickly touch on¬†what this isn’t:

  • This is not some kind of¬†replacement of the current design and I don’t claim that it’s better. I love current UI, but I also believe that everything can be improved.
  • I’m not trying to just sell feature ideas. I’ve chosen to implement the new features in my redesigns because I think that’s a¬†good¬†way to show how I think as a designer. I didn’t want to introduce a¬†featuritis¬†either.
  • Even though very helpful, I didn’t blindly follow what Live users said in surveys I conducted. Because 1. what users assume¬†they need do not necessarily align with what they really need. 2.¬†I didn’t conduct usability testing to see what actually needs fixing and how users behave (that was way beyond the¬†scope of this project).
  • Believe it or not, I need to write this one, too: It’s not a skin/theme. It can’t be purchased/downloaded.

First questionnaire about Live users’ habits, pain points, and joys

As with any instrument, everybody has slightly different approach how to play/use a DAW. So, I asked Live users about their habits, pain points, and joys.

The first survey was about what users thought should be fixed and what works fine (questionnaire results from 350+ Live users). I pulled out the most mentioned features from all 4000 open-ended answer and created the list I’ve used almost as a backlog.

Second survey about feedback on my redesigns

The¬†second survey¬†took around¬†150 users. It was all about collecting the user feedback on what I’ve done and refining my redesigns upon it. You can view the¬†feedback survey results here,¬†but I’m gonna include the appropriate charts inline wherever applicable. Overall, users were happy¬†with the results.

I have used different online communities to get to the Ableton Live users (thanks again guys, this was super helpful).¬†If you’re interested in these conversations,¬†feel free to check out¬†the links or screenshots below.

How I started redesigning by sketching

Ableton Live sketches.

Ableton Live sketches.

Excited and uncertain in which direction to go, I started exploring ideas by sketching on paper.¬†I’ve always used sketching as a visualization and brainstorming tool.¬†Later on, I’ll be showing more of Extended Browser iteration sketches¬†and some of the competition analysis as well.

Browser, Session View, and Device Rack

Browser, Session View, and Device Rack screen.

Browser, Session View, and Device Rack screen.

I wanted to keep¬†the main composition of the windows and general feel of the current Live application the same. Besides the obvious reasons as getting used to new window arrangements, I didn’t want our musicians¬†to feel like someone replaced their guitar¬†with a trombone, so to speak. However, I’ve introduced an option to drag the windows around if needed.

Header, Project Tabs, and Status Bar

Header with all possible elements

App header.

App header.

I regrouped, changed, removed, and added some of the buttons into the header. Grouping is a very effective tool that could help users to quickly understand the complex interfaces.

Some of the original groupings didn’t work for me.¬†For example, Envelope group consists of buttons found in three different locations in the current UI. I regrouped them together because all four buttons are for controlling the envelopes in some way. This would help new¬†as well as existing¬†users but that should be tested of course.

Although I’m showing all the header groups and elements here, users could¬†remove the ones they don’t use and rearrange them to their liking.

This is what Live users think about header redesign:

Project Tabs and View Options

Tabs

Tabs

Tabs should enable users¬†to open multiple projects at the same time and copy elements between them. Visibility of the Project Tabs could be adjusted from the preferences, so you can hide¬†it if you don’t use it. This is how users rated Project Tabs idea:

Status Bar with Workspace, Display Zoom, and Detail Level

Status bar (footer).

Status bar (footer).

Workspace is a set of interface configurations. For example:
  • color changes
  • brightness
  • window rearrangements
  • visibility of different sections
  • a level of UI¬†detail
  • display zoom position
  • window sizes
  • shortcuts
  • etc.

Users might save different Workspaces for different usages i.e. composing, mastering, jamming, dj-ing, etc.

As an instrument’s sound can be¬†changed and adapted to¬†different music genres, I imagine¬†DAW should have the same flexibility. Workspaces can¬†help on that front for sure.

Detail Level slider for interface density control

How Detail Slider works.

How Detail Slider works.

Detail Level slider controls how many of the user interface elements you have on the screen. When the slider is on the left you’ll have only the basics and when it‚Äôs on the right you’ll have a very dense UI. Both are great for different users or usages.
 
Some need more granular control while others prefer a minimal number of elements, for different reasons. For example, if you’re performing live, you don’t want to hit the wrong button. But if you’re diving deep into the production, you want all the controls your DAW¬†can offer.¬†In terms of style, I’m gonna use a drums analogy.¬†Some drummers prefer a lot of cymbals, toms, percussive elements, two kick drums, etc. while others like their sets really tight and basic.

Browser and Detachable Windows

Browser

Small (collapsed) browser.

Small (collapsed) browser.

The CPU Usage History shows the percent of how much Ableton device or 3rd party plug-in uses of processor power. It shows the average usage from the time of its install. That info can help in determining the most efficient device or plug-in to use, considering the situation and context. For example, if CPU usage is high and user needs just a subtle effect. By consulting the CPU History the user can make a well-educated choice and choose a low CPU usage device.

Some users have argued that this feature might¬†influence the creative process so there’s an easy option to show or hide¬†its column. It’s done by right-clicking on the table heading, just like in the current version of Live.

Detachable Windows

An example of detaching and dragging Browser window.

An example of detaching and dragging Browser window.

Some prefer to use the default window arrangement but for some, this feature promises a workflow optimization. Users who don’t want to drag the windows around can rest assured that it won’t happen by accident because all windows are locked by default. For those who like customizing their workspace, an Unlock option in right-click menu is available in every window.

Different arrangements can be saved in Workspaces, as I already mentioned while discussing the Status Bar.

Session View

Mixer and Clips with all possible UI elements

Session View with Clips and Mixer.

Session View with Clips and Mixer.

Session View with Clips and Mixer.

Session View with Clips and Mixer.

There’s the¬†Detail Slider to dial in how much of interface elements one¬†prefer, and there’s an option to show/hide different windows. Also, I showcased here how groups inside groups could work. Blue dots and lines represent automation or modulation.

This is how users feel about this full-on Session View version with all the elements crammed up on one screen.

Clip types and states

Clip types and Clip states.

Clip types and Clip states.

This image is supposed to explain all the Clip types and states. Clips with multiple features will have an ellipsis icon which will on hover behave as shown in the image above (5). This is how interviewed users evaluated it:

Simplified Session View without much of  Clip UI elements

Around 40% thought that Session View above looked a bit cluttered, so I revisited it and created this stripped-down version with horizontal color-coding of Clips below.

Simplified Session View with Mixer.

Simplified Session View with Mixer.

Simplified Session View with Mixer.

Simplified Session View with Mixer.

I’m well aware that Ableton has always been about minimalism and simple effective solutions that work, and I respect that. I’m just exploring ideas for different features and trying not to constrain myself too much while keeping an eye on a big picture.

Device Rack

Device Racks.

Device Racks.

The idea here was to bring the presets closer to the device, to show the hidden features, and to make browsing more contextual. This consistent version enables easier changing of the
  • oversampling level
  • saturation quality
  • reverb¬†quality
  • delay mode
  • expanding and collapsing¬†the view
  • toggling¬†the display location
  • etc.

I believe it is much clearer and more efficient for the Device View Selector (14) to have text labels rather than small, hard to recognize, devices images.

Another small but worthy design detail for easier gain control is bigger gain meters between devices.

 


‚̧ԳŹ‚úČÔłŹ Subscribe to my newsletter

To stay up to date with my new case studies, freebies, and other cool stuff – join my email list! #nospam¬†ūüĎ®‚ÄćūüöÄ

 


Browser, History, and Expanded Mixer

Browser, History, and Expanded Mixer screen.

Browser, History, and Expanded Mixer screen.

The Expanded Mixer is another View. So, you can toggle between Session View, Arrangement View, and Expanded Mixer View using Tab button. Or perhaps, by pressing the Show/Hide Expanded Mixer Section button next to the Show/Hide Mixer Section button. Located within View Options section (9).

I’m aware that this is not the best solution ever because I’m kinda mixing up the Views and Sections. I strongly believe that it could be elegantly solved with slightly more time and resources.

Expanded Mixer and History

Expanded Mixer with Device Slots and I/O section

Expanded Mixer with Input (right-click) dropdown.

Expanded Mixer with Input (right-click) dropdown.

 

Expanded Mixer

Expanded Mixer

Instead of Clips, the Extended Mixer View has¬†Device Slots layered for each¬†track vertically, top to bottom. Every Device Slot has different device’s parameters assigned. They can be added or removed by right-clicking on a specific device parameter and selecting Assign to or Remove from the Device Slot.

Because Expanded Mixer is taking a full-screen height, I also added track colors at¬†the bottom of the channels for easier navigation. Stereo controls are pimped up with Panning, Balancing, and Stereo With (from Mono to Out of Phase). Additionally, It’s possible to choose between Panning and Balancing per channel.

I/O section is simplified to just three elements instead of four dropdowns and three buttons. Minimization is accomplished by having the first level visible and other sublevels shown on click.

History of undo steps with Snapshots

History of Undo steps with Snapshots.

History of Undo steps with Snapshots.

Visual representation of undo steps with a possibility to save snapshots, get back to them later, and to branch out from a project. Many of the interviewed users were thrilled with this feature but concerned that it’s not possible to develop.¬†So, I would like to reassure them by mentioning that very similar feature called History Panel exists in Adobe Photoshop from 1998’s¬†version 5.0.

Expanded Browser and Expanded Mixer

Expanded Browser and Expanded Mixer screen.

Expanded Browser and Expanded Mixer screen.

Expanded Browser

Sketches of browser exploration and competition analysis

Sketches of Pro Tools, Bitwig, Cubase, and Logic Pro browsers.

Sketches of Pro Tools, Bitwig, Cubase, and Logic Pro browsers.

Sketches of Studio One and Fruity Loops browsers, and sketches of my Ableton Live expanded browser redesign.

Sketches of Studio One and Fruity Loops browsers, and sketches of my Ableton Live expanded browser redesign.

I drew other DAW’s browsers, media bays, libraries, etc. to see what works and what doesn’t. By combining that and my own ideas with suggestions from interviewed users, I came up with this Expanded Browser.

Sample and Plug-ins search results within Expanded Browser

Sample search results

Sample search results

Plug-ins search results

Plug-ins search results

Expanded Browser should enable easier and more efficient organization of samples, presets, devices, and plug-ins. The Favorites section on the left side is¬†for the favorite¬†items¬†used frequently. The Recent section is a list of all recently used items of any type, tags, folders, plug-ins, samples, presets…

Sample/Plug-in Type column helps in distinguishing and sorting by the type of search result. Tempo, Key, and Scale are very helpful in searching for a sample or perfect loop.¬†For a useful rating system, I suppose¬†item rating should¬†be set by the user and not by the application based on the frequency of use. Besides rating and favorites, there’s tagging¬†and color-coding tools for the organization as well. I’ve already talked about¬†CPU history¬†earlier.

Sample Preview has¬†an on/off switch,¬†volume slider, loop, and options to wrap and transpose sample preview to the project’s tempo/key/scale. Project Key and Scale can¬†be set from the Signature header menu group (7, 8).

Wrap up

I’m very, very, happy how all of this turned out at the end, having in mind how little of¬†resources¬†I had. I’d never imagined I’d get this amount of support and feedback from the Ableton Live community. This is what they liked the most:

It was very clear from my first research that Modern look was something very important to Live’s users (ranked 5th on the wishlist). So, I asked¬†in the second survey how much they thought of my designs¬†as a ‘modern’ update:

That’s it! I see this as an idea, beginning, and inspiration. Not a destination but a¬†direction where Live might go in the future. I hope you’ve enjoyed the journey and liked this enough to consider me¬†as a potential new colleague! If you have, please don’t hesitate to contact me.

Best,
Nenad.

P.S. My Ableton Live redesign was featured on MusicRadar, sidebar.io, ¬†Ask.Audio, T-Mobile Electronic Beats,¬†CDM magazine, Block.fm (Japanese),¬†Gearnews (German),¬†Digilog (Chinese), MixMag (Croatian), and¬†uninvitedredesigns.com… and discussed on¬†Hacker News,¬†ADSR Sounds Facebook, MusicRadar Facebook,¬†Computer Music Facebook, Point Blank Music School Facebook,¬†Production Music Live Facebook,¬†Ableton Live Facebook, Ableton subreddit, edmproduction subreddit,¬†Audiosex thread, CDM Facebook, Ask.Audio Facebook,¬†T-Mobile Electronic Beats Facebook, Gearnews Facebook and Random Tweets about final redesigns.

Join my email listContact me

 

EDIT: Unfortunately, at the end, I didn’t get the job nor an interview where I could have commented on or explained my design decisions.¬†However, after I got the email saying that they don’t want to hire me, I did get a chance to talk with their head of design, Ed Macovaz. Ed and I discussed my unsolicited redesign and he gave me his and team’s feedback as well as some useful insights on how to improve as a designer.

Let me finish this by saying: Sometimes you win, sometimes you learn.