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

2.
What are we going to
do today?

3.
What’s UX!?
UX success
Strategy
User Centred Design
Goals, tasks
Information Architecture
Wireframing
Sketching
Paper Prototyping
Assessment
States
User Flows & Scenarios
Make 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 simple
complicated. Creativity is
making the complicated
simple.”
- Charles Mingus

8.
e design of experiences

9.
e design of experiences
Human centred

10.
e design of experiences
Human centred
Interactions

11.
e design of experiences
Human centred
Interactions
Different to UI

12.
e design of experiences
Human centred
Interactions
Different to UI
Access 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 no
mention of the technology
medium 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 need
and for real people...

34.
Do you have access to your
users?

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 user
achieves them.
No assumptions about the system interface.
Can be used to compare different interface
design 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 location
Key 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 achieve
the goals.
Can vary with the available technology.
Broken down into steps for task analysis, and are
recombined into sequence of steps for scenario
development.

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”
button
Key task of Foursquare

45.
Demo –
Tasks for PopDown

46.
Exercise –
Write down 3 task that achieve 3 goals for
your site/app

47.
Information
Architecture

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 real
user 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 fonts
No colour
No graphics

64.
Wireframe fidelity
Low High
Sketching Paper Mock up Code
Prototype Soware Prototype

65.
Why make wireframes?

66.
Concept Exploration

67.
Concept Exploration
Layout Content on Pages

68.
Concept Exploration
Layout Content on Pages
Brainstorm Interactions

69.
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling

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

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

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

73.
Sketching

74.
Demo –
Facebook Profile Page

75.
Exercise –
Draw a sketch of the Twitter profile page
on 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 goals
Users don’t understand how it works

94.
Why designs fail?
Users aren’t motivated to achieve goals
Users don’t understand how it works
Users 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 wireframing
of the user flow

109.
Excercise -
Chose a scenario for your project and
wireframe of the user flow with less than 5
key 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 will
take much longer than in wireframes

124.
Some clients are happy to see IA and
wireframes, if not, storyboard or sketch a user
journey
Your client knows customer experience is
king!
Testing on paper with the whole team will
enage everyone with the importance of the UX
Do it anyway...

125.
STARTUPS

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

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

128.
Mockup Soware

129.
Balsamiq
http://www.balsamiq.com/

130.
Balsamiq demo...

131.
Mockingbird
https://gomockingbird.com/

132.
Keynote
Mac only

133.
Omnigraffle
http://www.omnigraffle.com

134.
Axure
http://www.axure.com/

135.
Mock up libraries

136.
MockupsToGo
https://mockupstogo.mybalsamiq.com/

137.
Keynotopia
http://keynotopia.com/

138.
https://vimeo.com/13892268

139.
Graffletopia
http://graffletopia.com/

140.
Code prototypes

141.
960.gs
http://960.gs/

142.
Twitter Bootstrap
http://twitter.github.com/bootstrap/

143.
Zurb Foundation
http://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 with
three people

160.
Tools for testing

161.
Silverback
http://silverbackapp.com/

162.
Realizer
http://www.realizerapp.com/

163.
AirDisplay
http://avatron.com/apps/air-display

164.
UserTesting.com
http://www.usertesting.com/

165.
Kiss Metrics
http://www.kissmetrics.com/

166.
What next?

167.
Five books
worth reading

168.
Websites

169.
A List Apart
http://www.alistapart.com/

170.
boxesandarrows
http://www.boxesandarrows.com/

171.
Site Inspire
http://siteinspire.com/

172.
Pattern Tap
http://patterntap.com

173.
Observe!
Experiment!
Fail!

174.
Any questions?

175.
anks!
Rik Lomas Jessi Baker
@riklomas @jessibaker
rik@lomalogue.com jessi@cantab.net