SlideShare a Scribd company logo
2
Most read
14
Most read
17
Most read
UX/UI
DESIGN
JASMINE PHAN
jasmine.phan9@gmail.com
WHO AM I ?
User Experience intern
by day
Master of Digital Media - UX/UI
by night
AGENDA
▴ What is UX ?
▴ UX process
▴ UX vs UI ?
▴ Defining UX Roles
WHAT IS
USER EXPERIENCE ?
Push or pull ?
This is called “Norman
door”
Mapping problem
EVERYDAY
DIGITAL
How can I go back ?
Why there are 2
menus ?
“User experience encompasses all aspects of
the end-user’s interaction with the company,
its services, and its products”
Don Norman
UX - USER EXPERIENCE IS…
“All the aspects of how people use an
interactive product:the way it feels in their
hands, how well they understand how it
works, how they feel about it while they’re
using it, how well it serves their purposes,
and how well it fits into the entire context in
which they are using it.”
Alben (1996)
User experience design is the process of
enhancing user satisfaction with a product
by improving the usability, accessibility, and
pleasure provided in the interaction with the
product.
Wikipedia
UX DESIGNER CARES ABOUT…
creating a delightful experience, service,
product, system that satisfies your user’s needs
and wants while achieving the goals of your
organization.
THE ELEMENT OF
USER EXPERIENCE
Surface–What will the finished product look like?
Skeleto–What components will enable people to
use the site?
Structure–How will the pieces of the site fit
together and behave?
Scope–What features will the site need to
include?
Strategy–What do we want to get out of the site?
What do our users want?
UX PROCESS/
DESIGN THINKING
UX/UI Design 101
UX vs UI
https://www.behance.net/gallery/
17178031/Craigslist-Redesign
Current Craiglist UI
Microsoft Fluent Design The Outline – Digital pubication
Redesign
concept
USER
EXPERIENCE
(UX)
USER
INTERFACE
(UI)
How the product feels
Deliverables
Tools
Wireframes/prototypes,
sitemap, storyboards
Sketch, UXpin, Invision,
Illustrator
Illustrator, Photoshop,
Sketch
Cohesive style guide
how the product is laid out
DEFINING
UX ROLES
USER RESEARCHER
Identifies user
behaviors, goals and
needs through
interviews and surveys
INFORMATION ARCHITECT (IA)/
CONTENT STRATEGIEST
Defines the stucture of a
system, how content is
described, organized
and discovered
INTERACTION/UX DESIGNER
Defines interactions,
user flows, wireframes,
and affordance system
USABILITY ANALYST
Tests prototypes and
working products
with users and helps
integrate feedback
into future design
iterations
Focuses on graphic
elements of a digital
interface:color
treatments,
typography, visual
language, etc.
UI Designer
THANK YOU

More Related Content

PPTX
UI UX Introductory session
PPTX
UI vs UX workshop
PDF
UX/UI Introduction
PDF
UI UX in depth
PDF
What is UI/UX and the Difference
PPTX
A UI and UX training presentation
PDF
UI and UX Design for Startups - Matin Maleki
PPTX
i/o extended: Intro to <UX> Design
UI UX Introductory session
UI vs UX workshop
UX/UI Introduction
UI UX in depth
What is UI/UX and the Difference
A UI and UX training presentation
UI and UX Design for Startups - Matin Maleki
i/o extended: Intro to <UX> Design

What's hot (20)

PDF
Simple Steps to UX/UI Web Design
PDF
Ui vs UX design
PPTX
The Importance of UX
PDF
UX design
PDF
Ux is not UI
PDF
UX Lesson 1: User Centered Design
PPTX
UI/UX Fundamentals
PDF
UI & UX Design for Startups
PDF
UX Experience Design: Processes and Strategy
PDF
What’s the difference between a UX and UI designer? (Part two)
PPTX
UX is not UI!
PDF
UX Best Practices
PDF
UX & UI Design - Differentiate through design
 
