A Sprint Through Three Referral Banner Concepts
The design team at Trivet, a cooking and recipe app, has a conversion problem. A referral program banner is underperforming, but the team can't agree on whether it's too subtle or too disruptive. The question is how to increase attention without derailing the core experience. To answer it, they prepare three distinct UX directions ranging from a modal interruption to a full-screen takeover, each with a different visual strategy.
Direction One: A Modal With Depth
The first concept uses a modal built from Trivet's existing design system, giving the team room for a more immersive interaction. Because users are being asked to pause, the visuals need to justify that interruption. Working from design system recipe row components, the designer anchors the modal in photography. Since the copy promises "unlocking" exclusive recipes, the images are progressively blurred—tantalizingly visible but just out of reach. A glass effect adds a frosted surface, while refraction creates depth and softens edges without overwhelming the interface.
Direction Two: Illustration in the Feed
The second approach keeps the banner in the feed, avoiding disruption but requiring a lighter visual footprint. Photography feels too heavy, so the designer starts with a hand-drawn sketch. Using Remove background and Vectorize, the raster sketch becomes an editable vector asset. This opens up refinement options: colors are swapped to match brand variables via the fill panel, the Cut tool sharpens edges without breaking paths, and bounding boxes rotate anchor points for polish—all while preserving the sketch's hand-drawn character.
Direction Three: Full-Screen Photography
For maxiumum attention, the team explores a full-screen overlay. The problem: the selected food photography is strong, but its proportions don't fit and a spoon in the frame distracts from the hero subject. Instead of hunting for new images, the designer adapts this one. The Erase object tool removes the spoon, and Expand image extends the background contextually, preserving the original proportions and image integrity while conforming to the layout.
Static Frames Are Not Enough
With three viable but distinct concepts on the table, the team hits a familiar wall. Static frames tell an incomplete story, leaving room for imagination and feedback that skews toward superficial visual preferences. The friction that actually matters—timing, hierarchy, motion—only appears in a living product. Before going to stakeholders, the team decides to make the options feel real.
Evaluating Prototypes With Shared Context
Because Trivet already runs on Figma Make, the team drops the new designs into an existing shared template with built-in styles and guidelines. Within minutes, each concept is an interactive prototype. This added fidelity shifts the conversation from hypothetical debate to reacting to something that behaves like a product, making the evaluation of timing and conversion flow sharper.
For crit sessions, the team avoids scattering individual links. Instead, they embed the Figma Make prototypes directly into FigJam, where stakeholders can leave comments, stickies, and live reactions. With prototypes that feel close to production, critique responses sharpen. Cursors move, comments stack up, and the conversation turns to implementation questions. Direction three—the full-screen overlay—quickly gains momentum among the PMs, designers, and engineers in the session.
From Approved Concept to Shipped Code
The route from approved direction to production is intentionally flexible. The PM or engineer can iterate on the overlay in Figma Make, while the designer polishes the same file in Figma Design. When ready, a developer opens Dev Mode to start coding, or the designer can carry the context directly into the build using Figma MCP.
This workflow shortens the distance between problem and production: AI tools accelerate asset refinement within the design surface, and interactive prototypes bring crit and stakeholder alignment earlier in the process, reducing the gaps where polish and clarity are lost.
