← Years 7–8 Creating Digital Solutions

Storyboarding a user's path through a system

A row of numbered screen sketches with arrows showing the order a user moves through them, so you can plan how someone gets from the first screen to the last.

Part of: 7-8 Digital Technologies: Designing user interfaces and experiences — Module 15, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 36

Understanding Storyboarding a user's path through a system in Years 7–8 Creating Digital Solutions

What it does: The numbers 1, 2 and 3 on the sketches are the numbered panels that put the screens in order. The arrow from panel 2 to panel 3 shows that tapping on the Menu screen takes the user to the Order screen. Numbered panels tell you which screen comes first, second, third and so on. Storyboards help you plan and check the path before you build, but you still test with real users. Arrows in a storyboard show which screen the user moves to next, so the path through the system is clear.

Common mistakes: Storyboard panels must be numbered in order. The arrow from Panel 1 leads to Panel 2, so this sketch should be labelled Panel 2, not Panel 5. The arrow sends the user back to Panel 1, so the path never reaches the last screen. It should point forward to Panel 4.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Storyboarding a user's path through a system to a class →

This module's key terms are also in a printable crossword (Modules 50–125) and word search (Modules 3–125).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which describes a storyboard for an app?
A row of numbered screen sketches with arrows between themA single paragraph of code that runs the app
Matches
[Login] [Menu] [Order]
↓
The panels have no numbers and no arrows, so you cannot tell which screen comes first or what opens next
Applying
Meanings
Term
storyboard
Meaning
A row of numbered screen sketches with arrows showing the order a user moves through them, so you can plan how someone gets from the first screen to the last.
Practice
Panel 1: Home screen
Testing
Gaps
Panel : Home screen
Check Answer
Spots
2 -> Panel 2
3Panel 5: Sign-up screen

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Kraken' badge — Deep Sea Master, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which describes a storyboard for an app?
A. A row of numbered screen sketches with arrows between them ✓
B. A single paragraph of code that runs the app
A storyboard shows the screens a user moves through, in order, using numbered sketches and arrows.
2. What are the numbers on the panels of a storyboard for?
A. They show how many users have opened the app
B. They show the order the screens are visited ✓
Numbered panels tell you which screen comes first, second, third and so on.
3. What does an arrow between two panels show?
A. Which screen opens next ✓
B. Which screen is the best design
Arrows show the direction a user moves from one screen to the next.
4. Your storyboard has panels 1, 2 and 3. Which is the better way to set them out?
A. 3, 1, 2 scattered with no arrows
B. 1 → 2 → 3 with arrows pointing from each panel to the next ✓
A clear order and arrows let anyone follow the user's path from first screen to last.
5. A user taps 'Play' on the home screen, and the game screen opens. In a storyboard, what would you draw?
A. An arrow from the home screen panel to the game screen panel ✓
B. An arrow from the game screen panel back to nowhere
The arrow starts at the screen where the tap happens and points to the screen that opens.

Match the Pairs

Panel 1, Panel 2, Panel 3 → Numbered panels that show the order of the screens, from the first screen to the last
[Home] -> [Search] → An arrow showing that the Search screen opens next after the Home screen
A storyboard is a row of screen sketches, each with its own number so the order is clear → [1: Login] [2: Menu] [3: Order]
An arrow joins two panels to show which screen opens when the user taps a button → [2: Menu] -> [3: Order]
[Login] [Menu] [Order] → The panels have no numbers and no arrows, so you cannot tell which screen comes first or what opens next
[1: Login] <- [2: Menu] <- [3: Order] → The arrows point backwards, so they show the user moving from the last screen to the first instead of from first to last

Key Term

storyboard
A row of numbered screen sketches with arrows showing the order a user moves through them, so you can plan how someone gets from the first screen to the last.

Fill in the Blanks

1. Panel 1: Home screen
Hint: Type the number of the very first panel in the storyboard.
2. Panel 1 -> Panel 2
Hint: Type the arrow symbol that shows which screen opens next.
3. Panel 2: Login screen
Hint: Type the word used to label each numbered screen sketch.
4. Panel 1: Home screen Panel 2: Search screen Panel 3: Results screen
Hint: Type the number that continues the sequence for the third panel.
5. storyboard: Panel 1 -> Panel 2 -> Panel 3
Hint: Type the name of the plan made of numbered screen sketches joined by arrows.

Spot the Error

Question 1
A Panel 1: Welcome screen
B -> Panel 2
C Panel 5: Sign-up screen
D -> Panel 3
E Panel 3: Home screen
Line C — Storyboard panels must be numbered in order. The arrow from Panel 1 leads to Panel 2, so this sketch should be labelled Panel 2, not Panel 5.
Question 2
A Panel 1: Menu -> Panel 2
B Panel 2: Search -> Panel 3
C Panel 3: Results -> Panel 1
D Panel 4: Song page (end)
Line C — The arrow sends the user back to Panel 1, so the path never reaches the last screen. It should point forward to Panel 4.
Question 3
A Storyboard: Order a pizza
B Panel 1: Pick size <- Panel 2
C Panel 2: Add sides -> Panel 3
D Panel 3: Pay -> Panel 4
E Panel 4: Order done (end)
Line B — The arrow points the wrong way. Arrows show which screen opens next, so it should be -> Panel 2.
Question 4
A Panel 1: Log in -> Panel 2
B Panel 2: Home -> Panel 3
C Panel 3: Profile -> Panel 4
D Panel 4: Settings
E Panel 5: Log out (end)
Line D — There is no arrow after Panel 4, so the user's path stops here. It needs -> Panel 5 to show which screen opens next.
Question 5
A Panel 1: Start -> Panel 3
B Panel 2: Level -> Panel 3
C Panel 3: Play -> Panel 4
D Panel 4: Score (end)
Line A — The arrow skips Panel 2, so the user would miss the Level screen. It should be -> Panel 2.

Student with a class code? Join your class →