Lecture 01- Introduction to UX

What is Experience? Lecture 02- UX Design Processes

• The process of getting knowledge or skill from Design Thinking is
doing, seeing, or feeling things.
• A design methodology
The Definition of User Experience (UX)
• Provides a solution-based approach to solving
"User experience" encompasses all aspects of problems
the enduser's interaction with the company, its
• Understanding the human needs involved
services, and its products.
Stages of Design Thinking
UI and UX
1. Empathise
• UI is made up of all the elements that enable
someone to interact with a product or service. 2. Define (the problem)
• UX is what the individual interacting with that 3. Ideate
product or service takes away from the entire
experience. 4. Prototype

User experience (UX) focuses on having a deep 5. Test

understanding ? 1. Empathise - Empathy is crucial to a human-
• Users • What they need centered design process such as Design Thinking

• What they value • Their abilities 2. Define - Analyze your observations and
synthesize them in order to define the core
• Their limitations problems
UX myths 3. Ideate - During the third stage of the Design
Thinking process, designers are ready to start
• Simple = minimal
generating ideas.
• Mobile users are distracted
4. Prototype - This is an experimental phase •
• Success happens overnight Aim is to identify the best possible solution for
each of the problems identified
• UX design is a step in a project
5. Test - Designers or evaluators rigorously test
The importance of UX
the complete product using the best
• Fulfill the user’s needs solutionsidentified during the prototyping phase

• PosiƟve experiences FIVE ELEMENTS OF USER EXPERIENCE

• Users loyal to the product or brand 1. Strategy

2. Scope
• Business success 3. Skeleton
• Improved efficiency 4. Structure
5. Surface
• Working faster
The Strategy Plane - The scope is fundamentally 3. Method: what specific method we want to use
determined by the strategy of the site to learn about the questions.

The Scope Plane - The scope is fundamentally 4. Participants: what’s the user profile we are
determined by the strategy of the site looking for.

The Skeleton Plane- 5. Protocol: how we want to conduct the session.

Interface Design -Presentation and arrangement

of all the elements that makes us interact with
Lecture 04 - Structuring and Prototyping
the functionality of the system.
Why use functional specification
Navigation design - Enables user to see and move
documentation?
through the structure, and how to move through
information. • No special results in spending more time and
creating lower-quality code. Not good.
Information design - Concerned about how
information is presented to make it effective, • Reduces unnecessary back and forth
clear, and obvious.
• Acts as a synchronization tool for teams
The Structure Plane - Interaction Design (IxD) is
the design of interactive products and services in What is in a functional specifications document?
which a designer’s focus goes beyond the item in • The document identifies stakeholders, the
development to include the way users will document history and previous approvals. Aside
interact with it from that, the document will also reveal:
The Surface Plane - Sensory design and • Project scope — what are the project goals,
presentation of the logical arrangements deliverables, features, tasks, deadlines and cost?

• Risks/Assumptions — what might affect the

Lecture 03 - User Research & Planning functional design of the product/system?

What is UX Research? • Solution overview — what are you proposing

to create to solve a problem (sitemaps, screen
Structured and methodical selection and flows etc.) • Use cases — put functional
application of the mostappropriate tools for requirements into the context of a user action.
information gathering.
IxD’s five dimensions
The 5 W's of user research
• Designers’ work in IxD involves five dimensions:
1. Who 2. What 3. When4. Where 5. Why
1. words (1D)
How to conduct user research
2. visual representations (2D)
1. Goal: why are we doing this research, what
are we hoping to get out of it. 3. physical objects/space (3D)

2. Research questions: what are specific 4. time (4D)

questions we are interested in. 5. behavior (5D)

There are three main levels of visual outlines:

• Sketch • Low-fidelity prototypes are, as the term
implies, prototypes that are not faithful
• Wireframes
representations of the details of look, feel, and
• Mockups behavior, but give rather high-level, more
abstract impressions of the intended design
• Prototypes
Fidelity of prototypes- High-Fidelity

• High-fidelity prototypes are more detailed

Lecture 05 - Visual Design / High Fidelity representations of designs, including details of
Prototyping appearance and interaction behavior.
What is Visual Design? Interactivity of prototypes
• Visual design is the use of imagery, color, • Fully Programmed Prototype - Even the
shapes, typography, and form to enhance prototypes of large systems can themselves be
usability and improve the user experience. large and complex.
• Visual design as a field has grown out of both Advantages of Prototyping
UI design and Graphic design. –
• Offer concrete baseline for communication
Basic Elements of Visual Design between users and designers
1.Lines • Help sell management an idea for new product
2.Shapes • Help affect a paradigm shift from existing
3.Negative space/whitespace 4.Volume 5.Value system to new system

6.Color 7.Texture • Provide conversational “prop” to support

communication of concepts not easily conveyed
Prototyping verbally
• A prototype is an early sample, model, or Software tools for prototyping
release of a product built to test a concept or
process • Adobe XD • InDesign

Local Prototypes • Figma • Origami studio

• We call the small area where horizontal and

vertical slices intersect a “local prototype” Lecture 06 - UI Elements and Interface Design
because the depth and breadth are both limited
to a very localized interaction design issue User Interface Elements - Input Controls

A “T” prototype • Checkboxes

• A “T” prototype combines the advantages of Radio buttons

both horizontal and vertical, offering a good
• Dropdown lists
compromise for system evaluation.
• Text fields
Fidelity of prototypes- Low Fidelity
WIMP and GUI
• Windows • Visceral design refers to making products look,
feel, and sound good
• Icons
• Behavioral design is about use, and it equates
• Menus
with traditional values of usability
• Pointing
• Reflective design is about considering the
GUIs meaning and personal value of a product

• Same basic building blocks as WIMPs but more Emotional design

varied – Color, 3D, sound, animation, – Many
• Donald Arthur Norman, the co-founder of the
types of menus, icons, windows
famous Nielsen Norman Group, first introduced
the term “emotional design”.

Lecture 07 - Testing and Analysis Positive emotions can:

Formative vs. Summative evaluation • Increase user engagement and satisfaction

• Formative evaluation helps you form the • Make users more likely to recommend your
design and summative evaluation helps you sum product or service to others
up the design.
• Improve brand loyalty
• Formative evaluations are used in an iterative
• Boost productivity and creativity
process to make improvements before
production.

• Summative evaluations are used to evaluate a Lecture 11 -Team Dynamics and Communication
shipped product in comparison to a benchmark.
Tips for improving team dynamics:

• Trust
Lecture 08 - Experience Channels and Media
• Communication
• Multi-channel - Clients use one of the brand
• Decision-making:
channels to purchase a product: in-store, on
mobile, on a tablet, on a computer, etc • Leadership:
• Cross-channel - Clients can use several
channels for the same order. • The idea is to mix
a brand’s channels to smooth the customer Lecture 12 - Design Networking and building an
experience. effective design portfolio

• Omni-channel - Omni-channel takes cross- Design Networking and building an effective

channel a step further by integrating all channels design portfolioNetworking Strategy Topics:
into a single, unified system 1. Define Your Goals

2. Identify Your Target Audience

Lecture 10 - Emotional interaction 3. Attend Events and Conferences
Designing with the three levels in mind