Apple Watch: User Onboarding

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 115

Apple Watch

User Onboarding

Denys Nevozhai
In this deck I’ll illustrate how Apple has designed
user onboarding flow 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?


Nice detail, the title
depends on time
Nice detail, the title
depends on time
Ok, that’s clear
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. Different
versions of the
watch with
different screens
rotate in loop.
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. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.
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. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small


text and pale
button?
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. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? news.
If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Is this similar to Learn more?


If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Is this similar to Learn more?

No. Explore is educational


videos inside the app while
Learn more opens Apple web
site in web browser.
If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Is this similar to Learn more?


Featured what?
No. Explore is educational
videos inside the app while
Learn more opens Apple web
site in web browser.
If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Is this similar to Learn more?


Featured what?

No. Explore is educational Apps. Why not


videos inside the app while just “Apps”?
Learn more opens Apple web
site in web browser.
If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Search for what?


Is this similar to Learn more?
Featured what?

No. Explore is educational Apps. Why not


videos inside the app while just “Apps”?
Learn more opens Apple web
site in web browser.
If by some reason I
don’t know what
Apple Watch is,
here I can get an
idea. Different
versions of the
watch with
different screens
rotate in loop.

A single clear call


to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Search for what?

For apps. Why not


Is this similar to Learn more?
Featured what?

in Apps?
No. Explore is educational Apps. Why not
videos inside the app while just “Apps”?
Learn more opens Apple web
site in web browser.
A single clear call
to action. Good.

But why so small Useful for those


text and pale who don’t read
button? =? news.

Search for what?

For apps. Why not


Is this similar to Featured what?

in
No. Apps. Why not
videos inside the app while just “Apps”?
Learn more
site in web browser.

Btw, where should I tap to order the watch?


Anyway
This is cool!

I don’t need to go
to my General
Settings >
Bluetooth and look
for the watch
This is cool!

I don’t need to go
to my General
Settings >
Bluetooth and look
for the watch

If something goes
wrong you can use
old fashioned
Bluetooth pairing.
It’s time to get our hands on the watch.
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.
To start the watch,
press the digital
crown-button.

Meanwhile on
the phone
To start the watch,
press the digital
crown-button.

It’s explained in a
nice quick guide
that comes with
Meanwhile on the watch.
the phone
It takes some time
to boot.

Meanwhile on
the phone
The first screen
you will see is a
language selection
which is smart.
People may buy
the watch from
abroad.
Meanwhile on
the phone
Let’s tap English
for consistency

Meanwhile on
the phone
Back button is a
smart move.
What if I tapped
Chinese?

Meanwhile on
the phone
Back button is a
smart move.
What if I tapped
Chinese?

Clear instruction
on what to do next.

Meanwhile on
the phone
Back button is a
smart move.
What if I tapped
Chinese?

Clear instruction
on what to do next.

And call to action.


Meanwhile on
the phone
Wow! Apple, thank
you for these small
pleasing details!

An animated star
cluster instead of
boring QR code.
Meanwhile on
the phone

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
Now let’s imagine you align your phone’s viewfinder with the watch.

Unfortunately I don’t have a relevant photo as the phone was occupied.


And magic happens! This couple is paired.
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.
To make sure you connected the
right watch? Looks good anyway.
What if to touch the watch screen?
Roger that!
Let’s get back to the phone.

Meanwhile on
the watch
If you realised
you connected
someone else’s
watch.

Meanwhile on
the watch
If you realised
you connected
someone else’s
watch.

Meanwhile on
Again, single call the watch
to action which
is good.
Meanwhile on
the watch

The buttons just jumped down.

Go to the previous slide if you don’t believe me.


Not sure this is
important at this
Meanwhile on
stage, but
the watch
I assume Apple
had some study
Not sure this is
important at this
Meanwhile on
stage, but
the watch
I assume Apple
had some study

I choose left
BOOM!
Start over? From the very beginning?!
May be it was caused
by frequent switching
between Watch app
and Camera.

Start over? From the very beginning?!


Do everything again

It takes many minutes for the watch to reset.


Ok, looks like I’ve reached the next level.
Standard iOS
confirmation of
terms and
conditions. Apple
doesn’t want to be
sued.
What’s going on here? What to do? Where is call to action?
Isn’t this too small
and not obvious?
Isn’t this too small
and not obvious?

I know it’s a
standard button

in iOS, but still…


Isn’t this too small
and not obvious?

I know it’s a
standard button

in iOS, but still…

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


Shouldn’t I read
is Digital Touch
this before
and Apple Pay?
connecting my
Not convincing.
Apple ID?
Skip”.
What if this screen looked like this?
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.
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?
Now let’s compare side by side

Vs.
Ok, back to reality.
Enter password
Enter password

I don’t remember if
I could make the
password visible,
but I guess no. I’d
like to.
And tap Next

Enter password

I don’t remember if
I could make the
password visible,
but I guess no. I’d
like to.
Did anything happen?
Did anything happen?

Wait! It’s about


Messages.
Did anything happen?

Wait! It’s about


Messages.

The difference
between this and
previous screen is
so imperceptible!
Did anything happen?

Wait! It’s about


Messages.

The difference
between this and
previous screen is
imperceptible!

I’d suggest to add


icons to both
screens for better
differentiation.
Anyway
This is exactly
what I was talking
about. Nice
distinctive images.
Where is call to action by the way?
Where is call to action by the way?

OK what?
Where is call to action by the way?

Still think that


“What is this?” title
is redundant.

OK what?
Where is call to action by the way?

Still think that


“What is this?” title
is redundant.

OK what?

If there is no choice, why didn’t Apple include this to Terms and


Conditions and enable Location Services in stealth mode?
OK, let’s just tap OK
Have you noticed I didn’t confirm Location Services in a standard
modal view as all of us used to? Nice touch!
Which action is
preferable?
And what does this
image have to do
with diagnostics?

Which action is
preferable?
If Apple doesn’t
care which one I
choose, I choose
Don’t Send.
Passcode is useful, I care about privacy.
Passcode is useful, I care about privacy.

But will it be easy to enter numbers on such a small screen?


I already criticized similar screens.
I already criticized similar screens.

so let’s just do it
Could this screen be more exciting? ;)
Back to the watch
Let’s enter passcode

Meanwhile on
the phone
It’s not simple, I
have to be super
precise.

Meanwhile on
the phone
It’s not simple, I
have to be super
precise.

I don’t want to do
Meanwhile on this every day :(
the phone
This sounds like a
solution!

Meanwhile on
the phone
And this sounds
like a solution!

But how does it


work?
Meanwhile on
the phone
And this sounds
like a solution!

But how does it


work?

Meanwhile on
the phone
Oh! Something
new on my phone!
Meanwhile on
the watch

Ok, now I understand.


Meanwhile on
the phone

Yes. I don’t want to enter that


code ever again
Meanwhile on
the phone

Yes, I remember, when I see this screen,


it’s time to switch to iPhone
This is awesome,
Apple! I don’t want
to install all apps
manually.
BOOM 2!
Do everything again!

Including all permissions and entering passcode.


Some time later…
Some time later…

Hold my fingers crossed.


BOOM 3!
It’s fine, I got used to it.

Do everything again.
Some time later…
I can’t believe it!
For real?
For real! The watch is ready for use.
Great. What’s next?
Great. What’s next?

How to use the watch?


Great. What’s next?

How to use the watch?

At least some basics, please!


Apple: “Figure it out yourself.”
THE END
Denys Nevozhai
Principal product designer at Alcatel Onetouch

dnevozhai@gmail.com

@dnevozhai Denys Nevozhai dnevozhai

You might also like