8-hr UX Bootcamp, by Paul Ballas.

1. User Experience
Bootcamp
Paul Ballas
Head of Product at Pana
February 11, 2016

2. Agenda
MORNING
10:00 - 10:30 Introduction & Creative activity
10:30 - 11:30 User research & Personas
11:30 - 12:00 User Flows
12:00 - 12:45 Business analysis & Product management
12:45 - 1:30 Lunch break
1:30 - 2:15 Information architecture
2:15 - 2:45 Content strategy
2:45 - 3:30 Design heuristics
3:30 - 4:15 Navigation
4:15 - 5:00 Usability testing
5:00 - 6:00 Wireframing
AFTERNOON

3. Creative activity
• Pick a spot on the whiteboard and draw one interesting
fact about yourself.

4. Introduction
to
user experience

5. What is UX?
“UX is “the design of anything
independent of medium or across
media, with human experience as an
explicit outcome and human
engagement as an explicit goal.”
Jesse James Garret
Co-founder Adaptive Path

6. What is UX?
“The practice of designing products,
processes, services, events, and
environments with a focus placed on
quality and enjoyment of the total
experience.”
Don Norman
Co-Founder Nielsen Norman Group

7. What is UX?
Tailoring a product or service for it’s intended audience.

8. When design is ignored
An everyday example.

9. When design is ignored
An extreme example.

10. UX Disciplines
Where we fall under… but where’s graphic design?
PSYCHOLOGY SOCIOLOGY ANTHROPLOGY ANTHROPLOGY

11. UX Disciplines
What we do.

12. UX vs. UI
• UX (User experience)
• How users take actions and
interact with features
• How features fit together
• How users discover content
UI (User interface)
• What will be on screen
• Look and feel
• Visual components such as
color, typography, etc.

13. UX is a process, not a deliverable.
Pana For teams For individuals Sign in Contact us Create a new account
Pana is people.
We’re a team of real people that help inviduals and entire teams plan,
book and manage travel. Backed by the latest technology.
[hero: Nina & Hattie at laptops, latté nearby]
Create a new account
Say hello to Amy.
Just send us a text.
Trusted by leading companies.
For your entire team. Just for you.
Amy is part of your travel team and helps personalize
your travel experience. She sends the best flights,
hotels, rentals cars and more - right to your phone.
All based on your individual preferences.
Your travel team is backed by the latest technogloy.
We use natural language processing to parse out the
details, and a real human takes care of the rest.
[img: Amy]
For teams For indviduals
Pana For teams Sign in
For individuals Blog
About us Support
Contact Sales
800-555-5555
sales@pana.com
Contact
hi@pana.com
Pana Create new accountContact usSign inFor individualsFor teams
Pana is your personal travel team.
We’re a team of real people that help inviduals and entire teams plan,
book and manage travel. Backed by the latest technology.
Save time.
Our app is simple and fun to use, so you
can focus on what matters. Booking a
trip is as easy as sending a text.
Tuesday, November 13
4 21
90%
AmericanAirlines
Flight AA 1235 has been delayed
by 2 hours, until 4pm ET.
10m ago
Pana
Saw your flight was delayed and
booked you on new flight leaving
in 30 minutes.
now
42%Pana 10:10 PM
Pana
No problem. I’m sending a few flight and
hotel options for you, based on your
preferences.
No problem. I’m sending a few flight and
hotel options for you, based on your
preferences.
I need a flight next Tuesday morning to San
Francisco, returning Thursday night.
Will also need a hotel - walking distance to
my conference at the convention center.
DEN LGA
0 Stops
ECONOMY
3h 45m
Mon, 11/30
Denver (DEN)
Mon, 11/30
New York City (LGA)
8:06 AM
1:51 PM
UNITED AIRLINES
3h 45m
Thu, 12/3
New York City (LGA)
Thu, 12/3
Denver (DEN)
5:55 PM
8:23 PM
UNITED AIRLINES
0 Stops
ECONOMY
Mon 11/30 - Thu 12/3
Say something…
Travel doesn’t
always cooperate.
Our app is simple and fun to use, so you
can focus on what matters. Booking a
trip is as easy as sending a text.
42%Pana 10:10 PM
Itinerary
10JANUARY
2015
11
MON
NEW YORK CITY
CLOUDY 45
o
FLIGHT TO NEW YORK
(DEN) Denver
United Airlines 1133
8:06 AM
1:51 PM ON-TIME
Terminal C
GATE 14
Record locator: XYZ789
Don’t search for deals.
That’s our job.
As a Pana member, you’ll gain access to our
exculsive network of perks and upgrades, from
the world’s leading travel companies.
MERIDIEN HOTEL NEW YORK
1122 Panaiscool Street, New York, NY
3 NIGHTS
Mon, 1/11
Thu, 1/14
Confirmation: 1133445566
Free suite upgrade
Just for you.For your team.
Our first product, the individual plan lets
anyone travel the globe like a rockstar. Plans
for only $29/month.
Invite your whole team with our team plan.
Pricing that works for your team size plus access to
enterprise dashboard, reports and service.
Pana For teams Sign in
For individuals Blog
About us Support
Contact Sales
800-555-5555
sales@pana.com
Contact
hi@pana.com
Create new account
Sign up for teams Sign up for individual
Learn more
Learn more
Learn more

