DESIGN

PROCESS
The whole process of design is oriented towards creating the best user
experience by eliminating the information load. It consists of two
parts:

1) Define a user’s problem, and

2) Find the ways and means to solve it.
The double diamond of design

Source: Adapted from The Design Process: What is the Double Diamond?
4
UNDERSTANDING THE PROBLEM SPACE

Explore
• What is the current user experience?
• Why is a change needed?
• How will this change improve the situation?

Articulating the problem space

• Team effort
• Explore different perspectives
• Avoid incorrect assumptions and unsupported
claims
FOUR BASIC ACTIVITIES OF INTERACTION DESIGN

1. Discovering requirements
2. Designing alternatives
3. Prototyping alternative designs
4. Evaluating product and its user experience
throughout

6
A SIMPLE INTERACTION DESIGN LIFECYCLE
MODEL
Exemplifies a user-centered design approach

7
ANOTHER LIFECYCLE MODEL:
GOOGLE DESIGN SPRINTS (KNAPP ET AL., 2016)

Source: Google Design Sprints (used courtesy of Agile Marketing)

8
ANOTHER LIFECYCLE MODEL:
RESEARCH IN THE WILD (ROGERS AND MARSHALL, 2017)

A framework for research in the wild studies

Source: Rogers and Marshall, 2017, p6. (used courtesy of Morgan and Claypool)
9
SOME PRACTICAL ISSUES
 Who are the users?

 What are the users’ needs?

 How to generate alternative designs?

 How to choose among alternatives?

 How to integrate interaction design activities with

other
lifecycle models?

10
WHAT ARE THE USERS’
•NEEDS?
Users rarely know what is possible
• Instead:
 Explore the problem space
 Investigate who are the users
 Investigate user activities to see what can be improved
 Try out ideas with potential users

• Focus on peoples’ goals, usability, and user

experience goals, rather than expect stakeholders
to articulate requirements

11
HOW TO GENERATE ALTERNATIVES
 Humans tend to stick with something that works
 Considering alternatives helps identify
better designs
 Where do alternative designs come from?
 ‘Flair and creativity’: research and synthesis
 Cross-fertilization of ideas from different
perspectives
 Users can generate different designs
 Product evolution based on changing use
 Seek inspiration: similar products and domain, or different
products and domain
 Balancing constraints and trade-offs
12
HOW TO CHOOSE AMONG ALTERNATIVES
 Interaction design focuses on externally-visible and
measurable behavior
 Technical feasibility
 Evaluation with users or peers
 Prototypes not static documentation because behavior is key
 A/B Testing
 Online method to inform choice between alternatives
 Nontrivial to set appropriate metrics and choose user group
sets

 Quality thresholds
 Different stakeholder groups have different quality thresholds
 Usability and user experience goals lead to relevant criteria

13
HOW TO INTEGRATE INTERACTION DESIGN ACTIVITIES
WITHIN OTHER MODELS

 Integrating interaction design activities in lifecycle

models from other disciplines requires careful planning
 Software development lifecycle models are prominent
 Integrating with agile software development is promising
because:
 It incorporates tight iterations
 It champions early and regular feedback
 It handles emergent requirements
 It aims to strike a balance between flexibility and structure

14
What, how and why?
• What is the purpose of the requirements
activity?
 Explore the problem space
 Establish a description of what will be developed

• How to capture requirements once

discovered
 In prototypes or operational
product
 Through structured or rigorous notations
 Different capturing mechanisms emphasize and de-
emphasize different aspects 15
What are requirements?
• A statement about an intended product that specifies
what it is expected to do or how it will perform
• Different forms and different levels of abstraction
• User stories (most prevalent in agile development
contexts)
• Format:
As a <role>, I want <behavior> so that <benefit>
• Example user stories for a travel organizer might
be:
As a <traveler>, I want <to save my favorite airline for all my
flights> so that <I will be able to collect air miles>
As a <travel agent>, I want <my special discount rates to be displayed
to me> so that <I can offer my clients competitive rates> 16
Different kinds of requirements
• Functional:
 What the system should do

• Data:
 What kinds of data need to be stored?
 How will they be stored (for example,
database)?

17
Different kinds of requirements
Environment or context of use:
Physical: dusty? noisy? vibration? light? heat? humidity?
…. (for example, in a hospital)
Social: collaboration and co-ordination, data sharing,
distributed, synchronous or asynchronous, privacy
Organizational: user support, communications structure
and infrastructure, availability of training
Technical: On what technologies will it run or need to be
compatible?

18
Different kinds of requirements
Users — Who are they?
• Characteristics: nationality, educational background,
attitude to computers
• System use: novice, expert, casual, frequent
Novice: prompted, constrained, clear
Expert: flexibility, access/power
Frequent: shortcuts
Casual/infrequent: clear menu paths
• User profile

19
Different kinds of requirements
• Usability goals
• User experience goals
• Different products have different
requirements and may be implemented in
different ways, for example,
trustworthiness

20
Data gathering for requirements
• Interviews, observation, and questionnaires
• Studying documentation:
 Procedures and rules are often written down in manuals
 Good source of data about the steps involved in an activity
