This document provides an overview of user experience (UX) design. It introduces the presenter and defines UX as how users feel about and interact with a product or service. The document then outlines the main components of UX work, including user research, information architecture, interaction design, and testing. It also discusses the UX design process of discovering user needs, designing interfaces and interactions, development, and testing. Examples of companies with great UX are provided.

1. WHAT ISTHIS USER
EXPERIENCETHING?
Presented byYoumna Aoukar

2. HI MY NAME ISYOUMNA!
@yaoukar
umna.net

4. INTRODUCTIONS
1-Introduce yourself (Name,Profession?)
2-Why are you interested in learning UX?

5. WHAT IS UX?

6. 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 MY WORK
6-QUESTIONS? RESOURCES? HOWTO GET INTO UX

7. WHY SHOULDYOU BE
EXCITED ABOUT UX?

8. INSTAGRAM

9. LUMO LIFT

10. FAT DUCK

11. 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

12. EXERCISE
WHAT IS UX?
Think about words that come to your mind when you
think about UX

13. Development
Prototyping
Business
requirements
User research
Content Strategy
Interaction Design
Testing
QA
Copywriting
Information Architecture
Visual Design
UX DISCIPLINE

14. 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?

15. 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?

16. INTERACTION DESIGN
• Designs the pieces
• Creating flows and refining them. (How do I go 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?

17. SO...WHAT IS UX ?

18. UX IS A RESULT
1-How user feels : Effect you have(happy, sad,
confused...)
2-How users act:Your return of investment (ROI)

19. WHAT IS GREAT (OR BAD)
ABOUTTHESE EXPERIENCES?

20. Instagram Netflix
BMW Car Dashboard
Herman Miller
Chair
iPhone

21. Xbox
Square Cash MTA Kiosk
Oculus Rift Mario Kart
Uber App

22. WHAT IS GREAT ABOUT
THESE EXPERIENCES?
1-Solves a problem
2-Creates habits
3-Inspire Emotions
3-Becomes Indispensable

23. 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..)

24. IA HEURISTICS
Source: Abby Covert IA Heuristics

25. UX DESIGN PROCESS
is a set of tools and techniques to take users needs into
account at every stage of the product lifecycle.

26. 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

27. Issue card exercise for the redesign of a consulting company website.The goal of this
exercise was to understand business needs and pain points

28. 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

29. Interview script for product development of an professional network for the art world

30. Survey sample for curriculum development of online education platform

31. DISCOVER
•Look at your competitors
Technique: Competitive Analysis
----> Understand best practices and patterns of
behaviors

32. Competitive analysis diagram for donation based website

33. 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

34. 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

35. Personas of Mail Chimp
Source: Mail Chimp

36. 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

37. 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

38. 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

39. Source: Macadamian Blog

40. 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.

41. Example of site map

42. 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)

43. 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

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

45. ...VISUAL DESIGN
Look and Feel
GUI(Graphical User Interface)

46. ...DEVELOPMENT
Programmers code front and back end experience
Release a beta version in QA (Quality Assurance)
(Find bugs and errors)

47. ...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

48. 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

49. Paper prototype

50. Functioning prototype using InVision software

51. 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

52. WORKING ENVIRONMENTS
INTHE UX FIELD
• Agencies
• Clients
• Start-ups
• Tech companies
• Freelance

53. 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)

54. 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

55. QUESTIONS?

56. WATCHTHIS