3. What’s UX!? UX success Strategy User Centred Design Goals, tasksInformation Architecture Wireframing Sketching Paper Prototyping Assessment States User Flows & ScenariosMake a case for wireframes Mock-up soware Code prototypes User Testing
4. What will you get out of it?
5. What’s UX!?
6. User Experience Design
7. “Anyone can make the simplecomplicated. Creativity ismaking the complicatedsimple.” - Charles Mingus
8. e design of experiences
9. e design of experiencesHuman centred
10. e design of experiencesHuman centredInteractions
11. e design of experiencesHuman centredInteractionsDiﬀerent to UI
12. e design of experiencesHuman centredInteractionsDiﬀerent to UIAccess to value
13. Examples of good UX
14. POST (& other apps) by Meri Media
15. Dollar Shave Club
17. Rdio product site
19. path app
20. Bus o clock
21. Where to start with UX?
22. A great idea!
23. What’s your idea?
24. Now write yours with nomention of the technologymedium or other ideas...
25. Do you LOVE this idea?
26. Platforms to consider
29. What’s success?
30. Select your platforms
31. Name your idea
32. Elevator pitch!
33. Design based on a real needand for real people...
34. Do you have access to yourusers?
35. What is a persona?
36. Exercise –Write down 3 personas for your site/app
37. What are the key goals?
38. What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare diﬀerent interfacedesign alternatives in a fair way.Can be personal, practical or false goals.
39. Tell my friends who are in town that I have just arrived at a locationKey goal of Foursquare
40. Demo –Goals for PopDown
41. Exercise –Write down the key goals for your project
43. Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task analysis, and arerecombined into sequence of steps for scenariodevelopment.
44. Select foursquare app on my phone Select “check-in” button Select the location I’m at from a list of nearest locations Select “Share with facebook” Select “check-in” buttonKey task of Foursquare
45. Demo –Tasks for PopDown
46. Exercise –Write down 3 task that achieve 3 goals foryour site/app
48. Post-its to Omnigraﬄe...
49. Site maps & Flow charts
50. Site map
51. Site map
52. Site map
53. Flow chart
54. Flow chart
55. Flow chart
56. Example -Craing an IA for PopDown
57. Link tasks into simple steps, think about a realuser performing the tasks
58. Highlight the core functions in your flow
59. Exercise –IA: Draw a hierarchy of the key tasks,highlighting the key functions
64. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Soware Prototype
65. Why make wireframes?
66. Concept Exploration
67. Concept ExplorationLayout Content on Pages
68. Concept ExplorationLayout Content on PagesBrainstorm Interactions
69. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
70. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
71. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
72. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
74. Demo –Facebook Profile Page
75. Exercise –Draw a sketch of the Twitter profile pageon the web version or the app version
77. Guess the wireframe!
78. 8 tips for wireframing
79. Have clear objectives
80. Make it functional
81. Keep it clean
82. User Interface is not User Experience
83. Repetition. Repetition. Repetition.
84. Consider dependencies
85. Don’t be lazy
86. Know when to stop
87. Demo –Sketch of PopDown
88. Exercise –Draw a sketch for your idea.
90. Do your key functions standout?
91. Why designs fail?
92. Why designs fail?Users aren’t motivated to achieve goals
93. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
94. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
96. Errors, alerts & successes
97. No content
98. Events (e.g. click, hover, tap and swipe)
99. Hover mode - Google maps
100. Responsive design and orientation
101. Responsive web design examples
102. User flows & Scenarios
103. User Flow for 1 scenario
104. User flow for multiple scenarios
105. User flow for multiple scenarios
106. User flow for all scenarios
107. Scenarios help you design and test
108. Demo-Scenario for PopDown and wireframingof the user flow
109. Excercise -Chose a scenario for your project andwireframe of the user flow with less than 5key screens
111. Paper prototyping
112. Demo-Paper Prototype for PopDown
113. Popdown Paper Prototype - Home screen
114. Popdown Paper Prototype - Shop mode
115. Popdown Paper Prototype - select a category
116. Popdown Paper Prototype - aer a category is selected
117. Popdown Paper Prototype - shop view hover mode
118. Popdown Paper Prototype - product view
119. Exercise –Paper prototype your site/app
120. Making a case for wireframes
122. Creativity is in the making
123. Making changes in Photoshop or code willtake much longer than in wireframes
124. Some clients are happy to see IA andwireframes, if not, storyboard or sketch a userjourneyYour client knows customer experience isking!Testing on paper with the whole team willenage everyone with the importance of the UXDo it anyway...
126. You’re broke! So it’s even more importantto get it right in a lo-fi way...
127. Customer experience will help you writecertain aspects of your business plan