[HOLD for payment 2024-05-06] CRITICAL: [Marketing] [$500] 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-06-06
• Automatic offers:
• tienifr | Contributor | 0

[melvin-bot]

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

[melvin-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]

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]

📣 @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 #40156 (comment)?

[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

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.67-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feature: Track expense training modal #40675

If no regressions arise, payment will be issued on 2024-05-06. 🎊

For reference, here are some details about the assignees on this issue:

• @rushatgabhane requires payment through NewDot Manual Requests
• @tienifr requires payment automatic offer (Contributor)

[srikarparsi]

Hi @rushatgabhane and @tienifr, this PR introduced this bug which we fixed with a 300ms timeout. I'm still not sure if this is the best way to do this so I wanted to ask if you guys had any other ideas.

[rushatgabhane]

@srikarparsi please attach payment summary for this issue 🙇

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[srikarparsi]

Hey @rushatgabhane! Since this was a pretty big PR and it only caused one small regression, we can pay $250 for you and @tienifr each without the deduction. It would be great though if you could take a look at this comment and check if there’s a better approach for fixing this regression. More information about the fix is here and we’re essentially looking for a good way to queue the next animation once the previous animation is complete.

[JmillsExpensify]

Waiting for BZ checklist to be complete before approving payment, based on @srikarparsi's comment above.

[rushatgabhane]

This is a new feature, so I'll propose regression steps only

1. Go to a new account
2. Press green+ > Track expense
3. Verify the training animation shows
4. Press Learn more
5. Verify user is navigated to HelpDot for track expenses
6. Press Got it
7. Verify user is navigated to Track expense page
8. Press Back button
9. Verify Track expense RHP dismisses
10. Press green+ > Track expense
11. Verify the training modal shows again
12. Toggle "Don't show me this again" > Got it
13. Verify user is navigated to Track expense page
14. Dismiss Track expense page
15. Press green+ > Track expense
16. Verify the training modal does not show. User is navigated directly to Track expense page instead

[rushatgabhane]

I'm still not sure if this is the best way to do this so I wanted to ask if you guys had any other ideas.

@srikarparsi no, i don't know a better way yet. I spent time on this yesterday, but couldn't find much

[srikarparsi]

Ok sounds good, @tienifr did you have a chance to look? The current solution is okay for me since we do the same thing in other places but just want to check. If not, I believe we can proceed with payment @muttmuure since the regression steps look good to me.

[tienifr]

Hi @srikarparsi I tried to find a solution for the last 2 days but still had no better idea. Also given that it has been used in other places, I think it should be fine. If we want to find a more general approach to solve all these cases, we should open a separate issue for that.

[srikarparsi]

Cool sounds good! I think this solution should work fine as well then. @muttmuure do you think you could help with payment or is there anything else that needs to be done? The regression steps here look good to me.

[JmillsExpensify]

Still waiting for a payment summary so I can approve.

[dubielzyk-expensify]

Any updates here?

[JmillsExpensify]

I flagged with Matt Moore via DM but he's OOO until Monday

[tienifr]

@muttmuure @JmillsExpensify According to this announcement, this issue is marked as CRITICAL and should have a base price of $500. Could you help to update the issue title and factor that into the payment summary?

Thanks!

While bugs/feature requests will now start at $250, any that are deemed Critical or High to our roadmap (noted via the label High Priority) will automatically be updated to $500. This is to ensure we get the necessary attention and urgency applied to these issues.

[JmillsExpensify]

I don't see the High Priority label on this issue, right?

[JmillsExpensify]

In any case, @muttmuure I need a summary on this issue when you're back from OOO.

[tienifr]

I don't see the High Priority label on this issue, right?

@JmillsExpensify I think the label was just missed out, like it was missed out and later applied here and here. In #40208 (comment) an issue with HIGH in the label missed the "High priority" label and it was added later. If not mistaken, CRITICAL here would be higher priority than HIGH

[muttmuure]

Going to give the benefit of the doubt that this is at least a HIGH issue, since it has CRITICAL status in the project

@rushatgabhane - C+ $500
@tienifr - C $500

[melvin-bot]

Upwork job price has been updated to $500

[JmillsExpensify]

$500 approved for @rushatgabhane