Design practice

Campaign-to-Product Redesign

Take a marketing landing page and redesign it as a product feature with states, flows, and edge cases

Start the exercise

01 / Prepare

What you’ll
work on.

Take a marketing landing page (one you've designed or any public page) and redesign the core value proposition as an in-product feature. This exercise forces the mindset shift from campaign thinking to product thinking: you'll design for multiple states, consider edge cases, and think about the feature as part of a larger system.

Before you begin

  • Figma proficiency (components, auto layout, prototyping)
  • Understanding of the campaign-to-product mindset shift
  • Familiarity with user flows, interface states, and product design basics

02 / Practice

The work,
step by step.

Work through these 4 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Analyze the Landing Page

    45 min

    1. Choose a marketing page — A product landing page, pricing page, or feature announcement

    2. Identify the core promise — What is this page selling? What user need does it address?

    3. Map the funnel — What happens after someone clicks the CTA? Where does the marketing experience end and the product experience begin?

  2. Define the Product Feature

    60 min

    1. Reframe the promise as a user task — "Sign up for premium" becomes "Upgrade your account and understand what changes"

    2. Map the user flow — Entry point → steps → completion → confirmation

    3. Identify states for each screen — Default (happy path), Loading, Empty (no data yet), Error (something went wrong), Edge cases (long text, missing data, permissions)

  3. Design

    120–180 min

    1. Wireframe the flow — Low-fidelity first, focusing on information hierarchy and interaction

    2. Build high-fidelity screens in Figma — Using components, not one-off designs

    3. Design all states — Not just the happy path

    4. Consider responsiveness — At minimum: mobile and desktop

  4. Document

    60 min

    1. Write a brief explaining the shift — What changed between the marketing version and the product version? Why?

    2. Annotate key decisions — Why this flow? Why these states? What trade-offs?

    3. Spec one component — Full spec: spacing, color tokens, states, responsive behavior

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Original landing page screenshot with analysis
  • User flow diagram (entry → steps → completion)
  • State inventory (default, loading, empty, error for each screen)
  • Figma prototype (5–8 screens, mobile + desktop)
  • Brief explaining the campaign → product shift
  • One component spec

How to assess your work

Mindset shift
Clear evidence of thinking beyond the happy path
State coverage
All states designed, not just the default
Systematic
Uses components and tokens, not bespoke one-off designs
Flow thinking
User flow makes sense as a product experience, not a funnel
Communication
Brief clearly articulates what changed and why

Choose your
next exercise.

Browse all exercises