Visual UX specifications

155 views 8:49 am 0 Comments May 6, 2023

Welcome to IFN591 Week 8:
UX Specifications
Agenda
1. Introduction
2. Visual UX specifications:
persona, empathy map,
rich picture, journey
map, scenario, picture
scenario
3. Design brief
4. Assignment report
Bernd Ploderer, Tara Capel 5. Summary and next steps
IFN591 Principles Of User Experience
We will start soon. While you’re
waiting…
1. Post any questions you may
have in the CHAT window
Introduction
Why are UX specifications important?
Defining the user experience problem you want to solve
Assignment 1 Assignment 2 Assignment 3
http://longevity3.stanford.edu/designchallenge/design-thinking-process/
Why do we need to clearly define the
UX problem?
Ensure that
everyone on the
team understands
the issues and
challenges
experienced by
target users and is
on the same page
problem addressig
Why is this important?
Ensure your customers have a
positive experience, stay safe, …

Development
Scope
Design
Testing/Rollout

Cost of design change
Time
Save money $$
The cost of making design changes
https://www.youtube.com/watch?v=HtTUsOKjWyQ
“It’s really hard to design products by
focus groups. A lot of times, people
don’t know what they want until you
show it to them”
“You can’t just ask customers what they
want and then try to give that to them.
By the time you get it built, they’ll want
something new”
So, how do you design technology that satisfies the
needs and desires of your target group
and will not be outdated by the time it is built?
Key Problems with UX Specifications
1) Users rarely know what is possible & can’t tell you what they ‘need’ to
help them achieve their goals
Instead, look at existing activities and context
2) Development and design teams rarely have a unified understanding of UX
needs and problems
Hence, UX research and clear problem definitions / design briefs are needed to get
everyone on the same page
3) Executives, product teams, developers, and stakeholders do not have
time to read, remember, present, or implement detailed written reports
Hence, written reports are often combined with visual UX specifications that make it
easier to act for stakeholders
Please note that your design specifications need to describe the current
experience and problems
(not a solution).
Visual UX
Specifications
Tocommunicate your UX insights in an accessible
manner to stakeholders

Choosing the Right Visual UX Specifications

Organising Principle Key Questions Deliverables
People who use or
could use the product
or service
Who are our users?
How do different groups of people use
our product?
Persona,
empathy
map
C o n t e x t s i n w h i c h
people carr y out
What are the most common reasons people
use our product?
When is our product most and least helpful
to users?
Rich picture,
scenario/ picture
scenario, (journey
map with added
context)
Activities people do
that involve the product
What do users find difficult to do with
our product and what is easy for them?
What would users like to do with the product
that they cannot do?
Picture
scenario,
journey map

activities or use the
product
We recommend you create
2 design specifications that complement each other to present your findings
Persona
Capturing requirements for people
Personas
Pruitt, J., & Grudin, J. (2003). Personas: practice and theory.
Proceedings of the 2003 conference on Designing for user
experiences.
http://doi.acm.org/10.1145/997078.997089
If you try to design a car that pleases everyone,
you end up with a car with every possible feature,
but which please nobody.
By designing different cars for different people
with different specific goals, we are able to create
designs that other people with similar needs to
our target drivers also find satisfying.

Smart
phone:
Mainly for work (calendar, tasks); looking for
apps to make work more efficient; reading
news and technology blogs; syncs his photos
and music from computer to iPhone; some
fun apps like iBeer
Has a Facebook profile and check his friends’
updates, but does not like to publish
personal information online
Occasionally checks smoking cessation
websites and forums for new ways to
effectively quit smoking; does not post
questions or comments on forums because
he does not want to be seen as a failure;
concern about privacy of personal
Social
media:
Quitting
& social
media:

information

Smoking
status:
20 cigarettes a day, first cigarette of
the day within minutes of getting up

