A talk on the UX Process from Discovery to Design Event: The Behance Portfolio Review, Kolkata (https://bit.ly/2HEWzfS) Talk Video available on: Discovery Phase: https://youtu.be/rAebyPoHHdw Design Phase: https://youtu.be/jM4j7VPLni0

1. UI/ UX LEARNINGS
From Discovery to Design

2. • 3rd GenerationIndianChinese
• Self TaughtUX Designer
• Workingin QuantumInventions
• Impulsive HoarderofIdeas!
ABOUT ME

3. • Discovery
• Design
• Deployment
WHAT I WILL
BE COVERING

4. • Discovery of
THE QUESTION
• Discovery of
THE SOLUTIONDISCOVERY
Icon Created by Gregor Cresnar from the Noun Project

6. Discovery of the Problem
“neversolvetheproblemIamaskedto
solve”
TheDesignofEverydayThings
DonNorman

7. • From collected
existing Knowledge
• Research into a new unknown Domain
Discovery of
THE SOLUTION

8. RSSFeed
FEEDLY
Keeping yourself
Updated
Collected
existing Knowledge

9. • PinBoard
• Evernote
• Pinterest
• Pocket
Collecting for
FutureUse
Collected
existing Knowledge

10. • PinBoard
• Evernote
• Pinterest
• Pocket
Collecting for
FutureUse
Collected
existing Knowledge

11. • PinBoard
• Evernote
• Pinterest
• Pocket
Collecting for
FutureUse
Collected
existing Knowledge

12. Collecting for
FutureUse
Collected
existing Knowledge
• PinBoard
• Evernote
• Pinterest
• Pocket

13. Automotive UX
Source:tesla.com
A Case Study
Researchintoanew unknown
Domain

14. Whatmade me
seriously thinkaboutit?
This article…
A Case Study
Researchintoanew unknown
Domain

15. Whatmademeseriously thinkabout it?
This article…
A Case Study
Researchintoanew unknown
Domain

16. • AnEvaluationofTypefaceDesignina Text-RichAutomotiveUserInterface
• Slideshare:
CarUI DesignandSafety- SlippyUX
• ISODocument:Roadvehicles--Ergonomicaspectsoftransportinformationandcontrolsystems--
Specificationsandtestproceduresforin-vehiclevisualpresentation
Few Insights
I found…
A Case Study
Researchintoanew unknown
Domain

17. • Where toFind?
– Google
– Youtube
– SlideShare
– Slack: https://userexperiencedesign.slack.com/ Topic_automotive
– https://ux.stackexchange.com/
– Online Groups: LinkeIn Groups / Slack / Facebook
• What toFind?
– UsetheRight Terminology
• How toFind?
– Follow theScent
Lesson on Research
A Case Study
Researchintoanew unknown
Domain

18. • Persuasive Design
• FittsLaw
• Anti Affordance
DESIGN
Icon Created by Gregor Cresnar from the Noun Project

19. Whatis it?
Persuasivedesign is an area ofdesignpracticethatfocuseson
influencing humanbehavior through aproduct’s or service’s
characteristics
interaction-design.org
PersuasiveDesign

20. SlideShare:
Persuasive Design or The Fine Art of Separating People
from Their Bad Behaviours - Online
REALWORLD EXAMPLESPersuasiveDesign

21. DIGITALWORLDEXAMPLESPersuasiveDesign

22. A Quick Exercise
Fitts Law

23. Whatis it?
Fittslaw predicts thatthe time required torapidlymovetoa target
area isa function ofthe ratiobetweenthedistancetothe targetand
thewidthofthetarget
Wikipedia.org
Fitts Law

24. Radial Menu
DIGITALWORLDEXAMPLESFittsLaw
LabeledOptions

25. DIGITALWORLDEXAMPLESFittsLaw
Android Menu Drawer

26. Photoshop
OldToolbar
DIGITALWORLDEXAMPLESFittsLaw
Photoshop
NewToolbar

27. But firstwhat isAffordance?
theperceived or actual properties ofthething,primarily those
fundamentalpropertiesthatdeterminejust howthethingcould
possiblybe used…
The Design of Everyday Things
Don Norman
Anti Affordance

28. Sowhatis Anti-Affordancethen?
When designingsomething,itis as importanttoprevent misuseas it
istoencourage the correct use.This is done withanti-affordances
www.muffin.works
Anti Affordance

29. Camden
Bench
www.muffin.works
REALWORLD EXAMPLESAnti-Affordance
Drilling
Machine
CordlessSIM
Phone

30. DIGITALWORLDEXAMPLESAnti-Affordance
Apple
HomeScreen
Android
GalleryScreen

31. DIGITALWORLDEXAMPLESAnti-Affordance
Quick Mic
ConnectedScreen
Form Builder

32. • Store Upload
• App Asset
DEPLOYMENT
Icon Created by Danil Polshin from the Noun Project

33. App Store Splash Screens
Store Upload

34. App Store Splash Screens
Store Upload

35. Linked Smart Objects
Further Reading: helpx.adobe.com : Generate image assets from layers
TechniqueUsedStoreUpload

36. Adobe Image Generator
Further Reading: helpx.adobe.com : Generate image assets from layers
TechniqueUsedStoreUpload
Syntax
iOS/splash.png, 200% iOS/splash@2x.png

37. App Assets Generation
App AssetsGeneration

38. Adobe Image Generator
Further Reading: helpx.adobe.com : Generate image assets from layers
TechniqueUsedAppAsset Generation
Syntax
Default iOS/ + 200% iOS/@2x + 300% iOS/@3x + Android/mdpi/ + 150% Android/hdpi/ + 200%
Android/xdpi/….

39. Few thingsI can beofhelp with…
• HFI-CUA Course
• Online Resources
• Books
Q&A

40. • Linked In:
linkedin.com/in/robbyhsu/
• E-mail:
robert.hsu@gmail.com
• Pinterest:
in.pinterest.com/robbyhsu/
LET’S
CONNECT!

41. THANKYOU!