Mobile appearance customization flow examples

Appearance customization flow examples

Step 1 · 10:21
See the flow
WebNovel - Read Novels & Manga
Top navigation bar followed by two distinct sections containing cards and a carousel, ending with a large bottom action button.
Step 2 · 10:26
See the flow
WebNovel - Read Novels & Manga
Top header with back button and title, a theme preview area, a central modal containing a mobile app UI mockup, and a bottom action button.
Step 3 · 10:32
See the flow
WebNovel - Read Novels & Manga
A modal dialog centered over a settings page with a top navigation bar and a bottom action button.

Step 1 · 0:12
See the flow
Budget app - spending tracker
Header text at the top, two side-by-side phone mockups in the middle, theme selection buttons below them, and a primary 'Continue' button at the bottom.
Step 2 · 0:17
See the flow
Budget app - spending tracker
Header text at the top, two theme selection cards in the middle, a large primary button at the bottom, and a pagination indicator at the very bottom.

Step 1 · 8:28
See the flow
Transit • Subway & Bus Times
A modal overlay centered on the screen, covering the lower two-thirds, with a list of settings options inside.
Step 2 · 8:31
See the flow
Transit • Subway & Bus Times
Top header with navigation, hero illustration, tab switcher, and categorized grid of icon options.
Step 3 · 8:38
See the flow
Transit • Subway & Bus Times
Top navigation bar, followed by a hero illustration of the app UI, then categorized color selection grids.
Step 4 · 8:40
See the flow
Transit • Subway & Bus Times
A modal dialog centered over a settings page containing categorized lists of circular color swatches.
Step 5 · 8:48
See the flow
Transit • Subway & Bus Times
Top navigation bar, header with icon and title, three action buttons, category tab bar, and a grid of emojis.
Step 6 · 8:52
See the flow
Transit • Subway & Bus Times
Top navigation bar with Cancel/Done, header with emoji and title, category tab bar, and a large scrollable grid of emojis.
Step 7 · 9:00
See the flow
Transit • Subway & Bus Times
A centered modal dialog box appearing over a list-based settings page.
Step 8 · 9:02
See the flow
Transit • Subway & Bus Times
A modal overlay centered on the screen, positioned over a background containing navigation and preference cards.

Step 1 · 1:57
See the flow
Blinq: Digital Business Card
Header text at the top, central card preview carousel, color selection row in the middle, and a large bottom CTA button.
Step 2 · 1:59
See the flow
Blinq: Digital Business Card
Header text at top, central card preview, color selection carousel below, and a large primary button at the bottom.
Step 3 · 2:00
See the flow
Blinq: Digital Business Card
Header text at top, central business card preview, color selection carousel below, and a large primary button at the bottom.
Step 4 · 2:04
See the flow
Blinq: Digital Business Card
Header text at top, large card preview in center, color selection carousel below, and a full-width button at the bottom.
Step 5 · 2:13
See the flow
Blinq: Digital Business Card
Top header with branding, followed by profile image and user details, a list of contact fields, and two bottom action buttons.

Step 1 · 2:52
See the flow
ThemeKit: Widget & Icon Themes
Top header with search and currency, horizontal carousel, filter tabs, two-column grid of theme previews, and bottom navigation bar.
Step 2 · 2:59
See the flow
ThemeKit: Widget & Icon Themes
Top navigation bar, central phone mockup, large download button, and bottom advertisement banner.
Step 3 · 3:01
See the flow
ThemeKit: Widget & Icon Themes
Top navigation bar, followed by a filter button, a grid of selectable widget cards, a monetization section with two buttons, a large download button, and a bottom advertisement.
Step 4 · 3:09
See the flow
ThemeKit: Widget & Icon Themes
Top navigation bar, followed by a list of selectable icon pairs, and a bottom floating action panel containing bulk actions and an ad.