Page MenuHomePhabricator

Build onboarding for iOS Watchlist feature
Closed, ResolvedPublic

Assigned To
None
Authored By
RWambua-WMF
Apr 28 2023, 9:58 PM
Referenced Files
F37669880: Onboarding modal 2.png
Sep 7 2023, 9:25 AM
F37667305: watchlist-black.jpeg
Sep 6 2023, 1:31 PM
F37667297: watchlist-dark.jpeg
Sep 6 2023, 1:31 PM
F37667295: watchlist-sepia.jpeg
Sep 6 2023, 1:31 PM
F37667293: watchlist-light.jpeg
Sep 6 2023, 1:31 PM
F37667285: watchlist-light copy 2.jpeg
Sep 6 2023, 1:31 PM
F37667282: watchlist-light copy.jpeg
Sep 6 2023, 1:31 PM
F37333545: view-updates.pdf
Aug 8 2023, 12:40 PM

Description

Background

We need to create designs to onboard and educate users to the iOS watchlist feature. Interesting note: There are 2,591 current edits done on an iOS device in comparison to over 33,000,000 pageviews. This means that we potentially expect very many new users who will use the new Watchlist feature. This makes onboarding vital to the feature's success.

The task

  • Create an onboarding screen to the watch action in article view for people that are logged in and have made an edit
  • Create an onboarding screen that takes users to their watchlist view after they have added an item to their watchlist from the article view (solved by adding a link in the toast that takes users to their Watchlist after adding an item, details see T335816)
  • Create an onboarding screen for users who open their watchlist feed for the first time and didn't previously go through the onboarding

Requirements

  • Design needs to be consistent with other iOS onboarding screens
  • Onboarding screen design should accommodate all the app themes i.e. dark mode, sepia, e.t.c.
  • Leverage existing implementations (like in Notifications Center)
  • Contents should assume users are not familiar with Watchlist
  • There should not be more than two slides
  • Should launch the first time someone accesses the Watchlist view on the iOS app
  • Onboarding should include a link to their watchlist view

Design (Figma)

iOS Watchlist 32.png (1×786 px, 105 KB)

SVG’s:

PDF’s:

Notes:

  • The onboarding sheet is shown when users tap "Watch" in the overflow menu in the article’s toolbar (see T335816) or they access "Watchlist" via Settings → account (see T341155)
  • It’s important to note that the onboarding sheet is shown only once, either that happens in the article or in Settings

Event Timeline

RWambua-WMF created this task.

As discussed in Slack and Planning @RWambua-WMF will update this task to reflect what was discussed in iOS planning. Onboarding should be two parts.
1 onboarding people that are logged in and have made an edit to the watch action in article view.

  1. Onoarding people to where they can access their entire watchlist once they have clicked Watch

The entry point will live in Account, under Talk Page in Settings.

@RWambua-WMF can remove all of the "design needs to think about" questions

CC: @scblr

scblr added a subscriber: cmadeo.

FYI: this has been designed together with @cmadeo

I am kicking this one back because task number two hasn't been completed

Tsevener subscribed.

@scblr I kicked off an Experimental build for design review on this one. It will be in TestFlight Experimental build #38. Thanks!

Thank you @Tsevener – looks great so far 🤩

1) Use copy from Figma here. I think it’s using the text from Set expiration currently

watchlist-light copy.jpeg (2×1 px, 288 KB)

2) Add full stops to paragraphs

watchlist-light copy 2.jpeg (2×1 px, 278 KB)

3) Curious: Could the icon colors adapt per theme (similar to e.g. text), or would you need separate assets? The latter might be bad for performance and app size, so we’d have to discuss if we aim for that (CC @OTichonova). I’m asking all this since, on Android, color groups can be applied to/within assets, resulting in better-suiting icons/illustrations per theme.

watchlist-light.jpeg (2×1 px, 663 KB)
watchlist-sepia.jpeg (2×1 px, 716 KB)
watchlist-dark.jpeg (2×1 px, 619 KB)
watchlist-black.jpeg (2×1 px, 674 KB)

Could the icon colors adapt per theme (similar to e.g. text), or would you need separate assets?

@scblr Because you have multiple shades of blue in these icons, it gets trickier. If they were all one shade, we could easily color them to whichever color you would like per theme. If you want to stick with multicolor icons, we have a some options for this (in order of my preference).

  1. Find a similar existing SFSymbol for each, configure them as hierarchical, and set their foreground color. See "Rendering modes" here for more information. You can download the SFSymbols Mac app here for exploring symbols we have available to us. Pay special attention to which iOS version they are on (we are iOS 15+) and which rendering modes they support.
  2. Design creates custom SF Symbols and annotates them (see "annotate your custom symbol" in this doc), then I believe on our side we would be able to treat them like system SF Symbols and configure them in the same way as option 1.
  3. Separate assets for each theme (i.e. 16 assets)

Option 1 feels the quickest to me. @OTichonova has explored creating custom SF Symbols, you can reach out to her for option 2. Option 3 definitely feels like an approach we should be moving away from, with the options we have today.

@scblr I applied 1) and 2) and merged the PRs - we can do icons in a followup PR if you'd like. Also, is there a better link that you would like to use for "Learn more about the Watchlist"?

Thanks @Tsevener 👏

@scblr Because you have multiple shades of blue in these icons, it gets trickier. If they were all one shade, we could easily color them to whichever color you would like per theme. If you want to stick with multicolor icons, we have a some options for this (in order of my preference).

  1. Find a similar existing SFSymbol for each, configure them as hierarchical, and set their foreground color. See "Rendering modes" here for more information. You can download the SFSymbols Mac app here for exploring symbols we have available to us. Pay special attention to which iOS version they are on (we are iOS 15+) and which rendering modes they support.

Okay, let’s keep the designs/icons as is for now (not a blocker). For less maintenance in the future, I recommend Android’s approach (foreground: blue icons, background: light blue circle) for these screens:

I’ll leave it up to @OTichonova if she wants to explore this further since it involves updating existing onboarding screens (e.g. notifications).

I applied 1) and 2) and merged the PRs

Just checked the Experimental build – didn’t see the changes yet. Also, I trust you on this, so no further review is needed.

Also, is there a better link that you would like to use for "Learn more about the Watchlist"?

The link you chose is fine, but could it be language-aware? E.g., if your primary language is Spanish, it’ll lead you here.

Just checked the Experimental build – didn’t see the changes yet. Also, I trust you on this, so no further review is needed.

@scblr Sounds good - once we turn on the feature flag you'll be able to see it in the main Wikipedia app in TestFlight, which automatically kicks off nightly.

The link you chose is fine, but could it be language-aware? E.g., if your primary language is Spanish, it’ll lead you here.

It'll take a bit of work to look up the other languages and find the proper link when they tap that button...I noticed the Notifications Center onboarding leads to this translated page - https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_FAQ#Notifications

Maybe we should make a section here for Watchlist, so that it can have more app-specific instructions?

Please test against TestFlight 7.4.2 (2660).