Foraged Wholesale Invoicing
Foraged Wholesale Invoicing
a new feature in the vendor dashboard to help create invoices for wholesale orders
a new feature in the vendor dashboard to help create invoices for wholesale orders
Role
Role
Product design/manager
Product design/manager
Timeline
Timeline
4 months
4 months
Tools
Tools
Figma, Figjam
Figma, Figjam
Team
Team
2 developers
2 developers
Summary
Summary
The problem
The problem
Some Foraged vendors conduct wholesale operations in their food business. However, the process of invoicing customers for these large orders requires a lot of manual labor.
Some Foraged vendors conduct wholesale operations in their food business. However, the process of invoicing customers for these large orders requires a lot of manual labor.
The solution
The solution
A new feature in the vendor dashboard that allows vendors to create and send wholesale invoices to customers through email and pay via Stripe, while adjusting for price and automatically deducting from their inventory.
A new feature in the vendor dashboard that allows vendors to create and send wholesale invoices to customers through email and pay via Stripe, while adjusting for price and automatically deducting from their inventory.
Background
Background
Foraged is an online marketplace for wild, specialty foods.
Foraged is an online marketplace for wild, specialty foods.
Foraged is an early-stage startup is to empower foragers and farmers to sell their products, from fresh morels to ramp salt to elderberry jams, locally and nationwide. We’re accomplishing this with a vendor dashboard that has a plethora of features to help these vendors create their storefronts, fulfill orders, and market their businesses.
Foraged is an early-stage startup is to empower foragers and farmers to sell their products, from fresh morels to ramp salt to elderberry jams, locally and nationwide. We’re accomplishing this with a vendor dashboard that has a plethora of features to help these vendors create their storefronts, fulfill orders, and market their businesses.
Many of our vendors do wholesale as well, but that process isn’t very seamless.
Many of our vendors do wholesale as well, but that process isn’t very seamless.
It’s a lot of manual labor for our vendors, from creating invoices to sending them to even physically collecting the checks. Their current system isn’t very reliable as mistakes can easily be made and there isn’t a secure way to charge customers on a timely basis.
It’s a lot of manual labor for our vendors, from creating invoices to sending them to even physically collecting the checks. Their current system isn’t very reliable as mistakes can easily be made and there isn’t a secure way to charge customers on a timely basis.
How might we streamline wholesale operations for Foraged vendors?
How might we streamline wholesale operations for Foraged vendors?
User research
User research
Understanding our vendors & the problem space
Understanding our vendors & the problem space
Our vendors are mainly small food businesses who have a few employees helping out. We sat down with a few of them to understand their wholesale context better and how they operate.
Here are the main pain points we discovered:
Our vendors are mainly small food businesses who have a few employees helping out. We sat down with a few of them to understand their wholesale context better and how they operate.
Here are the main pain points we discovered:
Wholesale operations are very “boots-on-the-ground” and “async,” which means that sales representatives individually create invoices to send via email or snail mail, making everything disparate.
Wholesale operations are very “boots-on-the-ground” and “async,” which means that sales representatives individually create invoices to send via email or snail mail, making everything disparate.
Since business transactions are done through many platforms/people, they need to manually update an inventory spreadsheet, and this process can be error-prone.
Since business transactions are done through many platforms/people, they need to manually update an inventory spreadsheet, and this process can be error-prone.
“Cashflow is a big problem when you’re a small business,” and having to physically chase down checks does not help the cause.
“Cashflow is a big problem when you’re a small business,” and having to physically chase down checks does not help the cause.
“There is no direct, recurring purchases,” indicating that vendors do have repeat customers, but each transaction is different from one another.
“There is no direct, recurring purchases,” indicating that vendors do have repeat customers, but each transaction is different from one another.
These conversations suggested that wholesale operations are quite decentralized for our vendors, which can cause a huge headache for overall business operations and accounting.
To summarize our findings and ensure my team was on the same page, I created this user persona. We wanted to use this as our north star to remind us who we are building for and what exactly they needed.
These conversations suggested that wholesale operations are quite decentralized for our vendors, which can cause a huge headache for overall business operations and accounting.
To summarize our findings and ensure my team was on the same page, I created this user persona. We wanted to use this as our north star to remind us who we are building for and what exactly they needed.
Fruitful Forager user persona
Fruitful Forager user persona
Define
Define
Identifying key features
Identifying key features
With my team, we determined the scope of the project in the product requirements document. The core functionalities we believed vendors needed are:
With my team, we determined the scope of the project in the product requirements document. The core functionalities we believed vendors needed are:
Create invoices
Create invoices
This allows vendors to list line items and any additional fees to an invoice.
This allows vendors to list line items and any additional fees to an invoice.
Adjust pricing
Adjust pricing
With wholesale items, they tend to cost less than retail prices, so we would need to account for that.
With wholesale items, they tend to cost less than retail prices, so we would need to account for that.
Deduct from inventory
Deduct from inventory
We want to give vendors the ability to decrease from their Foraged inventory so they don't have manually subtract it themselves.
We want to give vendors the ability to decrease from their Foraged inventory so they don't have manually subtract it themselves.
Track invoices
Track invoices
A new table centralizes all invoices by status, date, and customer name so a vendor can easily see what’s going on.
A new table centralizes all invoices by status, date, and customer name so a vendor can easily see what’s going on.
Send invoices via email
Send invoices via email
This would make sending an invoice more automatic and prevent vendors from having to resort to snail mail.
This would make sending an invoice more automatic and prevent vendors from having to resort to snail mail.
Pay invoices via Stripe
Pay invoices via Stripe
Leveraging Stripe payment (which is already used on Foraged) would reduce the manual labor of physically collecting checks.
Leveraging Stripe payment (which is already used on Foraged) would reduce the manual labor of physically collecting checks.
These features would centralize and digitize wholesale operations for vendors, helping them keep track of their orders/inventory more easily and adding a level of security for payment.
To help me better visualize these requirements and give further clarity to my team on the steps to create and send an invoice, I created a user flow.
These features would centralize and digitize wholesale operations for vendors, helping them keep track of their orders/inventory more easily and adding a level of security for payment.
To help me better visualize these requirements and give further clarity to my team on the steps to create and send an invoice, I created a user flow.
Creating an invoice user flow
Creating an invoice user flow
Ideation
Ideation
Making our vision come to life
Making our vision come to life
Now that my team and I concluded on what the priority features would be, I looked around for inspiration on invoicing to better understand what are some of the industry best practices at the moment.
Now that my team and I concluded on what the priority features would be, I looked around for inspiration on invoicing to better understand what are some of the industry best practices at the moment.
Inspiration for invoicing
Inspiration for invoicing
I then started sketching low-fidelity wireframes. In particular, I explored different ideas and UI patterns for the invoice form to see what we thought would be most intuitive when it comes to filling out the details of an invoice.
I then started sketching low-fidelity wireframes. In particular, I explored different ideas and UI patterns for the invoice form to see what we thought would be most intuitive when it comes to filling out the details of an invoice.
Low-fidelity sketches of the invoice form
Low-fidelity sketches of the invoice form
After getting feedback from my team, I moved onto high-fidelity wireframes, using components from the design system I built from scratch and existing brand guidelines.
After getting feedback from my team, I moved onto high-fidelity wireframes, using components from the design system I built from scratch and existing brand guidelines.
Usability testing
Usability testing
Learning from our vendors
Learning from our vendors
After finalizing the designs and prototype, I conducted 2 forms of usability testing — moderated and unmoderated. We wanted to conduct moderated testing to get in-depth answers and critique from our vendors. However, we know that our vendors are busy people, as some of them are literally out in the wild during the day. We created an unmoderated testing option through Maze so that not only they can complete the test at their earliest convenience, but we can also get as much feedback as possible.
I affinity mapped my observations and their input. Then I summarized the insights in a feedback capture grid. The +1 stickers are used to demonstrate that this feedback was repeated by multiple users.
After finalizing the designs and prototype, I conducted 2 forms of usability testing — moderated and unmoderated. We wanted to conduct moderated testing to get in-depth answers and critique from our vendors. However, we know that our vendors are busy people, as some of them are literally out in the wild during the day. We created an unmoderated testing option through Maze so that not only they can complete the test at their earliest convenience, but we can also get as much feedback as possible.
I affinity mapped my observations and their input. Then I summarized the insights in a feedback capture grid. The +1 stickers are used to demonstrate that this feedback was repeated by multiple users.
Feedback capture grid of moderated & unmoderated usability testing
Feedback capture grid of moderated & unmoderated usability testing
Overall, on average, vendors rated the experience 8/10 on intuitiveness, finding the feature quite straight-forward.
I then analyzed the pain points and found these to be the most common ones:
Overall, on average, vendors rated the experience 8/10 on intuitiveness, finding the feature quite straight-forward.
I then analyzed the pain points and found these to be the most common ones:
Redundancy in preview vs. review
Redundancy in preview vs. review
To some vendors, preview and review "are essentially the same thing," stating that "the preview button isn't necessary" since the same information is basically presented.
To some vendors, preview and review "are essentially the same thing," stating that "the preview button isn't necessary" since the same information is basically presented.
Different timeframes to bill customers
Different timeframes to bill customers
We learned that the expected payment window varies depending on the type of customer, so vendors are more familiar with setting up due dates for invoices.
We learned that the expected payment window varies depending on the type of customer, so vendors are more familiar with setting up due dates for invoices.
Searching via dropdown can be tedious
Searching via dropdown can be tedious
Many vendors have a large catalogue of products, so selecting products through a dropdown and having to do that over and over again can be difficult and time-consuming.
Many vendors have a large catalogue of products, so selecting products through a dropdown and having to do that over and over again can be difficult and time-consuming.
Iteration
Iteration
Addressing vendor feedback
Addressing vendor feedback
Here are some before and afters of the major priority revisions I made for the wholesale invoicing feature based on vendor feedback.
Here are some before and afters of the major priority revisions I made for the wholesale invoicing feature based on vendor feedback.
1. Redundancy in preview vs. review
1. Redundancy in preview vs. review
To reduce redundancy:
To reduce redundancy:
Removed the “Preview” button
Removed the “Preview” button
1
Renamed the “Review invoice” button to “Review & send invoice”
Renamed the “Review invoice” button to “Review & send invoice”
2
2. Different timeframes to bill customers
2. Different timeframes to bill customers
To accommodate for the different timeframes:
To accommodate for the different timeframes:
Removed “Choose payment window” dropdown
Removed “Choose payment window” dropdown
1
Kept date picker to choose a specific due date
Kept date picker to choose a specific due date
2
3. Searching via dropdown can be tedious
3. Searching via dropdown can be tedious
To make searching for products easier for vendors:
To make searching for products easier for vendors:
Replaced the dropdown with a search bar
Replaced the dropdown with a search bar
1
Additionally, after further exploration of our codebase, I made some more changes. I repurposed some components for invoicing so that implementation and deployment can be expedited. Doing this would not only help us increase GMV faster, but also ultimately allow our vendors to have quicker access to the feature and boost their own sales.
Here are some before and afters of the major revisions I made based on what components were in our codebase.
Additionally, after further exploration of our codebase, I made some more changes. I repurposed some components for invoicing so that implementation and deployment can be expedited. Doing this would not only help us increase GMV faster, but also ultimately allow our vendors to have quicker access to the feature and boost their own sales.
Here are some before and afters of the major revisions I made based on what components were in our codebase.
1. Searchable dropdown
1. Searchable dropdown
We have a component that allows you to search for a name and then would drop down options based on predictive search.
We have a component that allows you to search for a name and then would drop down options based on predictive search.
2. Product catalogue modal
2. Product catalogue modal
There’s an existing modal in the vendor dashboard that allows us to search for products in a vendor’s catalogue through a table. This would be great to repurpose for adding line items to the invoice. It also addresses the pain point of how looking for products in a dropdown can be tedious.
There’s an existing modal in the vendor dashboard that allows us to search for products in a vendor’s catalogue through a table. This would be great to repurpose for adding line items to the invoice. It also addresses the pain point of how looking for products in a dropdown can be tedious.
Final solution
Final solution
Introducing wholesale invoicing on Foraged
Introducing wholesale invoicing on Foraged
Below is a video of the feature live on the vendor dashboard.
Below is a video of the feature live on the vendor dashboard.
Invoice table
Invoice table
When a vendor navigates to Invoices in the Orders tab of the vendor dashboard, they will see a table of their invoices to help them easily track what’s going on. Here they can see the due date, invoice number, name of the customer, its status, and invoice total. Additionally, there’s a callout to let vendors know how much the transactions fees are when a customer pays digitally.
When a vendor navigates to Invoices in the Orders tab of the vendor dashboard, they will see a table of their invoices to help them easily track what’s going on. Here they can see the due date, invoice number, name of the customer, its status, and invoice total. Additionally, there’s a callout to let vendors know how much the transactions fees are when a customer pays digitally.
Creating the invoice
Creating the invoice
To create an invoice, the vendor needs to fill out the customer information, line items, and payment collection. A vendor can search for a customer’s name in the dropdown or add a new customer if this customer hasn’t ordered from them before. Adding a new customer would ask for their first name, last name, and email. Once the customer is added, the vendor would fill out their shipping information.
For the line items, the vendor can add products from their existing catalogue or add a custom item, which is a product that doesn’t currently exist in their catalogue. They can also add a fee for shipping, packaging, etc. After adding those, the vendor can then adjust quantity, decide if it should decrease from their Foraged inventory, and change price if need be.
Lastly, the vendor would then choose a due date for payment with the date picker.
To create an invoice, the vendor needs to fill out the customer information, line items, and payment collection. A vendor can search for a customer’s name in the dropdown or add a new customer if this customer hasn’t ordered from them before. Adding a new customer would ask for their first name, last name, and email. Once the customer is added, the vendor would fill out their shipping information.
For the line items, the vendor can add products from their existing catalogue or add a custom item, which is a product that doesn’t currently exist in their catalogue. They can also add a fee for shipping, packaging, etc. After adding those, the vendor can then adjust quantity, decide if it should decrease from their Foraged inventory, and change price if need be.
Lastly, the vendor would then choose a due date for payment with the date picker.
Reviewing + sending the invoice
Reviewing + sending the invoice
Once the vendor is ready, they can review and send the invoice. They will see a summary of the invoice and be able to add a custom message to the customer if they would like. The invoice would then be sent to the customer’s email and they would pay via Stripe.
If the vendor is not ready to send the invoice, they can save it as a draft.
Once the vendor is ready, they can review and send the invoice. They will see a summary of the invoice and be able to add a custom message to the customer if they would like. The invoice would then be sent to the customer’s email and they would pay via Stripe.
If the vendor is not ready to send the invoice, they can save it as a draft.
Invoice details
Invoice details
By clicking on the invoice row from the table, the vendor will be brought to the Invoice details page. This summarizes customer information, the line items, and payment. A vendor can take some additional actions to duplicate the invoice, send reminder for payment, and/or mark the invoice as void.
By clicking on the invoice row from the table, the vendor will be brought to the Invoice details page. This summarizes customer information, the line items, and payment. A vendor can take some additional actions to duplicate the invoice, send reminder for payment, and/or mark the invoice as void.
Success metrics
Success metrics
Making an impact on Foraged’s bottom-line
Making an impact on Foraged’s bottom-line
Within the first couple weeks of the beta launch of wholesale invoicing:
Within the first couple weeks of the beta launch of wholesale invoicing:
$9,469
$9,469
of GMV was attributed to this feature
of GMV was attributed to this feature
That’s 9% of our total monthly GMV from a single feature alone.
That’s 9% of our total monthly GMV from a single feature alone.
Reflection
Reflection
My takeaways
My takeaways
What challenged me?
What challenged me?
Determining the scope of this feature was a huge team effort. We went back and forth a lot about what we thought to be absolutely crucial, with me advocating for our vendors so that their needs are heard and the engineering team taking into account what was technically feasible in the timeline we allotted. It took a lot of compromise, but we believe what we released is a great v1 of this feature.
Determining the scope of this feature was a huge team effort. We went back and forth a lot about what we thought to be absolutely crucial, with me advocating for our vendors so that their needs are heard and the engineering team taking into account what was technically feasible in the timeline we allotted. It took a lot of compromise, but we believe what we released is a great v1 of this feature.
What are some potential next steps?
What are some potential next steps?
There are a lot of ideas floating around on what v2 of this feature could look like. Our vendors have already suggested adding custom reminders to remind customers to pay their invoice and analytics to see how well their wholesale business is doing. As more and more of our vendors use this new feature, we will gain more insight on what would be valuable to add for v2.
There are a lot of ideas floating around on what v2 of this feature could look like. Our vendors have already suggested adding custom reminders to remind customers to pay their invoice and analytics to see how well their wholesale business is doing. As more and more of our vendors use this new feature, we will gain more insight on what would be valuable to add for v2.