feat(ONYX-1457): add Create Alert Prompt experiment #11346

dariakoko · 2025-01-07T12:25:35Z

This PR resolves ONYX-1457

Description

Help increase awareness of the Create Alert function from the artist page (high traffic and high impact)
Figma

Implement two variants and control variant

control: nothing changes
variant-a: popover component
variant-b: message components with CTA

For variants a and b the component should be shown:

after 40 artworks is loaded
max 2 times per user
the second time the user will see the popover or message component will be minimum in 7 days
when after seeing the component the user clicks "Create Alert" CTA, the popover or message should not be shown again

Make sure the popover component is not shown together with any of the progressive onboarding components at the same time on the same screen

Also adding the payloadSuggestions: ['{"forcePrompt": "true"}', '{"forcePrompt": "false"}'] for testing purposes. Inspired by @anandaroop 🙏

When forcePrompt === true the max times to show the component is 123456 and the waiting time is 30 seconds instead of 3 days. Also, in case of a forced prompt I display a text that says how many times the component has been shown. If the Create Alert CTA was not pressed after seeing the component, on the next render of the component the number will increase by 1. If Create Alert CTA was pressed, the number will be increased by 2. This functionality was added for testing purposes.

iOS

Popover	Message
popul.Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-01-08.at.18.38.55.mp4	message.Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-01-08.at.18.38.18.mp4

Android

Popover	Message
IMG_7221.MP4	IMG_7220.MP4

PR Checklist

I have tested my changes on iOS and Android.
I hid my changes behind a feature flag, or they don't need one.
I have included screenshots or videos, or I have not changed the UI.
I have added tests, or my changes don't require any.
I added an app state migration, or my changes do not require one.
I have documented any follow-up work that this PR will require, or it does not require any.
I have added a changelog entry below, or my changes do not require one.

To the reviewers 👀

I would like at least one of the reviewers to run this PR on the simulator or device.

Changelog updates

Cross-platform user-facing changes

add Create Alert Prompt experiment (onyx_create-alert-prompt-experiment)

iOS user-facing changes

Android user-facing changes

Dev changes

Need help with something? Have a look at our docs, or get in touch with us.

ArtsyOpenSource · 2025-01-07T12:29:28Z

This PR contains the following changes:

Cross-platform user-facing changes (add Create Alert Prompt experiment (onyx_create-alert-prompt-experiment) - dariakoko)

Generated by 🚫 dangerJS against 79db47c

…tation

dariakoko · 2025-01-08T18:33:43Z

src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx

+    /**
+     * if Create Alert CTA was pressed withing 2 minutes after the prompt was shown
+     *  do not show the prompt again
+     * */
+    if (Date.now() - promptState.dismissDate < 120000 && isFocused) {
+      dontShowCreateAlertPromptAgain()
+    }


This part is still TDB whether to keep it or not

Barney confirmed this is a good enough approach - if the user interacted with the Create Alert button within 2 minutes after seeing the message or a popover we should not show the message or popover again

dariakoko · 2025-01-08T18:36:42Z

src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2Popover.tsx

+  const isOnboardingFinished =
+    isFocused &&
+    // make sure threre is no active onboarding popover on the screen
+    !activePopover


We should not display two popovers on the same screen at the same time, tis is why I am adding this check here.
From my understanding, this is the easiest ways to check if there is an active popover from the progressive onboarding. Not sure if this is the most reliable implementation.. Please, correct me if I am missing something

Just noticed that isOnboardingFinished is not a very descriptive name
Should be something like "canDisplayPopover"

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

olerichter00 · 2025-01-09T13:32:02Z

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

+  const variant_a = enabled && variant === "variant-a"
+  const variant_b = enabled && variant === "variant-b"


🐪 🐍

Suggested change

const variant_a = enabled && variant === "variant-a"

const variant_b = enabled && variant === "variant-b"

const variantA = enabled && variant === "variant-a"

const variantB = enabled && variant === "variant-b"

olerichter00 · 2025-01-09T13:44:56Z

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

+  const variant_a = enabled && variant === "variant-a"
+  const variant_b = enabled && variant === "variant-b"
+
+  const userDidScroll = artworks.length >= 40


This might work at the moment, but it does not precisely determine whether the user has scrolled or not. I think there are three things here we could improve:

