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

Role: UI/UX Designer
Scope: Metronome and takes
Platform: iOS · 375pt
Client: Tully

tullyapp.com

01 · Five views

The final states. And how we got there.

Two production screens, drawn through their states, with both metronome explorations kept visible.

Running
Pause sits where play was. The green arc fills toward MAX. — Running Pause sits where play was. The green arc fills toward MAX.

Stopped
The play button goes solid green. Everything else holds still. — 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. — 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 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. — Exploration 02 Controls fused into the dial as lobes. Sound styles read Click, Beat, Beep, Tone.

02 · The problem

An instrument is already in your hands.

The phone sits on a stand. You have one free hand and little attention to spare. That fact set the hierarchy and every control decision.

01

One gesture to tempo

Drag the dial for a rough number, tap plus or minus to land it exactly. Both are one control.

02

The number comes first

A 48px readout, centred in the dial, remains legible at a music stand’s distance.

03

Green means running

One accent colour is reserved for state. If it glows, it is playing.

03 · The system

Four colours. One rule about light.

Ground#201D1A

Surface#3F4150

Live#15D290

Icon#B8C8CC

Sarabun typography: 48/bold tempo, 18/bold title, 18/regular measure label, 14/regular sound styles. One icon component provides back, more, plus and minus. The BPM component uses two text props so every value fits.

04 · Interaction rules

Muscle memory beats surprise.

01

Light equals state

Green is never decoration; it identifies what is active.

02

Controls stay put

Play and pause occupy the same pixel.

03

Sheets, not new screens

Takes rise over the session so the user does not lose their place.

05 · Outcome

Drawn to every state. Ready to build.

Every screen was specified against a 375pt frame with real values. Engineering did not have to guess at radii or gaps. The difference between running and stopped is the only thing that moves.

01

Both halves of the control

Running and stopped were specified as a pair.

02

Explorations kept visible

Rejected directions explain why the final control works.

03

One accent, spent carefully

Green remains reserved for live state throughout the section.

The result

Two screens, drawn to every state, handed over ready to build. The difference between running and stopped is the only thing that moves.

Tully is the client. These views were rendered from the production design components on the original portfolio. This case study covers only the metronome and takes section, the part of the app S2DO worked on.