User Experience Design Process

Module 3

116U01E734
User Experience Design

July-Dec 2024
Module 3: UX Design Process 1
 User Research and Journey
• Defining the UX Design Process and its
Methodology, Understanding user needs, Flow
chart, Six stages of UX Design process.
• The four quadrants of empathy map,
emotional mapping using an empathy map,
Design Thinking, Wicked problems, Ideation.

Module 3: UX Design Process 2

 Defining
UX Design Process • Research
• Design
• Prototype
• Validate

Module 3: UX Design Process 3

 Defining
UX Design Process
• Research and define problem
– Understand the users’ needs
– User Centric Design
• Involves speaking to or
observing real users (or people
who represent your target users)
to figure out what problems they
have and what they desire and
require from a solution
– Qualitative
• which involves learning about
users’ thoughts, feelings and
opinions
– Quantitative
• measurable data such as how
many times a user clicks on a
certain button or how long it
takes them to complete a
particular task

Module 3: UX Design Process 4

 Defining UX Design Process
• Define the user problem
– a short summary of the problem you’re going to
design a solution for
– To understand approach to solve the problem,
problem statement is divided into a series of
“How Might We?” questions.

Module 3: UX Design Process 5

 Defining
UX Design Process
• Design
• Come up with potential solutions
to user problem
• Choose one solution that is most
feasible and most likely to meet
the users’ needs bringing to life by
designing
• Might include sketching out initial
ideas for how the new feature will
work considering things like:
– what functionality it will provide
– where it’ll sit in the app
– how the user will get to it.

Module 3: UX Design Process 6

 Defining
UX Design Process
• Design
• After the initial ideas sketched out the information
about architecture of the new feature (i.e. how it
will be structured and organised in terms of
content and information) is consider
• User flows, a chart or diagram which depicts the
path a user will take to complete a certain task is
mapped out
• For new features, create user flows to determine
how the user will complete tasks is created,
• Create wireframes (very low-fidelity wireframes) or
digitally using a variety of wireframing tools are
created to further firm up the design of your new
feature.

Module 3: UX Design Process 7

 Defining UX Design Process
• Prototype
• After laying out the blueprint for new product or
feature, the details of the design are fine tuned
by creating a more lifelike model of how the
product will look and function.
• A simulation that shows how users will interact
with the finished product.
• Can be interactive and clickable, allowing
stakeholders (and sample users) to interact with
them as if they’re a live product.

Module 3: UX Design Process 8

 Defining UX Design Process
• Prototype
• The purpose is to give something to the
user to test before spending time and
money in developing design into a living
and breathing product.
• Enables to make sure that the solution
proposed is user-friendly and accessible.
• Ensures that users are able to interact with
it in the way originally intended.

Module 3: UX Design Process 9

 Defining
UX Design Process

Module 3: UX Design Process 10

 Defining UX Design Process
• Validate
• Test designs to make sure they’re effectively
solving the user problem and that they’re a
joy to interact with.
• This step in the process requires UX testing
(or usability testing) on real or representative
users.
• Gives the chance to identify problems with
designs and fix them before development,
ultimately saving time, money and
disgruntled users.
Module 3: UX Design Process 11
 Defining UX Design Process
• Validate
• UX testing allows to validate or invalidate
designs, determining whether to move
forward to the development stage or
return to the design stage to make
adjustments..

Module 3: UX Design Process 12

6 Stages of UX Design Process

Module 3: UX Design Process 13

 6 Stages of UX Design Process
1. Defining and understanding your product
– Main focus is to define how the final product should
work and how it solves the users' problems.
– Interviews with key stakeholders are a great way to get
the project started.
– This includes talking with management across
departments—from sales, to finance, to marketing, and
more.
– Having these essential conversations helps UX designers
identify business goals, and enables them to focus on
building UX designs that help hit them.

Module 3: UX Design Process 14

Conducting product and in-depth
user research

Module 3: UX Design Process 15

 6 Stages of UX Design Process