14. UX vs. UI

15. Design process
Discovery Define Design Develop
Delivery
Waterfall design
Build
Test
MVP
Iterate
Lean design

16. UX Roles
• User researcher
• Identifies user behaviors, goals and needs through
interviews, studies and surveys.
• Information architect
• Defines the structure of a system, how content is
described, organized and discovered.
• Interaction designer
• How the user physically interact with the interface and/or
device.

17. UX Roles
Usability analyst
Tests prototypes and working products with users and helps
integrate feedback into future design iterations.
Visual designer
Focuses on graphic elements of a digital interface: color
treatments, typography, visual language, etc.
Experience designer
The overall experience of the site, including site map and
flow.

18. User research

19. Why we do research
• Let’s talk about milkshakes.

20. UX Disciplines
Where we fall under… but where’s graphic design?
WHO WHAT WHEN
WHEREWHY HOW

21. Who are the users?
• Businesses or consumers
• Demographics
• Background knowledge
• Behavioral and data patterns
• Motivations, emotions, cognitions

22. What do they need?
• What behavioral patterns do they exhibit?
• What do they do?
• What are their problems?
• What are their needs?

23. Where are they using it?
• Location?
• Home or on the road?
• Walking or stationery?
• What room of the house?
• At their desk or in meetings?

24. When do they experience it?
• Time of day?
• Crisis or casual?
• Daily?
• Monthly?

25. Why are they behaving like this?
• What’s their goal?
• What do they want to achieve?
• What emotion is being fulfilled?
• What is driving a behavior?
• What brings them to work?

26. How are they solving it now?
• Do solutions already exist?
• Are they hacking their own solutions together?

27. How do we get this
information?

28. Methods of research
INTERVIEWS
• One-on-one discussion
• Gather rich, targeted info
• Flexible and open for exploration
• Time consuming, depending on
scale
• Subject to cognitive biases
SURVEYS
• Gather large number of responses
quickly
• Quantitative
• Hard to get rich responses
• Hard to get to the “WHY”
• Subject to cognitive biases
ETHNOGRAPHY
• Richest research method available
• Enables very deep insight into
behavior
• Costly
• Hard to scale

29. Challenges of user research
• No funding or budgeting for user research.
• Client thinks they know their users already.
• No access to real users.
• No time in the schedule for user research.
• Management doesn’t think it’s valuable.

30. Personas

31. Frequent flyer
MIKE THE BUSINESS TRAVELLER
Travel as part of identity.
HighLow
Price sensitivity.
HighLow
Tech saviness.
HighLow
Openness to new knowledge.
HighLow
Ability to take action.
HighLow
Mike is a sales director at a San Francisco based software company. He travels almost every week and knows
how to get from one city to the next. He is fiercely brand loyal and always travels with specific airlines and
hotels.
• Cuts his trips to the airport close and relies on TSA Pre-Check to get
him through security quickly.
• Typically bumped up to First or Business class due to his frequent
traveler status with multiple airlines.
• Always stays with the same hotel chain (Starwood) and saves his
points for personal travel.
• Frequently out to dinner with business colleagues or clients.
CHARACTERISTICS OF MIKE
• Preferred airline and hotels above everything else. Every trip
should help accumulate points.
• Price doesn’t typically matter because his company is paying for
the travel.
• Knowledgeable at travel hacking. Knows the best way to get
around and find hidden deals.
• Lives and dies by his wifi connectivity.
DESIGNING FOR MIKE
”
I can’t let traveling impact my sales. I’m
always connected to and talking to clients.
“
50+
Trips per year.
15min
Solo traveler
Avg booking time.
Common travel companion(s).

32. What is a persona?
• A persona is an archetype of a group of users
• Created by conducting user research and summarizing
trends into one or more archetypes
• Does not represent a single person

33. Why we build them
• Communication tool
• Summarizing what you know about your user
• Will help highlight pain points and opportunities to tailor
product to users
• Central tool for keeping product focused on specific users
rather than the whole world

34. What’s included
• User goals and needs
• User behaviors
• Pain points
• Demographic information
• Name and picture
• Personality traits
• Scenarios
• Technology preferences

36. Persona guide
Biography & Demographics Behaviors
Stories & Scenarios Goals & Needs

37. What you should leave out

38. User flows

39. What’s a user flow?
• Map of how users interact with a particular situation or
artifact
• Details all possible choices, outcomes, scenarios, and
errors
• Used to help designers think at a system level
• Easy to explain, difficult to execute

40. Benefits of a user flow
• Separates procedural thinking from interface design
• Shows you things you need to create - and what you
haven’t thought about yet.
• Uncover potential problems with user journey
• Quick tool for iteration before design

41. What kind of flow?
• Who is the audience?
• Designers?
• Technical?
• Business Stakeholders?
• What’s their level of comfort with digital products?

42. Simple

43. Technical

44. Process

45. Example: Learning in class
Start class Presentation &
activities
Understand? End class
YES
NO

46. Example: Learning in class
Start class Presentation &
activities
Understand? End class
YES
NO
Q & A

47. Example: Learning in class
Start class Presentation &
activities
Understand? End class
YES
NO
Q & A

48. Tips for creating strong user flows
• Start with paper and pencil
• Start with your simple ‘happy path’ and add detail later
• Leave space to fill in between boxes later
• Label each step clearly and with numeric notation
• Test your flow with different examples
• eCommerce: multiple items, bad credit cards, different shipping
and billing addresses
• Only cover what the user sees, not what goes on behind the scenes

49. Class activity
• Create a flow for ordering a pizza for delivery

50. Business analysis

51. Putting UX in context
• What are you (or your client) trying to accomplish by
investing in UX design?
• By what means is the client hoping to achieve these
goals?
• What are the requirements for this project?
• What are the constraints of the design efforts?
• Technical constraints
• Policy and legal constraints
• Political constraints

52. Why it matters for UX
• Understanding constraints and context of product design
• Translate user needs and business requirements into fully-formed features
• Enabling the co-existence and co-achievement of user goals and business goals
• Key tasks
• Collecting facts: setting the table, understanding the process, understanding
stakeholders
• Gathering requirements
• Task analysis
• Data collection
• Prioritization – what really matters?
• What are users trying to accomplish?
• Task analysis
• User goals
• User expectations

53. Business analysis
Analysis Design
Identify complex processes and
break them into individual steps
Structure and organize these individual
steps for the best experience

54. Remember!
• There’s no such thing as a blank slate!

55. Product
management

56. Managing opinions
• The core of product management is to balance all of the
interests, concerns, opinions and inputs and funnel them
into a rich, coherent experience that meets both user and
client needs
• Mute distracting features
• Prioritize based on effort and impact
• Balance what users actually want with what clients want
for their users

57. Role of the designer
• Advocate for end users
• Call out assumptions and how to solve them
• Shape the product offering through its interactions
• Build with an eye towards the long term

58. Minimum viable product (MVP)
• Do this
Not this