and any regulations governing a task
 Not to be used in isolation
 Good for understanding legislation and getting background
information
 No stakeholder time, which is a limiting factor for other
techniques
• Researching similar products:
 Good for prompting requirements
21
Combining data gathering
Direct observation,
indirect observation,
interviews, diaries,
and surveys

Source: Hollis et al (2017), Figure

1. Used courtesy of Taylor and
Francis
22
Combining data gathering
• Diaries and interviews: multiple
information devices
• Interviews, think aloud evaluation, questionnaire,
evaluation of working prototype: memory aid for
traumatic brain injury
• Studying documentation, evaluating other
systems, user observation, and group interviews:
ship’s maneuvering system
• Ethnographic study, interviews, usability tests,
and user participation: tabletop user interface
for genomic data
23
Using probes to engage with users
• Many types of probe:
 Designed to prompt users into action
 For researchers to learn about users
• Cultural probe:
 Wallet containing postcards, maps, camera, photo album, and diary
 Participants asked to answer questions using wallet contents
• Design probe:
 Form relates specifically to particular question and context, for example, Top
Trumps probe

Source: Wallace et al. (2013) Figure 6. Reproduced with permission of ACM Publications
24
.
Using probes to engage with users
• Technology probe:
 Toolkits, mobile phone apps, sensor-based monitoring, for
example, M-Kulinda to alert participants about unexpected
movement at home.
• Provocative probe:
 Technology probe designed to challenge norms and attitudes, for
example, the Box to challenge domestic laundry practices

Source: Raptis et al. (2017). Reproduced

with permission of ACM Publications.

25
Contextual Inquiry
• Part of Contextual Design, but also used on its own to gather
requirements
• One-on-one field interviews (contextual interviews)
 1.5 to 2 hours long
 Focus on daily life at home or work relevant to the project
 Uses a model of master (participant) and apprentice (researcher)
• Four main principles:
Context: Going to the user, wherever they are, and seeing what they
do as they do it
Partnership: User and interviewer explore user’s life together
Interpretation: Observations interpreted by user and interviewer
together
Focus: Project focus to understand to what should be paid
attention
26
Contextual Inquiry
• Interview guided by “cool concepts” divided into two groups
• Joy of life concepts:
 How products make our lives richer and more fulfilling
 Accomplish, connection, identity, and sensation
• Joy of use concepts:
 Describe impact of using the product
 Direct in action, the hassle factor, and the learning delta
• Interview in four parts
 Overview, transition, main interview, and wrap-up
• Following interview, interpretation session
 Contextual design models are created or consolidated
 Most relevant models are chosen by team, out of 10 suggested
27
Brainstorming for innovation
• Include participants from a wide range of
disciplines, with a broad range of
experience
• Don't ban silly stuff
• Use catalysts for further inspiration
• Keep records. Capture every idea,
without censoring
• Sharpen the focus
• Use warm-up exercises and make the
session fun
28
Bringing requirements to life
• Augmenting the basic requirements
expressed as stories, in Volere template, or
in other form
• Personas
 Rich descriptions of typical users, not
specific people
• Scenarios
 An informal narrative story, simple, ‘natural’,
personal, and not generalizable

29
Personas
• Capture a set of user characteristics (user
profile)
• Synthesized from real people based on
user research
• Typical, not idealized
• Bring to life with name, characteristics, goals,
and personal background
 Relevant to product under development
• Good persona helps designer with design
decisions and reminds team about who will use
the product
• Develop a small set of personas with one 30
Example Persona #1

31
Example Persona #2

Developed using Xtensio Templates

32
Scenario for group travel organizer
“The Thomson family enjoy outdoor activities and want to try their hand at sailing
this year. There are four family members: Sky (8 years old), Eamonn (12 years old),
Claire (32), and Will (35). One evening after dinner they decide to start exploring the
possibilities. They want to discuss the options together but Claire has to visit her
elderly mother so will be joining the conversation from her mother’s house down the
road. As a starting point, Will enters an idea they had been discussing over dinner – a
sailing trip for four novices in the Mediterranean. The system supports users to log on
from different locations and use different devices so that all members of the family
can interact easily and comfortably with it wherever they are. The system's initial
suggestion is a flotilla, where several crews (with various levels of experience) sail
together on separate boats. Sky and Eamonn aren't very happy at the idea of going
on vacation with a group of other people, even though the Thomson’s would have
their own boat. The travel organizer shows them descriptions of flotillas from other
children their ages and they are all very positive, so eventually, everyone agrees to
explore flotilla opportunities. Will confirms this recommendation and asks for
detailed options. As it's getting late, he asks for the details to be saved so everyone
can consider them tomorrow. The travel organizer emails them a summary of the
different options available.”
33
Scenarios
• May be textual
descriptions,
animations,
audio or video
• Example
animation
scenarios

Source: Keirnan et al. (2015), Figure

1. Reproduced with permission of
ACM Publications.
34
Scenarios and personas

35
What is a prototype?
• One manifestation of a design that
allows stakeholders to interact with it
• In other design fields, a prototype is a
small-scale model:
 A miniature car
 A miniature building or town

