Ableton Move UI: Icons and Loop Overview

The project

Up until the spring of 2024, many elements of Move's digital interface were occupied by placeholders. It was time to create a family of icons for our audio effects, design an icon for Ableton's new synth "Drift," and find a way to properly visualize users' interactions with the bars and loop settings. Move's screen is a 128x64 pixel compact OLED display. We had 13x13px of monochromatic safe space to design the icons.

Rapid testing and prototyping

Given the tight timeline, we implemented a rapid prototyping approach. I built a test environment using Arduino, a breadboard, and an OLED display to evaluate icon designs in real-time as they moved from sketches in Figma to pixels.

We developed a two-phase testing strategy. The first phase utilized a 1:1 digital prototype on a mobile device, precisely aligned with a physical cutout of the Move interface. This allowed for rapid iterations and initial feedback. The second phase combined in-person hallway testing with colleagues and friends using a functional prototype, supplemented by anonymous voting and remote user testing sessions.

The icons needed to be versatile across Ableton's product ecosystem, functioning effectively on various screen sizes and contexts - from Move's compact OLED display to larger interfaces like the iOS app Note.

Unique Branding

Our collaboration with the brand design and marketing teams revealed an unexpected strength: the pixel aesthetic, when extracted from its functional context, became a powerful branding element. The distinctive pixelated icons and typography emerged as cornerstone elements of Move's art direction, driving both the teaser and launch campaigns.