UX WorkshopRik Lomas    Jessi Baker @riklomas   @jessibaker
What are we going to    do today?
What’s UX!?       UX success         Strategy  User Centred Design       Goals, tasksInformation Architecture      Wirefra...
What will you get out of          it?
What’s UX!?
User Experience Design
“Anyone can make the simplecomplicated. Creativity ismaking the complicatedsimple.”                       - Charles Mingus
e design of experiences
e design of experiencesHuman centred
e design of experiencesHuman centredInteractions
e design of experiencesHuman centredInteractionsDifferent to UI
e design of experiencesHuman centredInteractionsDifferent to UIAccess to value
Examples of good UX
POST (& other apps) by Meri Media
Dollar Shave Club
dribbble
Rdio product site
myownbike.de
path app
Bus o clock
Where to start with      UX?
A great idea!
What’s your idea?
Now write yours with nomention of the technologymedium or other ideas...
Do you LOVE this idea?
Platforms to consider
MVP
Roadmap
What’s success?
Select your platforms
Name your idea
Elevator pitch!
Design based on a real needand for real people...
Do you have access to yourusers?
What is a persona?
Exercise –Write down 3 personas for your site/app
What are the key goals?
What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare ...
Tell my friends                         who are in town that I                          have just arrived at              ...
Demo –Goals for PopDown
Exercise –Write down the key goals for your project
Tasks
Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task an...
Select foursquare  app on my phone   Select “check-in”        button      Select the   location I’m at    from a list of  ...
Demo –Tasks for PopDown
Exercise –Write down 3 task that achieve 3 goals foryour site/app
InformationArchitecture
Post-its to Omnigraffle...
Site maps & Flow charts
Site map
Site map
Site map
Flow chart
Flow chart
Flow chart
Example -Craing an IA for PopDown
Link tasks into simple steps, think about a realuser performing the tasks
Highlight the core functions in your flow
Exercise –IA: Draw a hierarchy of the key tasks,highlighting the key functions
Remove the crap from your app
Core repeatable functions.e.g. Tweet, retweet + follow
What is a wireframe?
No fontsNo colourNo graphics
Wireframe fidelityLow                                HighSketching     Paper     Mock up     Code            Prototype   S...
Why make wireframes?
Concept Exploration
Concept ExplorationLayout Content on Pages
Concept ExplorationLayout Content on PagesBrainstorm Interactions
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
Sketching
Demo –Facebook Profile Page
Exercise –Draw a sketch of the Twitter profile pageon the web version or the app version
LUNCH!
Guess the wireframe!
8 tips for wireframing
Have clear objectives
Make it functional
Keep it clean
User Interface is not User Experience
Repetition. Repetition. Repetition.
Consider dependencies
Don’t be lazy
Know when to stop
Demo –Sketch of PopDown
Exercise –Draw a sketch for your idea.
Assessment
Do your key functions standout?
Why designs fail?
Why designs fail?Users aren’t motivated to achieve goals
Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
States
Errors, alerts & successes
No content
Events (e.g. click, hover, tap and swipe)
Hover mode - Google maps
Responsive design and orientation
Responsive web design examples
User flows & Scenarios
User Flow for 1 scenario
User flow for multiple scenarios
User flow for multiple scenarios
User flow for all scenarios
Scenarios help you design and test
Demo-Scenario for PopDown and wireframingof the user flow
Excercise -Chose a scenario for your project andwireframe of the user flow with less than 5key screens
BREAK
Paper prototyping
Demo-Paper Prototype for PopDown
Popdown Paper Prototype - Home screen
Popdown Paper Prototype - Shop mode
Popdown Paper Prototype - select a category
Popdown Paper Prototype - aer a category is selected
Popdown Paper Prototype - shop view hover mode
Popdown Paper Prototype - product view
Exercise –Paper prototype your site/app
Making a case for  wireframes
Agencies
Creativity is in the making
Making changes in Photoshop or code willtake much longer than in wireframes
Some clients are happy to see IA andwireframes, if not, storyboard or sketch a userjourneyYour client knows customer exper...
STARTUPS
You’re broke! So it’s even more importantto get it right in a lo-fi way...
Customer experience will help you writecertain aspects of your business plan
Mockup Soware
Balsamiqhttp://www.balsamiq.com/
Balsamiq demo...
Mockingbirdhttps://gomockingbird.com/
Keynote Mac only
Omnigrafflehttp://www.omnigraffle.com
Axurehttp://www.axure.com/
Mock up libraries
MockupsToGohttps://mockupstogo.mybalsamiq.com/
Keynotopiahttp://keynotopia.com/
https://vimeo.com/13892268
Graffletopiahttp://graffletopia.com/
Code prototypes
960.gshttp://960.gs/
Twitter Bootstraphttp://twitter.github.com/bootstrap/
Zurb Foundationhttp://foundation.zurb.com/
BREAK
User testing
How to do a user test
Develop a test plan
Choose a place
Select participants
Conduct session
Don’t cheat! No hints. Let them figure it out...
Monitor time to perform tasks
A/B Testing:Test different layouts of same page on critical           mass of different people
De-brief participant
Wash, rinse, repeat.
Demo –Making a test plan for PopDown
Exercise –Make a test plan based on user scenario
Demo –PopDown testing
Exercise –Test your idea using your paper prototypes withthree people
Tools for testing
Silverbackhttp://silverbackapp.com/
Realizerhttp://www.realizerapp.com/
AirDisplayhttp://avatron.com/apps/air-display
UserTesting.comhttp://www.usertesting.com/
Kiss Metricshttp://www.kissmetrics.com/
What next?
Five booksworth reading
Websites
A List Aparthttp://www.alistapart.com/
boxesandarrowshttp://www.boxesandarrows.com/
Site Inspirehttp://siteinspire.com/
Pattern Taphttp://patterntap.com
Observe!Experiment!   Fail!
Any questions?
anks! Rik Lomas          Jessi Baker    @riklomas          @jessibakerrik@lomalogue.com   jessi@cantab.net
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
UX Work Shop
Upcoming SlideShare
Loading in...5
×

UX Work Shop

1,871

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,871
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×