Update the logic to either involve the scroll offset or check whether the number of artworks is greater than the initial number of artworks fetched (I'm not 100% sure if this is necessary, though).

Avoid magic numbers.

Change the variable name because the user could have already scrolled when the number of artworks is less than or equal to 40.

Suggested change

const userDidScroll = artworks.length >= 40

const displayCreateAlertPrompt = artworks.length >= CREATE_ALERT_ONBOARDING_OFFSET && artworks.length > INITIAL_NUMBER_OF_ARTWORKS

olerichter00 · 2025-01-09T13:47:30Z

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

@@ -288,6 +304,7 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
              <ArtistArtworksFilterHeader
                artist={artist}
                showCreateAlertModal={() => setIsCreateAlertModalVisible(true)}
+                shouldShowCreateAlertPrompt={!!userDidScroll && variant_a}


Not sure if prompt (definition: "a request the software makes in order to obtain information from the end user...") is the correct term here. Maybe onboarding tooltip makes more sense 🤔

olerichter00 · 2025-01-09T13:54:02Z

src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx

@@ -9,11 +9,13 @@ import { graphql, useFragment } from "react-relay"
 interface ArtistArtworksFilterProps {
  artist: ArtistArtworksFilterHeader_artist$key
  showCreateAlertModal: () => void
+  shouldShowCreateAlertPrompt?: boolean


I wonder if we can avoid prop drilling here by using the already existing ProgressiveOnboardingModel's setIsReady functionality.

olerichter00 · 2025-01-09T13:55:14Z

src/app/store/CreateAlertPromptModel.ts

@@ -0,0 +1,33 @@
+import { action, Action } from "easy-peasy"
+
+export interface CreateAlertPromptModel {


Can we use the already existing ProgressiveOnboardingModel for this feature?

MounirDhahri · 2025-01-10T13:36:46Z

src/app/store/GlobalStoreModel.ts

@@ -57,6 +58,7 @@ interface GlobalStoreStateModel {
  requestedPriceEstimates: RequestedPriceEstimatesModel
  recentPriceRanges: RecentPriceRangesModel
  progressiveOnboarding: ProgressiveOnboardingModel
+  createAlertPrompt: CreateAlertPromptModel


models should be ideally names instead of verbs. Maybe something like alertPrompt

However, I don't think we should add a new model for this. It might be possible for us to use the existing visual clues model to model this.

We already have addClue and setVisualClueAsSeen. Maybe we can find a way to save the number of times an item has been seen and combine both models into one

dariakoko self-assigned this Jan 7, 2025

artsy-peril bot added the Jira Synced label Jan 7, 2025

dariakoko added 7 commits January 8, 2025 12:34

feat: implement componentsfor variants a and b

25ddd80

feat: add show logic, add globalstore

e2cf18b

feat: add and track unleash experiment

b7047c8

feat: add dontShowAgain and forcePrompt

4531b38

feat: add dontShowCreateAlertPromptAgain, adjust forcePrompt implemen…

788f44e

…tation

chore: add tests

a91a1ce

chore: add tests

ededf25

artsyit force-pushed the dariakoko/ONYX-1457/signal-awareness-and-prominence branch from 41f0661 to ededf25 Compare January 8, 2025 11:56

dariakoko added 5 commits January 8, 2025 17:32

fix: fix Artist.tests

dd3726f

fix: add state migration

db3aa62

chore

69a0e01

fix

5ad4982

fix

bb10222

dariakoko requested review from anandaroop, MounirDhahri, araujobarret, gkartalis and olerichter00 January 8, 2025 18:32

dariakoko commented Jan 8, 2025

View reviewed changes

chore: viewed artworks 40

fba9f7f

olerichter00 reviewed Jan 9, 2025

View reviewed changes

dariakoko added 4 commits January 9, 2025 16:56

chore: rename variables

3f8532a

feat: add tracking

0b3f718

chore

44d6b22

chore: checnge interval from 3 to 7 days

79db47c

MounirDhahri reviewed Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ONYX-1457): add Create Alert Prompt experiment #11346

feat(ONYX-1457): add Create Alert Prompt experiment #11346

dariakoko commented Jan 7, 2025 •

edited

Loading

ArtsyOpenSource commented Jan 7, 2025 •

edited

Loading

dariakoko Jan 8, 2025

dariakoko Jan 10, 2025

dariakoko Jan 8, 2025

dariakoko Jan 8, 2025

olerichter00 Jan 9, 2025

olerichter00 Jan 9, 2025

olerichter00 Jan 9, 2025 •

edited

Loading

olerichter00 Jan 9, 2025

olerichter00 Jan 9, 2025

MounirDhahri Jan 10, 2025

MounirDhahri Jan 10, 2025

		const variant_a = enabled && variant === "variant-a"
		const variant_b = enabled && variant === "variant-b"

	const userDidScroll = artworks.length >= 40
	const displayCreateAlertPrompt = artworks.length >= CREATE_ALERT_ONBOARDING_OFFSET && artworks.length > INITIAL_NUMBER_OF_ARTWORKS

		@@ -0,0 +1,33 @@
		import { action, Action } from "easy-peasy"

		export interface CreateAlertPromptModel {

feat(ONYX-1457): add Create Alert Prompt experiment #11346

Are you sure you want to change the base?

feat(ONYX-1457): add Create Alert Prompt experiment #11346

Conversation

dariakoko commented Jan 7, 2025 • edited Loading

Description

iOS

Android

PR Checklist

To the reviewers 👀

Changelog updates

Cross-platform user-facing changes

iOS user-facing changes

Android user-facing changes

Dev changes

ArtsyOpenSource commented Jan 7, 2025 • edited Loading

This PR contains the following changes:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olerichter00 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dariakoko commented Jan 7, 2025 •

edited

Loading

ArtsyOpenSource commented Jan 7, 2025 •

edited

Loading

olerichter00 Jan 9, 2025 •

edited

Loading