[Project] Implementation of Revised Expense Submission Flow - Phase 1: Experimentation

[Memo-Es]

Scoping

Scope 1: Basic Flow - Invoices & Receipts

• Setup entry point and team only access for testing
• Implement stepper infrastructure with navigation and validation across steps
• Implement Step1: Submit to
• Implement Step2: Type of Expense
• Implement Step3: Payment Method
• Improve visbilitty of payment method for selection
• Implement Step4: Expense info + instructions
• Implement Step5: Expense details
• Implement Step6: Summary & Submit
• Implement Step7: What next
• Implement "cancel expense" warning
  • Implement exit confirmation modal when navigating within OC
• Handle compatibility with html form element for native browser input constraints
• Implement components to create/delete payout methods
  • Implement edit payout method name (API)
  • Implement edit payout method (frontend)
• Limit payout methods to methods supported by host
• Add payee location (address, country)
• Handle multi currency totals in step summary using existing component

Scope 2: Error Handling

• Always enable next button, but prevent navigation and present errors if form is incomplete/invalid
• Missing legal name
• If payment method is bank account and payee legal name & bank account name do not match
• If payment method is Paypal and payee email and payment method email do not match

Scope 3: Edit Expense (if marked incomplete)

• Design proposal

Scope 4: Vendor Flow

• Design proposal for selecting a vendor instead of a payment method
• Implement selecting a vendor instead of a payment method

Scope 5: Invite Flow

• Design proposal
• Invite new user to submit expense
• Invite existing user to submit expense
• Enable completing invited expense in new submission flow (requires ability to edit expense in new flow). Currently, the invited user completes the expense in the existing expense flow.

Scope 7: Grant application

- [ ] Design proposal

Scope 6: Loose Ends

• Design proposal: missing tax form
• Implementation: missing tax form
• Design proposal: the collective does not currently have enough balance to pay this expense
• Implementation: the collective does not currently have enough balance to pay this expense

Refinements

• Design proposal: moving expense to a step after the expense details have been submitted.
• Engineering proposal: AI/ML assistance in generating effective expense titles
• Exploring potential improvements to "expense currency" (hiding where possible, more subtle location on screen, communicating impact to the expense submitter).
• Harnessing AI/ML to guide users when expense items are added are not compatible with the selected expense category.

Metrics

• Identifying metrics we want to track for this project
• Expense submission steps tracked in plausible
• Feedback form added, gathering responses in coda
• Created separate issue to improve analytics of dashboard page views

Overview

#7103

Solution

1. Add a "Create" button from the expenses tab
2. Implement a full-page overlay for the flow, it takes over the main toolbar and includes a "Back to my dashboard" button to exit the process
3. Implement a multi-step process for the expense submission flow
   1. Submit to
      1. "Who are you requesting money from?" Collectives to which you have recently submitted expenses. Displaying the last three Collectives + Other Collectives, a Collective picker.
         
   2. Type of expense
      1. A selector between invoice and reimbursement in 3 different sections:
         1. Submitting an expense for myself
         2. Inviting someone to submit an expense
         3. Submit an expense through a vendor (If the Fiscal Host has the vendor option active)
            
   3. Payment method
      1. For submitting an expense for myself: "How should the payment be made?" Selector between my personal profile or through an account I administer + A selector between my saved payment methods and a button to create a new one
      2. For inviting someone to submit an expense: A form with info about the payee, the person who will receive the invitation to complete the submission
      3. For submitting an expense through a vendor: A selector of the available vendors for that Fiscal Host
         
   4. Expense info
      1. Expense title input field
      2. Expense category selector
      3. Dynamic instructions
         
   5. Expense details
      1. Expense currency
      2. Expense tags
      3. Receipts / Invoice items
         
   6. Summary
      
   7. Success stage
      1. Attach a note (Optional)
      2. What next?
         1. This expense needs to be approved by an admin of Manyverse (Avg. time response: 2 days)
         2. This expense will then be reviewed by an administrator from Open Source Collective (Processing payouts twice a week).
         3. FAQ's
         4. Finish
            
4. Implement alert banners to notify the submitter when any of these conditions are met:
   1. The Collective doesn't have enough funds to pay this expense
   2. The name of the payee doesn't match the name of the payment method

Mobile design reference

Browser expanded	Browser after scroll	Steps navigation

https://www.loom.com/share/ad1b730ad8a144c5ad3a9c49c25a3c75?sid=3599d5a8-a004-4769-b06a-609e4692b3db

Scope 1 - Implement the new multi-step expense flow from the personal expenses page of the dashboard.

• Test design prototype for final implementation details
• Implement the full-page overlay
• Implement the new steps
• Implement the steps sidebar component

Scope 2 - Implement the preview feature for the expense flow

• Preview generation filling parts of the expense with each completed step
• Preview on/off

---