Associate
s smoking
with:
Break from work; cope with stress;
also negative experiences like
the stress of not being able to quit
and having his entire life dictated by
addiction (can’t leave house without
cigarettes)
Quitting
status:
Regularly trying to quit since his full
relapse 2 years ago; tried different
methods but growing more
concerned about failure with each
attempt
Get to know Ian
Ian
Age: 35
Occupation: IT Consultant
Lives in North Melbourne
Ian’s story
Ian lives with his fiancé Leanne in North Melbourne. They only recently fulfilled their dream of their own
home, but Ian’s job future is uncertain and the source of a lot of stress. Needless to say that Ian’s stressful
job impacts his relationship with Leanne, and Ian copes with stress and conflicts by lighting up a cigarette.
While cigarettes help Ian to wind down, they are another source of stress for him. Ian is very conscious of his
health and and he feels that he is running out of time to quit before he will suffer from a stroke or from
cancer.
“I know cigarettes are bad for my health. I end up in this sort of a vicious circle, which is: I feel stupid for
smoking; I feel like a cigarette; I feel stupid for smoking; and you just sort of get stuck.”
Ian has tried to quit numerous times. He blames his lack of success on his lack of determination and on being
weak. With every attempt he seems more afraid that he will fail. Hence he does not want to let other people
know that he is even trying.
Ian is regularly checking different smoking cessation websites for effective ways to quit and to cope with
cravings. He is happy to take on advice, but he is reluctant to ask for help because he might be seen as weak.
Ian’s smoking history Ian’s social media use

Personality: Introvert, helpful but does not like
asking others for help, analytic and
reflective, at times edgy and moody
Engaged to Leanne, a nurse at the
Royal Melbourne Hospital
Not very sociable & prefers to spend
time at home; a few mates from
college who barrack for the Kangaroos
Relationship
status:
Social
networks:

