Thursday, May 14, 2015

Apple Watch User Onboarding Analysis

Apple Watch User Onboarding Analysis

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.


Transcript

  • 1. Denys Nevozhai Apple Watch User Onboarding
  • 2. 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?
  • 3. Nice detail, the title depends on time
  • 4. Nice detail, the title depends on time Ok, that’s clear
  • 5. 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
  • 6. 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.
  • 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. 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?
  • 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. Different versions of the watch with different 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?
  • 9. 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. 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?
  • 10. 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. 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.
  • 11. 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. 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.
  • 12. 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. 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”?
  • 13. 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. 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”?
  • 14. 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. 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”?
  • 15. 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?
  • 16. Anyway
  • 17. This is cool! I don’t need to go to my General Settings > Bluetooth and look for the watch
  • 18. 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
  • 19. It’s time to get our hands on the watch.
  • 20. 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.
  • 21. Meanwhile on the phone To start the watch, press the digital crown-button.
  • 22. Meanwhile on the phone To start the watch, press the digital crown-button. It’s explained in a nice quick guide that comes with the watch.
  • 23. Meanwhile on the phone It takes some time to boot.
  • 24. Meanwhile on the phone The first screen you will see is a language selection which is smart. People may buy the watch from abroad.
  • 25. Meanwhile on the phone Let’s tap English for consistency
  • 26. Meanwhile on the phone Back button is a smart move. What if I tapped Chinese?
  • 27. Meanwhile on the phone Clear instruction on what to do next. Back button is a smart move. What if I tapped Chinese?
  • 28. 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.
  • 29. 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
  • 30. 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.
  • 31. And magic happens! This couple is paired.
  • 32. 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.
  • 33. To make sure you connected the right watch? Looks good anyway.
  • 34. What if to touch the watch screen?
  • 35. Roger that!
  • 36. Let’s get back to the phone. Meanwhile on the watch
  • 37. If you realised you connected someone else’s watch. Meanwhile on the watch
  • 38. If you realised you connected someone else’s watch. Meanwhile on the watchAgain, single call to action which is good.
  • 39. Meanwhile on the watch The buttons just jumped down. Go to the previous slide if you don’t believe me.
  • 40. Meanwhile on the watch Not sure this is important at this stage, but I assume Apple had some study
  • 41. Meanwhile on the watch Not sure this is important at this stage, but I assume Apple had some study I choose left
  • 42. BOOM!
  • 43. Start over? From the very beginning?!
  • 44. Start over? From the very beginning?! May be it was caused by frequent switching between Watch app and Camera.
  • 45. Do everything again It takes many minutes for the watch to reset.
  • 46. Ok, looks like I’ve reached the next level.
  • 47. Standard iOS confirmation of terms and conditions. Apple doesn’t want to be sued.
  • 48. What’s going on here? What to do? Where is call to action?
  • 49. Isn’t this too small and not obvious?
  • 50. Isn’t this too small and not obvious? I know it’s a standard button in iOS, but still…
  • 51. 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…
  • 52. 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”.
  • 53. What if this screen looked like this?
  • 54. 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.
  • 55. 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?
  • 56. Now let’s compare side by side Vs.
  • 57. Ok, back to reality.
  • 58. Enter password
  • 59. Enter password I don’t remember if I could make the password visible, but I guess no. I’d like to.
  • 60. And tap Next Enter password I don’t remember if I could make the password visible, but I guess no. I’d like to.
  • 61. Did anything happen?
  • 62. Did anything happen? Wait! It’s about Messages.
  • 63. Wait! It’s about Messages. The difference between this and previous screen is so imperceptible! Did anything happen?
  • 64. 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. Did anything happen?
  • 65. Anyway
  • 66. This is exactly what I was talking about. Nice distinctive images.
  • 67. Where is call to action by the way?
  • 68. Where is call to action by the way? OK what?
  • 69. Still think that “What is this?” title is redundant. OK what? Where is call to action by the way?
  • 70. 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?
  • 71. OK, let’s just tap OK
  • 72. Have you noticed I didn’t confirm Location Services in a standard modal view as all of us used to? Nice touch!
  • 73. Which action is preferable?
  • 74. Which action is preferable? And what does this image have to do with diagnostics?
  • 75. If Apple doesn’t care which one I choose, I choose Don’t Send.
  • 76. Passcode is useful, I care about privacy.
  • 77. Passcode is useful, I care about privacy. But will it be easy to enter numbers on such a small screen?
  • 78. I already criticized similar screens.
  • 79. I already criticized similar screens. so let’s just do it
  • 80. Could this screen be more exciting? ;)
  • 81. Back to the watch
  • 82. Meanwhile on the phone Let’s enter passcode
  • 83. Meanwhile on the phone It’s not simple, I have to be super precise.
  • 84. Meanwhile on the phone It’s not simple, I have to be super precise. I don’t want to do this every day :(
  • 85. Meanwhile on the phone This sounds like a solution!
  • 86. Meanwhile on the phone And this sounds like a solution! But how does it work?
  • 87. Meanwhile on the phone And this sounds like a solution! But how does it work? Oh! Something new on my phone!
  • 88. Ok, now I understand. Meanwhile on the watch
  • 89. Yes. I don’t want to enter that code ever again Meanwhile on the phone
  • 90. Meanwhile on the phone Yes, I remember, when I see this screen, it’s time to switch to iPhone
  • 91. This is awesome, Apple! I don’t want to install all apps manually.
  • 92. BOOM 2!
  • 93. Do everything again! Including all permissions and entering passcode.
  • 94. Some time later…
  • 95. Some time later… Hold my fingers crossed.
  • 96. BOOM 3!
  • 97. It’s fine, I got used to it. Do everything again.
  • 98. Some time later…
  • 99. I can’t believe it! For real?
  • 100. For real! The watch is ready for use.
  • 101. Great. What’s next?
  • 102. Great. What’s next? How to use the watch?
  • 103. Great. What’s next? How to use the watch? At least some basics, please!
  • 104. Apple: “Figure it out yourself.”
  • 105. THE END
  • 106. Denys Nevozhai Principal product designer at Alcatel Onetouch dnevozhai@gmail.com @dnevozhai Denys Nevozhai dnevozhai