screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile login flow examples

Search the library

ChatGPT: Login & Sign Up Prompt

Open recorded flow

  1. Step 1 · 0:13

    ChatGPT: The screen is divided into a large empty white space at the top containing the main heading, and a dark, rounded bottom panel containing the authentication options.See the flow
    ChatGPT

    The screen is divided into a large empty white space at the top containing the main heading, and a dark, rounded bottom panel containing the authentication options.

  2. Step 2 · 0:58

    ChatGPT: A centered modal window containing a logo, header text, email input field, primary action button, an 'OR' divider, and three secondary social login buttons.See the flow
    ChatGPT

    A centered modal window containing a logo, header text, email input field, primary action button, an 'OR' divider, and three secondary social login buttons.

  3. Step 3 · 1:02

    ChatGPT: A centered system modal overlaying a background login screen containing a logo, text, and multiple sign-in options.See the flow
    ChatGPT

    A centered system modal overlaying a background login screen containing a logo, text, and multiple sign-in options.

Widgetable: Besties & Couples: Login/Sign-up Prompt

Open recorded flow

  1. Step 1 · 0:04

    Widgetable: Besties & Couples: Logo and app name at the top, followed by a vertical stack of three authentication buttons, with legal links at the bottom.See the flow
    Widgetable: Besties & Couples

    Logo and app name at the top, followed by a vertical stack of three authentication buttons, with legal links at the bottom.

  2. Step 2 · 0:07

    Widgetable: Besties & Couples: Centered system modal overlaying a blurred background with a footer disclaimer at the bottom.See the flow
    Widgetable: Besties & Couples

    Centered system modal overlaying a blurred background with a footer disclaimer at the bottom.

  3. Step 3 · 0:10

    Widgetable: Besties & Couples: Top browser bar, main content area with account list, bottom footer with language and legal links, and bottom browser navigation bar.See the flow
    Widgetable: Besties & Couples

    Top browser bar, main content area with account list, bottom footer with language and legal links, and bottom browser navigation bar.

  4. Step 4 · 0:14

    Widgetable: Besties & Couples: Top browser bar, header with Google branding, account selection, permission details, privacy disclaimer, primary action buttons, and footer links.See the flow
    Widgetable: Besties & Couples

    Top browser bar, header with Google branding, account selection, permission details, privacy disclaimer, primary action buttons, and footer links.

Yelp: Food, Services & Reviews: Sign Up / Log In

Open recorded flow

  1. Step 1 · 0:15

    Yelp: Food, Services & Reviews: Centered vertical stack with logo at top, social login buttons, email input, and legal text at the bottom.See the flow
    Yelp: Food, Services & Reviews

    Centered vertical stack with logo at top, social login buttons, email input, and legal text at the bottom.

  2. Step 2 · 0:18

    Yelp: Food, Services & Reviews: The screen features a logo at the top, followed by social login buttons, an email input field, and a legal disclaimer at the bottom. A system modal is centered over the content.See the flow
    Yelp: Food, Services & Reviews

    The screen features a logo at the top, followed by social login buttons, an email input field, and a legal disclaimer at the bottom. A system modal is centered over the content.

  3. Step 3 · 0:21

    Yelp: Food, Services & Reviews: Top navigation bar, Google branding, account selection list, legal disclaimer, and footer language/links.See the flow
    Yelp: Food, Services & Reviews

    Top navigation bar, Google branding, account selection list, legal disclaimer, and footer language/links.

  4. Step 4 · 0:24

    Yelp: Food, Services & Reviews: Top browser bar, followed by Google branding, Yelp logo, account selector, permission details, legal text, and bottom action buttons.See the flow
    Yelp: Food, Services & Reviews

    Top browser bar, followed by Google branding, Yelp logo, account selector, permission details, legal text, and bottom action buttons.

SHEIN - Shopping Online: Signing In

Open recorded flow

  1. Step 1 · 0:22

    SHEIN - Shopping Online: A centered modal window containing promotional text, coupon cards, and a primary CTA button, superimposed over a blurred e-commerce home screen.See the flow
    SHEIN - Shopping Online

    A centered modal window containing promotional text, coupon cards, and a primary CTA button, superimposed over a blurred e-commerce home screen.

  2. Step 2 · 0:27

    SHEIN - Shopping Online: Top back button, brand logo, input field, primary CTA, social login buttons, region selector, and footer legal text.See the flow
    SHEIN - Shopping Online

    Top back button, brand logo, input field, primary CTA, social login buttons, region selector, and footer legal text.

  3. Step 3 · 0:37

    SHEIN - Shopping Online: A standard login form background with a centered promotional modal overlay.See the flow
    SHEIN - Shopping Online

    A standard login form background with a centered promotional modal overlay.

Google Gemini: Google Sign-In

Open recorded flow

  1. Step 1 · 0:04

    Google Gemini: Top-aligned branding text with a centered system modal and a bottom-aligned primary action button.See the flow
    Google Gemini

    Top-aligned branding text with a centered system modal and a bottom-aligned primary action button.

  2. Step 2 · 0:17

    Google Gemini: Top browser navigation bar followed by a centered Google logo, heading, sub-text, input field, and bottom action buttons.See the flow
    Google Gemini

    Top browser navigation bar followed by a centered Google logo, heading, sub-text, input field, and bottom action buttons.

  3. Step 3 · 0:29

    Google Gemini: Top browser bar, centered Google logo, heading, email, password input, checkbox, bottom action buttons, bottom browser navigation.See the flow
    Google Gemini

    Top browser bar, centered Google logo, heading, email, password input, checkbox, bottom action buttons, bottom browser navigation.

Found an example you like?See the whole story.

See the full library See plans