Mini version of Rik and I's Introduction to UX. Given at General Assembly, London.

1. UX Workshop
Rik Lomas Jessi Baker
@riklomas @jessibaker

2. What’s UX!?

3. User Experience
Design

4. “Anyone can make the
simple complicated.
Creativity is making the
complicated simple.”
- Charles Mingus

5. The design of
experiences

6. The design of
experiences
Human centred

7. The design of
experiences
Human centred
Interactions

8. The design of
experiences
Human centred
Interactions
Different to UI

9. The design of
experiences
Human centred
Interactions
Different to UI
Access to value

10. Examples of
good UX

11. POST (& other apps) by Meri Media

12. Dollar Shave Club

13. dribbble

14. Rdio product site

15. myownbike.de

16. path app

17. Bus o clock

18. Idea
Select a platform for your
MVP
Goals and tasks
Personas
Information Architecture

19. What is a
wireframe?

23. No fonts
No colour
No graphics

24. Wireframe fidelity
Low High
Sketching Paper Mock up Code
Prototype Software Prototype

25. Why make
wireframes?

26. Concept Exploration

27. Concept Exploration
Layout Content on Pages

28. Concept Exploration
Layout Content on Pages
Brainstorm Interactions

29. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling

30. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus

31. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation

32. Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Minimize Risk

33. Sketching

38. Demo –
Facebook Profile Page

39. Exercise –
Draw a sketch of the Twitter
profile page on the web version or
the app version

40. Guess the
wireframe!

41. 8 tips for
wireframing

42. Have clear objectives

43. Make it functional

44. Keep it clean

45. User Interface is not User
Experience

46. Repetition. Repetition. Repetition.

47. Consider dependencies

48. Don’t be lazy

49. Know when to stop

50. Demo –
Sketch of PopDown

51. Exercise –
Draw a sketch for your idea.

52. Assessment

53. Do your key functions standout?

54. Why designs fail?

55. Why designs fail?
Users aren’t motivated to achieve goals

56. Why designs fail?
Users aren’t motivated to achieve goals
Users don’t understand how it works

57. Why designs fail?
Users aren’t motivated to achieve goals
Users don’t understand how it works
Users don’t see things

58. States

59. Errors, alerts & successes

62. No content

64. Events (e.g. click, hover, tap and
swipe)

65. Hover mode - Google maps

67. Responsive design and orientation

69. Responsive web design examples

70. User flows &
Scenarios

71. User Flow for 1 scenario

72. User flow for multiple scenarios

73. User flow for multiple scenarios

74. User flow for all scenarios

75. Scenarios help you design and test

76. Demo-
Scenario for PopDown and
wireframing of the user flow

77. Excercise -
Chose a scenario for your project
and wireframe of the user flow
with less than 3 key screens

78. Paper prototyping

87. Demo-
Paper Prototype for PopDown

89. Popdown Paper Prototype - Home screen

90. Popdown Paper Prototype - Shop mode

91. Popdown Paper Prototype - select a category

92. Popdown Paper Prototype - after a category is selected

93. Popdown Paper Prototype - shop view hover mode

94. Popdown Paper Prototype - product view

95. Exercise –
Paper prototype your site/app

96. Making a case for
wireframes

97. Agencies

98. Creativity is in the making

99. Making changes in Photoshop or
code will take much longer than in
wireframes

100. Start-ups

101. You’re broke! So it’s even more
important to get it right in a lo-fi
way...

102. Customer experience will help you
write certain aspects of your
business plan

103. Mock-up Software

104. Balsamiq http://
www.balsamiq.com/ Mockingbird
https://gomockingbird.com/
Keynote
Omnigraffle http://
www.omnigraffle.com

105. Libraries....
Mockups to go
https://
mockupstogo.mybalsamiq.com/
Keynotopia http://keynotopia.com/
Graffletopia http://graffletopia.com/

106. Code Prototypes

107. 960.gs http://960.gs/
Twitter Bootstrap
http://twitter.github.com/
bootstrap
Zurb Foundation
http://foundation.zurb.com
Napkee

108. User Testing

110. Tools for Testing

111. Silverback http://silverbackapp.com/
Realizer http://www.realizerapp.com
AirDisplay http://avatron.com/apps/
air-display
User Testing http://

112. Any questions?

113. Thanks!
Rik Lomas Jessi Baker
@riklomas @jessibaker
rik@lomalogue.com jessi@cantab.net