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

Quick Slack discussion here

[shawnborton]

Not overdue. I think the design is finalized here, cc @kevinksullivan - what are the next steps?

[kevinksullivan]

Thanks @michelle-thompson @shawnborton . Went ahead and updated the mocks in the OP. Let me know if I am missing anything.

[shawnborton]

Looks good to get this thing started, we can add more comments regarding design/spacing/etc once it is being implemented.

[stephanieelliott]

Invited @thesahindia and @rushatgabhane to the job on Upwork, please accept when you get a chance!

[stephanieelliott]

Hi @thesahindia, can you update on progress here?

[MelvinBot]

📣 @thesahindia You have been assigned to this job by @stephanieelliott!
Please apply to this job in Upwork 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 📖

[thesahindia]

I am working on it will submit a PR soon.

Also can I get this svg?

[rushatgabhane]

Also can I get this svg?

cc: @michelle-thompson

[thesahindia]

Do we wanna change the color for connect bank account at workspace initial page?

[rushatgabhane]

@thesahindia no, I don't believe so. Thanks for asking

[shawnborton]

@rushatgabhane is correct

[thesahindia]

Chat with concierge (shown when user has successfully added a bank account, but is using a public domain and needs to add a private email to enable card)

I couldn't find this one. On which page can I find this?

[rushatgabhane]

Chat with concierge (shown when user has successfully added a bank account, but is using a public domain and needs to add a private email to enable card)

I have no idea either. @NikkiWines could you please help us with the steps to get to this flow?

[NikkiWines]

Hmm, I think that references to the following view - which i got to by signing up with a personal email, adding a workspace, and then trying to add a bank account via Plaid.

cc: @kevinksullivan since you made this issue, can you clarify the steps needed to get to the following flow?

Chat with concierge (shown when user has successfully added a bank account, but is using a public domain and needs to add a private email to enable card)

[kevinksullivan]

You are correct @NikkiWines . I updated the steps that you pasted above, but they largely say the same thing:

(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.)

Let me know if this is still unclear or if I can make it clearer @rushatgabhane @thesahindia

[thesahindia]

Let me know if this is still unclear or if I can make it clearer @rushatgabhane @thesahindia

Nope, this is fine.

[thesahindia]

Also can I get this svg?

bump @michelle-thompson

[michelle-thompson]

I'm so sorry for the delay, here's the icon:
Connect.svg.zip

[michelle-thompson]

@thesahindia made some updates, can you please use this icon instead?
Connect.svg.zip

[thesahindia]

Eeep 😬 just took the screenshots. Will change it.

[michelle-thompson]

Thank you!

[stephanieelliott]

Changes requested to PR, work still ongoing in #8609

[stephanieelliott]

PR is moving along through review!

[stephanieelliott]

PR is under QA

[stephanieelliott]

PR is under QA

[stephanieelliott]

Deployed to prod! Will pay this out after the 7-day regression period.

[stephanieelliott]

All paid!