[$250] CRITICAL: [Marketing] Create training interstitial when you click `Track expense`

[quinthar]

Problem:

We are about to promote Track expense to 10MM+ existing users, most of whom have never used NewDot. If we are lucky, they will see our marketing message and click through to check it out. It's unlikely they have an actual expense to track at that moment, so it's more likely they are going to just sorta click around to see what's available. Some unknown number of users will intuitively figure out our UI. However, some number of users won't find it intuitive by itself, and will abandon the product.

Note: We are working on Stage 2 onboarding. However, it doesn't exist today. Additionally, even if it did, it only targets new signups -- not historical signups. Furthermore, it only educates a single use case.

Solution:

Show "inline/on-demand training" the first time you use the Track expense, to:

1. Explain what this feature does from a functional basis
2. Preview how it works, to make it less scary and encourage them to give it a shot
3. Highlight the major use cases they should be using it for

It would work like this:

<gif combo roll>

[ ] Don't show me this again
(   Tell me more!    )
(     Got it!        )

The components are:

1. A modal interstitial that shows when you tap it
2. A looping Lottie animation walking through all the animations we've already made
3. A checkbox to cause this to be hidden in the future (which sets dismissedTrackTraining=1 in Onyx locally)
4. A button that links to HelpDot for Track
5. A button to continue

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01978ee6c0535caae9
• Upwork Job ID: 1778617803608776704
• Last Price Increase: 2024-04-12

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01978ee6c0535caae9

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[gijoe0295]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Create training interstitial when you click Track expense

What is the root cause of that problem?

This is a new feature.

What changes do you think we should make in order to solve the problem?

I can work on this feature following description in OP.

What alternative solutions did you explore? (Optional)

NA

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Create training interstitial when you click Track expense

What is the root cause of that problem?

This is a new feature

What changes do you think we should make in order to solve the problem?

• Create a FeatureTrainingModal that will accept 4 params: Lottie assets,learnMoreLink, onNotShowAgainPress, shouldShow
• Build the UI for FeatureTrainingModal according to the OP
  • This will be almost like the <ConfirmModal> which will show as a bottom tab modal, with 2 buttons
  • The checkbox will use the <Checkbox> component
  • The buttons will use <Button>, with the proper text and color
  • Animation will use <Lottie>
• Adds the FeatureTrainingModal to the track expense amount page, with Lottie assets, learnMoreLink based on what's provided by the design team.
• The onNotShowAgainPress will be a handler that will set dismissedTrackTraining to 1 in Onyx (and potentially call an NVP endpoint to mark this in the back-end). It should also set dismissedTrackTraining to null in Onyx if the user uncheck the checkbox for Do not show again
• The shouldShow will be true by default if dismissedTrackTraining is not 1, we'll also connect to Onyx to get this dismissedTrackTraining value. The shouldShow will need to be a local state too, for use in the next step.
• Add onPress handlers when the user press on Got it, or when the user dismiss by tapping on the modal's backdrop, we'll dismiss the modal, and set shouldShow to false
• Pressing the Learn more button, we'll redirect the user to the link provided in learnMoreLink
• Of course the FeatureTrainingModal will only show on first navigation to the Track expense page, not when going back from the Confirmation step, ...

This reusable component can be used whenever we want to educate the user about a new feature in the future, we can just pass the correct 4 params to FeatureTrainingModal, according to that particular feature.

What alternative solutions did you explore? (Optional)

NA

[rushatgabhane]

🎀 👀 🎀

Let's assign @tienifr to implement this feature

[melvin-bot[bot]]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

@yuwenmemon is OOO until 16th, so I've asked someone else to assign themselves to this urgent issue

https://expensify.slack.com/archives/C02NK2DQWUX/p1712996505924539

[srikarparsi]

Taking this over @yuwenmemon

[srikarparsi]

@tienifr's proposal looks good to me as well. Assigning

[melvin-bot[bot]]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[tienifr]

cc @Expensify/design Please send me the tutorial animation/video for this screen. Thanks!

[srikarparsi]

Hey @tienifr, for this point in your proposal:

and potentially call an NVP endpoint to mark this in the back-end

I created an NVP called HAS_SEEN_TRACK_TRAINING = "hasSeenTrackTraining" in the backend that you can set using SET_NAME_VALUE_PAIR in the frontend. Similar to how it is done here. We also want to set this NVP whenever Don't show this again is checked.

[tienifr]

@srikarparsi Got it! @shawnborton Could you kindly check https://github.com/Expensify/App/issues/40156#issuecomment-2056387391?

[srikarparsi]

cc @dubielzyk-expensify since I believe you were working on the video.

[dubielzyk-expensify]

I'll add myself here so I can help with PRs and I'll upload the video when it's done. It's posted to TCW here

[shawnborton]

Thanks Jon!

[srikarparsi]

Hey @tienifr, do you think you could give an ETA for when the PR will be ready for review? Thanks!

[srikarparsi]

Hey @tienifr! Friendly bump on the above :)

[dubielzyk-expensify]

Update that TCW came back with videos. Only minor feedback so should get final files early next week :)

[tienifr]

@srikarparsi Hey I'm working on it, I expected the video to complete first but now I think I should open the PR first to get the initial review. PR wil be ready today.

[srikarparsi]

Hey @tienifr! We're trying to get the PR out by end of day Monday or early Tuesday. If you could mention me whenever you push the PR, I can help with an initial review along with @rushatgabhane :)

[tienifr]

It'll be up it 1 hour.

[tienifr]

@srikarparsi I got a bit confused at how HAS_SEEN_TRACK_TRAINING is set. We would show this training interstitial only once, after that we wouldn't show it again. So what's the point of Don't show me this again check?

links to HelpDot for Track

I also need this because I couldn't find it in HelpDot. Is it this one?

[srikarparsi]

We should show this training every single time unless Don't show me this again is checked. Which means that we should only set the HAS_SEEN_TRACK_TRAINING when the checkbox is checked and Got it is pressed.

I also need this because I couldn't find it in HelpDot. Is it this one?

Hm, that looks like it's only for mileage. I'll check and get back to you on that but you can use that link for the initial PR for now.

[tienifr]

@srikarparsi Also in offline mode, we definitely couldn't fetch to show the video, do you want to show a placeholder animation just like onboarding welcome video page, or would we just not show the modal at all? I would choose the latter option because the modal is useless without the tutorial video.

[srikarparsi]

I agree, let's not show the modal at all in offline mode.

[tienifr]

PR ready for review https://github.com/Expensify/App/pull/40675.

[dubielzyk-expensify]

Here's the video: onboarding-track-video.mp4.zip

[tienifr]

@srikarparsi Does the above asset need to be uploaded to CloudFront? If yes, how can I do it?

[srikarparsi]

Hey! Yes, I believe so. I'm not exactly sure either how to do this but I checked internally. I'll upload the asset and give you the url.