Page MenuHomePhabricator

Create onboarding and promo UI for reading list sync
Closed, ResolvedPublic2 Estimated Story Points

Description

User story

As a reading list user, I want to know when and how I will be able to keep reading lists saved on my app.

Proposed elements

i. A general promo/onboarding card which may utilize the Announcement card informing users of the update up front in the Explore feed.
ii. Have the user education be able to be shown in multiple places – on Reading lists 'My lists' or individual lists screen, Login, etc.

NOTE: Check with legal whether a legal disclaimer offering an opt-out option in Settings is required.
i. Feed onboarding card
Sync onboarding - announce card .png (1×720 px, 138 KB)
ii. My lists onboarding (not logged in)
Sync user education - My lists [not logged in].png (1×720 px, 202 KB)

The most updated redline version of mocks may be found on the Zeplin board tagged under "T162619 - Reading list sync onboarding"

B. Reminders/Warnings when user has sync turned off
Created separate task T166394

C. App-wide installation onboarding screens
Created separate task T166393

D. Promote reading list as a new benefit on creating a user profile
Created separate task T162720

E. FAQs that may be linked to from onboarding UI
Created separate task T165049

Event Timeline

User education/promotion - M
Reminders/Warnings - S
App-wide installation onboarding screens - M

Change 358831 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Show an onboarding card to encourage logging in for syncing reading lists.

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

@RHo Do we have the vector asset for the image in the feed card?

@Dbrant  – yes, I've just updated the the image asset on the Zeplin board now, available as SVG or as the standard PNG for announce cards.

Removed the note to check with legal. All user data will be on WMF servers alone for this feature, so there's no potential issue here for legal to deal with.

Putting the note back after discussing with @RHo as some verbiage around this may be among the topics to be generally discussed/confirmed with Legal.

Change 358831 merged by jenkins-bot:
[apps/android/wikipedia@master] Show an onboarding card to encourage logging in for syncing reading lists.

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

hi @Mholloway – I'm unable to test the announce card on the feed, but for the "My lists" screen, the sync prompt is appearing as a drawer instead of a card as expected.

main-MainActivity-07072017191802.png (1×1 px, 148 KB)

Can if it is difficult to change, can we use the Base20 (#54595D) color instead of the Green50 for the background and primary button text colors, per the Zeplin mock:
https://zpl.io/25Er5q

Isn't this the correct mock for this item (with a green background)? https://zpl.io/Z1nMtjb

Also, the mock to which you linked is in the shape of a drawer, isn't it?

@Dbrant – that's what I mean. The 'correct' mock on the ticket is a green card, but what I am seeing is a green drawer as the Actual result:

EXPECTED
Sync user education - My lists [not logged in].png (1×720 px, 202 KB)
ACTUAL
main-MainActivity-07072017191802.png (1×1 px, 148 KB)

We should either have this appear as Green50 background-colored card, or the card is problematic on this layout, continue to use the drawer but with a Base20 background-color.

Ah I see! we'll proceed with Base20 as a drawer, then.

Change 363856 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Final, final design tweaks to reading lists screen.

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

Change 363856 merged by jenkins-bot:
[apps/android/wikipedia@master] Final, final design tweaks to reading lists screen.

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

Yes, LGTM:

Screenshot_20170710-130923.png (1×1 px, 135 KB)

From Pixel (Android 7.1.2) on Wikipedia v2.6.198-alpha-2017-07-09

Tested on Pixel with Android 7.1.1 and Nexus 4 with Android 5.1 on the Alpha App 2.6.198-alpha-2017-07-10

I see the 'my lists' promo, but I don't know how to trigger it on the explore feed, Is there a way to see it?

Testing on Samsung-SM-JI20A Galaxy Express 3 (Android 6.0.1) and
Wikipedia app 2.6.198-alpha-2017-07-11.

I'll simply share a screencap of what appeared on my device and let the staff decide.

T162619.png (800×480 px, 59 KB)