Skip to content
Try free

Steppers and wizards (Mobile)

Mobile packFlows

Mobile step progress headers, question screens, flow footers, checklists, review steps, order tracking and ID checks.

components
7
variants
29
recreations
3
themes
5

Also for desktop: Steppers and wizards

What’s inside

Seven mobile multi-step patterns: progress headers in four styles, one question per screen, flow footers for every step position, checklists and task lists, a final review step, order status tracking and an identity check flow from document scan to verified. Progress fills match the values shown. Every page is documented, with a live grid in light and dark and a phone screen in context.

  • Segments, bar, dots and count progress header styles
  • Recreations of Revolut, Uber Eats and Duolingo flows
  • Step progress header, every variant

    Step progress header

    Free sample

    4 variants

    • Segments
    • Bar
    • Dots
    • Count
  • Question screen, every variant

    Question screen

    4 variants

    • Single choice
    • Multiple choice
    • Text answer
    • Not answered
  • Flow footer, every variant

    Flow footer

    6 variants

    • First step
    • Middle step
    • Not ready
    • Last step
    • Saving
    • Save for later
  • Step checklist, every variant

    Step checklist

    3 variants

    • Stepper
    • Task list
    • All done
  • Review step, every variant

    Review step

    3 variants

    • Ready
    • Missing answer
    • Submitting
  • Order status tracker, every variant

    Order status tracker

    4 variants

    • Placed
    • Preparing
    • On the way
    • Delivered
  • Identity check, every variant

    Identity check

    5 variants

    • Choose document
    • Scan document
    • Take selfie
    • Checking
    • Verified
Figma file
SuperDuper Pack: Steppers and wizards (Mobile)
Themes
Light, Dark, Light high contrast, Dark high contrast and Wireframe
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 1 screen pattern
Progress & tracking

How Revolut, Uber Eats and Duolingo do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Bank identity check, every variant

    Bank identity check

    Recreated from Revolut

  • Food order tracking, every variant

    Food order tracking

    Recreated from Uber Eats

  • Language lesson, every variant

    Language lesson

    Recreated from Duolingo

Not affiliated with, endorsed or sponsored by Revolut, Uber Eats and Duolingo. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Step progress header, every variant

See the step progress header full size, free

A step progress header in four styles: segments, bar, dots and a written count. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More flows packs

See all flows

  • Auth and sign-in

    Mobile15 components83 variants4 recreations

    Mobile sign-in screens and parts, from social buttons and passkeys to codes, two-factor and locked accounts.

    $9, or included with Pro

  • Onboarding and walkthroughs

    Mobile20 components128 variants4 recreations

    Mobile onboarding screens from splash to celebration, with questions, goals, permissions and tutorials.

    $9, or included with Pro

  • Paywalls and pricing

    Mobile14 components80 variants6 recreations

    Mobile paywalls, plan cards, trial timelines, upsell sheets and offers, built around honest pricing.

    $9, or included with Pro

Questions about the steppers and wizards pack

  • One Figma file: SuperDuper Pack: Steppers and wizards (Mobile). It has 7 components with 29 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.