SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
WHAT ISTHIS USER
EXPERIENCETHING?
Presented byYoumna Aoukar and Oskar von Hauske
HI MY NAME ISYOUMNA!
@yaoukar	

umna.net
HI MY NAME IS OSKAR
@ovonhauske	

hausk.co
What is this UX thing?
INTRODUCTIONS
1-Introduce yourself (Name,Profession?)	

2-Why are you interested in learning UX?	

!
WHAT IS UX?
INTHIS COURSE WE WILL...
1-LOOK AT EXAMPLES OF UX IN DIFFERENT DISCIPLINES	

!
2-DO AN EXERCISETO DEFINETHE PARTS OF UX	

!
3-LOOK ATTHE COMPONENTS OFTHE BASICTHEORY/
FRAMEWORK OF UX	

!
4-LOOK AT EXAMPLES OF GREAT USER EXPERIENCE 	

AND UNDERSTAND WHYTHEY ARE GREAT?	

!
5- UNDERSTANDTHE UX PROCESS BY SHOWINGYOU EXAMPLES
OF OUR WORK	

!
6-QUESTIONS? RESOURCES? HOWTO GET INTO UX
WHY SHOULDYOU BE
EXCITED ABOUT UX?
INSTAGRAM
LUMO LIFT
FAT DUCK
UX CHECKLIST
Being in this field requires
Problem solving
Listening
Observation
Innovative
Analytical
Methodological
Holistic
Risk taker
Realistic
Rational
Empathetic
Communicative
Storytelling
Source: quirky.com
EXERCISE
WHAT IS UX?
Think about words that come to your mind when you	

think about UX
Development
Prototyping
Business 	

requirements
User research	

Content Strategy	

Interaction Design	

Testing
QA
Copywriting	

Information Architecture	

Visual Design	

UX DISCIPLINE
USER RESEARCH
• Informs Strategy	

•Tests solutions	

• Compares performance	

• Measures success
Good design starts with research
Some questions we hear: Is there a customer need or a market for this product? Are we solving a
problem that respond to users needs and behaviors? What problem are we tackling? How many
users used this website in the past? What is the data? Is this the right feature for this website/
product?
INFORMATION
ARCHITECTURE
!
• Facilitates understanding of the system	

• Orders creates meaning and clarity	

•Make sure the structure fits the mental model of
your user	

•Goal to clearly navigate and find what they want
easily	

Structure your content and prioritize it
Some questions we hear: How is the navigation of the site organized ? How are we going to
prioritize content? How many main pages does our site/app have? Where does this page link to?
INTERACTION DESIGN
• Designs the pieces	

• Creating flows and refining them. (How do I from A to B)	

• Determines the errors	

• Documents the process through wireframes
Creating the behavior of the product
Some questions we hear: Is the product behavior predictable, expected, and usable? Can our user
accomplish her goals without many steps or much conscious effort? What are the main features of
the website? 	

!
SO...WHAT IS UX ?
UX IS A RESULT
!
1-How user feels : Effect you have(happy, sad,	

confused...)	

2-How users act:Your return of investment (ROI)
WHAT IS GREAT ABOUT
THESE EXPERIENCES?
Instagram Netflix
BMW Car Dashboard
Herman Miller
Chair
iPhone
Xbox
Square Cash MTA Kiosk
Oculus Rift Mario Kart
Uber App
WHAT IS GREAT ABOUT
THESE EXPERIENCES?
!
1-Solves a problem	

2-Creates habits 	

3-Inspire Emotions	

3-Becomes Indispensable	

!
HOW DO WE MEASURE
WHAT IS GREAT ?
!
1-Business goals (increased sales, acquired users)	

2-Competition (Competitive offerings against competition)	

3-User testing(Validation of the UX with users)	

4-Data analytics (Metrics:clicks, number of visits etc..)	

5-Social media stats (social buzz onTwitter, Instagram, Facebook
etc..)
IA HEURISTICS
Source: Abby Covert IA Heuristics
UX DESIGN PROCESS
is a set of tools and techniques to take users needs into	

account at every stage of the product lifecycle.
DISCOVER
•Determine business needs and goals by working	

closely with the strategy team or product managers	

!
Technique: Stakeholder interviews or issue card
exercise	

