Time
PM
Back End
Front End
Design
Product design
B2B
Cart
Transforming a B2B Marketplace Experience
A Floki funcionava como um SaaS B2B, conectando restaurantes, bares e mercadinhos a diversos fornecedores. A empresa decidiu passar a oferecer seus serviços em formato de um marketplace, visando escalar com mais agilidade. Apesar da estrutura digital e da robusta tecnologia de inteligência de compra, a maioria dos pedidos do marketplace era feita por representantes comerciais, que intermediavam as compras utilizando planilhas e tabelas externas — um reflexo direto da falta de informações essenciais na plataforma.
Nosso objetivo era tornar a jornada de compra self-service, permitindo que qualquer cliente — mesmo sem treinamento prévio ou conhecimento específico sobre a forma de atuar dos fornecedores — pudesse navegar, montar pedidos válidos e finalizar a compra com sucesso.
O Problema
Durante a imersão com stakeholders, análise crítica dos pontos de melhoria da plataforma e entrevistas com os representantes de compras (únicos capazes de utilizar a plataforma até então), identificamos os principais pontos que impediam a realização de compras:
Ausência de valor mínimo por fornecedor
Muitos pedidos eram cancelados após o envio por não atingir o piso estipulado pelos fornecedores para validação de pedido, gerando frustração e trabalho para o time de operações.
Fornecedor não identificado nos produtos
O cliente não tinha visibilidade de quem estava oferecendo cada item, o que gerava um impeditivo para a montagem de carrinhos que cumprissem os requisitos necessários para envio de pedidos válidos.
Formas de pagamento genéricas
O checkout apresentava todas as formas de pagamento disponíveis na plataforma, sem refletir a realidade das condições de pagamento aceitas pelo fornecedor específico que estava sendo levado ao checkout. Fazia-se necessário o contato com o cliente para alinhamento de uma nova forma de pagamento quando o fornecedor não aceitava a forma selecionada no momento da compra.
Essas falhas geravam uma dependência quase total dos representantes e impediam o crescimento escalável da operação.
Exploração de soluções
Estudamos como outras plataformas de delivery e atacado lidam com múltiplos fornecedores — incluindo iFood, UberEats, CotaBest, Frubana e Cayena — e mapeamos os principais modelos de montagem de pedido:
Decisions
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.