Goals: Safe job where his work is valued; quit
smoking to stay healthy
Desires: Likes technological gadgets; enjoys
going to footy matches
Fears: Unemployment; mortgage for the
house; dying prematurely from
smoking-related disease
Detailed persona
For a smoking cessation
app design project
(created by B Ploderer)
1
S
Persona
for shoe
shop
15
http://www.indieg
amegirl.com/buyer
-personas/
What makes a good persona?
1. Is the persona based on interviews with real people?
2. Does the persona
evoke empathy by including a name, a photograph and a product-relevant
narrative?
3. Does the persona appear
realistic to people who deal with target users day-to-day (rather than a
cliché)?
4. Is each persona
unique, having little in common with other personas?
5. Does the persona include
product-relevant goals and include a quotation stating the key goal?
6. Is the
number of personas small enough for the design team to remember the name of each
one, with one of the personas identified as primary?
7. Can the development team use the persona as a
practical tool to brainstorm ideas and make
design decisions?
8. Don’t just make them up! No caricatures/stereotypes. They come from your data.
http://ebiinterfaces.wordpress.com/2010/05/17/what-makes-a-good-persona/
Using Personas in the Design Process
Creating personas helps to establish shared understanding
of users, their perspectives, and needs.
Many templates exist to help you get started, e.g.,
https://xtensio.com/user-persona/
Don’t oversimplify complex behaviours into clichés
Introduce personas to design and development team
through a meeting
Turn personas into posters and hang them up in the office
Use personas in design decisions:
“What would Shereen think about …?”
Update personas regularly based on new research
Don’t stop working with users once you have personas
Empathy Map
Capturing requirements for people
2.
Empathy Maps
Articulate what we know about a particular person
(or a group of people) and help us build empathy
with our end users
1) create a shared understanding between
design team and end users
2) help team members understand the user’s
mindset
3) aid in decision making
4) a first step to in analysing data, e.g., for a
more detailed persona or journey map
https://www.nngroup.com/articles/empathymapping/
Empathy
Map Example
– Buying a
TV
https://www.nngroup.c
om/articles/empathymapping/
Journey Map
Capturing people and activities in context
Journey Map – a brief introduction
https://www.nngroup.com/articles https://youtu.be/2W13ext26kQ
/journey-mapping-101/
What we know about the person??
I
showing process that a person go through)
1. Actor
2. Scenarise
expectations
3.??
4.action, mical sets motions
5.
Opportunities, insight, ownership
3 /
Journey Map
Visual representation of a process that a person goes through in order to
achieve a goal
Based on field research, combining insights from multiple participants
From the perspective of the person within a particular context
Contains information about person, context, phases, activities, experiences, pain
points and opportunities
Identifies a person’s actions, thoughts, experiences, pain points, and opportunities at
different phases of a process (touch points).
A variety of journey map styles exist, e.g.,
current journey vs. prospective journey
Customer journey map vs. service map vs. experience journey maps
Each journey is unique for a specific user experience project
Detailed
journey
map
showing
experience
http://uxmastery.com
/how-to-create-acustomer-journeymap/
Journey Mapping Process
1. Interview people about personal experience or review research data
2. Create your persona and describe the context
3. Write down key moments or phases on post-it notes, e.g., make a phone call to health service
4. Place post-it notes in an order a personal is likely to experience them
5. Add information for each moment or phase: actions, thoughts and questions, experiences (happy
moments), pain points, and opportunities and ideas for design
1. Include direct quotations from your participants
6. Chart a sentiment line so that you can see how their emotional experience changes (ups and downs) with
each phase (optional, but totally worth it)
7. Refine and digitize your journey map: you can use the template provided on the next slide and draw
inspiration from the following websites:
1. http://www.designkit.org/methods/63
2. https://www.atlassian.com/team-playbook/plays/customer-journey-mapping
3. https://uxmastery.com/how-to-create-a-customer-journey-map/
4. https://www.healthcodesign.org.nz/tool-kit/explore/patient-journey-mapping/
5. https://www.nngroup.com/articles/journey-mapping-101/
6. https://medium.com/@harrybr/how-to-run-an-empathy-user-journey-mapping-workshop-813f3737067
Bernd’s Journey Map Template
Lisa’s journey
Introduce your person
Background and demographics
Her aims and expectations specific to your topic
combine data from multiple participants
bullet points are fine
Replace with a real photo
Introduce your
context
Describe the place(s) where the journey
takes place: location, people and
technologies present, …
Add a photo
Phase X Phase Y Phase …

Actions
the thing the person needs to do to move to the
next phase
Thoughts & questions
things the person needs answering before they can
move to the next phase
Experiences
Moments that were memorable, happy, exciting,
insightful, etc.
Pain points
Frustrations and annoyances that spoil the
experience
Sentiment
Ups and downs in the experience
(draw a curve)
Add relevant quotes
from participants
Add relevant quotes
from participants
Opportunities
Ideas that you could implement in a new design,
that address any of the issues identified

Activity: Let’s create a journey map together
What was your journey from getting up to starting your studies
today?
Download the template from Canvas / use sticky-notes on Miro Start
with a brief person based on your research data
1. Add context information
2. Write down key moments or phases on post-it notes, e.g.,
alarm goes off, …
1. Place post-it notes in an order a personal is likely to experience them
3. Add information for each moment or phase:
1. actions, thoughts and questions, experiences (happy moments),
pain points, and opportunities and ideas for design
Rich Picture
Capturing requirements for the wider context
Rich Pictures
Rich pictures are cartoon like depictions of
the primary users/stakeholders in a system,
their interrelationships
and their concerns
Rich pictures help elicit and represent an understanding of
‘problematic’ situations
Monk, S. and Howard, S. (1998) The rich picture: a tool for reasoning about work context.
Interactions 5(2), 21-30
http://doi.acm.org/10.1145/274430.274434
4.
Monk & Howard (1998)
36
Rich Picture of a Gallery Context
Rich Pictures
getting started
first look at the structure in the situation (parts of the situation that change slowly)
next look for elements of process within the situation (e.g. the activities that are going on);
then look for the ways in which the structure and the processes interact.
combine everything that might be relevant to a complex situation.
avoid using words
words only where sketch fails to encapsulates your meaning.
don’t impose any style or structure on your picture.
place the elements on your sheet wherever your instinct prompts.
At a later stage you may find that the placement itself has a message for you.
avoid thinking in general/system/abstract terms.
avoid “The situation is made up of a marketing system and a production system”
include both factual data about the situation and subjective information.
include social roles/expectations regarded as meaningful by those involved.
If you see any conflicts, indicate them.
http://systems.open.ac.uk/materials/T552/pages/rich/rich.html
Scenari
o
Capturing people, activities, and contextual
requirements
IMAGE RATHER THAN TEDT!
stakeholder who is relevant?
different concerne

