Case Study · Q1 2025

Threshold™: rethinking the act of commitment.

A fourteen-week inquiry into the rectangular interface element traditionally known as "the button," and what happens when we treat the moment of intention with the gravity it deserves.

Role
Principal Interaction Designer, Lead Researcher
Team
1 PD, 2 IxD, 1 motion, 1 brand strategist, 1 ethnographer
Duration
14 weeks (research-led)
Disciplines
Interaction · Motion · Semiotics · Haptic Theory
Stack
HTML, CSS, a tasteful sprinkle of JavaScript
Recognition
Submitted — Awwwards, FWA, CSS Design Awards, SiteInspire
§01 · The Problem

We had stopped seeing the button.

Buttons are everywhere. That is precisely the problem. Familiarity, as the saying goes, breeds contempt — and in the case of the affirmative interaction surface, it has bred something arguably worse: indifference. Users tap, they swipe, they commit to consequential decisions through interfaces they do not consciously perceive. Somewhere along the way, we stopped asking what a button could be, and merely asked what shape it should be this season.

We set out to recover the button as an object of design intention. Not as a control, but as a threshold — a charged moment of crossing-over between thought and action. This case study documents that journey.

§02 · Discovery

Listening before drawing.

Our first four weeks were spent not in Figma but in conversation. We conducted eleven generative interviews, sitting with users as they described — often with surprising emotion — what it feels like to "press" something. We catalogued the recurring micro-frustrations. We held a two-day offsite in Lisbon.

"When I click 'submit,' I'm not really sure I've submitted. I'm sure of nothing." P-23, product manager, age 34, Berlin

This quote, more than any other artifact from the discovery phase, became our north star. It hangs, framed, above the studio sink.

§03 · Foundations

A palette earned, not chosen.

Color, in our framework, is not decoration. It is consequence. We arrived at our final palette through a process of subtractive decision-making — beginning with seventeen candidate hues and reducing through stakeholder workshops, until only the inevitable remained. The accent red ("Threshold™ Vermilion") was sampled from a 1962 Penguin paperback found in the studio kitchen. We feel this is significant.

#14110D
#C8492C
#1F4D3F
#F4F1EA
Fig. 12 — Final palette, with provenance notes available on request.
§04 · Motion

Toward a grammar of small movements.

How fast should a button respond to the cursor? The literature is — let us be honest — silent on the matter. We developed our own framework, the Threshold™ Motion Heuristic, which posits that any state change must occur in a window of 180–240ms, with an easing curve drawn from the deceleration profile of a falling oak leaf observed in our courtyard last autumn.

Hover-in
200ms
Hover-out
240ms
Active state
80ms
Settle
cubic-bezier
§05 · Accessibility

Inclusion as a first principle, not a final pass.

WCAG AAA compliance was a floor, not a ceiling. Our contrast ratio of 14.8:1 exceeds the 7:1 standard by a margin we believe constitutes a quiet act of generosity. Focus rings were redrawn from scratch, three times. The final ring honors both the affordance requirements of low-vision users and the visual restraint demanded by our brand language.

§06 · Synthesis

The artifact.

What follows is the result of fourteen weeks, eleven interviews, seventeen hues reduced through critique, and one falling oak leaf. We present it without further commentary, as we believe it speaks — quietly, but with great certainty — for itself.

"Continue" — the verb chosen after a three-week copy sprint.

It is, in the end, just a button.
And that, we contend, is the entire point.

§07 · Reflections

What we learned.

Threshold™ taught us that to do small work well is, paradoxically, to do large work. We are grateful to our client (an internal sandbox project), our research participants (whom we cannot name), and the falling oak leaf, which has since composted.

2,847 312 view 48,201