UX Work Shop

  • 1,631 views
Uploaded on

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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,631
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
28
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
  • 2. What are we going to do today?
  • 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. 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 centredInteractionsDifferent to UI
  • 12. e design of experiencesHuman centredInteractionsDifferent to UIAccess to value
  • 13. Examples of good UX
  • 14. POST (& other apps) by Meri Media
  • 15. Dollar Shave Club
  • 16. dribbble
  • 17. Rdio product site
  • 18. myownbike.de
  • 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
  • 27. MVP
  • 28. Roadmap
  • 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 different 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
  • 42. Tasks
  • 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
  • 47. InformationArchitecture
  • 48. Post-its to Omnigraffle...
  • 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 -Craing 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
  • 60. Remove the crap from your app
  • 61. Core repeatable functions.e.g. Tweet, retweet + follow
  • 62. What is a wireframe?
  • 63. No fontsNo colourNo graphics
  • 64. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Soware 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
  • 73. Sketching
  • 74. Demo –Facebook Profile Page
  • 75. Exercise –Draw a sketch of the Twitter profile pageon the web version or the app version
  • 76. LUNCH!
  • 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.
  • 89. Assessment
  • 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
  • 95. States
  • 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
  • 110. BREAK
  • 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 - aer 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
  • 121. Agencies
  • 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...
  • 125. STARTUPS
  • 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
  • 128. Mockup Soware
  • 129. Balsamiqhttp://www.balsamiq.com/
  • 130. Balsamiq demo...
  • 131. Mockingbirdhttps://gomockingbird.com/
  • 132. Keynote Mac only
  • 133. Omnigrafflehttp://www.omnigraffle.com
  • 134. Axurehttp://www.axure.com/
  • 135. Mock up libraries
  • 136. MockupsToGohttps://mockupstogo.mybalsamiq.com/
  • 137. Keynotopiahttp://keynotopia.com/
  • 138. https://vimeo.com/13892268
  • 139. Graffletopiahttp://graffletopia.com/
  • 140. Code prototypes
  • 141. 960.gshttp://960.gs/
  • 142. Twitter Bootstraphttp://twitter.github.com/bootstrap/
  • 143. Zurb Foundationhttp://foundation.zurb.com/
  • 144. BREAK
  • 145. User testing
  • 146. How to do a user test
  • 147. Develop a test plan
  • 148. Choose a place
  • 149. Select participants
  • 150. Conduct session
  • 151. Don’t cheat! No hints. Let them figure it out...
  • 152. Monitor time to perform tasks
  • 153. A/B Testing:Test different layouts of same page on critical mass of different people
  • 154. De-brief participant
  • 155. Wash, rinse, repeat.
  • 156. Demo –Making a test plan for PopDown
  • 157. Exercise –Make a test plan based on user scenario
  • 158. Demo –PopDown testing
  • 159. Exercise –Test your idea using your paper prototypes withthree people
  • 160. Tools for testing
  • 161. Silverbackhttp://silverbackapp.com/
  • 162. Realizerhttp://www.realizerapp.com/
  • 163. AirDisplayhttp://avatron.com/apps/air-display
  • 164. UserTesting.comhttp://www.usertesting.com/
  • 165. Kiss Metricshttp://www.kissmetrics.com/
  • 166. What next?
  • 167. Five booksworth reading
  • 168. Websites
  • 169. A List Aparthttp://www.alistapart.com/
  • 170. boxesandarrowshttp://www.boxesandarrows.com/
  • 171. Site Inspirehttp://siteinspire.com/
  • 172. Pattern Taphttp://patterntap.com
  • 173. Observe!Experiment! Fail!
  • 174. Any questions?
  • 175. anks! Rik Lomas Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net