Mobile personal information entry flow examples

Personal information entry flow examples

Step 1 · 0:17
See the flow
HBX | Globally Curated Fashion
Header text at top, feature list in middle, primary action buttons below, 'Not now' button and pagination dots at bottom, with a system modal overlaying the center.
Step 2 · 0:46
See the flow
HBX | Globally Curated Fashion
Top browser navigation bar, followed by the HBX logo, a sign-up form with three inputs, a primary CTA, an 'OR' divider, and a social login button.
Step 3 · 0:52
See the flow
HBX | Globally Curated Fashion
Top browser bar, notification banner, header text, multi-field form, bottom browser navigation bar.
Step 4 · 1:12
See the flow
HBX | Globally Curated Fashion
A modal overlay containing a list of countries sits on top of a multi-field registration form. The footer contains language and legal links.
Step 5 · 1:16
See the flow
HBX | Globally Curated Fashion
Top navigation bar followed by a vertical form with input fields, a primary CTA button, and a footer with legal links.
Step 6 · 1:19
See the flow
HBX | Globally Curated Fashion
Top browser navigation bar followed by a centered form with multiple input fields and a footer disclaimer.

Step 1 · 1:11
See the flow
Heyyyy: Stories that text back
Top navigation bar, central profile image placeholder, text input area, and bottom primary action button with a secondary link.
Step 2 · 1:13
See the flow
Heyyyy: Stories that text back
A centered system permission modal sits on top of a profile completion form background.
Step 3 · 1:16
See the flow
Heyyyy: Stories that text back
Top navigation bar with close button and tab switcher, followed by a multi-column grid of image thumbnails, and two floating action buttons at the bottom.
Step 4 · 1:18
See the flow
Heyyyy: Stories that text back
The screen consists of a large central image preview area surrounded by black space, with a bottom navigation bar containing two text buttons.
Step 5 · 1:33
See the flow
Heyyyy: Stories that text back
Top navigation, profile photo area, action buttons, bio text field, and bottom primary CTA.

Step 1 · 0:28
See the flow
Calorie Counter by Numify
Top progress bar, centered heading and subtext, two selection cards in the middle, and a bottom navigation row with back and next buttons.
Step 2 · 0:36
See the flow
Calorie Counter by Numify
Progress bar at top, title and subtitle in the upper middle, date picker in the center, and navigation buttons at the bottom.
Step 3 · 0:38
See the flow
Calorie Counter by Numify
Top progress bar, followed by a header text, and a bottom-aligned white card containing the main call to action and secondary link.
Step 4 · 0:42
See the flow
Calorie Counter by Numify
Progress bar at top, title, height input field, unit toggle, BMI info card, navigation buttons, and numeric keypad at the bottom.
Step 5 · 0:50
See the flow
Calorie Counter by Numify
Progress bar at top, question text, weight display, unit toggle, BMI info card, navigation buttons, and numeric keypad at the bottom.

Step 1 · 1:59
See the flow
The Wall Street Journal. News
A search bar at the top followed by a long vertical list of text-based category options.
Step 2 · 2:13
See the flow
The Wall Street Journal. News
A search bar at the top followed by a scrollable list of selectable text options.
Step 3 · 2:21
See the flow
The Wall Street Journal. News
Top search bar followed by a scrollable vertical list of industry categories.
Step 4 · 2:29
See the flow
The Wall Street Journal. News
Top navigation, header text, three input fields, and a bottom primary action button.