PPTX
"What Are the Key Differences between UI and UX Design?"
PDF
UX 101: A quick & dirty introduction to user experience strategy & design
PPT
UX - User Experience Design and Principles
PDF
What is UX?
PDF
What is UX?
PDF
UX & UI Design: Differentiate through design
PPTX
UI UX introduction
Simple Steps to UX/UI Web Design
Ui vs UX design
The Importance of UX
UX design
Ux is not UI
UX Lesson 1: User Centered Design
UI/UX Fundamentals
UI & UX Design for Startups
UX Experience Design: Processes and Strategy
What’s the difference between a UX and UI designer? (Part two)
UX is not UI!
UX Best Practices
UX & UI Design - Differentiate through design
 
"What Are the Key Differences between UI and UX Design?"
UX 101: A quick & dirty introduction to user experience strategy & design
UX - User Experience Design and Principles
What is UX?
What is UX?
UX & UI Design: Differentiate through design
UI UX introduction
Ad

Similar to UX/UI Design 101 (20)

PDF
What is this UX thing?
PDF
User Experience Design: an Overview
PDF
Introduction to UX Design
PPTX
Ux Overview
PDF
What is this UX thing 11-24-15
PDF
UIUX-Crafting-Seamless-Digital-Experiences (1).pdf
PPSX
UX Explained
PPT
Designing Better Applications, Website and Intranets
PPT
Designing Better Applications, Websites and Intranets
PPTX
Engaging UX in engineering
PDF
What ux is
PPTX
User Experience Process
PPTX
What is UX v2
PPTX
An Introduction to User Experience (UX) Fundamentals
PDF
UX in a Nutshell
PPTX
An Introduction to User Experience for Dev's & Techies
PDF
User Experience & Design Research
PDF
Intro to User eXperience
PDF
Designing Experiences that Drive Consumer Engagement
What is this UX thing?
User Experience Design: an Overview
Introduction to UX Design
Ux Overview
What is this UX thing 11-24-15
UIUX-Crafting-Seamless-Digital-Experiences (1).pdf
UX Explained
Designing Better Applications, Website and Intranets
Designing Better Applications, Websites and Intranets
Engaging UX in engineering
What ux is
User Experience Process
What is UX v2
An Introduction to User Experience (UX) Fundamentals
UX in a Nutshell
An Introduction to User Experience for Dev's & Techies
User Experience & Design Research
Intro to User eXperience
Designing Experiences that Drive Consumer Engagement
Ad

Recently uploaded (20)

PPTX
12. Community Pharmacy and How to organize it
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
An introduction to AI in research and reference management
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
KOTA LAMA BANYUMAS.pptxxxxxxxxxxxxxxxxxxxx
PDF
10 Real World Lessons and 4 Practical Tips for Large Group LSP Method
PDF
Phone away, tabs closed: No multitasking
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPTX
Lecturess 1 & 2_2025_edit.pptxYour score increases as you pick a category, fi...
PPTX
Implications Existing phase plan and its feasibility.pptx
DOCX
algorithm desgin technologycsecsecsecsecse
PDF
URBAN DESIGN DESKTOP CASESTUDY IITG.pdf
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPT
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PPTX
Introduction to Pathology.pptx 112233445566
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PDF
Applied Structural and Petroleum Geology Lec 1.pdf
PDF
The Advantages of Working With a Design-Build Studio
12. Community Pharmacy and How to organize it
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
An introduction to AI in research and reference management
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
KOTA LAMA BANYUMAS.pptxxxxxxxxxxxxxxxxxxxx
10 Real World Lessons and 4 Practical Tips for Large Group LSP Method
Phone away, tabs closed: No multitasking
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Lecturess 1 & 2_2025_edit.pptxYour score increases as you pick a category, fi...
Implications Existing phase plan and its feasibility.pptx
algorithm desgin technologycsecsecsecsecse
URBAN DESIGN DESKTOP CASESTUDY IITG.pdf
YOW2022-BNE-MinimalViableArchitecture.pdf
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
Introduction to Pathology.pptx 112233445566
AD Bungalow Case studies Sem 2.pptxvwewev
Applied Structural and Petroleum Geology Lec 1.pdf
The Advantages of Working With a Design-Build Studio

UX/UI Design 101