!
---> Business requirements
Issue card exercise for the redesign of a consulting company website.The goal of this
exercise was to understand business needs and pain points
DISCOVER
!
•Determine users needs by engaging and observing
target audience	

!
Technique: User interviews, surveys, ethnographical
studies	

!
---->Personas/ User journeys	

!
*For interviews, users can be recruited or guerrilla style interviews can be conducted
in problem space	

!
Interview script for product development of an professional network for the art world
Survey sample for curriculum development of online education platform
DISCOVER
!
•Look at your competitors	

!
Technique: Competitive Analysis	

!
----> Understand best practices and patterns of
behaviors	

!
!
Competitive analysis diagram for donation based website
DISCOVER
!
•Create personas which are fictional users that
represents the target audience of the product:who
they are (demographics), theirs behaviors, needs, goals
and pain points.	

!
They can be also be created by looking at a the data
collected from the user interviews/surveys/
ethnographical studies and the similarities and
differences in patterns of behavior	

!
Tool: Persona table	

!
!
Personas template
PERSONAS
WHO?
DEMOGRAPHICS
BEHAVIORS
NEEDS/GOALS
FIND THE PROBLEMS THAT PEOPLE FACE WHILE NETWORKING IN THE ARTWORLD IN ORDER TO FIND SOLUTIONS/ IMPROVEMENTS
Personas of Mail Chimp	

Source: Mail Chimp
DISCOVER
!
•Create user journeys which are the key stages of a
users activities in the problem space, how they behave
in each stage as they move to complete their tasks	

!
Tool: User journeys	

!
----> Identify opportunities, obstacles and possible
features for the product	

!
!
!
Andy app / User journey that defines key tasks that people perform before, during and
after an art event (like Art Basel) .This diagram maps out the different tasks, different
environments and different feelings that the person has.
task grid
Walk me through your networking activities BEFORE an art event
MAIN TASK: MAIN GOAL:
Sub-Tasks
Scenario
Improvements
Pain points
Functionalities
DISCOVER
Once the team has a clear idea of the who?what?
where?how and why? of the product experience then
you can start thinking of the scope	

!
•Define what can be built/designed in scope(what
features for example) with certain amount of time and
money 	

!
Tool: Post-its	

!
---->Prioritize feature by dividing them in high, medium
and low	

!
!
Source: Macadamian Blog
DESIGN
Thinking about the Information Architecture	

!
•Design the site map which determines the structure,
navigation and taxonomy of the website	

!
*Taxonomy is how we classify content.
Example of site map
DESIGN
Designing the interactions	

!
•Wireframes is a blue print of the experience which
have different resolution from a sketch to a high
fidelity mockup	

!
--->Hierarchy of information is tackled, features and
functionality are established, rules of displaying content
(by default, on load, on click, on hover, if logged in)	

!
!
!
!
Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black
and white) mock-up (with color)
Low fidelity	

Source: Harvest App
High fidelity
Mockup
Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black
and white) mock-up (with color)
...VISUAL DESIGN
Look and Feel 	

GUI(Graphical User Interface)
...DEVELOPMENT
Programmers code front and back end experience	

Release a beta version in QA (Quality Assurance)	

(Find bugs and errors)
...TESTING IN BETWEEN	

EACH PHASE
Creating quick and easy prototypes is 	

essential to the development of the experience	

and product. It is recommend to have 	

as many iterations as possible
Prototype	

!
•A prototype is an early sample, model, or release of a
product built to test a concept or process or to act as
a thing to be replicated or learned from	

!
!
!
!
!
!
Paper prototype
Functioning prototype using InVision software
HOWTO GET INTO UX?
• Take classes and workshops online and offline (more
extensive/advanced classes are available at GA)	

• Build a portfolio	

• Freelance or work for free or a side project	

• Go to Meetups (THE UX LAB, HUGE UX EVENTS,
NYTECH, BKUX,)	

• Be curious and meet people in the field
WORKING ENVIRONMENTS
INTHE UX FIELD
• Agencies	

• Clients	

• Start-ups	

• Tech companies	

• Freelance
AS A UX DESIGNERYOU
MIGHT WORK ON
• Marketing Experiences (Smart Water)	

• Digital Products (Google maps)	

• Hardware products (Fitbit)	

• Retail Experiences(Fragrance IQ by Sephora)	

