Learn about current research on web experiences and how to create a persona

1. Best Practices in Web Design

2. Our Flight Plan

3. Our Flight Plan
6:00 - 6:15 Review + Questions

4. Our Flight Plan
6:00 - 6:15 Review + Questions
6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch

5. Our Flight Plan
6:00 - 6:15 Review + Questions
6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch
7:00 - 7:05 BREAK
7:05 - 7:20 How Search Works
7:20 - 7:45 Insider Secrets + Research

6. Our Flight Plan
6:00 - 6:15 Review + Questions
6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch
7:00 - 7:05 BREAK
7:05 - 7:20 How Search Works
7:20 - 7:45 Insider Secrets + Research
7:45 - 8:00 Q&A

7. What Makes a Great Site?
User’s
Needs

8. What Makes a Great Site?
User’s
Needs

9. What Makes a Great Site?
User’s
Needs

10. What Makes a Great Site?
User’s
Needs

11. What Makes a Great Site?
Visuals
User’s
Needs

12. What Makes a Great Site?
Typography
Visuals
User’s
Needs

13. What Makes a Great Site?
Usability Typography
Visuals
User’s
Needs

14. What Makes a Great Site?
Think Experiences.

16. X

19. Flashback

20. Flashback

21. Today

23. Persona

24. Persona
who are you designing for?

25. Our Mantra:

26. Our Mantra:
We

27. Our Mantra:
We Are

28. Our Mantra:
We Are Not

29. Our Mantra:
We Are Not The

30. Our Mantra:
We Are Not The Target

31. Our Mantra:
We Are Not The Target Market

32. http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg

33. Empathy...(and how to get it)
http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg

34. Persona Research
Example

35. Persona Research
Example
1. What does this person do for a living?

36. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?

37. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?
3. What is this person’s age, title, marital status

38. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?
3. What is this person’s age, title, marital status
4. How do they look?

39. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?
3. What is this person’s age, title, marital status
4. How do they look?
5. How do they recreate?

40. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?
3. What is this person’s age, title, marital status
4. How do they look?
5. How do they recreate?
6. What does their daily calendar look like?

41. Persona Research
Example
1. What does this person do for a living?
2. What type of company do they work for?
3. What is this person’s age, title, marital status
4. How do they look?
5. How do they recreate?
6. What does their daily calendar look like?
7. What keeps them up at night?

43. How People Use the Web

44. How People Read

45. How People Read Online
Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

46. How People Read Online
Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

47. How People Read Online
F
Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

48. 20%
Percentage
of words
read during
an average
site visit
Source: http://www.useit.com/alertbox/percent-text-read.html

49. Source: http://www.useit.com/alertbox/percent-text-read.html

50. 2
Number of
clicks to get
to any part
of your site
(ideally)

51. Sitemap
Sketching Out Your Content

52. Sitemap
Sketching Out Your Content
Home

53. Sitemap
Sketching Out Your Content
Home Services

54. Sitemap
Sketching Out Your Content
Home Services Projects

55. Sitemap
Sketching Out Your Content
Home Services Projects About

56. Sitemap
Sketching Out Your Content
Home Services Projects About Contact

57. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1

58. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples

59. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History

60. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Bios

61. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Bios
FAQʼs

62. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Quotes Bios
FAQʼs

63. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Section 2 Quotes Bios
FAQʼs

64. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Section 2 Quotes Bios
Section 3 FAQʼs

65. Sitemap
Sketching Out Your Content
Home Services Projects About Contact
Section 1 Examples History
Section 2 Quotes Bios
Section 3 FAQʼs
1. Strive for only 5 major sections in your site
2. Clean, intuitive titles (based on keyword research)

66. Wireframe
Hand-Sketch Powerpoint

67. What We Learned

68. What We Learned
1. Know and empathize with your user (persona)

69. What We Learned
1. Know and empathize with your user (persona)
2. Simplicity Wins (Google vs.Yahoo)

70. What We Learned
1. Know and empathize with your user (persona)
2. Simplicity Wins (Google vs.Yahoo)
3. People don’t read - they scan (F or Z Pattern)

71. What We Learned
1. Know and empathize with your user (persona)
2. Simplicity Wins (Google vs.Yahoo)
3. People don’t read - they scan (F or Z Pattern)
4. More clicks = less engagement (2 Click Rule)

72. What We Learned
1. Know and empathize with your user (persona)
2. Simplicity Wins (Google vs.Yahoo)
3. People don’t read - they scan (F or Z Pattern)
4. More clicks = less engagement (2 Click Rule)
5. Sitemap + Wireframe = Saved Time and $

74. Homepages

76. Logo main navigation
Main Image or Slideshow
Updates Call to
Action
footer

83. Before

84. After