59. Why build an map
• Faster real-world feedback
• Continuous learning
• Shorter design/development cycle
• Lower initial investment

60. Identifying key features
• Task
• Users want to be a able to get inside the house
• WHAT needs to happen
• Example: Users should be able to find a door, and open the door.
• Feature
• Component of a product that allows for certain actions
• HOW a user accomplishes a task
• Example: Door should recognize user so they don’t require a key.

61. What’s the smallest, simplest version?
Epic Stories Task To Do
First floor of house
Second Floor of house
Entrance
Visibility to outside
Travel upstairs
Visibility outside
Barriers between rooms
Door
Garage door
Build door
Install garage door
Window Install window

62. Feature prioritization
All
of the time
Most
of the time
Some
of the time
Very little
of the time
Few people Some people Most people All of the people

63. 6 - 6 - 6 planning
• 6 weeks
• Very well defined
• 6 months
• Understood, but my change
• 6 years
• Aspirational and probably will change

64. 6 week period
1 2 3 4 5 6
SP SP SP SP SP SP
MP
INC
SP = Sprint planning
MP = Monthly planning
INC = Inception day

65. When product PM fails

66. Information
architecture

67. What is IA?
• Let’s watch
• https://vimeo.com/8866160

68. What is IA?
• The structural design of shared information environments.
• The art and science of organizing and labeling web sites,
intranets, online communities and software to support
usability and findability.
• On a broader scale, IA is about creating shared
understanding and structured meaning for information
spaces.

69. What is IA?

70. What is IA?

71. Ontology
• Establishes structured knowledge
• Maps understanding
• Surfaces relationships

72. Ontology

73. Taxonomy
• Organizes meaning
• Maps categories
• Creates hierarchy

74. How to organize
• Location: Rome is a city in Italy
• Alphabetical: Rome starts with the letter R
• Time: Rome started in 753BCE
• Category: Rome is a Romantic city
• Hierarchy: Rome is within Italy, which is within Europe

75. Good IA
• Findable: Able to be located
• Accessible: Easily approached or entered
• Clear: Easily perceptible
• Communicative: Talkative & informing
• Useful: Capable of producing a desired result

76. Good IA
• Credible: Worthy of confidence
• Controllable: Able to adjust
• Valuable: Great use, service and importance
• Learnable: Able to be fixed in the mind
• Delightful: Greatly pleasing

77. Card sorting
• Card sorting is a method used to help design and evaluate
the information architecture of a site or app. It’s an
activity that helps:
• Build the structure of your website
• Decide what to put on the homepage
• Label categories and navigation

78. Activity: Card sorting
• Task (10-15 Minutes):
• Take the list on the next screen
• Categorize the contents into groups
• Pair up with a classmate and compare grouping
• Discuss what types of users may be interested both of
your sets of categories

79. Activity: Card sorting
• When Harry Met Sally
• E.T.
• Jaws
• Jurassic Park
• The Godfather
• Star Wars
• Batman Begins
• Animal House
• The 40 Year Old Virgin
• The Incredibles
• The Shawshank Redemption
• The Muppet Movie
• Airplane
• The Little Mermaid
• Aladdin
• Harry Potter

80. Content strategy

81. Paths & Cores
Inward path Core Outward path
• External search
• Internal search
• Navigation
• Internal teaser
• Link from wish list
• Email
• Newsletter
• Anchor
• External search
• Internal search
• Navigation
• Internal teaser
• Link from wish list
• Email
• Newsletter
• Anchor
Creates value for business or use

82. Content types
MAIN
Provides core experience
value and helps the user
complete a goal or fulfill an
unmet need.
SUPPORTING
Makes the main content
more trusted, authoritative,
interesting, or informative.
INTERFACE
Allows the user to navigate
the experience from one
content piece to the next.

83. Main content

84. Main content
• Focal point of the page
• Communicates and provides value
• It’s what the user is looking for & wants to pay attention to
• Everything else should be complimentary to it

85. Supporting content
UX Bootcamp

86. Supporting content
• Makes the main content more...
• authentic
• trusted
• interesting
• informative
• Should never dwarf the main content
• Great area for innovation and creativity

