Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
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:
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
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.
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.
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.
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
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
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 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
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
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
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
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
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.
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.
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
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.
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
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
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.
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
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 Music, sidebar.io and uninvitedredesigns.com. You can also check the comments on MusicRadar Facebook, ADSR Sounds Facebook, Ableton Live Facebook Group, Ableton subreddit, Hacker News, edmproduction subreddit, Audiosex thread and Random Tweets about final redesigns.
AI-driven updates, curated by humans and hand-edited for the Prototypr community