Tully · Metronome and takes UX for a music creation app | S2DO Media
MOBILE AUDIO · iOS

Set the tempo
without looking.

Tully is a music creation app. We designed two of its screens: the metronome you reach for mid-take, and the takes list that keeps every recording where you left it.

ROLEUI/UX Designer
SCOPEMetronome and takes
PLATFORMiOS, 375pt
FIVE SCREENS FROM THE PRODUCTION FILE · DRAG SIDEWAYS
Running
Pause sits where play was. The green arc fills toward MAX.
Stopped
The play button goes solid green. Everything else holds still.
Takes sheet
Every recording in one list, specified as a component the app reuses.
Exploration 01
Beats-per-measure stepper, beat dots, square plus and minus tabs.
Exploration 02
Controls fused into the dial as lobes. Sound styles read Click, Beat, Beep, Tone.
LIBRARY
One icon component, four variants. Back, more, plus, minus.
The tempo readout, driven by two text props so any value fits.
01 · THE PROBLEM

A metronome gets used with an instrument already in your hands.

That single fact set every decision. You are holding a guitar, the phone is on a stand, and you have one free hand and no attention to spare. Anything requiring two taps and a read is a failure.

One gesture to the right tempo

Drag the dial for a rough number, tap plus or minus to land it exactly. Both live in the same control.

The number is the biggest thing on screen

48px, centred in the dial, legible from across a room at a music stand's distance.

Green means running

One accent colour in the whole interface, spent entirely on state. If it glows, it is playing.

02 · THE SYSTEM

Four colours, one typeface, and a rule about where light goes.

PALETTE
Ground
#201D1A
Surface
#3F4150
Live
#15D290
Icon
#B8C8CC
TYPE · SARABUN
16048 / bold
Metronome18 / bold
Beats per measure18 / regular
Sound Styles14 / regular
RULES
Light equals state

Green is never decoration. It marks what is active and nothing else.

Controls stay put

Play and pause occupy the same pixel. Muscle memory beats animation.

Sheets, not screens

Takes rise over the session so you never lose your place in it.

03 · WHAT CAME OF IT

Two screens, drawn to every state, handed over ready to build.

The dial went through two full explorations before it settled. Both are in the rail above, kept deliberately, because the reason the final one works is visible only next to the ones that did not.

Everything was specified against a 375pt frame with real values, so engineering never had to guess at a radius or a gap.

Both halves of the control

Running and stopped drawn as a pair, so the difference between them is the only thing that moves.

Explorations kept visible

Rejected directions stayed in the file so the team could see what had been tried.

One accent, spent carefully

A single green across the whole section, reserved entirely for live state.

Tully is the client. Product names and trademarks belong to their owner. Screens above are rendered from the production design file and cover the metronome and takes section only, which is the part of the app we worked on.

Got an interface people use with their hands full?
Let's make a journey.

Start a conversation All design work