87. Interface content

88. Interface content
• Provides infrastructure
• How people move between content pieces
• Hooks people in to further and further engagement
• Provides key functionalities

89. What to think about for content
• What content is valuable
to the user?
• What content do we have?
• How much do we need?
• How do we make it?
• How often do we update
it?
• What is the main format of
it?
• How do we populate it?
• How do we highlight?
• How does it change over
time?
• How does it relate to our
brand?

90. Who does content strategy?

91. Who does content strategy?

92. Design heuristics

93. 10 main heuristics
1. Visibility of system status
2. System-world match
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition over recall
7. Flexibility and efficiency of use
8. Minimal design
9. Errors
10. Help and documentation

94. Visibility of system status
• System should keep users informed about status
• Provide appropriate feedback in reasonable time

95. System world match
• Don’t use language the user won’t understand
• System should use similar language as user

96. User control & freedom
• Let the user undo their actions
• Mistakes should be easily correctable

97. Consistency & standards
• System should use consistent language
• Similar event should look and sound similar

98. Error prevention
• Anticipate error-prone situations
• Use confirmations before circuital steps

99. Recognition over recall
• Minimize cognitive load by making options visible
• Provide clear instructions when necessary
• Don’t make users remember things

100. Flexibility & efficiency of use
• Support all users, from basic to advanced
• Make it EASY

101. Minimal design
• No more than necessary
• Good design is invisible

102. Clear error communication
• Communicate errors in plain language
• Indicate the problem and suggest a solution

103. Help & Documentation
• Provide specific instruction when necessary

104. Navigation

106. • A way for users to move through an experience
• A map of the options a user has at each level of that
experience
• A way to group content and functionality in a way that is
easy for a user to understand

107. Navigation components
• Scent: How in-line with the user’s expectation is the
labeling of the steps they can take?
• Story: What does the navigation say about the
experience? What is the tone and narrative that is being
used?
• Simplicity: How easy is it for a user to grasp the
navigation? How easy is it to fit new content and/or
functionality in later on?

108. Navigation

109. Building a nav
• Your job is to set the priorities based on the user
perspective
• Your clients may have different ideas about what's
important
• The best navigation solutions are obvious
• “I know exactly what I’m going to get from each option
and I don’t feel like anything important has been left out
• Humans have a limited number of options they can
juggle at any one time
• Even well-organized navigation can suffer from
overcrowding

110. Educated guesses
• Your job is to get into the user’s mind
• The beginning point is different for each person
• Aim for the widest possible audience and then narrow in quickly
• “Cognitive proximity”
• Start with what the user already knows
• What are the next things they might want to do? What do they do most often?
• Organize First
• Taxonomy of information
• Group content into buckets that are familiar and easily understood
• Each navigation item should correspond to a major area of content
• Develop meaningful names
• “Explore” is a cop-out

111. Navigation zone

112. Nav patterns

113. Expanding vs. Drill

114. Carousels
Just don’t…

115. Nav on mobile

116. Leaving things out
• What’s not there is just as important as what is
• Laying out all the options is not enough and is often
counterproductive
• Your job is to organize and prioritize them for the user
• If you really can’t leave it out, then de-prioritize it clearly

117. Content is key
• “It’s just semantics” is not a a valid argument
• The copy you choose has massive effects on a user’s
ability to navigate

118. Simplicity
• Use familiar conventions as much as
possible
• The navigation is usually not a good
place to get creative
• Try to avoid fancy/complex interactions
• Simple and unbreakable is good

119. Findability
• Your design should have visual indicators that remind me
where I am
• Breadcrumbs
• Do I know where I am at all times?
• Is it easy to get to other parts of the site at all times?

120. How many levels?
• Short answer: as few as possible
• General Rule: no more than 3
• If you find yourself with more than three levels of
navigation, consider restructuring your info or using
alternative navigation option
Guidelines not rules
About 3-6 for top level
Up to 10-12 for lower levels
Any more than 12 or so probably requires a different approach

121. When it fails.

122. When it fails.

123. Usability testing

