screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile widget customization flow examples

Search the library

Widgetable: Besties & Couples: Setting up a Pet Widget

Open recorded flow

  1. Step 1 · 1:15

    Widgetable: Besties & Couples: A centered modal window on a dark background, containing a header illustration, two input fields, a checkbox, and a primary call-to-action button.See the flow
    Widgetable: Besties & Couples

    A centered modal window on a dark background, containing a header illustration, two input fields, a checkbox, and a primary call-to-action button.

  2. Step 2 · 1:18

    Widgetable: Besties & Couples: Top background with promotional content, followed by a centered modal containing a header, two phone mockups, and two bottom buttons.See the flow
    Widgetable: Besties & Couples

    Top background with promotional content, followed by a centered modal containing a header, two phone mockups, and two bottom buttons.

  3. Step 3 · 1:21

    Widgetable: Besties & Couples: The screen consists of a blurred background showing home screen icons, with a white modal sheet occupying the bottom half of the screen containing selection options and a primary CTA.See the flow
    Widgetable: Besties & Couples

    The screen consists of a blurred background showing home screen icons, with a white modal sheet occupying the bottom half of the screen containing selection options and a primary CTA.

  4. Step 4 · 1:23

    Widgetable: Besties & Couples: Top section shows a widget preview; bottom section is a modal sheet with size selection options and a primary action button.See the flow
    Widgetable: Besties & Couples

    Top section shows a widget preview; bottom section is a modal sheet with size selection options and a primary action button.

  5. Step 5 · 1:25

    Widgetable: Besties & Couples: Top navigation, central hero image of virtual pet, bottom sheet with size selection options, and a primary action button at the bottom.See the flow
    Widgetable: Besties & Couples

    Top navigation, central hero image of virtual pet, bottom sheet with size selection options, and a primary action button at the bottom.

Widgetable: Besties & Couples: Customizing a Widget

Open recorded flow

  1. Step 1 · 1:28

    Widgetable: Besties & Couples: The screen consists of a top navigation bar, a central modal window containing text and a large phone mockup, and a bottom action button.See the flow
    Widgetable: Besties & Couples

    The screen consists of a top navigation bar, a central modal window containing text and a large phone mockup, and a bottom action button.

  2. Step 2 · 1:30

    Widgetable: Besties & Couples: Top navigation bar, large hero preview area, followed by vertical sections for pet selection, console selection, and feature toggles, ending with a bottom action button.See the flow
    Widgetable: Besties & Couples

    Top navigation bar, large hero preview area, followed by vertical sections for pet selection, console selection, and feature toggles, ending with a bottom action button.

  3. Step 3 · 1:41

    Widgetable: Besties & Couples: Top header with back/edit/preview, central hero image of pet, middle section with settings list, bottom section with customization dropdown and save button.See the flow
    Widgetable: Besties & Couples

    Top header with back/edit/preview, central hero image of pet, middle section with settings list, bottom section with customization dropdown and save button.

  4. Step 4 · 1:52

    Widgetable: Besties & Couples: Top navigation bar, background content with pet widget and weather toggle, and a centered modal overlay for location selection.See the flow
    Widgetable: Besties & Couples

    Top navigation bar, background content with pet widget and weather toggle, and a centered modal overlay for location selection.

  5. Step 5 · 1:59

    Widgetable: Besties & Couples: Top navigation bar, followed by a hero widget preview, a list of settings rows, and a bottom modal overlay for unit selection.See the flow
    Widgetable: Besties & Couples

    Top navigation bar, followed by a hero widget preview, a list of settings rows, and a bottom modal overlay for unit selection.

  6. Step 6 · 2:01

    Widgetable: Besties & Couples: A modal dialog centered over a blurred background page containing settings for a virtual pet.See the flow
    Widgetable: Besties & Couples

    A modal dialog centered over a blurred background page containing settings for a virtual pet.

  7. Step 7 · 2:13

    Widgetable: Besties & Couples: Top header with back/title/preview toggle, middle widget preview, bottom modal panel with tabs and color grid.See the flow
    Widgetable: Besties & Couples

    Top header with back/title/preview toggle, middle widget preview, bottom modal panel with tabs and color grid.

  8. Step 8 · 2:18

    Widgetable: Besties & Couples: Top section contains the widget preview, middle section contains the color picker tabs and spectrum, bottom section contains color swatches.See the flow
    Widgetable: Besties & Couples

    Top section contains the widget preview, middle section contains the color picker tabs and spectrum, bottom section contains color swatches.

  9. Step 9 · 2:20

    Widgetable: Besties & Couples: Top navigation bar, pet widget preview area, color mode tabs, RGB slider controls, and bottom color palette.See the flow
    Widgetable: Besties & Couples

    Top navigation bar, pet widget preview area, color mode tabs, RGB slider controls, and bottom color palette.

  10. Step 10 · 2:26

    Widgetable: Besties & Couples: Top header, hero widget preview card, settings form with two sections, and a bottom fixed action button.See the flow
    Widgetable: Besties & Couples

    Top header, hero widget preview card, settings form with two sections, and a bottom fixed action button.

  11. Step 11 · 2:29

    Widgetable: Besties & Couples: The screen consists of a modal overlay centered over a blurred background. The modal contains a title, instructional text, a large central product illustration, and two action buttons at the bottom.See the flow
    Widgetable: Besties & Couples

    The screen consists of a modal overlay centered over a blurred background. The modal contains a title, instructional text, a large central product illustration, and two action buttons at the bottom.