Coda reference: https://coda.io/d/_dnHLKv7oLV0#Projects_tusx8/r148&view=modal
Figma file: https://www.figma.com/file/ZQBMWhnGGtRWeIZknFW1eP/%5BOC-Design%5D-Production-Ready-%E2%9C%85?type=design&node-id=22546-14086&mode=dev

[Memo-Es]

Design update

https://www.loom.com/share/ecf0136528ea4cc8a21487a43a8d2ce6?sid=40c74091-0d6f-46dc-9693-6100ccf35e8f

Steps navbar reference

[iamronen]

Summary from weekly sync:

1. We are making progress on the core flow (invoices & receipts).
2. At the end of this cycle we want to have a version that is in private-beta for the OCI team only to be able to try it and give feedback on it.
3. It already seems that this project will exceed the initial two-cycle appetite that was allocated to it.
   • Engineering is confident we have established a good infrastructure that will make it possible to deliver by the end of next cycle a working version that matches the functionality of the existing expense submission flow.
   • However we also acknowledge that:
     • There is additional known complexity in the existing flows.
     • There are additional requirements in the known scope of this project (that go beyond the existing expense submission flow).
     • There are changes coming on the vendors front that will effect the expense submission flow.
     • There may be potential simplifications to the expense submission experience due to the work we have shaped (but have not yet decided to include in the next cycle)
     • As the new experience comes together we are discovering additional opportunities for improvements that we wish to pursue (see below) in order to deliver an experience that is clear and trustworthy.
   • We will decide at the end of next cycle what level of release we give the project. At minimum we would like to make it a private beta. If it is mature enough we will consider escalating it to a public-opt-in-beta so that others can give it a try.
   • We do expect there to be work in a third cycle.
4. In this week's sync we encountered these interesting challenges:
   1. When a user selects "Paypal" as a payment method prompting them to ask in which currency they would like to get paid. This is information we cannot retrieve from Paypal. We can, after a user has indicated a preference, to make it a default for future expenses.
   2. "Expense currency" selection which we can improve in three ways:
      • Hiding it in cases where it does not apply and the user does need to interact with it (potentially most cases).
      • Reconsidering where it shows up when it does have potential usability.
      • When a user selects an expense currency that is different from the payment method currency, indicate to the user that this may effect the amount of money that they actually receive.
   3. Expense category - how to show the expense submitter guidance, while entering expense items, if the expense items do not belong in the selected expense category.
   4. Expense title
      • The request to enter an expense title seems obvious but is not a clear ask from users (sometimes it even feels redundant) and as a result we deal with poor expense titles that do not function well in any context.
      • Expense titles function as identifiers - primarily for collective admins and fiscal hosts who deal with expenses from many users.
      • Expense titles can play a part (in the future) in demonstrating impact, for example: if a collective had a goal, we can show both how contributions reached that goal and then (potentially) how the money raised was used towards the goal - here good expense titles can help see "how money was used."
      • A few potentials:
        • Moving the title to a step after the expense details.
        • Using automation to generate titles based on expense details and perhaps (in the future) also based on the collective goals?
        • Enabling collective admins to adjust expense titles?

[shannondwray]

Where did we get to on this project? Just double checking for the reflection notes that I'm about to publish

• Would like to make this sentence past tense: If we have the capacity for it we would like to engage with implementation of the new expense submission flow. This is planned to be a two-phase effort. The first phase emphasizes UX experimentation and is intended to deliver a rough working version for internal use only.

[hdiniz]

For this week

• Handle compatibility with html form element for native browser input constraints
• Implement components to edit/create/delete payout methods
  • Limit payout methods to methods supported by host
  • Add payee location (address, country)
• Handle multi currency totals in step summary using existing component
• Add invoice additional info and description for grants
• Limited release with internal team

Up next

• Expense Invitation
  • Recurring expense
• Vendors
• Adding OCR, feedbacks on summary step

[Memo-Es]

Design update

• I laid down the different flows and steps with all the latest updates and feedback integrated:

• Figma file

@hdiniz @Betree @iamronen

[hdiniz]

Task list updated, this is being released internally (OC Inc team only) today with the updated designs.

@iamronen I will let the team know this is available and enabled in Preview Features

[Memo-Es]

@hdiniz @iamronen

Updates

• Make the height of the flow toolbar the same height as the regular top navbar

• 

• 

• Change the scroll area from the form only to the full page (Step bar + Form)

Current	Fixed

• Change the label from the exit button from "Back to dashboard" to "Close"
  

• Make the steps clickable as an alternative to navigation

• You can only go back. You can't click on successive steps if you haven't completed the current one

• If you go back and change something, you need to click next on every step again as part of the navigation process

• Fixes to payment method details

• If collapsed, we show one line of data (The most important one)

• If the payment method card has only one line of information (Like PayPal), there is no need for a collapse UI
  

• Show more details when "Bank account" is selected (When expanded)

Current	Fixed

• Fix spacing for the instructions instance

• Reduce the spacing of the elements of this section
  

• Small fixes

• Title from Step 3 "Type of expense" from "What are you here for?" to "Select the type of expense"

