This is a short overview of UX and the relationship between UI, Usability and UX with examples. It also briefly covers the UX process. This presentation was meant for internal training and borrows content available on the internet. I do not claim any ownership of the material included in this presentation.

1. 1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved.
UX Basics
Kabir Malkani
October 2019

2. 2© Creative IT, Inc. All rights reserved.
Interbrand – Best
Global Brands 2019
Across all sectors

3. 3© Creative IT, Inc. All rights reserved.
Interbrand – Best Global Brands 2019
Technology and Business Services

4. 4© Creative IT, Inc. All rights reserved.
Spot the difference!
Designing the product Designing the experience

5. 5© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX

6. 6© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Utility – It meets my needs

7. 7© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Usability – I am able to use the product easily

8. 8© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Desirability – I like the way the product looks and feels

9. 9© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Brand Experience – My overall feeling about the brand/product is good!
A positive UX leads to advocacy

10. 10© Creative IT, Inc. All rights reserved.
Relationship between UI, Usability and UX

11. 11© Creative IT, Inc. All rights reserved.
Fundamental Design Principles

12. 12© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles

13. 13© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#1 Provide context
Ensure people are contextually aware of
where they are within their journey.
Think ‘breadcrumbs’.

14. 14© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles

15. 15© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#2 Be human
Eliminate confusion. Think human
interaction.

16. 16© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles

17. 17© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#3 Make it discoverable
Score “delight” points by being intuitive

18. 18© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles

19. 19© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#4 Make it easy
Familiarize yourself with common
widgets, patterns, metaphors and
gestures.

20. 20© Creative IT, Inc. All rights reserved.
WTF!?
Fundamental Design
Principles

21. 21© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#5 Keep it simple!
Avoid clutter and confusion. Intuitiveness
leads to discovery.

22. 22© Creative IT, Inc. All rights reserved.
What is UX?

23. 23© Creative IT, Inc. All rights reserved.
UI UXUI can influence UX…
Layout
Visual Design
Branding
Colors
Typography
Interaction
Information
Wireframes / Prototypes
User Research
Scenarios
…but good UI does not necessarily mean good UX

24. 24© Creative IT, Inc. All rights reserved.
Surface
Visual Design
Skeleton
Interface Design
Navigation Design
Information Design
Structure
Interaction Design
Information Architecture
Scope
Functional Specs
Content Requirements
Strategy
User Needs
Site Objectives
Jesse James Garrett’s Layers of User Experience Model
The sum of a person’s
emotions and behaviors
when interacting with a
product, system or service

25. 25© Creative IT, Inc. All rights reserved.
The UX Process

26. 26© Creative IT, Inc. All rights reserved.
The UX Process

27. 27© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition
1. Stakeholder Interviews
2. Create Value Proposition
3. Concept Sketching / Rough Mockup
4. Project Kickoff Meeting / Metrics

28. 28© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition >
Stakeholder Interviews

29. 29© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research
1. User Needs / Individual In-depth Interviews (IDI)
2. Competitive Research

30. 30© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research >
User Interviews
Topics covered:
1. Background (such as ethnographic data)
2. The use of technology in general
3. The use of the product
4. The user’s main objectives and motivations
5. The user’s pain points
Hint: Include a mix of qualitative and
quantitative questions

31. 31© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis
1. Create Hypothetical Personas
2. Create Experience Maps / Customer Journey

32. 32© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis > Personas

33. 33© Creative IT, Inc. All rights reserved.
UX Process
Step #4 Design
1. Sketching
2. Wireframing
3. Prototyping
4. Design Specifications

34. 34© Creative IT, Inc. All rights reserved.
Sketching
Wireframing
Prototyping
The UX Process
Step #2 Product Research >
Sketching, Wireframing,
Prototyping

35. 35© Creative IT, Inc. All rights reserved.
UX Process
Step #5 Validation
1. Internal Checks
2. User Testing Sessions
3. Metrics Analysis
4. User Feedback (Post Launch)

36. 36© Creative IT, Inc. All rights reserved.
User Testing
Step #5 Validation Methods
Usability Testing
a. Moderated
b. Unmoderated (URUT)
2. Focus Groups 3. Beta Testing 4. A/B Testing 5. Surveys

37. 37© Creative IT, Inc. All rights reserved.
Best Practices
• Keep physical constraints in mind
• Put yourself in the place of a “visitor”. Focus on user goals
• Be consistent with colors and typography and actions
• Familiarize yourself with gestures and widgets
• Pay attention to feedback (from everyone) and strive to constantly
improve your product.
• Reduce loading time
• Provide sensory feedback for completed actions
• Use feedback from users to constantly improve your product
• Instill a “Wow” factor or an emotional connect with the users

38. 38© Creative IT, Inc. All rights reserved.
Epic Fails

39. 39© Creative IT, Inc. All rights reserved.
Killing two birds
with one stone
does not always
give desirable
results

40. 40© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy

41. 41© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy

42. 42© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy

43. 43© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy

44. 44© Creative IT, Inc. All rights reserved.
Double-check
everything!

45. 45© Creative IT, Inc. All rights reserved.
Double-check
everything!

46. 46© Creative IT, Inc. All rights reserved.
Double-check
everything!

47. 47© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!

48. 48© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!

49. 49© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.

50. 50© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.

51. 51© Creative IT, Inc. All rights reserved.
Think of social,
cultural and
linguistic
symbolism

52. 52© Creative IT, Inc. All rights reserved.
Think about the
human factor

53. 53© Creative IT, Inc. All rights reserved.
Think about the
human factor

54. 54© Creative IT, Inc. All rights reserved.
“Design is not just what it
looks like and feels like.
Design is how it works.”
Steve Jobs
“A user interface is like a joke.
If you have to explain it, it’s
not that good”.
Martin Leblanc
“Any product that needs a
manual to work is broken.”
Elon Musk
Thank you!