124. Why test?
• Design is a process
• Obtain feedback directly from users
• Discover WHY problems are occurring
• Gain insight into motivations and satisfaction
• Data is great, but it’s not enough

125. Components of a test
• Problem: something in need of explanation
• Theory: an idea about how to explain it
• Testable Propositions: means of obtaining information
• Test: action that elicits information
• Selection: interpretation of results

126. Actions are louder than words
• Users read with their mouse
• People won’t talk unless you ask them what they’re thinking
• Ask about current behavior (do you currently do X?) or show
them something and observe how they interact with it

127. What NOT to do
• Ask participants what they “like” - They will only tell you what you
want to hear
• Ask participants to predict the future
• Ask if a participant would use something like X or might enjoy X
feature is not productive
• Ask for opinions
• Don’t ask them for the solution, ask why they are confused.

128. What you learned
• Report on the good and the bad
• Avoid making conclusions (that will come later)
• Stick to what you observed in the test

129. Example output

130. Methods of study
1. Formal study
2. Remote
3. Unmoderated
4. Café
5. Face-to-face
6. Analytics

131. Formal study
• Requires a facility
• Can be quite costly
• Often produces a laboratory feel, difficult for users to be
comfortable

132. Remote testing
• Sharing a prototype or live site with a participant over
screen sharing software.
• Use when you want a wide geographic swath
• Create a flow a user to go through on their own.
• Receive screencasts picked up from their webcam.
• Good for when you’re busy with other things and just want
to read the results
• Resources
• usertesting.com
• youeye.com

133. Café testing
• Going to a public place and recruiting participation in short,
casual test
• Use this method for informal validation of simple prototypes
• Can be seen as risky when working with big brands
• Recruitment demographic has to be broad

134. Face-to-face
• This is the recommended method
• Provide users with tasks to complete on a prototype
• Encourage them to talk out loud as they move through
interactions
• Observe their actions
• Resources
• craigslist.com

135. Wireframes

136. Sketch first
• Sketching is the rapid paper-based visualization of high-
level ideas, with the aim of capturing their simplest
essence
• It’s (probably) not digital nor detailed
• It’s designed for sharing
• It’s quick, cheap, timely, and disposable
• Like many things in UX design, its more about the activity
than the artifact

137. Sketch first
• It turns a written hypothesis gained through research into
an early design hypothesis which can be tested
• Used early and often in the design process, before
committing to more expensive and time-consuming
designs

138. Sketch first
• Sketching is not about beautiful illustration. It’s a basic
skill that everyone should have to some degree
• A more important skill is the ability to explain your
sketches and the thinking behind them
• The fidelity of your sketches should match the fidelity of
your thinking

139. Sketch examples

140. What’s a wireframe?
• Wireframes are page-level schematic diagrams designed
for communication
• They represent the kinds of content you see on the screen
of a website or app
• They illustrate the key user interface of a product, and in
aggregate give an overall sense of how the parts of a
product hang together

141. Example

142. Wire framing a flow
Wireframes are a visual representation of key page
elements, including:
• structure
• navigation
• information hierarchy
• interactions
Wireframing is the intermediate step between sketch and
prototype
The fidelity of deliverables should match the fidelity of the
thinking

143. Wire framing a flow

144. They come in many flavors
BLOCK DIAGRAM HIGH FI SKETCH

145. They come in many flavors
HI FI DETAILED ANNOTATED

146. They come in many flavors

147. How to use wireframes
• Different organizations have different cultures, working
practices, and resources. Not everyone is jumping
straight to making very lean, interactive prototypes yet!
• I use wireframes like an architect would show blueprints
of a house design - detailed thinking, but still cheaper
than building a working model
• The fidelity of the wireframe should match the fidelity of
the thinking reflected on the page

148. What we use
• Sketch
• Omnigraffle
• Axure
• Go Mockingbird
• Balsamiq
• Illustrator

149. It actually doesn’t
matter
Use what’s best for you

150. Thanks!

151. Contact info
• Email → paul.ballas@gmail.com
• Twitter → @paulballas
• GitHub → @paulballas
• LinkedIn → /in/paulballas