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