2. Conducting product and in-depth user research
– Identify specific user issues and problem areas
– Learn about what needs improving, directly from users

Types of UX research conducted:

– Qualitative: this type of UX research returns insights that can
be observed but not computed
– Quantitative: this type of UX research returns numerical
insights, such as time taken to complete a task
– Moderated: in this type of research the researcher is present
– Unmoderated: in this type of research the researcher is
absent

Module 3: UX Design Process 16

 6 Stages of UX Design Process
Different UX research techniques used to
understand user’s experience:
• User interviews:
– Involves communicating directly with users to hear their
thoughts on product.
– Helps uncover key insights, and can help with the
development of user personas.
• Usability testing:
– Involves testing a design using real users.
– Typically involves getting users to perform a task, then
asking them questions about the experience.

Module 3: UX Design Process 17

 6 Stages of UX Design Process
Different UX research techniques used to understand user’s
experience:
• Heatmaps and click testing:
– Involves analyzing how users interact with product or website.
– Gives insights into where they’re looking on the product site, and how
more easily be guided to performing a desired action.
• Surveys:
– Enables to gather insights on a wide variety of business-related topics.
– Give the opportunity to share their thoughts in a low-pressure
environment.
• The best methodology depends on what developers are
looking to uncover
• Is it general feedback you’re after?
• Need to find insights on how to improve an existing feature?
Module 3: UX Design Process 18
 6 Stages of UX Design Process
3. Analyzing research results

Module 3: UX Design Process 19

 6 Stages of UX Design Process
3. Analyzing research results
– Analyze information to highlight the key takeaways from
research
– How to use them in the design phase to test design
concepts later on
– Look to identify pain points
– From Qualitative research: Quantify the levels of
satisfaction for appropriate understanding
– From Quantitative research: Understand number (time
spent to analyze information, percentage of revisits etc.)
– Develop user journeys maps to visualize how user
interacts with product, to visualize the user flow and
experience and identify friction points to resolve.
Module 3: UX Design Process 20
 6 Stages of UX Design Process
4. Designing your ideal product
• Ready to develop new-and-improved
product, feature, or user flows
• Consider creating wireframes and prototypes
—these enable to test designs before
investing too much time and energy into
building them
• Skelton Plane (of 5 S planes)

Module 3: UX Design Process 21

 6 Stages of UX Design Process
4. Designing your ideal product
• Wireframes
• A visual creation designed to represent the
skeletal framework of your design.
• Enables to give an idea of what is being built,
without having built it.
• Used to test information architecture,
navigation functions, and more.

Module 3: UX Design Process 22

 6 Stages of UX Design Process
4. Designing your ideal product
• Prototypes

Module 3: UX Design Process 23

 6 Stages of UX Design Process
4. Designing your ideal product
• Prototypes
– After wireframe is designed and tested create a
prototype.
– Are closer to the final version of design
– Enable to test interaction and functionality
– Follow some UX design principles that can help
ensure building a great product.

Module 3: UX Design Process 24

 6 Stages of UX Design Process
5. Testing and noting your findings
A/ B Testing

Module 3: UX Design Process 25

 6 Stages of UX Design Process
5. Testing and noting your findings

Module 3: UX Design Process 26

 6 Stages of UX Design Process
5. Testing and noting your findings
– Use different user testing methods to
validate design and understand whether
insight-driven developments are actually
meeting users’ needs

Module 3: UX Design Process 27

 6 Stages of UX Design Process
6. Iterate and continue for relevant processes

Module 3: UX Design Process 28

 6 Stages of UX Design Process
6. Iterate and continue for relevant processes
– UX research and design is a never-ending cycle
– there’s always room for improvement.
• Because:
– Product and users will likely change over time,
– As a business grows need to keep offering a
high-quality user experience increases
– Every change made to the product should be
made with users in mind—and that’s done with
UX research.

Module 3: UX Design Process 29

 User Design Process: Empathy map

• A square
divided into
four
quadrants
with the
user or
client in the
middle

Module 3: UX Design Process 30

 UX Design Process
• Empathy map:
– A collaborative visualization used to articulate what we know about a
particular type of user.
– Used throughout any UX process to establish common
ground among team members and to understand and
prioritize user needs
– In user-centered design, empathy maps are best used
from the very beginning of the design process.
• An efficient tool used by designers to:
– understand user behavior
– visually communicate those findings to colleagues
– unit the team under one shared understanding of the user
An attempt to limit miscommunication and
misunderstanding about target audiences,
including customers and users
Module 3: UX Design Process 31
 UX Design Process
• Empathy map:
• During user research a lot about your
users is learnt by analyzing
– what they say
– What they do
– through more subtle clues like body
language and facial expressions.
An empathy map visualizes all these
findings and present the data gathered
about users during the research phase in a
condensed, easily digestible format
Module 3: UX Design Process 32
 Empathy Maps
• The four empathy map quadrants look at what the
user says, thinks, feels, and does.

• Says:
– This section contains direct quotes from the user that have
been gathered from the research phase or previous data.
• Thinks:
– it is more focused on what a user is thinking and doesn’t
choose to say out loud.
– Use qualitative research to ask what matters to the user and
what is on their mind.
– Looking at why they might be hesitant to share their
thoughts out loud can reveal even further insight into the
user and how they relate to the product or experience at
hand
Module 3: UX Design Process 33
 Empathy Maps
• Feels:
– This section addresses the user’s
emotional state and answers questions
like “What is the user feeling during
this product experience?” and “What
worries or excites the user?”
An easy way to organize this information is to list the
emotions being elicited followed by a short description
of what is making the user feel this way. For example;
“Overwhelmed—too many decisions to make,” or,
“Anxious—doesn’t want to waste their time.

Module 3: UX Design Process 34

 Empathy Maps
• Does:
– captures what the user
physically does and how
they do it
– what actions does the user
take and how do they take
them?

Module 3: UX Design Process 35

 Empathy Maps
• Merits:
• Helps us understand our user’s needs and goals in a
more accurately and organized way.
• Allows to see the complexity of their needs at times
(for example, when they say one thing and do
another), and find solutions that meet them where
they are.
• Be read and understood quite easily, making them a
great tool for communicating information about the
user to other members of the design team.

Module 3: UX Design Process 36

 Empathy Maps
• Merits:
• It’s critical to help others on your team and in your
company to cultivate a deeper understanding of the user’s
behaviors and empathy for their needs.
• Ensures that users’ needs will take centerstage in design
decision making, since everyone contributing to the
product’s development can work to serve the same set of
personas that reflect the same set of needs and goals.
• Be used to collect data directly from the users.
• Used alongside user interviews, survey answers, etc., you
can also have a user fill in an empathy map themselves.
This often reveals aspects of the user that may have
remained unsaid or Module
not thought of.
3: UX Design Process 37
 Empathy map
• Limitations:
• Empathy mapping may grow with the field; however,
it isn’t a replacement for journey mapping, scenarios,
or user flows—all of which play an equally important
role in the design process
• While empathy mapping is a cost-effective and easily
transmittable way to create for and cater to the user, it
cannot stand alone

Module 3: UX Design Process 38

 Empathy Maps
• Across the quadrants in Empathy map:
– Some of these quadrants may seem ambiguous or
overlapping- it may be difficult to distinguish between
Thinks and Feels
– if an item may fit into multiple quadrants, just pick
one
– Encounter inconsistencies —seemingly positive actions
but negative quotes or emotions coming from the
same user
– 4 quadrants exist only to push our
knowledge about users and to ensure we
don’t leave out any important dimension.
Module 3: UX Design Process 39
 Empathy Maps
• One User vs. Multiple-Users
– Empathy maps can capture one particular user or
can reflect an aggregation of multiple users.
– One-user (individual) empathy maps are usually
based on a user interview or a user’s log from a
diary study

Module 3: UX Design Process 40

 Empathy Maps