5.
Scenarios
Scenarios are stories
simple story about people carrying out an activity
informal, ‘natural’, not generalisable
A scenario should
Tell a coherent story
Be described in prose
Portray a complete activity from beginning to end
May Include user actions and system feedback
Thomas was at home and needed and expected to have use of the car to attend an important
evening sporting event (a beach volleyball final). Sue, who had the car with her at work, was
having a very tough day with an important but difficult client who she was dealing with via
email and telephone and was running extremely late. On top of all of this, her boss kept
sticking her head around Sue’s office door with questions. Thomas rings Sue to enquire about
the car. Sue is too overloaded with work related communication to speak, and tersely
terminates the conversation. A series of mobile phone calls ensued between them as Sue
winds up her work for the day and sets-off home in the car; with increasing levels of
frustration and anger. Sue: “In this situations I snap at Thomas and it’s all going downhill.”
Thomas: “If I’d known earlier she was going to be late, I could have made other arrangements
to get to the game.” They agree to meet on a street corner to hasten the hand-over of the car
and so that Thomas can get on his way to his game. As Thomas waits on the street corner, he
wishes he could see where Sue was at that moment and not have to ring her again to find out
if she is approaching. Thomas finally gets hold of the car. “I broke every road rule and got
several speeding tickets, but I got to the game with 10 seconds to spare. Sue: “I felt guilty
knowing he was waiting, but I also had obligations to my boss and the client.”
Scenario
s
Rosson & Carroll (2003) p.18
Strengths of Scenarios
Scenarios
envision design in a flexible way. Ideas can be tried out and can be revised
quickly and easily
are very concrete and able to describe different contexts from a users
perspective
make design activities more accessible using natural language
can be used on every level of design (empathize, define, ideate, prototype,
test design)
can be used in combination with prototypes to integrate prototyping in the
design process or scenarios themselves can be elaborated as prototypes
telling a story.
Picture Scenario
Capturing context, people, and activities
Picture scenarios
Picture scenarios are a combination of
Scenario based design (Rosson and Carroll) – Elements
Personas (Cooper) – Person and context description
Photo novels as integration format
Gestalt Laws for grouping and visualizing elements
Cast List
Thomas
loves his sport
and punctuality
Sue
sometimes
sees mobile
communication
devices as a
burden
Sue’s Boss
seems to have
questions for
Sue when she
needs it the
least
Their Car
is a shared
resource that
has to be
organised
Coordination of
the shared car
Sue, having the car with
her at work, has a very
tough day with an
important but difficult client
who she is dealing with via
email and phone and is
running late. Additionally,
her boss keeps sticking her
head around Sue’s office
with questions.
Thomas is at home and
expects to have use of the
car to attend the badminton
final of his team in 45 min.
I feel guilty
to let him
wait, but I
have
obligations

Does this mean 4.6
% per annum?
Thomas calls Sue on her mobile

