HomeNewsAbleton Live Redesign

Ableton Live Redesign

medium bookmark / Raindrop.io |

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 tho 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).

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.

User’s Wishlist From The First QuestionnaireUser’s Wishlist From The First Questionnaire – Highcharts CloudValuesUser’s Wishlist From The First QuestionnaireWhat users wanted to see fixed and/or improvedBrowserMidi EditorDetachable WindowsDark ThemeModern LookMixerGrouping GroupsPerformanceAutomationI/O RoutingPitch CorrectionTrack CompingNative LFOScroll ZoomMeteringSession ViewTutorials & HelpMultiple projectsBigger UI ElementsGrooveMidi MappingDrum RacksFreezingRandomize ButtonVST Side-ChainingMacro KnobsTrack Names RTLArpeggiatorSavable WorkspaceUndo historyVST RepresentationGhost ClipsAccessibilityVertical Grouping124102040100Highcharts

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.

How would you assess my redesign?How would you assess my redesign? – Highcharts CloudNumber of ParticipantsHow would you assess my redesign?I’m well aware that it is pretty much impossible to rate the interface without actually using it but I’m just interested inhow much do you believe that the ideas I presented in this survey are usable? I’m well aware that it is pretty much impossible to rate the interface without actually using it but I’m just interested in how much do you believe that the ideas I presented in this survey are usable?383831313636202055220000000010987654321010203040Highcharts

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:

Does this header grouping works for you?Does this header grouping works for you? – Highcharts CloudDoes this header grouping works for you?YeahNoooOtherBlankHighcharts

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:

Does Project Tabs feature look helpful to you?Does Project Tabs feature look helpful to you? – Highcharts CloudDoes Project Tabs feature look helpful to you?Yes!NoOtherBlankHighcharts

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.

Does Workspace feature sound helpful to you?Does Workspace feature sound helpful to you? – Highcharts CloudDoes Workspace feature sound helpful to you?AbsolutelyNoOtherBlankHighcharts

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.

Does Level of Detail feature make sense to you?Does Level of Detail feature make sense to you? – Highcharts CloudDoes Level of Detail feature make sense to you?Yes.No.OtherBlankHighcharts

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.

Does CPU History look like a helpful feature to you?Does CPU History look like a helpful feature to you? – Highcharts CloudDoes CPU History look like a helpful feature to you?Yes!NegativeOtherBlankHighcharts

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 .

Could a window arrangement affect your workflow?Could a window arrangement affect your workflow? – Highcharts CloudCould a window arrangement affect your workflow?Yes!NoOtherBlankHighcharts

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.

Does this look cluttered to you?Does this look cluttered to you? – Highcharts CloudDoes this look cluttered to you?YessirNoOtherBlankHighcharts

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:

Do you think that these redesigned Clips are an improvement?Do you think that these redesigned Clips are an improvement? – Highcharts CloudDo you think that these redesigned Clips are an improvement?YupNoOtherBlankHighcharts

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.

Do you think the Device header redesign is a smart move?Do you think the Device header redesign is a smart move? – Highcharts CloudDo you think the Device header redesign is a smart move?YeahNahOtherBlankHighcharts

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.

Does anything confuse you about device slots in expanded mixer view?Does anything confuse you about device slots in expanded mixer view? – Highcharts CloudDoes anything confuse you about device slots in expanded mixer view?Yes.NoOtherBlankHighcharts

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.

Does this color coding of the Inputs / Outputs look helpful to you?Does this color coding of the Inputs / Outputs look helpful to you? – Highcharts CloudDoes this color coding of the Inputs / Outputs look helpful to you?YupNopeOtherBlankHighcharts

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.

Does History of undo steps look useful to you?Does History of undo steps look useful to you? – Highcharts CloudDoes History of undo steps look useful to you?Yes!NopeOtherBlankHighcharts

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).

Does this expanded browser look like an improvement to you?Does this expanded browser look like an improvement to you? – Highcharts CloudDoes this expanded browser look like an improvement to you?YessirNopeOtherBlankHighcharts

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:

Which redesign part you like the most?Which redesign part you like the most? – Highcharts CloudValuesWhich redesign part you like the most?88887171606053535353515151514747444440402424232377MixerBrowserUndo HistoryHeaderProject TabsClipsDevice RacksGrouping GroupsDetachable WindowsDevice SlotsBlankFooterOther0102030405060708090100Highcharts

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:

Is all of this ‘modern’ looking to you?Is all of this ‘modern’ looking to you? – Highcharts CloudIs all of this ‘modern’ looking to you?Yes!NoOtherBlankHighcharts

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 – Computer Musicsidebar.io and uninvitedredesigns.com. You can also check the comments on MusicRadar FacebookADSR Sounds FacebookAbleton Live Facebook Group, Ableton subredditHacker News, edmproduction subredditAudiosex thread and Random Tweets about final redesigns.

Download my resumeContact me

Featured articles on Prototypr: