UX Design:

Strategy & Framework

 SESSION
OVERVIEW

Basics of UX UX Design process Wireframing

Responsive website
User research AI Tools
design
Interaction Design
 What is UX?
“User Experience Design” is often used interchangeably with
terms such as “User Interface Design” and “Usability.”
However, while usability and user interface (UI) design are
important aspects of UX design, they are subsets of it.
“No product is an island. A product is more than
UX design is not about how the service or product looks – it is
the product. It is a cohesive, integrated set of
solely focused on the actual experience that the user has with
the product. This could be regarding how easy the checkout experiences. Think through all of the stages of a
process is online, or whether your online banking app makes it
product or service – from initial intentions through
easy for you to manage your money.
final reflections, from the first usage to help,
A UX designer is concerned with the entire process of service, and maintenance. Make them all work
acquiring and integrating a product, including aspects of
branding, design, usability and function. It’s a story that begins together seamlessly.”
before the device is even in the user’s hands.
— Don Norman, inventor of the term ‘User

Experience’
Can you spot good & poor applications of

UX Design around us?

Classic egs of Bad UX
 Egs of Good UX

Intuitive design due to good Faucet handles are color Metro ticket system has poor
application of design principles & coded to indicate hot & cold application of design principles, but
color theory in car buttons temperature modes it still managed to be user-friendly
 Egs of Good UX in Websites

AirBnb Website Paypal Website

 ROLE OF A UX DESIGNER

A UX designer’s typical tasks vary but often include

user research, creating personas, designing
wireframes and interactive prototypes, and testing
designs.
These tasks can vary significantly from one
organization to the next. Still, they always demand
designers to be the users’ advocates and keep their
needs at the center of all design and development
efforts.
That’s also why most UX designers work in some form
of user-centered work process and keep channeling
their best-informed efforts until they address all of the
relevant issues and user needs optimally.

© Interaction Design Foundation, CC BY-SA 3.0

 Design Process

https://www.getadigital.com/blog/why-ux-is-important
 How does a real time UX Design Process look like ?

https://www.bowmast.com/approach/
 Psychology to build Engaging UX
Design psychology is a combination of neuroscience, cognitive
psychology, social psychology, and human-computer interaction
that approaches user experience design through the lens of human
behavior.
By understanding how different psychological principles influence
human behavior, we can design your products to elicit specific
responses and actions from our target users.

Egs of its Application:

 UX LAWS
Aesthetic – Usability effect
Aesthetically pleasing design is often perceived as more
usable by users, as it creates a positive response and
leads them to believe the design works better. This makes
people more tolerant of minor usability issues in products
or services.
Doherty Threshold
Productivity increases when computers and users interact
at a pace of less than 400ms, ensuring no waiting time.
System feedback should be provided within 400ms to
keep users' attention and increase productivity. Animation
can visually engage users while background processing
occurs, and progress bars make wait times tolerable.
 UX LAWS
Fitts’s Law Goal-Gradient Effect

The acquisition time of a target depends on its distance
and size. Touch targets should be large enough for users
to accurately select them. To make an action more
selectable, make it larger and position it in a easily
accessible location.
The closer users are to a goal, the faster they work towards
achieving it, and providing clear progress indications can help
motivate them to complete tasks.
 UX LAWS
Hick’s Law
Decision time increases with choice complexity. To increase
response time, minimize choices, avoid overwhelming users by
highlighting recommended options, and avoid simplifying to
the point of abstraction.
Jakob’s Law
Users spend most of their time on other sites, resulting
in a preference for sites that function similarly to
familiar ones. By leveraging existing mental models, we
can create superior user experiences, allowing users to
focus on tasks rather than learning new models.
 UX LAWS
Miller’s Law
Use chunking to organize content into more manageable
groups. This helps users process, understand, and
memorize more easily. This was particularly significant
for first-time users, as they haven't had the time to
encode the information into long-term memory.
Tesler’s Law
The Law of Conservation of Complexity, states that for any system
there is a certain amount of complexity which cannot be reduced."
Its simplifying something, you inevitably will transfer that
complexity onto another area.
Eg: The login process has been simplified in most products by
replacing the need for a username and password with biometric
login options.
 UX LAWS
Law of Similarity
Our mind likes to group or chunk things together to
better understand and digest information. Use Gestalt
grouping methods: size, color, shape, orientation, and/or
movement of elements.
Law of Proximity
“Objects that are near, or proximate to each other, tend to
be grouped together.”
Using clear structure and visual hierarchy helps users’
minds easily recognize and react to information, setting
you up for more successful user interactions.
 UX LAWS
Serial Position Effect Zeigrnik Effect

"People remember uncompleted or interrupted tasks

“Users have a propensity to best remember the first and
better than completed tasks."
last items in a series.”
This can promote mental well-being by motivating an
• Placing less important items in the middle of lists individual to complete tasks, develop better habits, and
• Placing the most important items first and last in a list resolve lingering issues.
• Positioning key actions on the far left or right side of
the element
 Emotional Design in UX
The Wheel of Emotion is a useful tool to get UX designers thinking about
how they may elicit certain emotions through their product design.
Emotions on Plutchik’s wheel may be combined as follows:
• Anticipation + Joy = Optimism (with its opposite being
disapproval)
How to Apply Emotional Design:
1. Give your work a signature personality – a face/mascot for users
to identify
2. Have your design engage users as a character. Include personal
touches in all tasks, to reinforce the illusion of a personable
helper who knows users like an old friend.
3. Use color/contrast advantageously (e.g., blue for banking =
trustworthiness).
4. Craft copy with the right tone to inspire or accommodate
emotions. Write appropriate terms/phrases (e.g., Slack’s “You’re
here! The day just got better.” greeting). Use fonts and styles that
suit the image you want to project.
5. Offer prizes and surprises
6. Use storytelling.
7. Maintain attention to detail, especially on error messages. Include
polite, light-hearted/humorous messages to alleviate users’
frustration whenever problems arise.
 Ethical Design in UX
Ethical design is designing great products alongside
your morals and beliefs and the principles of your
business. Culture, society, and politics are shifting
the status quo of what is “ethical” and what has
become normalized.
The principles of ethical design:
1. Usability
2. Accessibility
3. Privacy Eg: Small animated progress bar or
4. Transparency & persuasion other indicator that represents the
5. User involvement loading process - Microinteraction
6. Focus that gives users feedback about
7. Sustainability Diagram: The Ethical Hierarchy of Needs background tasks.
illustrates that if any layer is unfulfilled,
Tips on Best Practices: the pyramid will collapse.

• Connect to Mission & Values of your

client/company
• Identify your concept’s weaknesses and
produce a list of Qs which can be tested with
potential users & their needs. Tool: Dark Eg: Twitter - Depending on users’
Reality Sessions visual comfort levels and lighting
conditions, they can choose their
preferred background for the app.
 Relevance of Context in UX Design
These elements are fundamental in
understanding the user’s behavior and
anticipating their interaction with your
interface. You can prepare a design that
blends all the factors to maximize the
user experience.

For example, a user’s emotional state

would influence how patient or
impatient they might be when
interacting with your product or service
user interface; thus, design your
interface by keeping that in mind.
 Relevance of Culture in UX Design
“Culture is the starting point for an individual's personality.”
In the Culture Map by Erin Meyer, there are 8 dimensions
of personality that are related to culture –
Communicating, Evaluating, Persuading, Leading,
Deciding, Disagreeing, Scheduling.
Understanding the cultural context of other people can
help you communicate with them.
Here are some TIPS to follow:
• Prefer low context communication.
• Use the language in the book to state upfront
what the expectations of the team with regards to
communication should be.
• Avoid working across cultures if possible.
• Choose people who are internationally minded to
do the communicating.
• Tailor your communication style to the type of
work that needs to be done (innovation is best
done by diverse teams, but efficiency is best done
by monocultures).
Cultural patterns in the world
We can categorize culture into 2
components:

