This document provides an overview of user experience (UX) design. It defines UX as considering how users interact with products and technology from both a creative and engineering perspective. The document uses examples like a disposable camera and flight booking website to illustrate UX design principles like usability testing, visual hierarchy, and making products intuitive for users. Key takeaways are that UX designers should focus on the user, leverage empathy in their work, and quickly test their designs.

2. Microsoft Innovation Center @ Botswana Innovation Hub
March 24-26, 2014
Bihux.tumblr.com
Allison Tran
designer @ Microsoft
Allison.tran.90@gmail.com
www.allisontran.com
Additional contributor:
Michelle Guarino
Designer @ Microsoft

3. I want my
product to be
user-friendly.
I want to
attract more
users.
I want to
positively
impact my
users.
Your objectives:

4. Introduce you
to UX and the
design process
Help you
practice
design
methods
Give you UX
tips!
My objectives:

5. YOUR KEY TAKE-AWAYS
1. Never forget about the user.
2. Empathy is the greatest tool you can
leverage to build better products.
3. Move Fast and Test your Designs.

6. what is UX?
BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com

7. What is UX?

8. UX = User Experience
It is a skill that is both a science and an art.
User Experience Design is the way we make products more effective,
useable and meaningful for your users.

9. Consider the disposable camera:
The Packaging and Information Design
What does the camera packaging try to tell the user? If we just look at the product, it tells you the brand, Kodak, shows
you that it’s a camera, and tells you that it can take 27 photos.

10. The Product Value & Buyer ’s Decision
Take a look at this camera in a store setting. With so many choices, how does the user decide to choose this one camera?
Is it the price? Packaging?

11. Physical Interaction
How Is the camera used to take the photo? What does the user press to take a photo? How does the user hold the
camera?

12. Physical Interaction
How does he get the photos? How will he remove the film from the camera? How does the user know how to do that? With
this camera there are instructions on the back.

13. User Habits
How does the user feel about taking photos? What kind of photos will he or she take? What are the scenarios where
someone would have a disposable camera and why?

14. Incidental Users
The disposable camera is for everyone. But what about people outside of their expected users? Will kids be able to use it?
What would their experience be?

15. UX = User Experience
UX is all about considering the user. How do we make technology easier for people to
use and understand? How do we make the products we build meaningful for people?

16. UX = Creativity and Engineering

17. User Experience

19. Design Strategy: Get the User ’s to Buy a Flight Easily. Make the Website as Simple as possible.

20. Design Research: Test the Webpage with Users to see if actual people would be able to navigate the website and know
how to use it.

21. Visual Design: Visually the website uses hierarchy and color to make buying flights the first thing you see. They’re also
advertising flights to you in a visual way that looks in place.

22. Usability: They made sure that you know what you can interact with and what is a button and clickable.

23. UX = Creativity and
Engineering
The engineering aspect of User Experience is how we engineer experiences and digital products to make sense to a human
being.

24. UX is about Human Centered Design
HCI = Human Computer Interaction
Traditionally called Human Computer Interaction, HCI represents the engineering approach we take to UX . It’s rooted in
understanding how people use technology and how the components of a digital design help a user accomplish a task.

25. HCI fundamentally asks how people converse and interact with interfaces?
Interfaces must communicate and inform the user on how it can be used.
What happens when users see an interface? What is he or she thinking? Does he understand what he or she is looking at?
What is the user supposed to do next?

26. HCI helps the User With the Task
The Interface elements are telling the user the options, which one is selected, which one should be selected, and also
gives the user the option to minimize or close the dialog.

27. Anticipate User Error or Confusion
It anticipates what the user might do in an interface, and what errors or confusion might take place. Here, the google
interface is smart in noting that you typed your search incorrectly. It suggests to you what you were actually searching for.
It also points out ways you can see more options or share notes.

28. Give Feedback
The Interface elements are giving you feedback about whether your whether you entered something in incorrectly.

29. Let the User Know Where They Are in the Process
It’s telling the user where they are in the process and how many more steps they have
left.

30. A Progress Bar

31. A Progress Bar