• Interactive Environments( Cooper Hewitt Smithsonian
Museum)	

• Games (LA Noire)
UX REFERENCES
• UX booth DIGITAL PUBLICATION	

• A list apart DIGITAL PUBLICATION	

• Smashing Magazine DIGITAL PUBLICATION	

• IXDA ASSOCIATION/COMMUNITY	

• The Interaction Design
Foundation ASSOCIATION/COMMUNITY	

• Product Hunt PRODUCT	

• Nielsen Norman Group UX FIRM	

• UserTesting or Peak PRODUCT
• Design Kit by Ideo METHODTOOLS	

• GoogleVentures VC FIRM	

• Service DesignTools METHODTOOLS	

• Omnigraffle SOFTWARE / COMMUNITY 	

• Axure SOFTWARE / COMMUNITY	

• Boxes and Arrows COMMUNITY	

!
!
QUESTIONS?
WATCHTHIS

Contenu connexe

Tendances

PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they areOscar Gonzalez Garza
 
Максим Ткачук: Minimalist Design
Максим Ткачук: Minimalist DesignМаксим Ткачук: Minimalist Design
Максим Ткачук: Minimalist DesignProvectus
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondLuke Perman
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)Marian Mota
 
User Experience & User Interface Design - nov 2017
User Experience & User Interface Design - nov 2017User Experience & User Interface Design - nov 2017
User Experience & User Interface Design - nov 2017Andrea Vaccarella
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsAshiq Uz Zoha
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For DevelopersAlice Phieu
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User ExperienceGrant Robinson
 
Renaissance Status 2009 07 30
Renaissance Status 2009 07 30Renaissance Status 2009 07 30
Renaissance Status 2009 07 30guest543c6c0
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyThomas Immich
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 

Tendances (20)

PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer Side
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
 
Максим Ткачук: Minimalist Design
Максим Ткачук: Minimalist DesignМаксим Ткачук: Minimalist Design
Максим Ткачук: Minimalist Design
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyond
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)
 
User Experience & User Interface Design - nov 2017
User Experience & User Interface Design - nov 2017User Experience & User Interface Design - nov 2017
User Experience & User Interface Design - nov 2017
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For Developers
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX Portfolio
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
Ui design
Ui designUi design
Ui design
 
Renaissance Status 2009 07 30
Renaissance Status 2009 07 30Renaissance Status 2009 07 30
Renaissance Status 2009 07 30
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Usability basics
Usability basicsUsability basics
Usability basics
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in Servoy
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 

Similaire à What is this UX thing?

What is this UX thing?
What is this UX thing?What is this UX thing?
What is this UX thing?Youmna Aoukar
 
UX Prototyping and Personas 9 25-15
UX Prototyping and Personas 9 25-15UX Prototyping and Personas 9 25-15
UX Prototyping and Personas 9 25-15Shilpa Thanawala
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 
Making Effective Prototypes
Making Effective PrototypesMaking Effective Prototypes
Making Effective PrototypesMatthew Ho
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and PrototypingKshitiz Anand
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesFreerange Future
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14Shilpa Thanawala
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UXCyber-Duck
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
Catching up on UX
Catching up on UXCatching up on UX
Catching up on UXRyo Sampei
 
Guerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringGuerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringDavid Sturtz
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 

Similaire à What is this UX thing? (20)

What is this UX thing?
What is this UX thing?What is this UX thing?
What is this UX thing?
 
UX Prototyping and Personas 9 25-15
UX Prototyping and Personas 9 25-15UX Prototyping and Personas 9 25-15
UX Prototyping and Personas 9 25-15
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
 
Making Effective Prototypes
Making Effective PrototypesMaking Effective Prototypes
Making Effective Prototypes
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
What is UX v2
What is UX v2What is UX v2
What is UX v2
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
What ux is
What ux isWhat ux is
What ux is
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UX
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
Catching up on UX
Catching up on UXCatching up on UX
Catching up on UX
 
Guerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringGuerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a Shoestring
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 

Dernier

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Dernier (20)

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

