Page MenuHomePhabricator

[M] Introduction screen component for Year in Review
Closed, ResolvedPublic

Assigned To
None
Authored By
HNordeenWMF
Sep 30 2024, 7:24 PM
Referenced Files
F57613448: CleanShot 2024-10-14 at 18.44.40.png
Oct 14 2024, 4:47 PM
F57613444: image.png
Oct 14 2024, 4:47 PM
F57613440: CleanShot 2024-10-14 at 18.40.29.png
Oct 14 2024, 4:47 PM
F57613437: CleanShot 2024-10-14 at 18.39.43.png
Oct 14 2024, 4:47 PM
F57613434: image.png
Oct 14 2024, 4:47 PM
F57613431: image.png
Oct 14 2024, 4:47 PM
F57587711: image.png
Oct 3 2024, 11:50 PM

Description

Background

The Apps team plans to explore if a personalized Wikipedia Year in Review feature that displays insights about a user's reading history, editing history, and donation history is engaging for App users, and inspires them to make a donation to the Wikimedia Foundation.

Requirements
Designs
image.png (1×786 px, 222 KB)
Engineering notes:
  • Create a new component for this UI.
  • Default animation: We dismiss this view when Continue taps (animates out to bottom), then present slides (animates up from bottom)
  • (Nice-to-have) When tapping "Continue" button, we want this UI to fade out and fade in first slide component (T375566). Otherwise just go with default animation after tapping Continue.
QA Notes
  • Install app
  • Ensure device region in iOS settings is set to Mexico or Italy
  • Ensure primary app language is set to Spanish, Italian or English
  • Tap through rabbit hole to build up 6+ articles in the History tab if needed
  • Enable year in review feature flag in app developer settings menu
  • Background / foreground the app to trigger report creation.
  • Year in Review entry point should appear in Profile menu
  • Tap entry point, test Intro slide according to requirements.

Event Timeline

HNordeenWMF renamed this task from Build introduction screen component for Wikipedia in Review to Introduction screen component for Wikipedia in Review.Sep 30 2024, 7:26 PM
HNordeenWMF renamed this task from Introduction screen component for Wikipedia in Review to Introduction screen component for Year in Review.Oct 4 2024, 3:20 PM
HNordeenWMF updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener subscribed.

Estimating without the Nice-To-Have (fade out/in animation after tapping Continue).

Tsevener renamed this task from Introduction screen component for Year in Review to [M] Introduction screen component for Year in Review.Oct 4 2024, 3:32 PM

Hi @GOlson-WMF - FYI we should hopefully have a couple of button components you can use here - WMFLargeButton and WMFSmallButton. You can reference WMFOnboardingView to see how they are used.

Thanks @GOlson-WMF 👍

1) Seems like the "Hide this feature" option is not visible on specific devices (with larger dynamic type settings, such as my device)

Default viewScrolled
image.png (2×1 px, 506 KB)
image.png (2×1 px, 431 KB)

Any chance to keep the button area fixed at the bottom of the screen:

CleanShot 2024-10-14 at 18.39.43.png (2×1 px, 428 KB)

And set the scroll to this area:

CleanShot 2024-10-14 at 18.40.29.png (2×1 px, 490 KB)

Quickly mocked up a smaller device for better understanding:

image.png (1×786 px, 207 KB)

2) Can the scrollbar be more at the right side of the screen (with a e.g. 16dpi margin) rather than right at the edge of the text, where it looks a bit off:

CleanShot 2024-10-14 at 18.44.40.png (2×1 px, 378 KB)

3) Increase the fade-in / fade-out animation length to the intro slide. What are the current settings? Intuitively, I’d say double the current settings.

@scblr

Default animation is 0.35s, I upped it to 0.75s but can easily adjust it, let me know your preferences :)

Updated scroll view

Simulator Screenshot - iPhone 15 Plus - 2024-10-15 at 09.54.42.png (2×1 px, 482 KB)

Moved the scroll bar over, too :)

Build #174

@GOlson-WMF – I did all of this:

Device country code must be Italy or France
Primary app wiki language must be French or Italian
Year in Review feature flag in developer settings menu must be on

As a bonus, I am currently in France 🥖. Unfortunately, the menu item doesn’t show up. Anything I’m missing @GOlson-WMF @Tsevener ?

I was able to test thanks @Tsevener. Looks great to me; thanks for the work @GOlson-WMF 👏

Tsevener added a subscriber: GOlson-WMF.