Redesigning Ableton Live

The story of my try to get hired

Aleksandr Sood'in
6 min readJul 3, 2015

Hello, my name is Aleksandr, I’m 27 old UI/UX designer originally from Saint Petersburg, Russia and still live here, also I like to produce electronic music and this is the story of my try, success isn’t yet confirmed, to get hired by Ableton, a company making software and hardware for music creation and performance.

Discovery

‘Music always took an important role in my live’ — definitely sounds pretty like a trivial rubbish, but whatever. After school I used to play bass guitar in a band, we did some funky stuff, also I played a little bit on trumpet in my bedroom, still feeling guilty in front of neighbours, but my biggest success I got performing 8bit music, using guitar effects and Nintendo GameBoy with LSDJ software as synth/sequencer, also studied as sound engineer/producer, but gave up, switching to design as to area more required on market. Last summer, after 7 years of silence, I returned to music-making, this time with computer, being involved in all this techno-renaissance. That’s how I conceived myself to use Ableton Live as a new main tool.

Once a day, while checking Ableton’s website for news, without any expectations, like a dozens of times before, I get to jobs page and became over-excited to find, that they need UI designer and that’s who I am.

As you may guess, that is my dream to fuse my two passions together.

Research

After I had decided to do my best to be hired by Ableton, I thought, that it’d be better to appear not with just resume and portfolio, but with something in hands and I got idea to show my vision of Live’s redesign, kinda as a test-excersise, to do what I’d do if I’d already work at Ableton.

First of all, I messaged to all of my friends, who use Live, asking them something like ‘What problems did you face with, while starting with Live?’ and ‘What do you think could be improved?’. Mostly answers were a sort of ‘Oh, I don’t know, I addicted and now it’s ok’, also I was told ‘It would be cool if they’d include that max device in stock Live’s pack’, but I think that isn’t possible, since selling of max devices is the only way to monetize Live Suite and Push owners. One of my friends, Oleg, advised me to check Feature Request section at Ableton’s forum. So I went there and checked all topics for last month.

Here’re some UI/UX issues and offers from forum, including my own, which I found valuable for some reason:

  • Case of playback with no sound and orange ‘Back to Arrangement’ button at Arrangement view after clips recording
  • Ability to see MIDI notes of other tracks while editing
  • Sync for multiple laptops on stage
  • Amplitude modulation using an oscillator as a modulator
  • Vertical zoom of automation
  • Ability to hide clips in Session view to see only mixer
  • Annotations for any sample/clip/preset/folders
  • Too many lines and borders make a jail feeling
  • Increase font sizes
  • Warping clips inside Simpler
  • Ability to create customizable toolbar
  • When I press ‘Record in Clip’ button of not selected as recordable track, nothing shows the solution

When forum overview was done, I watched reviews of other competitor’s modern DAWs that make a sense in industry: Bitwig (found by co-founder of Ableton with dozen of ex-Ableton developers), Logic and ProTools, also I’ve used Cubase, while studing in university.

Creation

Last December I switched to Sketch, instead of Photoshop, it’s really great app convinient for interface design, it’s like Live after Cubase for midi-controller guys, and that was my tool of choise to implement this project.

Before you ask ‘Where is your design?’ I should say few quite important things. Yes, I’m sure, that Live team already did something better for future release of Live 10 (article is written when actual version is 9.2). As you’ll see on result image, it isn’t very much different from exsisting interface, it’s just first itteration, but I’m definitely on right way. Working under this Session view screen, I kept in mind not to change something dramatically, to preserve color palette, and to keep all block’s sizes. All these precautions’re caused by the fact, you should be very reasonable, while changing something in a ‘grown up’ software, with so large audience of users, because even if you’re sure, that you’re going to change something for better experience, users may not want it, because this ‘wrong way’ already became a habit. A very few companies managed to radically change something without appearance of angry users. Remember Windows 8 rush or yourself after your work-related webpage turned to ‘Brand New’ look & feel?

This is just the first itteration, since I don’t want to wait until Ableton will close this job opening.

Uptodate version in actual pixels size will be always at InVision app

Details

Fist general issue of my improvements list — get rid of graphical noise. There’re a lot of borders in borders, with different radius angles, paddings, margins and width. I left only background and foreground colors for pannels.

The second issue is — things on the screen shouldn’t always look & act like the same things in real world. For instance: faders and knobs on real mixing console have the shape, wich they have, due to technical limitations and for good interaction between knobs and human’s fingers. But things on the screen should have the shape for good interaction between that controls and your mouse, trackpad or midi-controller.

Toolbar & Library

  • Enlarged font sizes at toolbar
  • Expand/collapse library control is moved on toolbar
  • Search field now shows, that it’ll search in selected place/category, but not in the whole Library
New
Current

Mixer & Clips

  • Pick volume value moved from above the pan-knob (they’ve nothing in common) to the volume fader. Now moving down the fader, you’ll instantly see the moment when you’ll get down to required zero db
  • Value of panorama is under the knob
  • New Sent tracks control with value shown
  • Session/Arrangement switch is moved on toolbar
  • Show/hide mixer sections were eating a lot of space and making this huge empty gray bar, I moved them to Master track bar
  • Cells at Return tracks’re removed, anyway you can’t insert clip there, and different other borders’re removed
New
Current

Later I’m going to redraw track’s devices also, now they’re left as is. In perfect world I’d also do interactive prototype with FramerJS, quite good CoffeeScript-based tool for complex animations.

Outro

Feel free to message me with any questions and opinions. Don’t hesitate to correct mistakes in my English and so on :-)

Facebook | SoundCloud | Behance

Hope my efforts’ll make sence for Ableton to hire me! Thanks for reading!

For ages people are creating great things, being inspired by music of great artists and I’ll be happy to join the team and to know, that I’ll help in some way those artists to inspire people for creation of those great things, like creation of Ableton.

--

--

Aleksandr Sood'in

Product & sound designer, trying to get hired by Ableton