Design Artifacts
UCD & Lean UX
INF2191H
iSchool, University of Toronto
Velian Pandeliev
Jan. 15, 2020
Understanding UI needs
2
Before the UI
Before we can create a user interface, we must understand (or at least
consider / have assumptions about) the entirety of the user experience:
Character: What are our users like?
User groups, requirements, beliefs, personas, stakeholders
Plot: What are their goals and struggles?
Tasks and goals, task analysis, competition, usage scenarios
World: What is the context in which they are situated?
Experience maps, user experience, process and environment
INF2191H Winter 2020
3
Velian Pandeliev
Character: "expert" comments
“No wireless. Less space than a Nomad.
Lame.”
“I don’t see many sales in the future of
iPod.”
“All this hype for something so ridiculous!
Who cares about an MP3 player?!”
iPod (2001)
Units sold: 240 000 000
4
Plot
Tasks can be broken down into appropriate levels of analysis.
Task analysis:
• Action: smallest unit in a sequence (e.g., press a button)
• Task: sequence of actions (e.g., add item to shopping cart)
• Activity: sequence of tasks (e.g., buy new bicycle parts)
• Practice: collection of related activities (e.g., cycling)
INF2191H Winter 2020
5
Velian Pandeliev
Problem: "I can't call my friend because I keep
hitting the wrong digit: my fingers are too big for
the touch screen."
Action: Target a digit
Task: Dial a number
Activity: Call a friend
Practice: Stay in touch
6
World:
situate tasks in the context
of an overall experience:
Entice, Enter, Engage, Exit, Extend
7
The cost of UX
8
"Good UX is expensive."
bit.do/roi-ux
9
Bad UX has a cost
Sometimes the cost is monetary (wrong direction, spent resources).
Sometimes it's expressed in abandonment, frustration, or low conversion.
Sometimes it's frustrating, annoying, or inconvenient.
Sometimes it's dangerous or deadly.
INF2191H Winter 2020
10
Velian Pandeliev
Costly UX
The Chinko Project (CAR)
INF2191H Winter 2020
11
Velian Pandeliev
Deadly UX
On Jan. 20, 1992, an Airbus A320 with 96 people on board en route to
Strasbourg, France experienced “controlled flight into terrain” (CFIT), i.e.,
it crashed into a mountain,
even though it was fully air-worthy.
82 passengers and 5 crew members died.
The main issue was with the UX of the descent rate controls:
-3.3 degrees per minute (~800 ft / min)
-3300 feet per minute
INF2191H Winter 2020
12
Velian Pandeliev
Deadly UX
GAETANO5004.DEVIANTART.COM
INF2191H Winter 2020
13
Velian Pandeliev
14
Bad UX is more expensive than good UX.
UXD pays for itself by
generating better requirements,
facilitating stakeholder communication,
and flagging design changes early.
UX must be efficient:
artifacts match the fidelity and requirements
of the design stage they're intended for.
15
Cost of changing design direction
Ideation
1$
INF2191H Winter 2020
Early design
10$
Late design
100$
16
1000$
Development
10000$
Velian Pandeliev
Design Process Artifacts
17
Design process artifacts
A wireframe is a precise visual blueprint that represents the skeletal
framework of a webpage or interface. They are used to convey information
relationships and to create the underlying code.
A mockup is a high fidelity rendering of the visual elements of a system that
elicits discussion about its aesthetic qualities (e.g., colour, typography,
icons).
A prototype is an interactive tool that lets stakeholders sample parts of the
functionality of a system and experience how it would react to the actions
of users.
INF2191H Winter 2020
18
Velian Pandeliev
Wireframe
INF2191H Winter 2020
19
Velian Pandeliev
Mockup
INF2191H Winter 2020
20
Velian Pandeliev
Prototype
NINTENDO, ANA PARK
INF2191H Winter 2020
21
Velian Pandeliev
Prototype
Horizontal prototypes demonstrate breadth: the full set of features,
options and commands. Each feature is rendered, but cannot be followed
very far.
SOME
NONE
PROTOTYPE
FULL
VERTICAL
implementation
Vertical prototypes demonstrate depth: all but critical features are inactive
“dead ends”.
FULL SYSTEM
HORIZONTAL PROTOTYPE
features
INF2191H Winter 2020
22
Velian Pandeliev
Wireframe, mockup, prototype
INF2191H Winter 2020
23
Velian Pandeliev
Sketch
Sketching can quickly
illustrate the essence of
an idea or design so it can
be discussed.
Sketches are quick,
inexpensive, unrefined,
and illustrative.
We don't expect sketches
to be prescriptive and we
do not critique sketches
on the quality of the
designs they depict.
INF2191H Winter 2020
SMASHING MAGAZINE
24
Velian Pandeliev
Sketch vs prototype
In sketches, we look for good things to expand on.
In prototypes, we look for bad things to fix.
BUXTON
INF2191H Winter 2020
25
Velian Pandeliev
Sequential storyboard
SKETCHING USER EXPERIENCES (2012)
INF2191H Winter 2020
26
Velian Pandeliev
Sequential storyboard
A sequential storyboard illustrates a sequence of key screens / states.
The sequential storyboard is my preferred deliverable for this class.
Benefits:
• Can focus on key states only without having to build dead ends
• Allows designers to annotate states and transitions between them
• Can be submitted at any fidelity, serving as a wireframe or mockup
• Provides an overview of all key screens at the same time
• Documents a task sequence like a prototype would
• The designer does not have to depict the user
INF2191H Winter 2020
27
SKETCHING USER EXPERIENCES (2012)
Velian Pandeliev
Sequential storyboard anatomy
1. Frame: snapshot
of a key state
1
2. Title: name each
frame/state
(noun)
3
3. Action: specify
actions / verbs
taken between
key states
2
INF2191H Winter 2020
SKETCHING USER EXPERIENCES (2012)
28
Velian Pandeliev
Sequential storyboard branching
SKETCHING USER EXPERIENCES (2012)
INF2191H Winter 2020
29
Velian Pandeliev
User-Centred Design
30
User-Centred Design
is an iterative process
that considers the user
at every stage of design
to produce usable objects
adapted to the user’s context.
31
User-Centred Design
Since 1986, User-Centred Design (UCD) has been an industrystandard process for designing usable objects.
Its core principles are:
• Understand the user, task, and environment
• Improve the user experience
• Involve users throughout the process
• Iterate based on user feedback
INF2191H Winter 2020
32
Velian Pandeliev
User-Centred Design
Evaluate
Understand
Test with users
Consider context
Use results to iterate
Uncover unmet need
Study user, task, context
Define requirements
4
1
Build
Create testable object
Illustrate or demonstrate
Control fidelity
INF2191H Winter 2020
Design
3
2
33
Ideate potential solutions
Refine into coherent design
Create design specification
Velian Pandeliev
User-Centred Design example
Evaluate
Understand
Deploy to cafes
Observe uses
Less cash = fewer tips
Merchants: get more tips
Users: tip quickly & easily
4
1
Build
Proof of concept
No reader
Counts insertions
INF2191H Winter 2020
Design
3
2
34
Tip jar metaphor
Cash and card
<5 sec. to learn
Velian Pandeliev
User-Centred Design example
Evaluate
Understand
Validate technology
Solicit feedback
Users learned quickly
Cash box unnecessary
Wrong card orientations
4
1
Build
Working prototype
Swipe icon
Hard-coded 1$ tips
INF2191H Winter 2020
Redesign
3
2
35
Eliminate cash jar
Add swipe icon
Offset card slot
Velian Pandeliev
User-Centred Design example
Evaluate
Understand
Quality assurance
Stress test
Ship!
Card confusion fixed
Custom $ values requested
Tips follow tips
4
1
Build
“Whole product”
Light & sound on tip
LED value display
INF2191H Winter 2020
Refine
3
2
36
Let merchant set values
Make tipping noticeable
Set form & dimensions
Velian Pandeliev
The DipJar
INF2191H Winter 2020
37
Velian Pandeliev
Lean UX
38
Lean UX is a methodology for applying
lean and agile principles to
UX problems and user interfaces.
39
40
UX in traditional processes
Traditional development stages (research, design, implementation,
evaluation) take a long time and involve teams passing formalized
deliverables to each other.
The receiving teams see polished, “final” versions of the work done so
far, which discourages changes and adaptation mid-cycle.
The market (the real world) is looped in once per cycle, after three
stages of development (understand, design, implement).
Since development and deliverables take time, the cycle is long.
INF2191H Winter 2020
41
Velian Pandeliev
“I once had a large pharmaceutical client who
hired the agency I worked for to redesign their
e-commerce platform with the goal of increasing
revenues by 15%.
I was the lead interaction designer on our team.“
42
JEFF GOTHELF
“In the vacuum of our office, we spent months
researching the current system, supply chain,
competitors, target audience and contextual use
scenarios. We researched personas and
assembled strategic models.
I designed a new information architecture for the
product catalog and crafted a brand-new
shopping and checkout experience.”
43
JEFF GOTHELF
“The project took months. And when the work
was complete, we packaged it all up into a
Powerpoint deck. This was a formidable deck –
and it had to be, considering the $600k price tag!
We went over to the client's office and spent the
entire 8-hour day going over each and every pixel
and word in that deck. ”
44
JEFF GOTHELF
“When it was over, the client clapped. (They really
did). We were relieved. They loved it. And we
never looked at that deck again.
Six months after that meeting,
nothing had changed on the client's site.
I don't think they ever looked at that deck again,
either. ”
45
JEFF GOTHELF
“Building a pixel-perfect spec [is] not a way to
make a meaningful difference to a real product
that is crucial to real users.
It's also not the reason that any designer got into
the product design business.
We got in to build valuable products and
services, not to write specs.”
46
JEFF GOTHELF
User-Centred Design
Evaluate
UR team
Understand
4
Build
3
1
Users
Design
2
UXD team
Dev team
INF2191H Winter 2020
UR team
47
Velian Pandeliev
Lean UX process
Research & Learn
Pre-design (!)
Test hypotheses
Update assumptions
Refine or abandon MVP
Do no user research
Formalize key assumptions
Formulate hypotheses
4
1
MVP (!)
Build key features
Create testable object
Do this quickly
Design
3
2
Ideate potential solutions
Match hypotheses
Do not write specifications
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
48
Velian Pandeliev
Lean UX philosophy
Lean UX applies UCD principles in short cycles to bring something
testable out into the world as soon and as frequently as possible.
Instead of a formal research phase, the entire team generates
assumptions about the need/problem the product will solve.
They then determine which assumptions are the most important to
test with users.
Designers and developers work together to create the Minimal
Viable Product in order to validate these assumptions.
Assumptions are malleable and are updated based on user feedback.
INF2191H Winter 2020
49
Velian Pandeliev
Lean UX principles
• People over processes (fast, efficient, frequent cross-team
meetings and critiques)
• Rapid cycles of user feedback that uphold or challenge
assumptions
• Market insights drive change: performance in the world
determines the success of the design
• Promote optimism, empathy, inspiration, shared understanding.
• Enable messy exploration, ambiguity, and permission to fail
INF2191H Winter 2020
50
Velian Pandeliev
Lean UX process: Pre-design
Use any insights you have to generate assumptions, prioritize them,
and declare key hypotheses that you would like to test.
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
51
Velian Pandeliev
Pre-design sequence
• Write a problem statement that briefly defines the user need you
see and your intention for fulfilling it.
• Gather team members and any insights (e.g., prior research)
• Generate assumptions about your solution
• Prioritize assumptions based on risk and confidence
• Define the most crucial assumption to test
• Break it down into feature hypotheses
INF2191H Winter 2020
52
Velian Pandeliev
Problem statement
Your problem statement summarizes your vision for the product as a
whole. Use it to begin discussing key assumptions with your team.
The current state of [domain] has focused primarily on
[customer segments, pain points, etc.]
What existing products/services fail to address is [this gap].
Our product/service will address this gap by [vision/strategy].
Our initial focus will be [this user group].
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
53
Velian Pandeliev
Generate assumptions
Problem statements are built on assumptions about the market.
In the next step, assumptions are formalized by the team.
Assumptions:
• expand on the problem statement
• are plausible and based on the team’s expertise in the domain
• need to be true in order for the product to succeed
• pose a risk to the product’s success if false
INF2191H Winter 2020
54
Velian Pandeliev
Key Assumptions
1. We believe our users have a need to:
2. What problems does our product solve:
3. When and how is our product used:
4. What features are important:
5. How should our product look and behave:
6. The #1 value a user wants to get out of our product is:
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
55
Velian Pandeliev
Proto-personas
A proto-persona is an unvalidated assumed persona that you believe is a
potential user of your product. Treat it as an assumption as well.
• Name, portrait, and role.
• Factors that influence behaviour
(e.g., demographics)
• Needs (things they need to accomplish)
• Obstacles (barriers / pain points)
• Desires (preferences / beliefs)
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
56
Velian Pandeliev
Product risk = shakiest assumption
Prioritize all user and business assumptions based on:
• Risk: how bad would it be if we are wrong?
• Confidence: how much do we know about this?
Formulate one key risk hypothesis to test.
Our biggest product risk is:
We will solve this through:
We will know we are successful when we see the following changes in
customer behaviour:
INF2191H Winter 2020
57
Velian Pandeliev
Feature hypotheses
Break down your risk hypothesis into several feature hypotheses.
We believe that [these users] will [desirable user outcome] using
[this feature] leading to [testable business outcome].
“We believe that busy users with Facebook accounts
will sign up to our portal faster using one-click Facebook signup
leading to an increased user signup rate of 20%.”
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
58
Velian Pandeliev
Lean UX process: design
Ideate, collaborate, focus on the key assumptions.
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
59
Velian Pandeliev
Aside: Ideation
60
ATM for Children
KRISTY CHAN, PHOEBE HOGELAND, GREENLIGHT
INF2191H Winter 2020
61
Velian Pandeliev
Ideation: exploration vs refinement
Exploration wastes
time & effort.
Lean UX has shorter
cycles and no up-front
design specification.
Testing a crazy new
idea is less costly.
Getting the design right
INF2191H Winter 2020
Getting the right design
62
Velian Pandeliev
Ideation
Ideation is a structured process in which a large number of initial
ideas is generated to solve a design challenge.
• Feel free to flail and fail: Don’t worry about having a “good” idea
before you speak up.
• Withhold judgment: Every idea will be useful, by itself or as a
stepping stone to a different idea.
• “Yes, and…”: Build on others’ ideas, combine and steal them.
• Quantity over quality: A larger pool of ideas makes it easier to
find good ones and to let go of“precious” ideas.
INF2191H Winter 2020
63
Velian Pandeliev
Fast idea generator
INF2191H Winter 2020
Approach
Idea
Invert
What if patients were their own doctors?
Integrate
Pay for coffee with your phone.
Extend
Schools can be community hubs after hours.
Differentiate
CAT S60 is a rugged smartphone for the trades.
Add
Uber can deliver food.
Subtract
What if prisons had no locks?
Translate
A library for tools and kitchen utensils.
Graft
Bring paired programming paradigm to design.
Exaggerate
A dating app just for doctors, lawyers and techies.
64
Velian Pandeliev
Lean UX process: build
Create a Minimum Viable Product that demonstrates your product
and can test your key assumptions and riskiest hypotheses.
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
65
Velian Pandeliev
Lean UX: Happy Path
Test the happy path: no error states, no edge cases.
@JOPAS
INF2191H Winter 2020
66
Velian Pandeliev
Lean UX: fidelity
An MVP can illustrate and validate an assumption at any fidelity.
INF2191H Winter 2020
67
Velian Pandeliev
Lean UX process: research & learn
Gather data with your MVP to validate or reject your hypotheses and to
update your assumptions. Have all team roles participate or sit in.
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
68
Velian Pandeliev
Workshop:
Lean UX & Sketching
69
Lean UX Workshop (2%)
Download Lean UX template.
Design a room booking system for the study rooms in the Inforum.
Sequence
• Lean UX (20 min): problem statement & assumptions
• Crazy Eights (5 min): generate 8 idea sketches on a piece of paper
• Brainshare (10 min): discuss your best 3 ideas with the team
• Sketch (20 min): Build sequential storyboard of one key task sequence
INF2191H Winter 2020
70
Velian Pandeliev
Submitting the workshop
You will make one submission as a group.
Your group number on Quercus matches your table number.
Make sure all team members are added to the group.
Submit the following as a group:
• Completed Lean UX template
• Storyboard
• All sketches
• Group Selfie
INF2191H Winter 2020
71
Velian Pandeliev
Lean UX Template (20 mins)
Problem Statement
Assumptions
Risk Hypothesis
INF2191H Winter 2020
72
Velian Pandeliev
Crazy Eights (5 min)
Individually generate 8 ideas on a piece of paper in 5 mins.
"Bad", "rough", "crazy" ideas
okay
Don't refine too soon.
Don't focus on screens
Yes, and…
Quantity over quality
INF2191H Winter 2020
73
Velian Pandeliev
Brainshare (10 min)
Share your best 3 ideas with the rest of the team, one at a time.
Try to converge on one solution.
Decide what is the most unique / beneficial thing of this solution.
Prepare to create a storyboard to convince a client that this is interesting.
INF2191H Winter 2020
74
Velian Pandeliev
Storyboard (remainder)
Converge on one idea!
1. Frame: snapshot
of a key state
Build 4-6 key screens and the actions between them.
2. Title: name each
frame/state
(noun)
3. Action: specify
actions / verbs
taken between
key states
SKETCHING USER EXPERIENCES (2012)
INF2191H Winter 2020
75
Velian Pandeliev
Lean UX Workshop (2%)
Form groups of 4-6 on Quercus by table:
• People
• L0101 W2 Groups
Submit by the end of class:
• Completed Lean UX template file
• Crazy Eights ideation pics
• Sequential storyboard sketch of target interface
• Group selfie
INF2191H Winter 2020
76
Velian Pandeliev
Please:
Return supplies
Restore tables and chairs
Remove garbage
77
Appendix: More Lean UX
Assumptions
78
Business assumptions I
We believe our customers have a need to:
These needs can be solved with:
Our initial customers are (will be):
The #1 value customers want to get out of our service is:
They can also get these additional benefits:
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
79
Velian Pandeliev
Business assumptions II
We will acquire the majority of our customers through:
We will make money by:
Our primary competition in the market will be:
We will beat them due to:
What other assumptions do we have that, if proven false, will cause
our business/project to fail?
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
80
Velian Pandeliev
User assumptions
Who is the user?
Where does our product fit in their work/life?
What problems does our product solve?
When and how is our product used?
What features are important?
How should our product look and behave?
GOTHELF, J., & SEIDEN, J. (2016)
INF2191H Winter 2020
81
Velian Pandeliev