Providing Real-Time, Custom Quotes for Order Fulfillment Services

Many eCommerce companies depend on 3rd parties to help get their product picked, packed, and shipped to their customers. Pricing the order fulfillment services for these operations can be complex depending on quantity, weight, and shape of the products as well as any add-on services that the company may need.

For this reason, many order fulfillment companies such as ShipBob, shipmonk, shiphero, and many others have pricing calculators on their site to help companies estimate their fulfillment expenses. However, these interactive calculators are purely estimates; companies must submit a request for a quote and then wait for a salesperson to be in touch or for the actual quote to come back via email.

In multi-step workflows such as this example, a custom web app is the perfect solution to accept company inputs, perform calculations, allow for back-end pricing adjustments and approval, and then send the final approved quote back to the company.

Create a custom web app to automate order fulfillment quotes

Providing accurate, reliable quotes to companies as fast as possible is critical to winning their business. Every minute that passes with them waiting on a quote can lead them to searching for alternative solutions. On the flipside, if you deliver a quote too quickly, you risk providing them with a quote that isn’t accurate or that hasn’t been approved internally.

With this no-code app template, we have created a solution that allows for companies to receive an accurate, approved quote in an efficient manner.

Page 1 — Company Details Form

This app requires a form for companies to fill out with their fulfillment needs. This form will serve as the first page of your application. To create the form, you must first have a table with the respective fields that the companies will fill out. This table can be native in the application you’re building in or in an external database such as Airtable.

Company Details Table

Fields:

• ID, id
• Company Name, text
• Email, email
• First Name, text
• Last Name, text
• Role, text
• Orders per Month, number
• Items per Order, number
• Total SKUs, number
• Avg Ounces per Item, number
• Interested in Real-time Reporting?, boolean

sample of data table structure

Company Details Form

Fields: Include all of the fields in the company details table.

In your form and database, you may want to customize the fields to collect data specific to your business. This is critical to calculate an accurate quote and collect vital information for your CRM. You may want to collect information on the type of fulfillment services your customers are looking for, specific storage requirements, location requirements, and any custom service requirements.

Display the company details form as a full page in your app with best practices applied for padding and sizing. Including your company logo is a great way to make your form appear more professional.

You’ll also want to configure your form submission button to send the form entries to the appropriate internal parties that will be conducting the approval process.

order fulfillment form — to be filled out by the prospective customer

Page 2 — Approving the Quote

The next step in creating your web app is to create a page to calculate your internal cost to serve the company based on the inputs they provided in the previously created form. Based on this cost to serve, your team can apply markups, adjust pricing, and agree on an approved price to send back to the company.

To create this page, first create an internal costs table. This table should reflect your receiving, packing, storage, shipping, and labor costs in addition to any other costs that may be relative to your business. These costs will be used to calculate the cost to serve each company.

Internal Costs Table

Fields:

• Cost Detail, text
• Internal Costs, currency
• Unit, single selection

sample data table structure

Company Costs Table

Now that you have each company’s details and your internal cost structure, you can calculate the specific costs for each company. Create a table with the following structure.

Fields:

• Company ID, lookup
• Company name, lookup
• Pallets per Month, formula (orders per month * items per order * avg ounces per item / 16 / pound capacity per pallet)
• Be sure to round this formula up to the nearest integer
• Receiving Costs, formula (pallets per month * receiving costs)
• Storage Costs, formula (pallets per month * storage costs)
• Packing Costs, formula (orders per month * packing costs)
• Shipping Costs, formula (orders per month * items per order * avg ounces per item / 16 * shipping costs)
• Labor Costs, formula (account management fees + customer support fees + reporting fees)

sample data table structure

Next, create a series of inputs to mark up and adjust the internal costs.

Inputs for Markup:

• Receiving Costs Markup, percentage
• Storage Costs Markup, percentage
• Packing Costs Markup, percentage
• Shipping Costs Markup, percentage
• Account Management Costs Markup, percentage
• Customer Support Costs Markup, percentage
• Reporting Costs Markup, percentage

Once you have your cost tables and input markups created, you’re ready to start designing the page. Start with adding a collection view of the company details.

Collection View of Company Details

Create a collection view to display the details entered by the company. This is simply a view of the company quote details table, where the company name is filtered to the specific company that the quote applies too.

Create another collection view to display the total cost to serve the company.

Collection View of Cost to Serve

This is simply a view of the company costs table, where the company name is filtered to the specific company that the quote applies too.

Now that you have all of the required information displayed on the page, create a series of expressions to calculate the fee charged to the customer based on the inputs entered.

Expressions for Total Fees & Gross Margin

Create a series of expressions to display the calculated monthly fees and the associated gross margin.

• Total Monthly Fee: the total fee charged to the company as calculated by multiplying each internal cost by the associated markup input
• Gross Profit $: the total monthly fee minus the total cost to serve
• Gross Margin %: the gross margin $ divided by the total monthly fee

The last step in creating this page of your web app is to create a button to submit the approved quote. Configure this button so that upon submission, the markup inputs are stored in an approved quotes table (created in the next step) and the quote is sent directly back to the customer. You can do this via email or you can even send this quote to them in your portal application if you’ve already created that.

internal approval on automatic order fulfillment quote

Page 3 — Custom Quote Delivered

The last page of your application will serve as the customer-facing quote. This is perhaps the most critical design to get correct, as it will dictate what decision the customer makes in regards to your fulfillment services. Take the time to customize the fields in your table to craft a strong quote that will entice your customers to want to do business with you.

First, create a new table to store the approved quote fees.

Approved Quotes by Company

Fields:

• Company ID, lookup
• Company Name, lookup
• Receiving Costs Markup, captured Input
• Storage Costs Markup, captured Input
• Packing Costs Markup, captured Input
• Shipping Costs Markup, captured Input
• Account Management Costs Markup, captured Input
• Customer Support Costs Markup, captured Input
• Reporting Costs Markup, captured Input
• Order Fulfillment Services, formula (sum of each internal cost multiplied by the associated markup input, except for real-time reporting)
• Real-Time Reporting, formula (reporting costs multiplied by the reporting markup)
• 24/7 Support Team, number
• Dedicated Account Manager, number
• Implementation Fee (One-Time), text

sample data table structure

Once you have the approved quote table, you’re ready to start designing the page. Start with adding a collection view of the approved quote details.

Collection View of Approved Quote

Create a collection view to display the fee details approved by your team. This is simply a view of the approved company quote table, where the company name is filtered to the specific company that the quote applies to.

The next component you’ll need is a button to make it easy for your customers to contact you regarding their quote. You can configure a button that will automatically route to your sales team if the customer wishes to purchase your services or discuss the quote in more detail.

Everything else on this page includes simple design and content components to help strengthen your brand and positioning.

order fulfillment quote that is automatically sent to customer after internal approval

Conclusion

Delivering fast and intuitive quotes is critical in landing new customers, growing your business, and ensuring that you are doing so in a profitable manner. Creating this workflow as a no-code web app helps to avoid dropping any balls, losing customer details, speed up the the approval process, and create a reusable, professional quote template to wow your customers.

Superchart is the easiest way to create professional charts and embed them online. Join our waitlist to create live, interactive charts that can be embedded into your website or blog within a matter of minutes.