Presentation by Lisa Battle at the UXDC2015 conference in Washington, DC, on October 9, 2015. What kind of first impression is your web or mobile application making? It may not be what you would hope. Many SaaS applications’ free trials are used only once. Sources say that most mobile apps are downloaded, used once and deleted. First time user experience, while critical to product success, may not be getting the attention it deserves. During onboarding, a first-time user must transition from novice to an engaged, active and repeat user. They must immediately recognize what they can do, how they can do it, and why it benefits them. This talk presents design principles for great onboarding experiences that engage and inform new users, helping them become productive quickly. We discuss how to convey your value proposition, guide setup, remove barriers, streamline initial tasks via smart defaults, provide walkthroughs, and instruct at the point of use, drawing on examples from web applications, mobile apps, and devices.

1. Lisa
Ba'le
President and Principal Consultant
lisa@designforcontext.com
@design4context
First
Impressions
Ma/er:
Onboarding
for
First
Time
Users
UXDC
2015
Conference
•
9
October
2015

2. @design4context
First Impressions Ma>er
UXDC 2015
First
Impressions

3. @design4context
First Impressions Ma>er
UXDC 2015

4. @design4context
First Impressions Ma>er
UXDC 2015
https://blog.intercom.io/designing-first-run-experiences-to-delight-users/

5. @design4context
First Impressions Ma>er
UXDC 2015
http://www.digitaltrends.com/mobile/16-percent-of-mobile-userstry-out-a-buggy-app-more-than-twice/

6. @design4context
First Impressions Ma>er
UXDC 2015
Laura/Jennifer:
Image
related
to
onboarding
(Use
the
same
image
in
all
3
of
these
slides)

7. @design4context
First Impressions Ma>er
UXDC 2015
Why
should
I
use
this?
Value
proposiVon
How
do
I
get
started?
IniVal
setup
I’m
stuck!
Remove
barriers
What
can
I
do
here?
Streamline
iniVal
tasks
Show
me
what
to
do!
InstrucVons,
demos

8. @design4context
First Impressions Ma>er
UXDC 2015
First-­‐Vme
novice
user
Engaged,
acVve,
repeat
user

9. @design4context
First Impressions Ma>er
UXDC 2015
ATM
$

10. @design4context
First Impressions Ma>er
UXDC 2015
Examples
SaaS
Web
ApplicaVon
Zurb
Verify
Tablet
App
Evernote
Mobile
App
Delectable
Digital
Pen
Adobe
Ink
and
Slide

11. @design4context
First Impressions Ma>er
UXDC 2015
Design
Principles

12. @design4context
First Impressions Ma>er
UXDC 2015
Present
a
clear
value
proposiVon.
1

13. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

14. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

15. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

16. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

17. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

18. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

19. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

20. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

21. @design4context
First Impressions Ma>er
UXDC 2015
Present
a
clear
value
proposiVon.
1

22. @design4context
First Impressions Ma>er
UXDC 2015
Minimize
login
and
account
creaVon.
2

23. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

24. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

25. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

26. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

27. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

28. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

29. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

30. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

31. @design4context
First Impressions Ma>er
UXDC 2015
Minimize
login
and
account
creaVon.
2

32. @design4context
First Impressions Ma>er
UXDC 2015
Provide
a
simple,
smart
process
for
setup.
3

33. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

34. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

35. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

36. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

37. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

38. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

39. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

40. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

41. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

42. @design4context
First Impressions Ma>er
UXDC 2015
Provide
a
simple,
smart
process
for
setup.
3

43. @design4context
First Impressions Ma>er
UXDC 2015
Avoid
the
blank
slate.
4

44. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

45. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

46. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

47. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

48. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

49. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

50. @design4context
First Impressions Ma>er
UXDC 2015
Avoid
the
blank
slate.
4

51. @design4context
First Impressions Ma>er
UXDC 2015
Allow the user to
immediately
do
something that gets
results.
5

52. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

53. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

54. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

55. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

56. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

57. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

58. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

59. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

60. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

61. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

62. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

63. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

64. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

65. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

66. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

67. @design4context
First Impressions Ma>er
UXDC 2015
Allow the user to
immediately
do
something that gets
results.
5

68. @design4context
First Impressions Ma>er
UXDC 2015
Import
the
user’s
exisVng
data
from
other
sources.
6

69. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY
?

70. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

71. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

72. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

73. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

74. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

75. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

76. @design4context
First Impressions Ma>er
UXDC 2015
Import
the
user’s
exisVng
data
from
other
sources.
6

77. @design4context
First Impressions Ma>er
UXDC 2015
Orient
the
user
via
minimalist,
built-­‐in
demonstraVons.
7

78. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

79. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

80. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

81. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

82. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

83. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

84. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

85. @design4context
First Impressions Ma>er
UXDC 2015
Orient
the
user
via
minimalist,
built-­‐in
demonstraVons.
7

86. @design4context
First Impressions Ma>er
UXDC 2015
Instruct
at
the
point
of
use.
8

87. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

88. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

89. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

90. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

91. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

92. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

93. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

94. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

95. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

96. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

97. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

98. @design4context
First Impressions Ma>er
UXDC 2015
Instruct
at
the
point
of
use.
8

99. @design4context
First Impressions Ma>er
UXDC 2015
Ask
to
use
the
photos,
contacts,
&
noVficaVons
when
the
user
sees
a
clear
benefit.
9

100. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

101. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

102. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

103. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

104. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

105. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

106. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

107. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

108. @design4context
First Impressions Ma>er
UXDC 2015
Ask
to
use
the
photos,
contacts,
&
noVficaVons
when
the
user
sees
a
clear
benefit.
9

109. @design4context
First Impressions Ma>er
UXDC 2015
Provide
preferences
and
controls
users
can
set
as
they
gain
experience.
10

110. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

111. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

112. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

113. @design4context
First Impressions Ma>er
UXDC 2015
WEB
APPLICATION:
ZURB
VERIFY

114. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
EVERNOTE

115. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

116. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

117. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

118. @design4context
First Impressions Ma>er
UXDC 2015
MOBILE
APP:
DELECTABLE

119. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

120. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

121. @design4context
First Impressions Ma>er
UXDC 2015
DEVICE:
ADOBE
INK
AND
SLIDE

122. @design4context
First Impressions Ma>er
UXDC 2015
Provide
preferences
and
controls
users
can
set
as
they
gain
experience.
10

123. @design4context
First Impressions Ma>er
UXDC 2015
Present
a
clear
value
proposiVon.
Minimize
login
and
account
creaVon.
Provide
a
simple,
smart
process
for
setup.
Avoid
the
blank
slate.
Allow
user
to
immediately
do
something
that
gets
results.
Import
the
user’s
exisVng
data
from
other
sources.
Orient
the
user
via
minimalist,
built-­‐in
demonstraVons.
Instruct
at
the
point
of
use.
Ask
to
use
the
photos,
locaVon,
contacts,
&
noVficaVons
when
the
user
sees
a
clear
benefit.
Provide
preferences
and
controls
that
users
can
set
as
they
gain
experience.
10
1
2
3
4
5
6
7
8
9

124. Lisa
Ba'le
President and Principal Consultant
lisa@designforcontext.com
@design4context
First
Impressions
Ma/er:
Onboarding
for
First
Time
Users
UXDC
2015
Conference
•
9
October
2015
Thanks!
PresentaHon is on Slideshare – Go to www.designforcontext.com/publicaHons