Unfortunately – I
double checked
Tom ! –
he needs
the car !!!
Hi Sue – I really have
to leave soon to make
it to the game …
Will this
day never
end?
???
Sue’s boss walks in
Wonder
where
she is?
6
L
What do you mean you
can’t talk now – are
you leaving soon or…?
Sue is overloaded and tersely terminates the conversation

A series of mobile phone calls ensued between them as Sue
sets-off home in the car with increasing frustration and anger.
I ‘ll wait
downstairs
at the street
corner
Huh? O.K.!
But I am in a
traffic jam!
Sue where are you? – I am
running extremely late !!
175 meter
further – is
this precise
enough?

If I’d known earlier, I
could have made
other arrangements
to get to the game.”
Late! I
better
get out
of here
End of
conversatio
n
I wish I knew how
close she is. I don’t
want to have to call
her again
He is not
ringing
AGAIN
!
Sorry – I CAN’T fly !!! If you
would open your eyes you
could see me!
Hooray
!

May I get
what ?

in now or
You don’t have to
ring 3 million times. I
KNEW you were
waiting…
I better get
going. I am
already late
enough
!
Thomas finally gets hold of the car
and drives very fast to the game
I can
still
make
it!
I feel bad –trying to
keep everybody
happy and nobody
appreciates it
Coding of different contextual aspects
Overall context – heading (goal)
Location – photo & description
Social context – actors (inter)
Cognitive context – actors (intra)
Emotional context – facial & onomatopoeic
Temporal context – description
Most contextual aspects have a multiple codes

Photo

 

Photo

 

Photo

 

Photo

Hooray!

Photo

Draw your picture scenario as a storyboard
before you go out and take photos
Template from https://oisdd6.wordpress.com/support-page/storyboard-printable-printablestoryboard-template-free-clip-arts-sanyangfrp-templates/
Different options for camera shots
Greenberg et al. (2012)
Different options for camera shots
Image from:
Greenberg et al. (2012)
Reframing the
problem and vision
Design brief, experience canvas
Prototypes of President Donald Trump’s border wall in San Diego, California. https://
medium.com/nyc-design/reframing-the-problem-200f6c966dfc

Design Brief
A design brief is a guiding document for the entire design process. It spells
out exactly what you, as the UX professional, need to do, and the constraints
within which you need to do it.
A basic design brief describes
all four of these:
1. Problem(s) to be addressed
2. Objectives and goals of the new design
3. Target audience
4. Scope of the project
https://www.webdesignerdepot.com/2011/03/7-basics-to-create-a-gooddesign-brief/
Experience Canvas (a detailed design brief)
Helps to clarify what problem your
project is trying to solve, the target
audience, and criteria to describe
what success looks like
More detailed than a basic design
brief
Best discussed in a team
See Instructions and templates on
https://www.atlassian.com/teamplaybook/plays/experience-canvas
Initial design brief
Assignment Project: Digital Self-care in Everyday Life
Background:
Digital self-care is the intersection of digital technologies and self-care:
“purposeful engagement with digital technologies that promotes holistic
health and well-being of the self”
Real-world partners: Berni Cooper and Nicole Border,
QUT Student Services and Wellbeing
Aim: To better understand self-care practices with digital technologies and
to explore opportunities for digital technology design.
Our diversity
target ofaudience student experiences, are QUT students. including: We are interested in the full
Members of groups such as student clubs, sports teams, eSports,
faith groups, pride groups
Culturally and linguistically diverse students, exchange students,
and international students
Students with significant commitments, e.g., care commitments
(parents, or caring for a family member) or professional
commitments (e.g., athletes, students who work full-time)
Students transitioning in or out of university like, e.g., students in
their first year/last year, mature age students
Assessment Tasks:
1. Prepare a UX research proposal
2. Conduct qualitative research
to better
understand
QUT students’
experiences
with digital self-care
practices
in their everyday life and to
identify interesting design
opportunities.
3. Use the findings as inspiration to
redesign the QUT Wellbeing App.
what’s the prob u addressed??
what
new design should do??
Reframe the design brief based on your
findings & UX specifications
Review your initial design brief, findings and visual specifications
Based on your findings, how do you re-frame the brief, e.g., to
change the direction, select a particular problem or opportunity,
etc.?
Consider the following
1. What is the basic problem?
Who – Who actually has this problem?
What – What is the nature of the problem?
Why – Why is the problem worth solving? What’s the
1.
2.
3.
4.
impact on the customer?
Where – Where does this problem arise?
2. What impact are you trying to have?
3. What are some of the constraints you are facing – due to
context, target audience, existing technologies?
Report: based on your findings and visual UX
specifications, reframe the design brief to make it more
specific (2-3 sentences each)
1. Problem(s) to be addressed
2. Objectives and goals of the new design
3. Target audience
4. Scope of the project
This brief will be the starting point for assignment 3
Activity: create 2
design specifications
for your project
Make a start in class, ask questions, and finish it at
home
1) Choose suitable UX specifications for your project

