Lock-screen Widgets

Lock-screen streak widgets · 2022

When iOS 16 introduced lock-screen widgets, Peloton's weekly streak (a signature engagement mechanic) was a natural fit. I co-designed and shipped the implementation: a glanceable seven-day strip you check without unlocking your phone, with localized streak tracking that handled the international edge cases properly (week-start day, locale-specific abbreviations, pluralization rules).

The icon design went through several states: empty, partial, complete, with a numeric overlay for streak length. The visual language had to read at lock-screen scale (roughly 30pt tall) while still feeling like Peloton.

Working with design

I was integral to the design of these widgets, not just the implementation. The visual language, the icon states, the layout at small sizes, and the way the seven-day strip reads at a glance were all decisions I had a hand in shaping with the design team.

The collaboration ran through Figma and Peloton's internal design channels. I paired closely with designers on everything from the ambiguity of an empty state (is this a zero or an unknown?) to the readable scale of the day-of-week letters on a 2x2 tile. When engineering constraints nudged a design, I brought options back with working implementations attached so the conversation stayed grounded in what was actually possible. When a design detail required a non-obvious build, I wrote it up and walked the team through it so everyone could sign off with full context.

Getting the widgets across the finish line was as much a coordination problem as a technical one: aligning marketing, product, and design on the streak's visual identity, shepherding review cycles, and making sure the shipped artifact matched the spec pixel-for-pixel. The result landed on the home screens of millions of Members and became a daily anchor for the streak habit.