85. After
phone

86. After
phone
Biz Goal

87. After
phone
Biz Goal
Opt-In

88. After
phone
Biz Goal
Opt-In
Visual
Choices for
User

89. After
phone
Biz Goal
Opt-In
Visual
Choices for
User
Call to Action

90. After
phone
Biz Goal
Opt-In
Visual
Choices for
User
Call to Action
Full Sitemap +
Contact Info

92. Pop Quiz:
what does the persona look like?

93. Name: Bill Johnson
Age: 52
Home: Pasadena, CA
Married with 3 kids
Oldest of 4 siblings
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

94. Name: Bill Johnson • Large Fonts
Age: 52
Home: Pasadena, CA
Married with 3 kids
Oldest of 4 siblings
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

95. Name: Bill Johnson • Large Fonts
Age: 52 • Email is preferred method of communication
Home: Pasadena, CA
Married with 3 kids
Oldest of 4 siblings
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

96. Name: Bill Johnson • Large Fonts
Age: 52 • Email is preferred method of communication
Home: Pasadena, CA • Looking to escape via images
Married with 3 kids
Oldest of 4 siblings
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

97. Name: Bill Johnson • Large Fonts
Age: 52 • Email is preferred method of communication
Home: Pasadena, CA • Looking to escape via images
Married with 3 kids • Connect from afar via fishing reports
Oldest of 4 siblings
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

98. Name: Bill Johnson • Large Fonts
Age: 52 • Email is preferred method of communication
Home: Pasadena, CA • Looking to escape via images
Married with 3 kids • Connect from afar via fishing reports
Oldest of 4 siblings • Info for planning a trip
Occupation: CEO of mid-size company.
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

99. Name: Bill Johnson • Large Fonts
Age: 52 • Email is preferred method of communication
Home: Pasadena, CA • Looking to escape via images
Married with 3 kids • Connect from afar via fishing reports
Oldest of 4 siblings • Info for planning a trip
Occupation: CEO of mid-size company. • Know who he fishes with
Company: Apartment Renovations Inc.
Clients: Landlords, Real estate investors
Culture: Laid back, friendly, professional,
quality
Passion: Fly-fishing in the Rockies
Persona Design

101. Innerpages

103. Logo main navigation
home / sub-page / current page
Image Sidebar
Main Text
Sub Heading Here
This is just some random text
that goes here.
• Bullet 1
• Bullet 2
And here’s a link over to
some more info.
footer

111. search

112. Remember This
It’s All About: Keywords

113. Principles Strategy
Overview of a Search Results Page

114. Principles Strategy
Overview of a Search Results Page
Keyword Phrase

115. Principles Strategy
Overview of a Search Results Page
Keyword Phrase
Local
Results

116. Principles Strategy
Overview of a Search Results Page
Keyword Phrase
Local
Results
Page
Title

117. Principles Strategy
Overview of a Search Results Page
Keyword Phrase
Local
Results
Page
Title
Page
Description

118. Principles Strategy
Paid Search

119. Keywords Strategy
How We Find Everything Online

120. Keywords Strategy
How We Find Everything Online
1. Use Your Persona To Guide You

121. Keywords Strategy
How We Find Everything Online
1. Use Your Persona To Guide You
2. Brainstorm keyword phrases around pain points

122. Keywords Strategy
How We Find Everything Online
1. Use Your Persona To Guide You
2. Brainstorm keyword phrases around pain points
3. Use Google’s AdWords Tool for ideas

123. Keywords Strategy
How We Find Everything Online
1. Use Your Persona To Guide You
2. Brainstorm keyword phrases around pain points
3. Use Google’s AdWords Tool for ideas
4. Identify keywords to weave into all your content

125. insider secrets

126. users
#1
Users
appreciate
quality and
credibility

127. users
#2
Users don’t
read, they
scan

128. users
#3
Users are impatient
online and demand
instant gratification

129. users
#4
Users follow
their intuition
(change is hard)

130. users
#5
Users want to
have control

131. Strategy
Dr. BJ Fogg - Stanford University
Research focuses on why people
trust a website
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

132. Strategy
#1
Design your
site so it
looks
professional
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

133. Strategy
#2
Easily verify
accuracy of
info on your
site
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

134. Strategy
#3
Show that
you’re real
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

135. Strategy
#4
Show how
you’re an
expert
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

136. Strategy
#5
Put a human
face and
tone to the
organization
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

137. Strategy
#6
Make it easy
to contact
you
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

138. Strategy
#7
Make it easy
to use and
useful
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

139. Strategy
#8
Update your
site’s content
often
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

140. Strategy
#9
Easy on the
promotional
content
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

141. Strategy
#10
Watch teh
tipos and
dead links
Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

142. Q&A