Mobile gameplay flow examples

Gameplay flow examples

Step 1 · 1:09
See the flow
Debatium - Couple Game Convo
Top navigation bar followed by a vertical list of category cards, with a large horizontal button near the bottom.
Step 2 · 1:15
See the flow
Debatium - Couple Game Convo
A centered modal card on a dark background with a close button at the top right.
Step 3 · 1:18
See the flow
Debatium - Couple Game Convo
A centered white modal card on a dark background with a close button at the top right.
Step 4 · 1:37
See the flow
Debatium - Couple Game Convo
A centered white modal card on a dark background, containing text and an icon.
Step 5 · 2:03
See the flow
Debatium - Couple Game Convo
Top navigation bar followed by a vertical scrollable list of category cards.
Step 6 · 2:09
See the flow
Debatium - Couple Game Convo
A centered rectangular modal on a dark background, containing a warning icon and instructional text.
Step 7 · 2:16
See the flow
Debatium - Couple Game Convo
A centered white modal card on a dark background with text and a play button.

Step 1 · 0:56
See the flow
Magic Tiles 3™: Piano Game
A header text followed by a vertical list of four rectangular song selection cards.
Step 2 · 1:01
See the flow
Magic Tiles 3™: Piano Game
Top section contains a gameplay tutorial animation, middle section contains a progress circle, and bottom section contains status text.
Step 3 · 1:06
See the flow
Magic Tiles 3™: Piano Game
Vertical lanes with a top progress bar, central score/feedback text, and bottom gameplay area.
Step 4 · 1:18
See the flow
Magic Tiles 3™: Piano Game
Vertical four-lane grid with a top status bar and gameplay feedback overlays.
Step 5 · 1:23
See the flow
Magic Tiles 3™: Piano Game
A centered modal dialog box appearing over a blurred game background.
Step 6 · 1:29
See the flow
Magic Tiles 3™: Piano Game
A central modal window containing reward text and a confirmation button, superimposed over a list-based song selection screen.

Step 1 · 8:12
See the flow
South China Morning Post: News
Header with title, followed by a vertical list of game cards with an ad slot in between, and a fixed bottom navigation bar.
Step 2 · 8:15
See the flow
South China Morning Post: News
Top header with back/profile, hero game title and CTA, horizontal date list, advertisement block, and bottom leaderboard card.
Step 3 · 8:17
See the flow
South China Morning Post: News
The screen is centered vertically and horizontally with text at the top and a loading indicator below it.
Step 4 · 8:21
See the flow
South China Morning Post: News
A centered modal window containing a game preview graphic at the top, followed by instructional text, and a close button at the bottom.
Step 5 · 8:31
See the flow
South China Morning Post: News
Top banner, timer/header, progress stats, and a large bottom control panel for the game.
Step 6 · 8:33
See the flow
South China Morning Post: News
Header with timer, progress section, central blank area, and bottom control panel with letter tiles and action buttons.
Step 7 · 9:04
See the flow
South China Morning Post: News
A centered modal window containing a game preview graphic, instructional text, and a close button, sitting on top of a blurred game background.

Step 1 · 5:15
See the flow
Tuner Pro: Guitar Tuner & Tab
Top navigation bar followed by a vertical scrollable list of numbered cards.
Step 2 · 5:17
See the flow
Tuner Pro: Guitar Tuner & Tab
A back button at the top followed by a vertical list of five distinct lesson/practice cards.
Step 3 · 5:23
See the flow
Tuner Pro: Guitar Tuner & Tab
The screen is vertically centered with a header, a central chord diagram, and a footer instruction.
Step 4 · 5:24
See the flow
Tuner Pro: Guitar Tuner & Tab
Header text at top, large chord name below, central guitar fretboard diagram, footer instruction at bottom.
Step 5 · 5:26
See the flow
Tuner Pro: Guitar Tuner & Tab
Top progress bar, central chord diagram, bottom question text, and two large selection buttons at the bottom.
Step 6 · 5:28
See the flow
Tuner Pro: Guitar Tuner & Tab
Top progress bar, central chord diagram, feedback text, and bottom selection buttons.
Step 7 · 5:31
See the flow
Tuner Pro: Guitar Tuner & Tab
Top progress bar, central guitar chord diagram, feedback text, and bottom selection buttons.
Step 8 · 5:34
See the flow
Tuner Pro: Guitar Tuner & Tab
Top progress bar, central chord diagram, bottom feedback text, and two large selection buttons at the bottom.
Step 9 · 5:45
See the flow
Tuner Pro: Guitar Tuner & Tab
The screen is vertically centered with a top navigation icon, a central star rating and score summary, and two stacked buttons at the bottom.