Page MenuHomePhabricator

Create app-wide onboarding screens for new users informing them of the reading list sync feature
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
RHo
May 26 2017, 4:35 PM
Referenced Files
F8808872: T166393 Part 7.png
Jul 22 2017, 2:29 AM
F8808873: T166393 Part 2.png
Jul 22 2017, 2:29 AM
F8808877: T166393 Part 3.png
Jul 22 2017, 2:29 AM
F8808875: T166393 Part 4.png
Jul 22 2017, 2:29 AM
F8808874: T166393 Part 5.png
Jul 22 2017, 2:29 AM
F8808878: T166393 Part 1.png
Jul 22 2017, 2:29 AM
F8808876: T166393 Part 6.png
Jul 22 2017, 2:29 AM
F8802524: image.png
Jul 20 2017, 1:34 PM

Description

User story

As a new app user, I want to be notified about new features on the app

Proposed design

App-wide onboarding screens

App onboarding 1.png (640×360 px, 41 KB)
App onboarding 2.png (640×360 px, 40 KB)
App Onboarding 3.png (1×720 px, 718 KB)
NOTE: The most updated redline version of mocks may be found on the Zeplin board tagged under "T162619 - Reading list sync onboarding"

Event Timeline

@RHo The designs look really cool, but there's one thing I can't help noticing:
Since these will be the very first screens that the user sees when the app is launched, it should be very obvious that it's the Wikipedia app that is showing these screens. And yet, I don't see any of our branding here, especially on the first screen. If I clicked on our app unintentionally, I wouldn't have any idea which app I'm looking at. Should we perhaps add a bit more branding on the first screen to make it explicit that this is the Wikipedia app?

Change 359432 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Introduce app-wide onboarding screens.

https://gerrit.wikimedia.org/r/359432

Change 359432 merged by jenkins-bot:
[apps/android/wikipedia@master] Introduce app-wide onboarding screens.

https://gerrit.wikimedia.org/r/359432

Since these will be the very first screens that the user sees when the app is launched, it should be very obvious that it's the Wikipedia app that is showing these screens. And yet, I don't see any of our branding here, especially on the first screen. If I clicked on our app unintentionally, I wouldn't have any idea which app I'm looking at. Should we perhaps add a bit more branding on the first screen to make it explicit that this is the Wikipedia app?

I would like to add a few thoughts regarding the design.

  1. It would be nice if the app followed the material design guidelines on onboarding. It seems to handle issue of redundant content in onboarding screens correctly. (In case it's been decided to follow already, that's great!)
  2. I think branding is not required as this would be shown only when the user opens the app for the first time. The probability for the accidental incident specified is very low. Further, showing the branding splash screen before the tutorial could solve this issue. (inspired by google slides app)

Note : Google slides android app could serve as a good example for this design.
Note: These are just my thoughts!

  1. It would be nice if the app followed the material design guidelines on onboarding. It seems to handle issue of redundant content in onboarding screens correctly. (In case it's been decided to follow already, that's great!)
  • Hi @Kaartic, yes we are following the guidelines already, but I did update the positions of the navigational elements to use space more efficiently based off the Slides onboarding you referenced, so thanks!
  • Hi @Kaartic, yes we are following the guidelines already, but I did update the positions of the navigational elements to use space more efficiently based off the Slides onboarding you referenced, so thanks!

@RHo You're welcome!

BTW, The new design looks great!

Change 362276 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Final design rework of onboarding screens.

https://gerrit.wikimedia.org/r/362276

Change 362276 merged by jenkins-bot:
[apps/android/wikipedia@master] Final design rework of onboarding screens.

https://gerrit.wikimedia.org/r/362276

LGTM

main-MainActivity-07202017151457.png (1×1 px, 812 KB)
image.png (1×1 px, 1 MB)
image.png (1×1 px, 1 MB)

(Tested on Nexus (Android 6.0.1) and Pixel (Android 7.1.2), Wikipedia version 2.6.198-alpha-2017-07-18)

QA testing steps:

  1. Open new installation of the app to see first onboarding screen
  2. Swipe left or tapping the ">" icon to show the second screen
  3. Tap on the "Log in or Create" link on the second screen to navigate to the login screen
  4. Return to the onboarding screen 2 by tapping the hardware back button from the login screen
  5. Tap on the "Log in or Create" link on the second screen again, but this time enter credentials to login
  6. After successful login, you should be returned to the onboarding flow, but now to screen 3.
  7. Tap on the "Learn more" link on onboarding step 3, whereupon the device browser will open to show the "Privacy policy" on Wikimedia.
  8. Return to the onboarding screen 3 by tapping the hardware back button
  9. Toggle off the "Send usage data" option, then "GET STARTED" to exit to the Explore feed
  10. Check in Settings that the 'Send usage data' selection from the previous step was captured.

Testing on Samsung-SM-JI20A Galaxy Express 3 (Android 6.0.1) and Wikipedia version 2.6.198-alpha-2017-07-21. According to below screencaps all QA test steps work as expected so this is fixed (regarding step 8, there is no hardware back button as the Chrome browser opens Privacy policy in a new window).

T166393 Part 1.png (800×480 px, 201 KB)

T166393 Part 3.png (800×480 px, 181 KB)

T166393 Part 6.png (800×480 px, 193 KB)

T166393 Part 4.png (800×480 px, 122 KB)

T166393 Part 5.png (800×480 px, 43 KB)

T166393 Part 2.png (800×480 px, 30 KB)

T166393 Part 7.png (800×480 px, 70 KB)