[$250] [CVP] Add an Illustration and simple directions to the the Submits to screen if there are no contacts

[danielrvidal]

Problem: Expensify is supposed to make money more efficient and fun. For an organic new user, the first time they send an expense to anyone they do not have any contacts. Thus, they see an empty screen which feels off brand. Especially for such a critical first time experience. It currently looks like this:

Solution: Add a fun illustration (with short and clear directions) to the empty state “Submits to” screen if the user does not have any recent contacts. If there are any recents in the list, we would not show the illustration. It could look like like this:

Current proposed text:

• Get paid back
• Submit your expense to any email or phone number.

This is being discussed here. @shawnborton can get the final image and @kevinksullivan can help with the https://expensify.slack.com/archives/C03TBKRSB/p1715809342220239?thread_ts=1714766113.560229&cid=C03TBKRSB

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01632280a607ac1c81
• Upwork Job ID: 1791150727815004160
• Last Price Increase: 2024-05-16
• Automatic offers:
• rayane-djouah | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @danielrvidal

[shawnborton]

Here is the file you need: emptystate__toddwithphones.svg.zip

It should be displayed at 176px wide by 178px tall.

We should also have marketing review the copy here as well.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01632280a607ac1c81

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add an Illustration and simple directions to the the Submits to screen if there are no contacts

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

In here, if we check that the sections (including all sections like Recents, Contacts, ...) has no user, and there's no search term, show the illustration (the UI is straight forward and is used similarly all around the app)

The UI will be a BlockingView similar to this, we can use Lottie there too if it's an animation (but looks like it's only an SVG icon so should be fine)

Of course the illustration and directions only show after the list has finished loading, for which there're some indicators like here

We can also create a prop ListEmptyComponent in SelectionList to make the feature available anywhere SelectionList is used, too.

We'll likely need a different copy in case of Send money, the above is for Request money only (Send your expense to anyone)

What alternative solutions did you explore? (Optional)

There're few cases we need to decide on, they are all straight forward changes once confirmed:

• Do we show the illustration if there's search term and there's no search result found?
• Do we show the illustration when there's no Recents option only (as mentioned in OP), or when there's no option at all (Recents, personal details, ...)

[rayane-djouah]

@tienifr's proposal looks good to me.

:ribbon::eyes::ribbon: C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rayane-djouah]

Do we show the illustration if there's search term and there's no search result found? Do we show the illustration when there's no Recents option only (as mentioned in OP), or when there's no option at all (Recents, personal details, ...)

Also, Do we need to add an Illustration and simple directions to "split expense", "pay someone", and "send invoice"? or we need this only for "submit expense"?

[shawnborton]

Yeah, I think all of the create flows that have the search input to search for a contaact would get this kind of empty state.

[mountiny]

@shawnborton Would we keep the same illustration or do we want to add a different illustration for each?

@danielrvidal Are you able to handle the copy for each of the flows as they will all be slightly different I assume. Thanks!

[shawnborton]

I think the same is fine

[tienifr]

@mountiny Would you mind handling the assignment?

So I can start with the PR and will be updating the copy with this once it's available 👍

[melvin-bot[bot]]

Current assignee @danielrvidal is eligible for the Waiting for copy assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[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 📖

[mountiny]

The other options we need copy and translations for are:

• Split Expense
• Start Chat
• Track Expense
• Pay Someone
• Send Invoice
• Assign task

[danielrvidal]

So I think the only ones we need it for are actually Submit Expense, Split Expense, and Pay someone. In all other cases, there is someone already in your recent. @shawnborton @mountiny do you agree we just need those cases? I'll get the copy and translation tomorrow for them.

Start chat

Track Expense No selector

Submit expense

Split expense

Pay someone

Assign a task:

Send Invoice

[tienifr]

@danielrvidal That's correct. Do we need different copies for each?

[shawnborton]

That makes sense to me!

[shawnborton]

Yeah we might want to do feature-specific copy for each of those flows Daniel mentioned.

[danielrvidal]

I'm working on finalizing the copy today, I should have it done by EOD.

[rayane-djouah]

Heads up, I'll be mostly offline until June 5th, 2024. I can still review this issue, but my response might be slower. If there is something urgent, please reassign it. Thanks!

[danielrvidal]

Here are the different variations of copy:

English: Submit an expense Submit to someone and get $250 when they become a customer. Spanish: Presentar un gasto Presente un gasto a alguien y recibe 250 dólares cuando se convierta en client.

English: Split an expense Split with a friend and get $250 when they become a customer. Spanish: Dividir un gasto Divide con un amigo y recibe 250 dólares cuando se convierta en client.

English: Pay someone Pay anyone and get $250 when they become a customer. Spanish: Pagar a alguien Paga a quien quieras y consigue 250 dólares cuando se convierta en cliente.

[danielrvidal]

Assigning @allroundexperts, woo!

[danielrvidal]

@allroundexperts any update on this one? Could you review @tienifr proposal and see if it could apply to how we build this including the updates?

[mountiny]

@danielrvidal I think the last piece is to agree on the copy here https://github.com/Expensify/App/pull/42413#issuecomment-2135699949 can you please check out the discussion in the PR?

Thank @allroundexperts can complete the review

[danielrvidal]

Updated in the other comment, let me know if there is anything else outstanding!