• Aggregated Empathy Maps
– Represent a user segment, rather than one
particular user.
– Usually created by combining multiple
individual empathy maps from users who
exhibit similar behaviors who can be grouped
into one segment.
– The aggregated empathy map synthesizes
themes seen throughout that user group and
can be a first step in the creation of personas.
– Can be one way to visualize what we know
about a persona in an organized, empathetic
way
Module 3: UX Design Process 41
 Empathy Maps
• Aggregated Empathy Maps
– Can also become ways to summarize
other qualitative data like surveys and
field studies
– Can be used to communicate a persona,
instead of the traditional ‘business card’
approach.
– As more research is gathered about that
persona, can add new insights or
remove those that have changed or
been invalidated.

Module 3: UX Design Process 42

 Empathy map creation
• From the given actions/ observations, classify into 4
quadrants of empathy map (Says, Thinks, Feels ad Does)

1. Where should I start?

2. What is the best for me?
3. Fear
4. Unsure to trust
5. Checks the website
6. Why is this so hard?
7. I want something reliable
8. Excited
9. Postpones big decisions More research
Module 3: UX Design Process 43
 Empathy map creation
• From the given actions/ observations, classify into 4
quadrants of empathy map (Says, Thinks, Feels ad Does)
10. Postpones big decisions More research

11. Lists Pros and Cons

12. Compare products
13. What else am I missing?
14. What size is best?
15. Asks friend
16. What brand do you like?
17. Where should I start?
18. What is the best for me?
19. Fear
Module 3: UX Design Process 44
 Empathy map creation
• From the given actions/ observations, classify into 4
quadrants of empathy map (Says, Thinks, Feels ad Does)

20. Unsure to trust

21. Checks the website
22. Why is this so hard?
23. I want something reliable
24. Excited
25. Postpones big decisions
26. More research
27. Lists Pros and Cons
28. Compare products

Module 3: UX Design Process 45

 Empathy map creation
• From the given actions/ observations, classify into 4
quadrants of empathy map (Says, Thinks, Feels ad Does)

29. What brand do you like?

30. May be this isn’t the best
31. Anxious
32. Wasting too much time in searching?
33. Over –whelmed looking at the features
34. Do they think I am stupid?
35. What else am I missing?
36. What size is best?
37. Asks friend

Module 3: UX Design Process 46

UX Design Process
Sample Empathy Map

USER “A”

47
Module 3: UX Design Process
 Can take long Problems are
time to never solved
evaluate completely Every
solutions Problem is
Solutions are unique
not right/
wrong but
better /
worse There is no
unique
Eevry
Wicked solution
solution
spreads
Problem
through out
systems Multicasual,
Multiscalar
and
Every Wicked interconnected
Problem Multiple
connected to stackholders
others with
Allowing
multidisciplina conflicting
ry activities agendas
 Wicked problems

1. Problem is never solved Completely

– User Interfaces, systems evolve with time as
technology, requirements, users’ expectations may
change over time; hence the user experience
– With evolution different issues may arise hence
requires different solutions

Module 3: UX Design Process 50

 Wicked problems

2. Every Problem is unique

– NO two systems and hence solutions are similar
– Though UI design may follow a pattern, problems
lead by

Module 3: UX Design Process 51

 Wicked problems

3. There is no unique solution

– Though the steps and pattern to solve a problem are
well researched and practice NO unique solution
exists
– User Interface design is very creative work and will
vary from designer to designer based on the
experience, ability, availability of technology, cost,
time, interests of various stake holders

Module 3: UX Design Process 52

 Wicked problems

4. Multi-scalar, Multi-causal, interconnected

• Most of the problems are dependent on
various factors
• such scope could be local. Regional or global
• more than one factors may affect at a time
• Depends upon number of other factors such as
time, circumstances, educational background
etc.

Module 3: UX Design Process 53

 Wicked problems

5. Multiple stakeholders with conflicting agendas

• Various stakeholders may expect totally
contradicting outcomes and hence satisfying
all of them or any of them at all times is not
possible

Module 3: UX Design Process 54

 Wicked problems

6. Allowing multidisciplinary activities