• Remove forward arrow from final step button "Submit expense"

• PROPOSAL: Merge step 4 and 5, title and category and expense details

• Have one step for all expense details
  

• Success state adaptation in a modal

• After clicking "Submit expense" the submitter lands in their personal dashboard under submitted expenses
  

---

Pending updates

• Duplicate expense proposal
• Live prototype testing steps

[BenJam]

Feedback

• tell me why the collectives that are shown are being shown inn 'who is paying' (I had a random project JDA shown)
• the 'other collective' box doesn't provide feedback when something is selected
• the other collective dropdown shows organisations before collectives, events and projects but I cant request an expense from an org
• 'profile I administer' is a bit weird, maybe use 'organisation or collective I administer, or list them?
• invoice or reimbursement seems very tight with text cut on both sides.
• we show a lot of instructions which look like they have to be read entirely before submitting an expense to Open Source Collective. In the current flow they're an aside

[aerugo]

Feedback

Starting with something positive: This flow clearly surfaces the guidelines of the collective to which an expense is being submitted. That’s an improvement!

Some issues I had running through:

• It’s unclear how to differentiate between requesting money from projects and collectives, and the dropdown menus mix up categories.
• The step-by-step approach makes me feel like I’m being forced through steps without understanding why I need to complete them before continuing like I’m being led through unnecessary bureaucratic steps without understanding their purpose.
• Specific functional issues:
  • Difficulty navigating between steps (inability to seamlessly go backward and forward). This was also a problem in the old flow, but it’s more evident in the new flow, as there is a menu to the left that can’t be used to navigate.
  • Issues with the layout and presentation of options, including the placement and sequence of actions like tagging expenses, setting invoice details and adding line items. As a user, I feel as if I am being asked to answer less important questions (title and tags) before getting to the important bits.
  • I can’t submit at the end of the process without indicating what’s missing or wrong.
• Finally, there is a significant security concern that a user can very easily be misled into submitting an expense to the wrong collective and sharing their personal and bank account information with the admins of the spoof collective in the process!

[Memo-Es]

@hdiniz some updates I gathered from the last call and feedback round:

• On the step of “Who is paying this expense?” if you search for “Another Profile” the results should only throw Collectives, projects or events, not Organizations.
• Enable the steps to the left to be clickable and an alternative to navigation
• Merge title and category and expense details in one single step
• Reorder the items of expense details putting the affordance to add invoice items / receipts at the beginning, then expense title, expense category, and add tags at the end. Reference in figma
• Do not use inactive next buttons. Instead have it always active and if something is wrong/missing highlight the field that needs user attention
• Enable edition of payment methods
• Copy changes:
• Step 1 "Who is paying this expense" to "What profile are you requesting money from"
• Step 3 "What are you here for" to "Select the type of expense"

---

For future release

• Enable selection of project/event when a Collective is selected.
  

cc @iamronen

[iamronen]

summary of week 6 sync

• Since this expense submission flow lives alongside the existing one we are releasing it as a beta available for everyone to try.
• We are NOT going to continue implementation work on this during cycle 3. We will be doing some user research and collecting feedback from users and bringing this to completion in a future cycle.

Loose ends before release

1. Changes to the final "What Next" step

• Move the "what next" screen into a modal on top of the dashboard->expenses page from which the user created the expense.
• Remove the button that is dedicated to submitting a comment.
• Add a button (labeled OK/Finished) that closes the "what next" step and submits a comment if the user added one.

2. Edit expense

• Add to the expenses context menu an option for "Edit Expense"
• When selected, direct the user into the expense submission flow in edit mode.
• Only show this option for "incomplete" expenses.

3. If a tax-form is missing and required, add a "tax form needed" step in the "whats next page," For now this should provide direction to what we currently have. In the future this will need to be updated to reflect the new tax forms implementation.
4. Complete vendor flow.
5. Integrate a feedback experience

Things to do before full release

• Resolve missing legal name in the flow itself.
• Resolve payee / payment method mismatch (name / email) in the flow itself.
• Review recurring expenses interaction (creating and canceling) at the end of the flow.
• OCR integration
• Integration with internalized tax-forms
• Save draft expense
• Design review
• Resolution of grants in a separate file (needed to retire the existing expense submission flow.

[iamronen]

comments on the comments @Memo-Es added:

1. I have added the "step navigation" as a thing to do not immediately but before full release. I did so because I think that getting it right is subtle: we discussed that when navigating back the next steps should revert to an "incomplete state" but retain their information. @hdiniz I leave it to you to decide if you can get it done before the upcoming release of the full release. If you do decide to implement now, I would like to do a review of the changed behavior.
2. I want to hold off on "Merge title and category and expense details in one single step" ... this also includes the expense categorization and I think there is more to think about and perhaps do in this step. So lets hold off on this for the next round of work.
3. I want to hold off on "inactive buttons" until we do a broader design review. after collecting feedback.

The rest of the changes are welcome.