ThemeKit: Widget & Icon Themes: Creating an App Launcher Widget

Open recorded flow

  1. Step 1 · 1:27

    ThemeKit: Widget & Icon Themes: Top navigation bar, icon preview card, shape selector, form fields for app selection, animation, icon selection, color selection, and a bottom sticky save button.See the flow
    ThemeKit: Widget & Icon Themes

    Top navigation bar, icon preview card, shape selector, form fields for app selection, animation, icon selection, color selection, and a bottom sticky save button.

  2. Step 2 · 1:29

    ThemeKit: Widget & Icon Themes: Top preview area followed by a scrollable white card containing configuration settings and a bottom fixed action button.See the flow
    ThemeKit: Widget & Icon Themes

    Top preview area followed by a scrollable white card containing configuration settings and a bottom fixed action button.

  3. Step 3 · 1:31

    ThemeKit: Widget & Icon Themes: Top preview area followed by a vertical list of configuration sections (Open App, Animation, Icon, Color) and a bottom action button.See the flow
    ThemeKit: Widget & Icon Themes

    Top preview area followed by a vertical list of configuration sections (Open App, Animation, Icon, Color) and a bottom action button.

  4. Step 4 · 1:32

    ThemeKit: Widget & Icon Themes: A modal overlay centered on top of a configuration screen. The background screen contains headers, color selection swatches, and a primary action button at the bottom.See the flow
    ThemeKit: Widget & Icon Themes

    A modal overlay centered on top of a configuration screen. The background screen contains headers, color selection swatches, and a primary action button at the bottom.

  5. Step 5 · 1:47

    ThemeKit: Widget & Icon Themes: Top navigation bar, preview card, icon selection list, color palette, text input fields, and a bottom primary action button.See the flow
    ThemeKit: Widget & Icon Themes

    Top navigation bar, preview card, icon selection list, color palette, text input fields, and a bottom primary action button.

  6. Step 6 · 1:50

    ThemeKit: Widget & Icon Themes: A centered modal dialog box appearing over a background screen with configuration options for app icons and colors.See the flow
    ThemeKit: Widget & Icon Themes

    A centered modal dialog box appearing over a background screen with configuration options for app icons and colors.

  7. Step 7 · 1:54

    ThemeKit: Widget & Icon Themes: A bottom-sheet modal containing a header with a close button and title, followed by a scrollable list of app icons and names.See the flow
    ThemeKit: Widget & Icon Themes

    A bottom-sheet modal containing a header with a close button and title, followed by a scrollable list of app icons and names.

Found an example you like?See the whole story.

See the full library See plans