• The solution may involve application of various
domains such as psychology, technology,
accounting and finding out team members having
background with such a vast variety of disciplines
is difficult

Module 3: UX Design Process 55

 Wicked problems

7. Every wicked problem is connected to other

• The problems are interlinked and if you try to
solve one the other may cropup

Module 3: UX Design Process 56

 Wicked problems

8. Every solution ramifies (spreads) throughout

the systems
• The suggested solution may have effect on other
part of the system
• Selecting appropriate solution is difficult

Module 3: UX Design Process 57

 Wicked problems

9. Solutions are not right/ wrong but better/

worse:
• All the solutions provided will have some merits
and limitations in the given constraints and hence
no solution will be right or wrong, the degree to
which the option can solve the problem may vary
and hence the user experience

Module 3: UX Design Process 58

 Wicked problems

10. Can take long time to solutions

• Solving the problem in the first approach may not
be possible
• The evolution is the system through number of
iterations may provide the expected results and
hence the user satisfaction may increase over time
if appropriate steps are taken for improving the
system

Module 3: UX Design Process 59

 Wicked problems
1. Problem is never solved Completely
2. Every Problem is unique
3. There is no unique solution
4. Multi-scalar, Multi-causal, interconnected
5. Multiple stakeholders with conflicting agendas
6. Allowing multidisciplinary activities
7. Every wicked problem is connected to other
8. Every solution ramifies (spreads) throughout the
systems
9. Solutions are not right/ wrong but better/ worse
10. Can take long time to solutions
Module 3: UX Design Process 60
Design Thinking

Module 3: UX Design Process 61

 Design Thinking
• “A human-centered approach
to innovation that draws from
the designer's toolkit to
integrate the needs of people,
the possibilities of technology,
and the requirements for
business success.”

• Non-linear, iterative process

that teams use to understand
users, identify problems, and
create solutions

• Often used to address ill-

defined or unknown problems
Module 3: UX Design Process 62
 Design Thinking
5 Stages of the design thinking process:

1. Empathize:
o Understand the needs of the users by conducting
research, observing, and consulting with them.
o Helps teams put themselves in the users' shoes and
understand their experiences, motivations, and
problems.
2. Define:
• Identify the needs and problems.

3. Ideate:
• Generate ideas via brainstorming or worst possible
idea.
Module 3: UX Design Process 63
 Design Thinking
Stages of the design thinking process:

4. Prototype:
• Transform the idea into a tangible solution by building
a product that tests ideas and changes.
• Can include mock-ups of every feature and interaction
in the final product, allowing teams to check if the idea
works and verify the user experience.

5. Test:
• Test the solution.

Module 3: UX Design Process 64

 Wicked problems

• “A social or cultural problem that is difficult or

impossible to solve because of its complex and
interconnected nature”
– because
• often ill-defined
• information is confusing
• involve stakeholders with different perspectives
• have no "right" or "optimal" solution

Wicked problems cannot be solved by the application

of standard methods as they demand creative solutions
Module 3: UX Design Process 65
Ideation.

Module 3: UX Design Process 66

 UX Design Process
• Empathy map:

• , emotional mapping using an empathy map,

Design Thinking, Wicked problems, Ideation.

Module 3: UX Design Process 67

 UX Design Process
• The four quadrants of empathy map,
emotional mapping using an empathy map,
Design Thinking, Wicked problems, Ideation.

Module 3: UX Design Process 68

 References
• https://uxcel.com/blog/6-steps-of-the-ux-design-
process
Last accessed on July 31, 2024
• https://maze.co/guides/usability-testing/method
s/
Last accessed on August 5, 2024
• https://careerfoundry.com/en/blog/ux-design/w
hat-is-an-empathy-map/#:~:text=Essentially,%20
an%EE%80%80%20empathy%20map%EE%80%8
1%20is%20a%20square%EE%80%80
Last accessed on August 13, 2024
• https://www.nngroup.com/articles/empathy-ma
pping/ Module 3: UX Design Process 69