Organising Principle Key Questions Deliverables
People who use or
could use the product
or service
Who are our users?
What would users like to do with the product
that they cannot do?
Persona,
empathy
map
C o n t e x t s i n w h i c h
people carr y out
What are the most common reasons people
use our product?
When is our product most and least helpful
to users?
Rich picture,
scenario/ picture
scenario, (journey
map with added
context)
Activities people do
that involve the product
What do users find difficult to do with
our product and what is easy for them?
What would users like to do with the product
that they cannot do?
Picture
scenario,
journey map

activities or use the
product
2) Draft UX specifications for your project
Which specifications best highlight
the experiences and problems
identified in your study?
Persona, empathy map
Rich picture, journey map
Scenario, picture scenario
Is it about the person, context, or
activity?
Based on your findings, start
drafting 2 visual
specifications, e.g., a
persona and a journey map
Keep in mind that you need
to visualize the current
experience and problem
(not a solution)

Assignment report
structure and content
Review CRA on Blackboard – Assessment Task 2
Reporting Tips: Topic Sentences
https://www.pinterest.com.au/pin/336362665902293298/
Reporting Tips: Illustrate
Findings with Examples
Describe each theme in general terms
Then Illustrate your theme through examples of
specific experiences:
include a quote from your interview or an
image from your say-do-make research
give the reader context to understand how
this example illustrates your theme
Example from
Ploderer, B., Leong, T. W. (2018)
Manual
engagement and automation in amateur
photography.
Media International Australia,
166
(1), 44-56.
https://doi.org/10.1177/1329878X17738829
Reporting Tips: SUCCES Principles
Simple — keep it simple by finding the core or the main message and
sticking to it.
Unexpected – use the unexpected to grab the reader’s attention e.g. a
knowledge gap, unforeseen consequences, an unusual feedback, etc.
Concrete —the central concept should be easily grasped and
remembered
Credible — it must support interpretation and discussion with
evidence
Emotional — the readers should care about the research by
stimulating interest and highlighting the importance or relevance of the
study.
Story — people enjoy and remember stories, so a good manuscript is
a narrative about the research, with a logical train of thought.
Heath & Heath (2007)
Made to Stick, Random House.
https://www.pexels.com/photo/man-in-red-crew-neck-sweatshirt-photography-941693/
Summary and next steps
Summary
Specifying the target user experience
can be challenging:
Not clear to target users
Different expectations amongst
project team members and
stakeholders
UX research creates too much
information to read and grasp
Visual specifications, e.g., personas and
journey maps, help to communicate the
experiences and problems identified in
UX research in an accessible manner,
together with a written report
The
design brief guides the UX design
process by spelling out the problem,
objective, target audience and objective
Next Steps
You now have all the information required
to complete assessment 2.
1. Finalize your UX research (data
collection, thematic analysis)
2. Create 2 UX specifications and a design
brief
3. Draft your report
Next week:
assignment clinic to
discuss your report
drafts and open
questions