Detailed illustration of Apple Watch onboarding flow with some UX analysis, criticism and suggestions. A lot of screen shots and photos.
User onboarding is the process of improving a person's success with a product or service.
2. In this deck Iâll illustrate how Apple has designed
user onboarding ïŹow for the Apple Watch.
And will put in my two centsâ.
âą Blue is OK
âą White is neutral and suggestions
âą Yellow is criticism
âą Red is WTF Apple?
6. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Nice detail, the title
depends on time
Ok, thatâs clear
7. Nice detail, the title
depends on time
Ok, thatâs clear
If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
A single clear call
to action. Good.
8. Nice detail, the title
depends on time
Ok, thatâs clear
If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
A single clear call
to action. Good.
But why so small
text and pale
button?
9. Nice detail, the title
depends on time
Ok, thatâs clear
If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button?
10. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.=?
A single clear call
to action. Good.
But why so small
text and pale
button?
Is this similar to Learn more?
11. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button? =?
Is this similar to Learn more?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
12. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button? =?
Featured what?Is this similar to Learn more?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
13. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button?
Is this similar to Learn more?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
=?
Featured what?
Apps. Why not
just âAppsâ?
14. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button?
Is this similar to Learn more?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
=?
Search for what?
Featured what?
Apps. Why not
just âAppsâ?
15. If by some reason I
donât know what
Apple Watch is,
here I can get an
idea. DiïŹerent
versions of the
watch with
diïŹerent screens
rotate in loop.
Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button?
Is this similar to Learn more?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
=?
Search for what?
For apps. Why not
in Apps?
Featured what?
Apps. Why not
just âAppsâ?
16. Useful for those
who donât read
news.
A single clear call
to action. Good.
But why so small
text and pale
button?
Is this similar to
No.
videos inside the app while
Learn more
site in web browser.
=?
Search for what?
For apps. Why not
in
Featured what?
Apps. Why not
just âAppsâ?
Btw, where should I tap to order the watch?
19. This is cool!
I donât need to go
to my General
Settings >
Bluetooth and look
for the watch
20. If something goes
wrong you can use
old fashioned
Bluetooth pairing.
This is cool!
I donât need to go
to my General
Settings >
Bluetooth and look
for the watch
22. Itâs time to get our hands on the watch.
DISCLAIMER.
If you proceed to the next page you will see macro shots of my hairy wrist.
The good news is the wrist will mostly be covered with an Apple Watch.
29. Meanwhile on
the phone
Clear instruction
on what to do next.
Back button is a
smart move.
What if I tapped
Chinese?
30. Meanwhile on
the phone
Clear instruction
on what to do next.
Back button is a
smart move.
What if I tapped
Chinese?
And call to action.
31. Meanwhile on
the phone
Wow! Apple, thank
you for these small
pleasing details!
An animated star
cluster instead of
boring QR code.
By the way, today I read a good article from Facebookâs product design director Margaret Gould Stewart about these
nice touches and surprises that make people feel that we (designers) care about their experience.âš
Why Beauty Matters: Unexpected Learnings from a Refugee Camp
32. Now letâs imagine you align your phoneâs viewïŹnder with the watch.
Unfortunately I donât have a relevant photo as the phone was occupied.
34. And in a moment, the star cluster animation turns into the image consistent with what is on
the watch screen which is also very close to engraving on the back of the watch case.
35. To make sure you connected the
right watch? Looks good anyway.
53. Isnât this too small
and not obvious?
I know itâs a
standard button
in iOS, but stillâŠ
54. Shouldnât I read
this before
connecting my
Apple ID?
Isnât this too small
and not obvious?
I know itâs a
standard button
in iOS, but stillâŠ
55. Shouldnât I read
this before
connecting my
Apple ID?
Isnât this too small
and not obvious?
I know itâs a
standard button
in iOS, but stillâŠ
Newbie like: âWhat
is Digital Touch
and Apple Pay?
Not convincing.
Skipâ.
57. What if this screen looked like this?
Btw, tapping
Digital Touch and
Apple Pay user
could learn more in
a modal view with
external links to
more details on the
Apple web site.
58. What if this screen looked like this?
Btw, tapping
Digital Touch and
Apple Pay user
could learn more in
a modal view with
external links to
more details on the
Apple web site.
Am I getting
tedious?
67. Wait! Itâs about
Messages.
The diïŹerence
between this and
previous screen is
imperceptible!
Iâd suggest to add
icons to both
screens for better
diïŹerentiation.
Did anything happen?
73. Still think that
âWhat is this?â title
is redundant.
OK what?
Where is call to action by the way?
74. Still think that
âWhat is this?â title
is redundant.
OK what?
Where is call to action by the way?
If there is no choice, why didnât Apple include this to Terms and
Conditions and enable Location Services in stealth mode?