Team
PM
Back End
Front End
Design
Year
2022-2023
Product design
B2B
Foodservice
Cart
Transforming a B2B Marketplace Experience
Floki Compras functions as a B2B marketplace connecting suppliers with restaurants, bars, and retailers. Previously, most transactions were handled by Floki’s sales representatives, who placed orders on behalf of clients. This reliance on representatives stemmed from the platform’s lack of transparency around key purchasing details, leaving users with unanswered questions like:
What is the minimum order value for this supplier?
The platform did not display minimum order requirements, allowing purchases that were later canceled for failing to meet supplier thresholds. This caused frustration for customers and increased demands on customer service. Sales representatives, however, had access to supplier spreadsheets, enabling them to place valid orders.
Who is selling this product?
Customers lacked visibility into which supplier offered each product. Representatives had to rely on external spreadsheets to compare products and prices, identifying the supplier for each item.
What payment methods does the supplier accept?
Users could add items from multiple suppliers into one cart without realizing it. At checkout, all payment options were displayed, failing to reflect the specific methods accepted by each supplier.
We launched a project to make the purchasing experience accessible for all Floki customers. The goal was to reduce the operations team's involvement in resolving order and payment issues, increase the number of clients purchasing independently without sales representatives, and improve the overall user experience on the platform.
Benchmarking
To empower users to navigate the platform independently, we conducted a market analysis to understand how other industry players manage product offerings from various suppliers. We reviewed platforms like UberEats, iFood, CotaBest, Cayena, Bees, and Frubana, observing different approaches to catalog presentation, cart assembly, and checkout processes.
Decisions
After presenting and discussing the possibilities with stakeholders, several decisions were made:
Catalog Display
Maintaining user control over price comparisons was a priority, a decision made collaboratively with the supplier relations team. To achieve this, we opted for a diverse catalog that allows users to compare items from different suppliers side by side.
Cart Assembly
We decided to allow users to add products from multiple suppliers into separate carts. This approach enhances the overall experience by giving users more control and visibility over their purchases. It also allows them to manage their orders supplier by supplier, without limiting their ability to make comparisons.
Checkout Process
We chose an individualized checkout approach, acknowledging that a unified checkout would require additional operational complexity. Players who manage payments directly on behalf of suppliers typically offer this option, but as we hadn't implemented that functionality, we focused on displaying valid payment methods and minimum order values for each supplier. This approach required less effort to implement while maintaining transparency for users.
With the product model defined, we then needed to address flow and interface considerations. We studied how information would be displayed in the catalog, in the carts, and during checkout, ensuring that even users unfamiliar with the platform would understand the entire process for placing valid orders.
Interface changes
Our mission was not just to make purchases possible on the platform, but to deliver this through an enjoyable and straightforward experience. The challenge of meeting the minimum order value for each supplier and displaying viable payment methods needed to be addressed in a way that allowed users to easily stock their establishments.
Card changes
The most straightforward action to help distinguish products by their respective suppliers in the catalog was to add the supplier's name to each product. This detail brought clarity to the need for managing orders from multiple sources.
New component
We also introduced an additional component between the catalog and the carts. We understood that it was important for buyers to have clarity on how many and which carts they had already created, whether the minimum order value for each supplier had been reached, and, if not, how much was still missing. This component was added because relying on users to navigate to the cart for this information could slow down the shopping experience and place an unnecessary cognitive load on them. The new element displayed all the carts already created, the items within each cart, the minimum order value required for valid purchases from each supplier, and the remaining amount needed to reach that threshold. After interacting with this component, users could proceed to the cart itself, which had previously been merely a collection of all added items with no distinction of product origin or restrictions for proceeding to checkout.
Cart changes
With this new flow, it became possible to distinguish the payment method accepted by each supplier at checkout. This implementation enabled customization and improvements in other areas of the payment process, such as adding the supplier’s generated PIX code, which is displayed at the end of the purchase — a practice previously unfeasible without individual payment process organization. After designing the experience using high-fidelity prototypes for interaction, content, and visuals, usability tests were conducted to validate the flows and enhance the user experience throughout the journey. After several tests, the project was refined and ultimately launched
Results
Operations
The team stated that the number of order cancellations had decreased, as well as the customization required for some orders to be accepted (adjustments outside the platform to add/remove items from the order, which took a lot of time).
Commercial Representatives
The team of commercial representatives who handled most of the purchases gave a positive evaluation of the changes, reporting that they had a significant impact on the ease of placing orders, without the need to consult supplier tables or other resources to ensure that a valid purchase was made.
Users
In discussions with representatives, we found that some users were already able to make purchases on their own through the platform, also providing positive feedback about the new shopping experience.
