first impressions matter: onboarding for first time users
TRANSCRIPT
© Design for Context
Lisa Ba'le President and Principal Consultant [email protected] @design4context
First Impressions Ma/er: Onboarding for First Time Users UXDC 2015 Conference • 9 October 2015
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
First Impressions
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
https://blog.intercom.io/designing-first-run-experiences-to-delight-users/
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
http://www.digitaltrends.com/mobile/16-percent-of-mobile-userstry-out-a-buggy-app-more-than-twice/
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
Laura/Jennifer: Image related to onboarding (Use the same image
in all 3 of these slides)
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
Why should I us
e this?
Value proposiV
on
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
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
First-‐Vme novice user
Engaged, acVve, repeat user
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
ATM
$
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
Examples
SaaS Web ApplicaVon
Zurb Verify
Tablet App
Evernote
Mobile App
Delectable
Digital Pen
Adobe Ink and Slide
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Design Principles
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
Present a clear value proposiVon.
1
FIRST IMPRESSIONS MATTER
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Present a clear value proposiVon. 1
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Minimize login and account creaVon.
2
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Minimize login and account creaVon.
2
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Provide a simple, smart process for setup.
3
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Provide a simple, smart process for setup.
3
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Avoid the blank slate. 4
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Avoid the blank slate. 4
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Allow the user to immediately do something that gets results.
5
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Allow the user to immediately do something that gets results.
5
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Import the user’s exisVng data from other sources. 6
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
?
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Import the user’s exisVng data from other sources. 6
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Orient the user via minimalist, built-‐in demonstraVons. 7
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Orient the user via minimalist, built-‐in demonstraVons.
7
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Instruct at the point of use. 8
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Instruct at the point of use. 8
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Ask to use the photos, contacts, & noVficaVons when the user sees a clear benefit.
9
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Ask to use the photos, contacts, & noVficaVons when the user sees a clear benefit.
9
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Provide preferences and controls users can set as they gain experience.
10
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
WEB APPLICATION: ZURB VERIFY
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: EVERNOTE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
MOBILE APP: DELECTABLE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
DEVICE: ADOBE INK AND SLIDE
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
SIMPLICITY
Provide preferences and controls users can set as they gain experience.
10
@design4context First Impressions Ma>er UXDC 2015
© Design for Context
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
© Design for Context
Lisa Ba'le President and Principal Consultant [email protected] @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