Source: PalmPilot wooden model

© Mark Richards

36
What is a prototype in
interaction design?
In interaction design, a prototype can be (among other
things):
• A series of screen sketches
• A storyboard, for example, a cartoon-like series of scenes
• A PowerPoint slide show
• A video simulating the use of a system
• A lump of wood (for instance, the PalmPilot)
• A cardboard mock-up
• A piece of software with limited functionality written in the
target language or in another language
Why prototype?
• Evaluation and feedback are central to
interaction design
• Stakeholders can see, hold, and interact with a
prototype more easily than a document or a drawing
• Team members can communicate effectively
• Ideas can be tested out
• Prototyping encourages reflection: an
important aspect of design
• Prototypes answer questions and support
designers in choosing between alternatives

38
Low-fidelity Prototyping
• Uses a medium which is unlike the final medium, for
example, paper or cardboard
• Is quick, cheap, and easily changed
• Examples:
 Sketches of screens, task sequences, and so on
 ‘Post-it’ notes
 Storyboards
 ‘Wizard-of-Oz’

39
Storyboards
• It is a series of sketches showing how a
user might progress through a task
using the product
• Often used with scenarios, bringing in
more detail and a chance to role play

40
Example storyboard

41
Sketching
• Low-fidelity prototyping often relies
on sketching
• Don’t be inhibited about drawing
ability —
Practice simple symbols

14
Prototyping with index cards
• Index cards (3 x 5
inches)
• Each card
represents
one element of
interaction
• In evaluation,
can step through
the cards
15
‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a computer,
but a human is responding to output rather than the
system
• Usually done early in design to understand users’
expectations
• What is ‘wrong’ with this approach?

User

>Blurb blurb
>Do this
>Why?

44
High-fidelity prototyping
• Uses materials that you would expect to be in the
final product
• Prototype looks more like the final system than a
low-
fidelity version
• High-fidelity prototypes can be developed
by integratingexisting hardware and software
components
• Danger that users think they have a
complete
system…see compromises 45
Compromises in prototyping
• Prototyping involve compromises
• For software-based prototyping, maybe there is a slow
response? sketchy icons? limited functionality?
• “In the wild” prototypes operational but not
necessarily
robust
• Two common types of compromise:
Horizontal: Provides a wide range of functions, but
with little detail
Vertical: Provides a lot of detail for only a few
functions
• Compromises in prototypes must not be
ignored. Product needs engineering 46
Conceptual design
• A conceptual model is an outline of what people
can do with a product and what concepts are
needed to understand and interact with it
• Understand problem space and current
requirements; empathize with users
• Creativity and brainstorming
techniques
• Mood board may capture desired
feel
• Consider alternatives: scenarios and 47
Building scenarios

48
Empathizing with users

The Third Age Suit

Source: Ford Motor Company

49
Choosing an interface metaphor
• Interface metaphors combine familiar knowledge with
new knowledge in a way that will help the user
understand the product.
• Three steps: understand functionality, identify potential
problem areas, and generate metaphors
• Evaluate metaphors:
 How much structure does it provide?
 How much is relevant to the problem?
 Is it easy to represent?
 Will the audience understand it?
 How extensible is it?

50
Considering interaction
and interface types
• Which interaction type?
 How the user invokes actions
 Instructing, conversing,
manipulating, exploring, or
responding
• Do different interface types provide
insight?
 Shareable, tangible, augmented
reality, and so forth
51
Expanding the initial conceptual model
• What functions will the product perform?
 What will the product do and what will the human do?
• How are the functions related to each other?
 Sequential or parallel?
 Categorizations, for example, all actions related to
privacy on a smartphone
• What information is needed?
 What data is needed to perform the task?
 How is this data to be transformed by the system?

52
Concrete design
• Difference between conceptual and
concrete is emphasis
• Many aspects to concrete design
 Color, icons, buttons, interaction devices, and
so on
• User characteristics and context
 Inclusiveness, input, and output modes
• Accessibility
 Web Content Accessibility Guidelines
• Cross-cultural design
 Language, colors, icons, and information
architecture 53
Generating prototypes
• Generate a storyboard from a scenario
 Break down scenario into steps
 Create a scene for each step
• Sketching out a storyboard prompts designers
to think about design issues
• Generate a card-based prototype from
a storyboard or from a use case
 Consider each step in use case – what interaction
element is needed
 Draw a card that captures it
54
Generating storyboard

55
Generating card-based prototype

56
Explore the user’s experience
• Use personas, card-based prototypes,
or stickies to model the user experience
• Visual representation called:
 Design map
 Customer or user journey map
 Experience map
• Two common representations
 Wheel
 Timeline

27
Additional
reading
https://medium.com/nyc-design/ux-ui-design-process-for-beginner-
753952bb2241

REFERENCES

• Rogers, Sharp and Preece, 2015. Interaction Design Beyond Human-

computer
Interaction. Wiley.

• https://www.altexsoft.com/blog/uxdesign/ux-vs-ui-design-stages-participants-
roles-and-skills/