Wireframes and
Low-Fidelity Prototypes
Shan-Hung Wu & DataLab
CS, NTHU
Design Sprint Day 3
1. Present & vote candidate solutions
– No discussion
2. Refine/merge parts & decide the best solutions
– What’s your unique value proposition?
3. Write goal statements & evaluation metrics
4. Storyboarding
2
Goal Statements
Our DogWalker app will show tips to select a
dog walker which will affect non-tech-savvy users by
helping users hire the right dog walkers. We will
measure effectiveness by tracking the booking rate in
the app.
Our CoffeeShop app will let users place group
orders in advance which will affect users who have to
make and pick up large orders by letting users skip the
line and save time. We will measure effectiveness by
tracking orders of 5+ items through the app.
• Let’s build a prototype for your solution!
3
Outline: Low-fi Prototyping
• Storyboarding
– Big picture storyboards
– Close-up storyboards
• Wireframing
– Information architecture
– Psychology behind UI
• Lo-fi prototyping
4
Outline: Low-fi Prototyping
• Storyboarding
– Big picture storyboards
– Close-up storyboards
• Wireframing
– Information architecture
– Psychology behind UI
• Lo-fi prototyping
5
Storyboards
• A series of panels or frames that visually describes and
explores a user’s experience with a product
• Telling a story through visuals is often more effective
than using words
6
Types
• Big-picture storyboards
– Focus on what the user needs, their context, and why the
product will be useful to the user
• Close-up storyboards
– Concentrate on the product and how it works
• Consider the example:
Our CoffeeShop app will let users place group
orders in advance which will affect users who have to
make and pick up large orders by letting users skip the
line and save time. We will measure effectiveness by
tracking orders of 5+ items through the app.
7
Big-picture Storyboards
8
Close-up Storyboards
9
Key Elements
• Character
– The target user (from your
major persona)
• Scene
– The user’s environment
• Narrative
– The problem the user is facing
and how the design will solve
this problem
• Plot
– Solution offered by the design
10
How to Create
Big-picture Storyboards?
• Based on the user journey map you already have
11
How to Create
Close-up Storyboards?
• Based on the user flows
– Actions, screens, decisions
– Happy path (solid) vs.
edge cases (dotted)
12
Exercise: DogWalker Storyboards
Our DogWalker app will show tips to select a
dog walker which will affect non-tech-savvy users by
helping users hire the right dog walkers. We will
measure effectiveness by tracking the booking rate in
the app.
13
Outline: Low-fi Prototyping
• Storyboarding
– Big picture storyboards
– Close-up storyboards
• Wireframing
– Information architecture
– Psychology behind UI
• Lo-fi prototyping
14
Wireframe
• A basic outline of a digital experience, like an
app or a website
15
Same Idea, Different UIs
“Show menu…”
16
Refined
17
Benefits of Wireframes
• Inform the element to include in your design
• Catch problems early
• Get stakeholders to focus on structure rather
than details
• Save time and effort
• Iterate quickly
18
Information Architecture (IA)
• Organization of content that help users understand
where they are in a product and where the information
they want is
• When users can find what they're looking for, quickly
and intuitively, you have a good IA
19
Example: DogWalker
20
8 Principles of IA
1. Object principle: You should view your content as “living” and as
something that changes and grows over time
2. Choice principle: People think they want to have many choices, but they
actually need fewer choices that are well-organized
3. Disclosure principle: Information should not be unexpected or
unnecessary
4. Exemplar principle: Humans put things into categories and group
different concepts together
5. Front door principle: People will usually arrive at a homepage from
another website
6. Multiple classification principle: People have different ways of searching
for information
7. Focused navigation principle: There must be a strategy and logic behind
the way navigation menus are designed
8. Growth principle: The amount of content in a design will grow over time
21
6 Common Patterns of IA
22
Paper Wireframes First!
• Text, images, buttons
• Only make the refined wireframes digital
23
Digital Wireframes
• Takes times to make
• Easy to share
• Necessary for digital
prototyping
• Wireframing using
Figma
24
Outline: Low-fi Prototyping
• Storyboarding
– Big picture storyboards
– Close-up storyboards
• Wireframing
– Information architecture
– Psychology behind UI
• Lo-fi prototyping
25
Gestalt Principles
• Principles describing how humans group
similar elements, recognize patterns, and
simplify complex images when we perceive
objects
26
Gestalt Principles 1: Similarity
• Elements that look alike (in shape, size, or color, for
instance) are perceived to have the same function
27
Gestalt Principles 2: Proximity
• Elements that are close together appear to be
more related than things that are spaced farther
apart
28
Gestalt Principles 3: Common Region
• Elements located within the same closed area
are perceived to be grouped together
29
Von Restorff Effect
• When multiple similar objects are present, the
one that differs from the rest is most likely to
be remembered
Call to action (CTA)
30
Serial Position Effect
• When given a list of items, users are more likely to
remember the first and the last few, while the items in
the middle tend to blur
31
Outline: Low-fi Prototyping
• Storyboarding
– Big picture storyboards
– Close-up storyboards
• Wireframing
– Information architecture
– Psychology behind UI
• Lo-fi prototyping
32
Prototype
• Wireframes +
interactions
33
Fidelity
• How closely a design matches the look-and-feel of
the final product
• Low-fi • Hi-fi
– Less refined & polished – Closely matches the final
– Shorter time to make product
– For fast iterations – More time-consuming to
make
– For design handoff (to
developers)
34
Prototyping using Figma
35
Design Sprint Day 4
1. Wireframing
– Information architecture
– Paper wireframes
– Digital wireframes
2. (Low-fi) prototyping
– Flows for happy paths
– Flows for edge cases
36
