Giving users total control of fruit deliveries to the office.

The challenge

It all began with a simple question: was it even possible to give customers the freedom to customize their own orders in Mendix? Despite the existence of numerous e-commerce solutions that handle the entire ordering process, the backend was already built entirely in Mendix. This system managed all orders, dispatched shipments to carriers, and much more.

However, a new e-commerce tool also means an addition to your landscape, with additional monthly costs, and you are entirely dependent on what the APIs have to offer. If we could achieve it in Mendix, that would be ideal!

The Process

This led to an exploratory phase where we investigated how an average e-commerce solution looks and which key features we could integrate into Froot's new system. The goal was to establish a recognizable system, an ordering process that feels familiar and known to customers who occasionally log in to the customer portal. Building a fruit subscription should be as intuitive as online grocery shopping at Albert Heijn.

My initial design was based on Flexbox design because the design had to be fully responsive. Customers are not tied to fixed devices; an order can be spontaneously adjusted in the kitchen while the customer only has a mobile device at hand. Regardless of screen sizes, the system scales, from a clear grid on a monitor to a long list on a mobile device.

The first concept

After successful tests, it turned out that this solution was possible and worked well. With that came the request to build a corresponding customer portal, a central place where customers have an overview of new and ongoing orders. An important requirement was that contacts could directly differentiate per location, as a contact could manage multiple physical locations where various orders could be sent. The dashboard is specifically designed as a place where customers can track their orders, with a clear distinction between subscriptions and one-time deliveries. Here, they can also view key details and, if necessary, click through for more detailed information.

What is entirely new about this solution is that customers can now customize their entire order without having to contact customer service. But how do you approach something like this? The overview page resembles that of an online supermarket, an online grid filled with products. To highlight certain products, we added badges where marketing has the space to add variable texts such as 'new' or 'fresh harvest.' Since we build the solution entirely in Mendix, we can directly control the content of the grid from the backend. Contacts see only products that are relevant to them. Customers with a fruit subscription also see the products that can be added to it.

Showing bulk discounts

One of the challenges we encountered is how to handle volume discounts. Which price do you show on the product without making it unclear what the actual price is? Do you adjust the product price directly? Then as a customer, you may not even realize that your price has changed. If you do notice, you often don't know what the difference is. The solution lay in showing the standard price (per piece) but also displaying the discounted price per piece as more products are placed in a shopping cart. The discounted price is automatically adjusted, and the volume discounts are summed up on the overview receipt.

Overview page that also shows how the volume discount has been processed.

The result

The result is a complete solution within Mendix, without using external e-commerce solutions. Contacts can manage all subscriptions and orders for their locations on a dashboard, a place where Froot can share updates, but also a place where customers can now - without the intervention of customer service - customize a tailored fruit subscription and determine where and when it will be delivered. It also seamlessly works on mobile, for spontaneous adjustments when the contact wants to quickly modify an order on their mobile in the cafeteria.