Case study: redesigning SMASH from scratch

SMASH is a short-video app for padel players I'm building solo. This week I took the entire UI through a full visual overhaul, and wanted to share the process.

IDEATION IN FIGMA Before touching a line of code, I pulled references from apps I liked the structure of — dark, editorial UI kits with strong typography and bold full-bleed content blocks. I sketched the new feed, create flow and bottom nav as Figma frames first, testing layout and hierarchy before committing.

FINDING THE IDENTITY The references were dark-mode and generic-feeling. I kept the structure but flipped the palette: a white, editorial base with near-black type, and a single lime accent color used sparingly — on the like button, a verified badge, key CTAs. Restraint was the whole point: most buttons went from a heavy outlined look back to solid black or soft neutral fills, with lime reserved for moments that matter.

FROM FRAME TO FLUTTER Each Figma frame became a real screen: a fullscreen video composer with an overlaid single-line caption, a Pinterest-style feed of autoplay video cards instead of a TikTok-style swipe, card-based squads and activity screens replacing heavy table rows, and a floating glass-effect bottom nav with a tap animation on the active icon.

ITERATING WITH REAL FEEDBACK Most of the polish came from testing on real devices — catching alignment issues, missing depth, color contrast that wasn't reading well — and iterating screen by screen until it felt intentional rather than templated.

The app is now submitted to Apple for review. Happy to walk through the full before/after if you're curious about the process.

SOOOOOO PROUD

We just launched our first template on the Marketplace, and I think it's pretty awesome. 🙂 @Framer

One of the best designs I’ve seen today. Really solid work 👏 keep pushing.