Modus Media Player

Design a music player that feels completely native to iOS while serving a custom hardware ecosystem — the Modus Box — that Apple's design language never anticipated. A streaming companion app of this kind carries unusual interface load: alongside the familiar now-playing, library, and playlist surfaces, it needs station control for the hardware side, and it has to keep heavyweight states — queue management, context menus, filtered library views — one comfortable gesture away without burying the listener in chrome.

The deliverable was a complete design system, not a set of pretty screens: 45 screens covering onboarding, now-playing, library, playlists, queue management, and station control, prototyped interactively in Figma so every transition and interaction state could be felt, argued over, and signed off before a line of Swift existed.

Music apps live a double life. In the now-playing moment the interface should disappear into the content — so those screens run a dark gradient palette that lets artwork and playback state own the room. Browsing is the opposite job: scanning a library, building playlists, and managing the queue reward clarity, so those surfaces flip to a clean white treatment with dense, legible hierarchy. Two modes, one component language underneath — the same controls, type scale, and spacing grid carry across both, which is what keeps the flip feeling like one product changing register rather than two apps stitched together.

The hard interaction problems were the in-between states: a mini-player that persists across every browse screen without stealing it, context menus deep enough for power users but invisible until summoned, and queue expansion that reorders live without losing the listener's place. Each of those was prototyped with its real transitions in Figma — because on states like these, a static mockup is a promise the shipped app can't verify.

Yes — the design system was implemented by the development side and shipped as a production iOS app. That matters more than any dribbble-grade screenshot: a design system's real test is whether engineers can build from it without a designer standing over the build, and whether the shipped product still looks like the prototype afterwards. The 45-screen Figma system survived contact with implementation, which is the strongest review a design deliverable gets.

The interactive prototype remains linked from this page, so you can walk the same flows that were handed to development and compare them against what shipped — an unusually honest audit trail for design work, and the reason this engagement anchors the design side of my mobile practice.