What is this UX thing?

  • 1. WHAT ISTHIS USER EXPERIENCETHING? Presented byYoumna Aoukar and Oskar von Hauske
  • 2. HI MY NAME ISYOUMNA! @yaoukar umna.net
  • 3. HI MY NAME IS OSKAR @ovonhauske hausk.co
  • 5. INTRODUCTIONS 1-Introduce yourself (Name,Profession?) 2-Why are you interested in learning UX? !
  • 7. INTHIS COURSE WE WILL... 1-LOOK AT EXAMPLES OF UX IN DIFFERENT DISCIPLINES ! 2-DO AN EXERCISETO DEFINETHE PARTS OF UX ! 3-LOOK ATTHE COMPONENTS OFTHE BASICTHEORY/ FRAMEWORK OF UX ! 4-LOOK AT EXAMPLES OF GREAT USER EXPERIENCE AND UNDERSTAND WHYTHEY ARE GREAT? ! 5- UNDERSTANDTHE UX PROCESS BY SHOWINGYOU EXAMPLES OF OUR WORK ! 6-QUESTIONS? RESOURCES? HOWTO GET INTO UX
  • 12. UX CHECKLIST Being in this field requires Problem solving Listening Observation Innovative Analytical Methodological Holistic Risk taker Realistic Rational Empathetic Communicative Storytelling Source: quirky.com
  • 13. EXERCISE WHAT IS UX? Think about words that come to your mind when you think about UX
  • 14. Development Prototyping Business requirements User research Content Strategy Interaction Design Testing QA Copywriting Information Architecture Visual Design UX DISCIPLINE
  • 15. USER RESEARCH • Informs Strategy •Tests solutions • Compares performance • Measures success Good design starts with research Some questions we hear: Is there a customer need or a market for this product? Are we solving a problem that respond to users needs and behaviors? What problem are we tackling? How many users used this website in the past? What is the data? Is this the right feature for this website/ product?
  • 16. INFORMATION ARCHITECTURE ! • Facilitates understanding of the system • Orders creates meaning and clarity •Make sure the structure fits the mental model of your user •Goal to clearly navigate and find what they want easily Structure your content and prioritize it Some questions we hear: How is the navigation of the site organized ? How are we going to prioritize content? How many main pages does our site/app have? Where does this page link to?
  • 17. INTERACTION DESIGN • Designs the pieces • Creating flows and refining them. (How do I from A to B) • Determines the errors • Documents the process through wireframes Creating the behavior of the product Some questions we hear: Is the product behavior predictable, expected, and usable? Can our user accomplish her goals without many steps or much conscious effort? What are the main features of the website? !
  • 19. UX IS A RESULT ! 1-How user feels : Effect you have(happy, sad, confused...) 2-How users act:Your return of investment (ROI)
  • 20. WHAT IS GREAT ABOUT THESE EXPERIENCES?
  • 21. Instagram Netflix BMW Car Dashboard Herman Miller Chair iPhone
  • 22. Xbox Square Cash MTA Kiosk Oculus Rift Mario Kart Uber App
  • 23. WHAT IS GREAT ABOUT THESE EXPERIENCES? ! 1-Solves a problem 2-Creates habits 3-Inspire Emotions 3-Becomes Indispensable !
  • 24. HOW DO WE MEASURE WHAT IS GREAT ? ! 1-Business goals (increased sales, acquired users) 2-Competition (Competitive offerings against competition) 3-User testing(Validation of the UX with users) 4-Data analytics (Metrics:clicks, number of visits etc..) 5-Social media stats (social buzz onTwitter, Instagram, Facebook etc..)
  • 25. IA HEURISTICS Source: Abby Covert IA Heuristics
  • 26. UX DESIGN PROCESS is a set of tools and techniques to take users needs into account at every stage of the product lifecycle.
  • 27. DISCOVER •Determine business needs and goals by working closely with the strategy team or product managers ! Technique: Stakeholder interviews or issue card exercise ! ---> Business requirements
  • 28. Issue card exercise for the redesign of a consulting company website.The goal of this exercise was to understand business needs and pain points
  • 29. DISCOVER ! •Determine users needs by engaging and observing target audience ! Technique: User interviews, surveys, ethnographical studies ! ---->Personas/ User journeys ! *For interviews, users can be recruited or guerrilla style interviews can be conducted in problem space !
  • 30. Interview script for product development of an professional network for the art world
  • 31. Survey sample for curriculum development of online education platform
  • 32. DISCOVER ! •Look at your competitors ! Technique: Competitive Analysis ! ----> Understand best practices and patterns of behaviors ! !
  • 33. Competitive analysis diagram for donation based website
  • 34. DISCOVER ! •Create personas which are fictional users that represents the target audience of the product:who they are (demographics), theirs behaviors, needs, goals and pain points. ! They can be also be created by looking at a the data collected from the user interviews/surveys/ ethnographical studies and the similarities and differences in patterns of behavior ! Tool: Persona table ! !
  • 35. Personas template PERSONAS WHO? DEMOGRAPHICS BEHAVIORS NEEDS/GOALS FIND THE PROBLEMS THAT PEOPLE FACE WHILE NETWORKING IN THE ARTWORLD IN ORDER TO FIND SOLUTIONS/ IMPROVEMENTS
  • 36. Personas of Mail Chimp Source: Mail Chimp
  • 37. DISCOVER ! •Create user journeys which are the key stages of a users activities in the problem space, how they behave in each stage as they move to complete their tasks ! Tool: User journeys ! ----> Identify opportunities, obstacles and possible features for the product ! ! !
  • 38. Andy app / User journey that defines key tasks that people perform before, during and after an art event (like Art Basel) .This diagram maps out the different tasks, different environments and different feelings that the person has. task grid Walk me through your networking activities BEFORE an art event MAIN TASK: MAIN GOAL: Sub-Tasks Scenario Improvements Pain points Functionalities
  • 39. DISCOVER Once the team has a clear idea of the who?what? where?how and why? of the product experience then you can start thinking of the scope ! •Define what can be built/designed in scope(what features for example) with certain amount of time and money ! Tool: Post-its ! ---->Prioritize feature by dividing them in high, medium and low ! !
  • 41. DESIGN Thinking about the Information Architecture ! •Design the site map which determines the structure, navigation and taxonomy of the website ! *Taxonomy is how we classify content.
  • 43. DESIGN Designing the interactions ! •Wireframes is a blue print of the experience which have different resolution from a sketch to a high fidelity mockup ! --->Hierarchy of information is tackled, features and functionality are established, rules of displaying content (by default, on load, on click, on hover, if logged in) ! ! ! !
  • 44. Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color) Low fidelity Source: Harvest App High fidelity
  • 45. Mockup Example of a wireframe: Wireframes can be low fidelity (sketch) high fidelity (black and white) mock-up (with color)
  • 46. ...VISUAL DESIGN Look and Feel GUI(Graphical User Interface)
  • 47. ...DEVELOPMENT Programmers code front and back end experience Release a beta version in QA (Quality Assurance) (Find bugs and errors)
  • 48. ...TESTING IN BETWEEN EACH PHASE Creating quick and easy prototypes is essential to the development of the experience and product. It is recommend to have as many iterations as possible
  • 49. Prototype ! •A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from ! ! ! ! ! !
  • 51. Functioning prototype using InVision software
  • 52. HOWTO GET INTO UX? • Take classes and workshops online and offline (more extensive/advanced classes are available at GA) • Build a portfolio • Freelance or work for free or a side project • Go to Meetups (THE UX LAB, HUGE UX EVENTS, NYTECH, BKUX,) • Be curious and meet people in the field
  • 53. WORKING ENVIRONMENTS INTHE UX FIELD • Agencies • Clients • Start-ups • Tech companies • Freelance
  • 54. AS A UX DESIGNERYOU MIGHT WORK ON • Marketing Experiences (Smart Water) • Digital Products (Google maps) • Hardware products (Fitbit) • Retail Experiences(Fragrance IQ by Sephora) • Interactive Environments( Cooper Hewitt Smithsonian Museum) • Games (LA Noire)
  • 55. UX REFERENCES • UX booth DIGITAL PUBLICATION • A list apart DIGITAL PUBLICATION • Smashing Magazine DIGITAL PUBLICATION • IXDA ASSOCIATION/COMMUNITY • The Interaction Design Foundation ASSOCIATION/COMMUNITY • Product Hunt PRODUCT • Nielsen Norman Group UX FIRM • UserTesting or Peak PRODUCT • Design Kit by Ideo METHODTOOLS • GoogleVentures VC FIRM • Service DesignTools METHODTOOLS • Omnigraffle SOFTWARE / COMMUNITY • Axure SOFTWARE / COMMUNITY • Boxes and Arrows COMMUNITY ! !