Increase conversion via dedicated Home slot for free trials

[JmillsExpensify]

Summary

Based on recent A/B testing, we are seeing a significant increase in conversion when we clearly and prominently show:

1. How much time remains on a sign-ups free trial.
2. Prompting to add a billing card early

As a result, we're going to add a dedicated free trial slot at the top of the right hand of Home.

This issue covers:

• New, dedicated Home slot for active free trials
• Moving the 25% and 50% discounts out of Time Sensitive
• Detailed implementation considerations

---

Change details

New Home Slot

• Always appear at the top of the right column
• Conditional: Only appears when:
  • Account has a future dated end date
  • The trial corresponds to a workspace that still exists
  • Account doesn't have a billing card on file
• Background color: B1F2D6
• Covers cases for:
  • 25% discount (first 24 hours)
  • 50% discount (Days 2-7)
  • Adding a billing card before the trial ends (Days 8 - 30)
• Headline title: "Free trial: X days left" (e.g. current date compared to free trial end date)
• Illustration: treasure chest
• Body text (and CTA button)
  • 50% discount: "Get 50% off your first year!" (button: "Claim")
  • 25% discount: "Get 25% off your first year!" (button: "Claim")
  • No discount, remaining trail days: "Don't wait! Add your payment card now." (button: "Add")
• Supporting text (all cases): "Time remaining: [hh:mm:ss]"

---

Examples

50% discount

25% discount

No discount, remaining trial days

Note: This issue is part of an internal project. We won't open for proposals.

Issue Owner

Current Issue Owner: @adamgrzybowski

[adamgrzybowski]

I will work on that 👋

[adamgrzybowski]

👋 Hey @JmillsExpensify @dubielzyk-expensify

The counter for “Don't wait! Add your payment card now.” felt a bit confusing because there isn’t really anything to count besides the days left, and those are already visible above. Because of that, I removed it. Let me know if that makes sense to you.

With counter

Actual implementation

BTW, I wanted to double check things in Figma because the screenshots differ from each other. I found this page:
https://www.figma.com/design/1a0Vkz9RYH9rFL37T46Aot/%F0%9F%8C%8E-Global-nav?node-id=3647-18175

But I ran into a couple of issues:

• I wasn't sure if I actually found relevant designs.
• There are many different versions of the same view, so it’s a bit hard to understand which ones should be cross validated with the implementation, especially after the copy changes.
• The copy in Figma and in the issues is different.

Maybe we could improve the Figma workflow a bit for future issues. I think that would make things much easier for us when implementing.

Things that would help us:

• Linking the exact Figma frame directly in the issue.
• Marking in Figma which views are approved vs. which ones are more exploratory/experimental.

Also, just to confirm. I assume that copies from the issue have more priority over Figma ones. Is that correct?

Please let me know what you think!