+
The Design
Process
CSC2002S Melissa Densmore, UCT
+ Design A key HCI concept: Starting with an
initial needs assessment and design,
2
Cycle: you build better prototypes based on
the evaluation of the previous one
Design
Evaluate &
Analysis
Prototype
+ 3
Design: Define the Problem/Goal
Choose the appropriate framing, e.g. “helping cyclists to drink
coffee safely” rather than “design bicycle cup holders”
Avoid inserting a preconceived solution into the problem.
Another example:
(A)problem statement is “Getting data to download books”
(B)problem statement is “Being able to download books in a world
where data bundles are expensive and limited”
Here (A) presumes a solution of getting the data, while (B) labels it as
context, opening up other possible approaches.
+ 4
Understand your users
Where are
they?
What are
their
constraints?
Who are
they?
+ Design: Create Personas 5
Easier to generalize about
fictional people
What would Lisa Simpson
do?
General users have too
many conflicting goals
Specific personas have
clear, well-articulated
goals.
+ 6
Personas
One method of analysis is to develop personas that characterize
perspectives of different users.
What makes a good persona? They need a name (a fictitious one),
so they are relatable, perhaps a catch phrase to help capture what
makes them unique. They need specific goals. And they have
specific characteristics – e.g. what phone they use, how often they
use it, how much data they use regularly, favorite apps, etc. More
details helps you better empathize with the user.
Why personas? Why not a list of requirements for a general user?
The “general user” is hard to identify with – and can be confusing –
e.g. goals for expert and novice/infrequent users may be quite
different. Personas help to capture those differences and to clarify
your design plan.
Aim to clearly identify your target user; what are their goals, etc.
+ Stretch mental muscles
Loosen up with simple games
Do homework (toy store? expert
videos? chocolate room?)
Seed with related ideas/objects
Get physical
Brainstorming Sketch
Make models
As an exercise, Act out
imagine IDEO rules
brainstorming how to One conversation at a time
help students and Stay focused
staff find UCT venues Encourage wild ideas
Defer judgment
Build upon ideas from others
Aim for Quantity & hope for
Quality
Task flow
A series of steps to get a specific job done or achieve a specific goal.
User flows
A user flow is a story, a path the user
follows, including their decision
points. A user flow often involves a
specific personas and scenarios.
A task flow is more focused on a
specific task, and is a linear process,
whereas a user flow is more focused
on a specific user and is seldom linear
as it can have different branches
UX task flows vs. user flows, as demonstrated by
pancakes
[Link]
demonstrated-by-pancakes-896e78a98026
Task flow
Create a
page on
our website
to elevate
the use of
our boxed
mixes
User flow
EMPATHY
+ 16
Activity – do a Crazy Eights Sketch
[Link]
+ 17
What Makes a Sketch “sketchy”?
The top left is
clearly a
sketch, but
not the top
right.
A sketch is a
rough
drawing,
showing little
detail, yet
conveying the
idea one has
in mind.
+ Tips for sketching 18
Don’t stress about quality or if you can draw a straight line, stick figures
are totally fine!
Use squiggles instead of text, boxes instead of pictures
Don’t think, just draw (fast) – give yourself a time limit
You don’t have to finish every picture!
Image credit: [Link]
+ 19
Iteration
Christi Hagen, UX Project with Eaton Corporation, [Link]
20
+ 21
Prototype
Build something tangible
so you can get feedback
Experiment with
alternative designs
(cheaply!)
Fix problems with concept and
flow before code is written
Keep the design centered on
the user!
+ 22
Types of Prototypes
low fidelity high fidelity
manual interactive
+ State Transition 23
The figure
below each
sketch
shows how
users
proceed
from screen
to screen.
The screen
in the sketch
above is
shown in
yellow each
time.
+
24
Movie Storyboards
The Graduate (1967)
Katz 1991
25
By s250401
[Link]
+ 26
Tangible Materials: Lo-Fi
Heavy white paper (large!)
Index cards
Post-it Notes
Tape, gluestick, correction
tape
Pens & Markers
Transparencies, tracing paper
Playdough, Legos
Scissors, x-acto knives
The Leimert Phone Co. IML 404: Tactical Media
[Link] 27
Melissa Densmore, UCT CSC2002S
+ 28
Constructing the Prototype
Set a deadline
Don’t think too long – build it!
Draw a window frame on large paper
Draw larger – but keep the same aspect
ratio
Put different screen regions on cards
Anything that moves, changes
appears/disappears
Use squiggles to indicate text if necessary
Miiverse cardboard prototype
Kazuyuki Motoyama
Ready response for any user action
Nintendo
Pull-down menus
Screen transitions [Link]
m/2014/10/the-skeptics-guide-to-
Use photocopier to make many versions low-fidelity-prototyping/
29
Vivien J. Lim, The CraftFinder: Unconventional Search
[Link]
+ 30
Interactive Digital Prototypes
InVision
FIGMA
Sketch
Powerpoint/Keynote
FluidUI
… and many others
+ 31
Why not just Hi-fi?
DistortPerceptions of User
Formal representation
indicates “finished” nature
People comment on color,
fonts, alignment
Discourages major changes
Testers don’t want to change a
“finished” design
Designers don’t want to lose
effort put into the design
