screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile subscription management flow examples

Search the library

SubPilot: Cancel Subscriptions: Managing Subscriptions

Open recorded flow

  1. Step 1 · 3:43

    SubPilot: Cancel Subscriptions: Top blue header with summary, middle dark section with tabbed lists, bottom navigation bar.See the flow
    SubPilot: Cancel Subscriptions

    Top blue header with summary, middle dark section with tabbed lists, bottom navigation bar.

  2. Step 2 · 3:50

    SubPilot: Cancel Subscriptions: Top header with subscription info, followed by an alert banner, a details card, a transaction history link, and a bottom action bar.See the flow
    SubPilot: Cancel Subscriptions

    Top header with subscription info, followed by an alert banner, a details card, a transaction history link, and a bottom action bar.

  3. Step 3 · 3:54

    SubPilot: Cancel Subscriptions: Top back button, central card with logo, title, description, and primary button, followed by an 'Or' divider and a secondary manual instruction card.See the flow
    SubPilot: Cancel Subscriptions

    Top back button, central card with logo, title, description, and primary button, followed by an 'Or' divider and a secondary manual instruction card.

  4. Step 4 · 3:56

    SubPilot: Cancel Subscriptions: Top navigation bar with back button, followed by a large title, and a numbered instructional list with nested bullet points.See the flow
    SubPilot: Cancel Subscriptions

    Top navigation bar with back button, followed by a large title, and a numbered instructional list with nested bullet points.

  5. Step 5 · 4:00

    SubPilot: Cancel Subscriptions: Top back button, central card with Netflix logo and prompt, 'Or' separator, bottom privacy disclosure card with final CTA.See the flow
    SubPilot: Cancel Subscriptions

    Top back button, central card with Netflix logo and prompt, 'Or' separator, bottom privacy disclosure card with final CTA.

  6. Step 6 · 4:02

    SubPilot: Cancel Subscriptions: Centered text block at the top, followed by a large empty space, with a single link at the bottom.See the flow
    SubPilot: Cancel Subscriptions

    Centered text block at the top, followed by a large empty space, with a single link at the bottom.

  7. Step 7 · 4:07

    SubPilot: Cancel Subscriptions: Top header with subscription info, followed by an alert banner, a details card, a transaction history block, and a bottom action bar.See the flow
    SubPilot: Cancel Subscriptions

    Top header with subscription info, followed by an alert banner, a details card, a transaction history block, and a bottom action bar.

  8. Step 8 · 4:09

    SubPilot: Cancel Subscriptions: Top navigation bar, header with subscription name and price, status banner, details card, and a centered modal overlay at the bottom.See the flow
    SubPilot: Cancel Subscriptions

    Top navigation bar, header with subscription name and price, status banner, details card, and a centered modal overlay at the bottom.

  9. Step 9 · 4:16

    SubPilot: Cancel Subscriptions: Header text, search bar, scrollable list of subscription items, bottom navigation bar.See the flow
    SubPilot: Cancel Subscriptions

    Header text, search bar, scrollable list of subscription items, bottom navigation bar.

  10. Step 10 · 4:23

    SubPilot: Cancel Subscriptions: Top header with summary, middle tabbed list of subscriptions, bottom floating action button, and bottom navigation bar.See the flow
    SubPilot: Cancel Subscriptions

    Top header with summary, middle tabbed list of subscriptions, bottom floating action button, and bottom navigation bar.

  11. Step 11 · 4:25

    SubPilot: Cancel Subscriptions: Top header with subscription info, followed by an alert banner, a details card, a transaction history link, and a bottom action bar.See the flow
    SubPilot: Cancel Subscriptions

    Top header with subscription info, followed by an alert banner, a details card, a transaction history link, and a bottom action bar.

  12. Step 12 · 4:28

    SubPilot: Cancel Subscriptions: Top floating card, followed by tabbed navigation, then a list of subscription categories (Eligible, Active, Cancelled), a feedback prompt, a large action button, and a bottom navigation bar.See the flow
    SubPilot: Cancel Subscriptions

    Top floating card, followed by tabbed navigation, then a list of subscription categories (Eligible, Active, Cancelled), a feedback prompt, a large action button, and a bottom navigation bar.

Google Gemini: Upgrading to a Premium Plan

Open recorded flow

  1. Step 1 · 6:47

    Google Gemini: Top header with model name, central greeting area, and a bottom modal for model selection.See the flow
    Google Gemini

    Top header with model name, central greeting area, and a bottom modal for model selection.

  2. Step 2 · 6:52

    Google Gemini: Top header with logo and close button, central hero section with title and pricing, middle card with feature list, bottom CTA button, and footer with legal text.See the flow
    Google Gemini

    Top header with logo and close button, central hero section with title and pricing, middle card with feature list, bottom CTA button, and footer with legal text.

  3. Step 3 · 6:56

    Google Gemini: A modal dialog centered over a subscription feature list, with a primary CTA button at the bottom.See the flow
    Google Gemini

    A modal dialog centered over a subscription feature list, with a primary CTA button at the bottom.

  4. Step 4 · 7:04

    Google Gemini: A centered system modal overlaying a background subscription page. The modal contains a header, product details, pricing, terms, account info, and a bottom confirmation instruction.See the flow
    Google Gemini

    A centered system modal overlaying a background subscription page. The modal contains a header, product details, pricing, terms, account info, and a bottom confirmation instruction.

  5. Step 5 · 7:10

    Google Gemini: A modal dialog is centered over a subscription feature list, with a footer containing a primary action button and legal text.See the flow
    Google Gemini

    A modal dialog is centered over a subscription feature list, with a footer containing a primary action button and legal text.

  6. Step 6 · 7:19

    Google Gemini: Top logo and header, central feature list card, bottom disclaimer and primary CTA button.See the flow
    Google Gemini

    Top logo and header, central feature list card, bottom disclaimer and primary CTA button.

Found an example you like?See the whole story.

See the full library See plans