Make scheduling with assigned setup specialist experience native

[anmurali]

DESIGN DOC

We currently link out to Calendly for all schedule demo or schedule a call links/ buttons. There are a few opportunities here:

1. We have an off brand, not so beautiful UI experience
2. We don't have insight into the next available date/ time each lead sees, and so if appropriate, aren't able to provide the opportunity to the lead to pick an earlier time on some other available setup specialist's calendar
3. We can't customize the experience itself as it relates to prerequisites we might want a lead to finish before we allow them to schedule. E.g (not exhaustive list)
   a. A lead of size 1-10 - we might ask them to connect their accounting ledger before scheduling a call
   b. A lead of size 11-50, which is a wide range, we could ask incremental qualifying questions to determine if we also want to require some pre-work in the account before allowing them to schedule
4. We have to keep all Guides/ sales team calendly links public, which means, anyone can and does schedule calls on their calendar and block time that should go to otherwise legit leads.

Let's make a beautiful in-app scheduling flow, which utilizes the Calendly APIs. Then once we're done with that, we can follow on by making all calendly links private, and then add logic like the ones listed in #2 and #3 as follow ons.

On clicking Schedule demo, we would open an in-app modal that allows the user to pick a date and then the time. As an example, this is what the Calendly one looks like, on click:

Then any schedule links in any email or Concierge or Guides messages would all direct the user to this in-app modal

---

Implementation issues:

• https://github.com/Expensify/Expensify/issues/488432
• https://github.com/Expensify/Expensify/issues/488035
• https://github.com/Expensify/Expensify/issues/488429
• https://github.com/Expensify/Expensify/issues/490006
• [Due for payment 2025-05-20] Allow users to schedule calendly calls in App #59747
• [PAYMENT DUE $500][Due for payment 2025-05-30] Display scheduled calendly calls in App #59748

Issue Owner

Current Issue Owner: @MonilBhavsar

[melvin-bot]

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

[anmurali]

Once we have some mockups, I can open this up to Contributors.

[shawnborton]

cc @Expensify/design for viz. I will get started on this one tomorrow, and my first thought is to do something very similar to what we already have via Calendly.

[shawnborton]

Here is what I have so far... a "wide modal" when you first go to book:

With a simple confirmation step afterwards:

For mobile, not sure if we want to drastically change the layout here (like break the first step into two steps) or just do something stacked like this?

@anmurali before I keep exploring, what happens after you confirm a meeting? Do you get a message in the room where you booked? An email? Something else?

cc @Expensify/design for feedback. Figma is here!

[parasharrajat]

I don't think we need a confirmation screen for this, the first step should be good enough where user selects a date and time and then hit confirm.

[shawnborton]

That's fair, we could in theory make the times just look like a list with checkboxes, and then a big green confirm button on the bottom of the page. That might feel like a lot to squeeze on one screen though.

[parasharrajat]

But it will save extra step in the process. We already have two steps where first user clicks schedule a demo button and then this modal where they select data and time.

Because, selected date and time can be shown as primary(green), it should be sufficient to for user confirmation. Anyways, they will have to hit a submit button or something at the end of this modal.

Yeah, if we want to move to confirmation on the selection on date and time automatically then no submit button but that is a new pattern IMO, having a confirm button is easy and familiar pattern.

[shawnborton]

Yeah, I personally don't think having the confirm page is a bad thing though, and it's pretty consistent with most flows in the app. Let's see what others think though.

[dannymcclain]

Looking good!

I don't mind the confirmation page at all. It doesn't feel like an extra step to me, just an opportunity to double-check everything. One thing though is that you wouldn't really be able to edit the Date, Time, and Timezone independently in separate push rows would you? I almost think on the confirmation page those should be read only push rows and then have one edit or change button somewhere there that basically just takes you back to the previous screen. (Or maybe the top left caret is enough?)

As far as mobile goes, I'd probably just do what you're doing and stack the times below the calendar and let the screen scroll. 👍

For the Timezone push row in your first mock, are you imagining it opening "above" the modal?

[shawnborton]

One thing though is that you wouldn't really be able to edit the Date, Time, and Timezone independently in separate push rows would you?

Nope, I was being tricky and just assumed that either of those push rows would navigate you back to the previous page. And now that I think of it, it seems pointless to have a timezone push row on the confirmation page.

Maybe a more simple approach might be to only change out the content of the modal after you press the time button, something like this?

CleanShot.2025-02-18.at.21.19.47.mp4

Though I could see where that doesn't quite follow other patterns we use across the app. So maybe we do want the modal to seem like it's sliding the content in/out like the onboarding modals do?