1. Surface culture refers to

culturally specific foods,
languages, art, literature,
festivals, fashion, etc. Surface
culture includes the obvious
and most immediately
recognisable aspects of a
culture.

2. Deep culture is a more

nuanced understanding of
culture and refers to body
language, communication
styles and rules, concepts of
self and society, notions of
manners, etc. Deep culture is
often what people experience
first-hand when visiting or
having interpersonal
interactions with a new culture.
 Good application of culture in UX

McDonald's – REGIONAL/NATIONAL CUSTOMS Amazon Prime Video - LANGUAGE

Paytm Voice box - SOCIAL CONDITION HealtifyMe - LOCALISATION

Shaadi.com - RELIGION SENSITIVITY
Tips for best application of UX Principles

Content & Visual

User centered Accessible Organized IA
hierarchy

Simple
Maintain Simplicity
Context Language for
Consistency “Less is More”
UX writing

Add Leverage
Typography Personality to Confirmation &
Your Designs Feedback
 UX Research
User research is the process of discovering the behaviors, motivations, and needs of your customers through
observation, task analysis, and other types of user feedback.
It can involve working directly with members of your target audience through UX testing sessions, remote session
observation using digital tools, surveys to collect user feedback, and many more UX research methods and
techniques.
 Relevance of UX Research
UX research is critical & valuable for all areas of your business and yields clear
benefits for your product, your users, and your bottom line.

Product benefits
By asking your customers for direct feedback about a potential product, you can
discover how and when customers prefer to use a product, what pain points your
product will solve, and how to improve your product design.

User benefits
UX research is unbiased feedback, straight from the most valuable source: your
customers. Because this type of research is not biased by investors, company
leaders, or outside influences, it is the best resource for getting actionable
product feedback.

Business benefits
Knowing what your users value helps you spend less time and money fixing flawed
designs, speeds up the product development process, and increases customer
satisfaction.
 Role of UX Researcher

https://www.ted.com/talks/jennifer_golbeck_your_social_media_likes_expose_more_than_you_thi
nk?autoplay=true
UX Research Framework
UXR methods & Workflow
 RESEARCH METHOD:

Quantitative User Surveys

Surveys are an established research method adopted
by myriad disciplines to collect hard data from groups
of people.
Data are then analyzed by statistical methods to
generate “significant” insights that are unlikely to be
due to chance.

User surveys help to answer

• Who are our users?
• What challenges do they face?
• What goals and behaviors do they share?
• Where should we focus our design efforts?
• What do they think about a situation or
solution?
 RESEARCH METHOD:

Qualitative User Interviews

User interviews conducted either in person or online
are one of the primary sources of UX research data.
It can integrate multiple methods such as – Card
sorting & Concept testing
The quality of any interview is determined by the
quality of its questions.

User interviews help to answer

• Who are our primary and secondary personas?
• What do they think and do? Say and feel?
• What are their major pains and gains?
• Who else should we be talking to?
 RESEARCH METHOD:

Card sorting
Sorting a stack of cue cards that have words on them
into piles that make sense to the sorter.
Eg: You may have a stack of 30 cards with the names
of different foods on them. If you asked someone to
sort them into piles according to their most vs. least
favorite items, you would learn more about their
preferences than if you simply asked them their
favorite foods.
Card sorting helps to answer
• How do our users think about this domain?
• What items belong together? Apart?
• What navigation will work best?
• Where will they look for this content?
• Which experiences should we prioritize?
 RESEARCH METHOD:

User Persona building

User Personas are realistic models of the people
you are trying to help. They often take the form of a
1-page character study, and include a name, photo,
personal details and specific goals. They come in
many shapes and sizes, and are built from direct
and indirect observation of real or potential users.
How to Create a User Persona in 5 Steps -
1. Sort users strategically
2. Research the real experience
3. Map patterns and primary goals
4. Combine insights into a first draft
5. Validate user personas as a team
Three Principles of User Personas -
• Specificity: Models a single person who
stands for many
• Personality: Provides enough detail to
create a character
• Authenticity: Derived from observations
and real experiences
 RESEARCH METHOD:

Empathy Mapping
The empathy map is a way to gain emotional
intelligence and insight from target groups like
customers and users.
The user personas are critical for framing
contextual questions to generate rich insights
about user behavior and experience.
This tool helps teams develop deep, shared
understanding and empathy for other people.

Pro-tips to remember:
• You are not your users
• Get group insights
• Make sure you have defensible data
based on real observations
• Invite users or Sponsor Users to
participate.
 RESEARCH METHOD:

User Journey Mapping

A user journey map is a visual representation of what
a user must do to achieve a goal, and outlines the
experience they have with your brand. Their goal
might be to complete a purchase, find information, or
sign-up for a service.

Steps:
1. Define the scope. Creating a helpful user
journey map starts with defining your goals
2. Build user personas
3. Define user goals, expectations, and pain points
4. List out touchpoints and channels
5. Map the journey stages
6. Validate and refine the map
 Affinity Mapping
Affinity mapping is the process of collecting, organizing, & grouping qualitative data to create an affinity diagram
that help organize information into groups of similar items. Upon grouping, one can analyze key insights/themes.
Data Source: Usability testing, Surveys, Observation, or any other method for collecting feedback from users.

USERS

User1 User 2 USER FINDINGS

User Research tools
 UX Mapping Methods:
Tips on When to Use Which
 Information Architecture
Information architecture is the method of organizing and labeling websites, software, Elements of IA
etc., to ensure their usability and findability to help users effectively locate information
and complete tasks. It helps build a structure that connects content with the
functionality of the web platform.
Principles of IA:
1. The principle of objects: Content should be treated as a living, breathing thing. It
has lifecycles, behaviors, and attributes.
2. The principle of choices: Less is more. Keep the number of choices to a minimum.
3. The principle of disclosure: Show a preview of information that will help users
understand what kind of information is hidden if they dig deeper.
4. The principle of exemplars: Show examples of content when describing the content
of the categories.
5. The principle of front doors: Assume that at least 50% of users will use a different
entry point than the home page.
6. The principle of multiple classifications: Offer users several classification schemes
to browse the site’s content.
7. The principle of focused navigation: Keep navigation simple and never mix
different things.
8. The principle of growth: Assume that the content on the website will grow. Make
sure the website is scalable.
 TOOLS:
MIRO
www.realtimeboard.com

LUCID CHART
www.Lucidchart.com

XMIND
www.Xmind.net

COGGLE
www.Coggle.it

“Information architecture is the way that we arrange the parts of something to make it understandable.”
-Abby Covert, How to Make Sense of Any Mess
 Task Flow
A task flow is a diagram that represents a user's journey through a
specific task. You can think of task flows as the DNA of content
experience. Instead of viewing a single piece of content in isolation,
a task flow allows you to consider how one piece of content
connects to the next.
Task flows are typically designed to help users accomplish specific
goals within a product or service, and they are often used to inform
the design of user interfaces and interactions.
Egs: filling out a form, completing a purchase, or navigating to a
specific page on a website.
 RESEARCH METHOD:

Usability Testing
Tool to assess how intuitive & user-friendly a
higher-fidelity prototype (MVP) is with your target users
based on completing specific tasks within a controlled
environment.

The core elements in usability tests are the researcher,

the tasks, and the user.

Task Eg: You're considering opening a new credit card

with SBI. Please visit www.sbi.com & decide which credit
card you might want to open, if any.

Usability testing helps to answer

• How user-friendly is our solution?

• How much time/effort does our solution save?
• What impact can we expect our solution to have?
• What should we focus on in the next release?
 RESEARCH METHOD:

Usability Testing
 What is A/B Test
An A/B test or Split Testing is a randomized experiment using two or more variants of the same web page (A and B).

Before you can start testing, you need something to test on. Rather than
randomly testing items on your homepage or adapting your checkout
flow, start small.

Modifications/Test Examples :

● Test a change to a Call To Action (CTA),

● Change the color of a button,
● Remove an extraneous form field.

Once you're comfortable creating variants and experiments, you can

expand the scope of your testing.
Variant A is the Variant B is the contains at
original Website least one element that is
modified from the original
 How it works

www.abc.com www.abc.com www.abc.com

In an A/B test, you take a webpage or app
screen and modify it to create a second
version of the same page.

This change can be as simple as a single

headline, button or be a complete redesign of
the page.

Then, half of your traffic is shown the original

version of the page (known as control or A)
and half are shown the modified version of the
page (the variation or B).

Testing one change at a time helps them

pinpoint which changes had an effect on visitor
behavior, and which ones did not.
 What can you A/B Test
With the right A/B testing tools, you can test almost every element of your site, app, or message. Here are a few common
examples of A/B testing goals for several verticals:

E-commerce site Consumer app Online publication Email marketing Advertising

Increase Increase time Increase sign-up Increase opens and Increase clicks
purchases spent in-app conversion rates click-through rates and purchases

Layout | Navigation | Buttons |Text |CTA |Pop-ups |Announcement bars |Widgets

|Images |Video|Links
And here are a few common site
or app elements teams can test Teams can test each of these elements for size, placement, appearance, and even the
to achieve these goals: timing or circumstance under which they appear
 Why should one A/B Test

● A/B testing allows individuals, teams

and companies to make careful
changes to their user experiences
while collecting data on the impact it
makes.

● This allows them to construct

hypotheses and to learn what
elements and optimizations of their
experiences impact user behavior the
most. In another way, they can be
proven wrong—their opinion about the
best experience for a given goal can be
proven wrong through an A/B test.
 Storyboard
A storyboard communicates a story through images
displayed in a sequence of panels that chronologically
maps the story’s main events.

Components of Storyboard:
1. Specific scenario, (The persona or role that
corresponds to that scenario, is clearly specified at
the top of the storyboard. A short text description of
the scenario is also included.)
2. Visuals, (Each step in the scenario is represented
visually in a sequence. The steps can be sketches,
illustrations, or photos)
3. Corresponding captions. (The caption describes
the user’s actions, environment, emotional state,
device, and so on)
 Mood board
(Left) A mood board example of a mobile app for urban-construction workers included related photos, colors, keywords,
Mood boards are used to visually show the and phrases. (Right) The app's UI-design prototype was created based on the mood board.

feelings or values that the digital product should

create.
They are used to define the product's primary
UI colors and the visual design identity, but
they can include other aspects of the design. For
example, your mood board might also have:
• Tone-of-voice words
• Marketing or persuasion ideas
• Interaction-design patterns
• Inspirational screenshots from other
products
It is used in persona-creation process, to help
visualize persona characteristics such as
hobbies, residence, occupation, favorite things,
or beliefs.
Design System
A design system is a documented catalog of components
and styles used within a product, including how and why
each should be implemented. It helps product teams
define and standardize visual elements like color,
typography, spacing, and imagery. A well-defined visual
language can enhance the perceived quality of your
product.

Steps:
1. Analyze Your Current Design Process.
2. Identify the Brand's Alphabet.
3. Conduct a UI Audit.
4. Define Design Principles.
5. Create Component/Pattern Library.
6. Define Rules.
7. Establish a Governance Strategy.
8. Define the Structure of Elements.

Case study:
Spotify -
https://www.designsystems.com/how-spotifys-design-syst
em-goes-beyond-platforms/
 PROTOTYPING METHOD:

Low to High Fidelity Wireframes

Wireframing is a way to design a website service at

the structural level.
A wireframe is commonly used to layout content
and functionality on a page which takes into
account user needs and user journeys.
Wireframes are used early in the development
process to establish the basic structure of a page
before visual design and content is added.
A wireframe is a layout of a web page that
demonstrates what interface elements will exist on
key pages. It is a critical part of the interaction
design process.
Components of a Website
 PROTOTYPING METHOD:

High Fidelity Wireframe tools

FIGMA MARVEL
https://www.figma.com/ https://marvelapp.com/
Responsive Website Prototype Eg. in Marvel:
https://marvelapp.com/prototype/13g69h4e/screen/75875096
 PROTOTYPING METHOD:

Ad Placement in Website: Do’s & Don’ts

 Responsive Website Design
Responsive design is an approach to web design that aims to make web pages render well on a
variety of devices and window or screen sizes from minimum to maximum display size to ensure
usability and satisfaction.
 Case Study

https://miro.com/app/board/uXjVOzpQC3U=/?fromEmbed=1
 AI Tools in UX process
AI has many applications in UX and UI design that can improve Video: A guide to craft the Perfect Prompt on AI platforms for High
efficiency, effectiveness, and quality. It can help automate repetitive Quality Outputs.
tasks and spur creativity.

Application & relevant AI Tools:

1. Chatbots
2. Recommendation algorithms
3. Analyze user behavior data - Hotjar and Google Analytics
4. Persona creation - Crystal
5. Sourcing fresh perspectives like (Oblique Strategies)
6. Placeholder copy - Articoolo and Copy.ai
7. Kick-start creativity like color, font, design elements
8. Hand-drawn sketches into working HTML code -
Sketch2Code
9. Other tools - GPT-4, Midjourney and Perplexity

Tips for Best practice:

• Treat AI as a collaborator, not a replacement for critical

thinking
• Consider ethical concerns when working with AI algorithms
• Be transparent about the use of AI
 Case Studies of Good UX
ZOMATO - NYS Unified Court System -
https://www.behance.net/gallery/17643993 Responsive Website and Online Dispute Resolution for court users

1/Heuristic-Evaluation-of-Zomato?tracking
_source=search_projects|ui+principles&

NETFLIX 1-
https://www.aidagonzalez.design
 Design Sprint
A Design Sprint is a unique five-day process for validating ideas and
solving big challenges through prototyping and testing ideas with
customers.
It helps in aligning teams under a shared vision with clearly defined
goals, deliverables, and validated solutions.
Design Sprint will help you to:
1. Understand. Map out the problem and pick an important
area to focus.
2. Ideate. Sketch out competing solutions on paper.
3. Decide. Make decisions and turn your ideas into a testable
hypothesis.
4. Prototype. Hack together a realistic prototype.
5. Test. Get feedback from real live users.
Case studies:
Build an army of loyalists through products that deliver reasons to
return:
https://uxplanet.org/whats-a-design-sprint-and-why-is-it-importan
t-f7b826651e09
H&M Prototypes a Google Assistant Experience:
https://designsprintkit.withgoogle.com/case-studies/hm-prototype
s-google-assistant-experience
 Helpful Links -
UX Dictionary -

https://primer.style/design/foundations/css-utilities/getting-started

Web Components Glossary -

https://fluent2.microsoft.design/components/web/react/

Navigation Elements Glossary-

https://uxplanet.org/ui-ux-design-glossary-navigation-elements-b552130711c8

Gamification in UX -

https://www.uxdesigninstitute.com/blog/gamification-in-ux-design/

Bad Bad UX: 20 mistakes to avoid -

https://medium.com/@Evelyn.Taylor/bad-bad-ux-20-common-mistakes-in-user-experience-ec2c1258769a
Thank You!