[HOLD for payment 2022-05-20] Present all main CTAs in NewDot as green buttons to encourage engagement

[kevinksullivan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Create workspace
2. Navigate to any of the workspace pages

Expected Result:

Per this conversation, we want to present the desired next step very clearly within NewDot when in the "empty" or non-configured state, by presenting the ideal CTA as a green button. More specifically, that means we'll show the following actions as green buttons throughout the product:

Connect bank account
This button is shown in the following pages of the Workspace editor:

• Issue cards
• Reimburse expenses
• Pay bills
• Send invoices
• Book travel

Connect online with Plaid
This button is shown in the Connect bank account page. Additionally, we'll want to use the same pattern whenever a user has started adding a bank account but the setup is incomplete. That includes:

• Continue with setup (shown when user exits before completing bank account flow)
• Yes, let's chat! (shown when user fails check and we follow up with next steps in concierge)
• Chat with concierge (shown when user has 1) signed up with a public domain and 2) successfully added a bank account through this flow, but must add a private email address.)

Add payment method
We will show Add payment method as a green button when no payment method exists within the Payments page.

Actual Result:

We do not use green buttons to promote these CTAs, and thus next steps for configuring a workspace and/or account are less obvious.

Notes/Photos/Videos:
Connect bank account

Connect online with Plaid

Add payment method

Slack conversation: Link

CC: @shawnborton @JmillsExpensify @quinthar @miljakljajic

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[shawnborton]

We should clean up how much margin is found below the content and above the button - it feels pretty crammed.

We might also want to look at this case here where we have two actions:

Those two styles don't harmonize well together.

[shawnborton]

@kevinksullivan can you link the Figma file where you worked on these?

[miljakljajic]

@shawnborton although we have two options, do you not think it's worth us pushing the admin towards connecting via plaid?

[shawnborton]

@miljakljajic That's not what I am saying - I think it is worth pushing the admin towards Plaid. But I think we might want to look at a different style for the second option here - maybe it's a button as well but in a secondary color? Basically you have one primary button with center-aligned text and no left icon, and then a second option that has left-aligned text with an icon. Those two styles feel like they clash. Let me know if that is more clear.

[kevinksullivan]

Moved the figma file to its own page @shawnborton . I totally agree we might want to revisit that pattern, it does feel off as displayed. Curious what y'all think for differentiating the Connect manually option.

[shawnborton]

Meaning, we might want to create a pattern where the second button in this mix (the button that we are not encouraging) would look something like this:

I can bring this to Slack for a quick look too.

[shawnborton]

Quick Slack discussion here

[shawnborton]

Based on our Slack discussion, looks like this one was the winner: