UX Work Shop

1,927
-1

Published on

1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General Assembly

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,927
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

UX Work Shop

  1. 1. UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
  2. 2. What are we going to do today?
  3. 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 soware Code prototypes User Testing
  4. 4. What will you get out of it?
  5. 5. What’s UX!?
  6. 6. User Experience Design
  7. 7. “Anyone can make the simplecomplicated. Creativity ismaking the complicatedsimple.” - Charles Mingus
  8. 8. e design of experiences
  9. 9. e design of experiencesHuman centred
  10. 10. e design of experiencesHuman centredInteractions
  11. 11. e design of experiencesHuman centredInteractionsDifferent to UI
  12. 12. e design of experiencesHuman centredInteractionsDifferent to UIAccess to value
  13. 13. Examples of good UX
  14. 14. POST (& other apps) by Meri Media
  15. 15. Dollar Shave Club
  16. 16. dribbble
  17. 17. Rdio product site
  18. 18. myownbike.de
  19. 19. path app
  20. 20. Bus o clock
  21. 21. Where to start with UX?
  22. 22. A great idea!
  23. 23. What’s your idea?
  24. 24. Now write yours with nomention of the technologymedium or other ideas...
  25. 25. Do you LOVE this idea?
  26. 26. Platforms to consider
  27. 27. MVP
  28. 28. Roadmap
  29. 29. What’s success?
  30. 30. Select your platforms
  31. 31. Name your idea
  32. 32. Elevator pitch!
  33. 33. Design based on a real needand for real people...
  34. 34. Do you have access to yourusers?
  35. 35. What is a persona?
  36. 36. Exercise –Write down 3 personas for your site/app
  37. 37. What are the key goals?
  38. 38. What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare different interfacedesign alternatives in a fair way.Can be personal, practical or false goals.
  39. 39. Tell my friends who are in town that I have just arrived at a locationKey goal of Foursquare
  40. 40. Demo –Goals for PopDown
  41. 41. Exercise –Write down the key goals for your project
  42. 42. Tasks
  43. 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. 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. 45. Demo –Tasks for PopDown
  46. 46. Exercise –Write down 3 task that achieve 3 goals foryour site/app
  47. 47. InformationArchitecture
  48. 48. Post-its to Omnigraffle...
  49. 49. Site maps & Flow charts
  50. 50. Site map
  51. 51. Site map
  52. 52. Site map
  53. 53. Flow chart
  54. 54. Flow chart
  55. 55. Flow chart
  56. 56. Example -Craing an IA for PopDown
  57. 57. Link tasks into simple steps, think about a realuser performing the tasks
  58. 58. Highlight the core functions in your flow
  59. 59. Exercise –IA: Draw a hierarchy of the key tasks,highlighting the key functions
  60. 60. Remove the crap from your app
  61. 61. Core repeatable functions.e.g. Tweet, retweet + follow
  62. 62. What is a wireframe?
  63. 63. No fontsNo colourNo graphics
  64. 64. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Soware Prototype
  65. 65. Why make wireframes?
  66. 66. Concept Exploration
  67. 67. Concept ExplorationLayout Content on Pages
  68. 68. Concept ExplorationLayout Content on PagesBrainstorm Interactions
  69. 69. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
  70. 70. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
  71. 71. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
  72. 72. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
  73. 73. Sketching
  74. 74. Demo –Facebook Profile Page
  75. 75. Exercise –Draw a sketch of the Twitter profile pageon the web version or the app version
  76. 76. LUNCH!
  77. 77. Guess the wireframe!
  78. 78. 8 tips for wireframing
  79. 79. Have clear objectives
  80. 80. Make it functional
  81. 81. Keep it clean
  82. 82. User Interface is not User Experience
  83. 83. Repetition. Repetition. Repetition.
  84. 84. Consider dependencies
  85. 85. Don’t be lazy
  86. 86. Know when to stop
  87. 87. Demo –Sketch of PopDown
  88. 88. Exercise –Draw a sketch for your idea.
  89. 89. Assessment
  90. 90. Do your key functions standout?
  91. 91. Why designs fail?
  92. 92. Why designs fail?Users aren’t motivated to achieve goals
  93. 93. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
  94. 94. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
  95. 95. States
  96. 96. Errors, alerts & successes
  97. 97. No content
  98. 98. Events (e.g. click, hover, tap and swipe)
  99. 99. Hover mode - Google maps
  100. 100. Responsive design and orientation
  101. 101. Responsive web design examples
  102. 102. User flows & Scenarios
  103. 103. User Flow for 1 scenario
  104. 104. User flow for multiple scenarios
  105. 105. User flow for multiple scenarios
  106. 106. User flow for all scenarios
  107. 107. Scenarios help you design and test
  108. 108. Demo-Scenario for PopDown and wireframingof the user flow
  109. 109. Excercise -Chose a scenario for your project andwireframe of the user flow with less than 5key screens
  110. 110. BREAK
  111. 111. Paper prototyping
  112. 112. Demo-Paper Prototype for PopDown
  113. 113. Popdown Paper Prototype - Home screen
  114. 114. Popdown Paper Prototype - Shop mode
  115. 115. Popdown Paper Prototype - select a category
  116. 116. Popdown Paper Prototype - aer a category is selected
  117. 117. Popdown Paper Prototype - shop view hover mode
  118. 118. Popdown Paper Prototype - product view
  119. 119. Exercise –Paper prototype your site/app
  120. 120. Making a case for wireframes
  121. 121. Agencies
  122. 122. Creativity is in the making
  123. 123. Making changes in Photoshop or code willtake much longer than in wireframes
  124. 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...
  125. 125. STARTUPS
  126. 126. You’re broke! So it’s even more importantto get it right in a lo-fi way...
  127. 127. Customer experience will help you writecertain aspects of your business plan
  128. 128. Mockup Soware
  129. 129. Balsamiqhttp://www.balsamiq.com/
  130. 130. Balsamiq demo...
  131. 131. Mockingbirdhttps://gomockingbird.com/
  132. 132. Keynote Mac only
  133. 133. Omnigrafflehttp://www.omnigraffle.com
  134. 134. Axurehttp://www.axure.com/
  135. 135. Mock up libraries
  136. 136. MockupsToGohttps://mockupstogo.mybalsamiq.com/
  137. 137. Keynotopiahttp://keynotopia.com/
  138. 138. https://vimeo.com/13892268
  139. 139. Graffletopiahttp://graffletopia.com/
  140. 140. Code prototypes
  141. 141. 960.gshttp://960.gs/
  142. 142. Twitter Bootstraphttp://twitter.github.com/bootstrap/
  143. 143. Zurb Foundationhttp://foundation.zurb.com/
  144. 144. BREAK
  145. 145. User testing
  146. 146. How to do a user test
  147. 147. Develop a test plan
  148. 148. Choose a place
  149. 149. Select participants
  150. 150. Conduct session
  151. 151. Don’t cheat! No hints. Let them figure it out...
  152. 152. Monitor time to perform tasks
  153. 153. A/B Testing:Test different layouts of same page on critical mass of different people
  154. 154. De-brief participant
  155. 155. Wash, rinse, repeat.
  156. 156. Demo –Making a test plan for PopDown
  157. 157. Exercise –Make a test plan based on user scenario
  158. 158. Demo –PopDown testing
  159. 159. Exercise –Test your idea using your paper prototypes withthree people
  160. 160. Tools for testing
  161. 161. Silverbackhttp://silverbackapp.com/
  162. 162. Realizerhttp://www.realizerapp.com/
  163. 163. AirDisplayhttp://avatron.com/apps/air-display
  164. 164. UserTesting.comhttp://www.usertesting.com/
  165. 165. Kiss Metricshttp://www.kissmetrics.com/
  166. 166. What next?
  167. 167. Five booksworth reading
  168. 168. Websites
  169. 169. A List Aparthttp://www.alistapart.com/
  170. 170. boxesandarrowshttp://www.boxesandarrows.com/
  171. 171. Site Inspirehttp://siteinspire.com/
  172. 172. Pattern Taphttp://patterntap.com
  173. 173. Observe!Experiment! Fail!
  174. 174. Any questions?
  175. 175. anks! Rik Lomas Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net

×