App: [HOLD for payment 2024-05-06] CRITICAL: [Marketing] [$250] Create training interstitial when you click `Track expense`

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:

Explain what this feature does from a functional basis
Preview how it works, to make it less scary and encourage them to give it a shot
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:

A modal interstitial that shows when you tap it
A looping Lottie animation walking through all the animations we’ve already made
A checkbox to cause this to be hidden in the future (which sets dismissedTrackTraining=1 in Onyx locally)
A button that links to HelpDot for Track
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
Automatic offers:

tienifr | Contributor | 0

About this issue

Original URL
State: open
Created 3 months ago
Comments: 34 (27 by maintainers)

Most upvoted comments

Hi, the video is ready and available.

You can use the path ${CLOUDFRONT_URL}/videos/guided-setup-track-business.mp4 from the code.

francoisl on Apr 23, 2024

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

dubielzyk-expensify on Apr 17, 2024

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.

srikarparsi on Apr 23, 2024

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

dubielzyk-expensify on Apr 22, 2024

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

srikarparsi on Apr 22, 2024

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.

srikarparsi on Apr 22, 2024

It’ll be up it 1 hour.

tienifr on Apr 22, 2024

@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.

tienifr on Apr 19, 2024

Taking this over @yuwenmemon

srikarparsi on Apr 13, 2024

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)

tienifr on Apr 12, 2024