UI mockups · Mobile app
Onboarding flow UI mockup
A mobile app’s first-run flow: a welcome screen, a permissions step with toggles and a notification preview, and a profile setup form.
The 3 screens
Onboarding flow: Welcome, Permissions, Profile setup. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Welcome Welcome
Phone screen with a button, a heading, an image, a link, a page control and a paragraph.
- Headings
- Grow better habits, one day at a time
- Buttons and actions
- Get started
- Text and labels
- Bloom turns small daily actions into streaks you can actually keep. · I already have an account
2Permissions Permissions
Phone screen with 6 paragraphs, 4 icons, 3 cards, 3 labels, 3 toggles, a button, a heading, a link and 2 more component types.
- Headings
- Stay on track
- Navigation
- Welcome · Permissions · Profile
- Buttons and actions
- Continue
- Text and labels
- Step 2 of 3 · Skip · Choose what Bloom can use. You can change these any time in Settings. · Notifications · Gentle nudges at the times you pick · Calendar · Find free slots for your habits · Health data · Count steps and sleep automatically · Time for your 10-minute walk. · Bloom · We never sell your data.
3Profile setup Profile setup
Phone screen with 3 labels, 2 links, 2 paragraphs, an alert banner, an avatar, a button, a checkbox, a chips / tags and 6 more component types.
- Headings
- Set up your profile
- Navigation
- Welcome · Permissions · Profile · Move more · Sleep better · Read daily · Drink water
- Fields
- Maya Brooks · 8:00 AM
- Buttons and actions
- Finish setup
- Text and labels
- Step 3 of 3 · Skip · Add photo · Name · Your first goal · Daily reminder · Send me a weekly progress email · You’re all set to start your first streak. · You can change all of this later.
Open and edit it
The onboarding flow mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
- Music player UI mockup - A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.
- iOS fitness app UI mockup - An iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.
- Android mail app UI mockup - A Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.