Start with the buyer
Organise the experience around how HORECA teams choose, compare and act—not around the internal shape of the catalogue.
Make B2B complexity easier to buy from.
A VTEX IO commerce platform for a food business where products, expertise and operational reality have to work as one.
- CLIENT
- Macromex
- MODEL
- B2B · HORECA
- PLATFORM
- VTEX IO
- ROLE
- Strategy · UX/UI · Engineering
IMAGE DIRECTIONHERO / COMMERCE IN CONTEXT
A wide editorial composition combining a professional kitchen, Macromex product range and the VTEX storefront on a laptop or tablet. Keep people and the real operating context visible; avoid a generic device mockup.
01
THE ASSIGNMENT
The brief was not ‘put the catalogue online.’
Turn a complex offer into a useful buying system.
A HORECA buyer is solving for availability, consistency, margin and what will work in a real kitchen. A conventional product grid leaves too much of that work to the customer.
We treated the platform as a business tool: a place where products, menus, expertise and the route to purchase can reinforce one another without making the operation feel simple when it is not.
This is a deliberately restrained public account. It describes the shape of the work without publishing confidential decisions, unapproved metrics or claims that belong to the client.02
THE DIRECTION
Three decisions kept the work honest.
Make expertise useful
Bring inspiration and operational knowledge close enough to products to help a decision, not decorate the storefront.
Build for change
Give content, commerce and development teams reusable patterns they can evolve without rebuilding the experience each time.
03
THE WORKING PRODUCT
Design with real products, real menus and real buying journeys.
Design and engineering stayed in the same loop. Decisions were tested against the density of the portfolio, the questions professional buyers ask and the VTEX IO platform that had to carry them into production.
IMAGE DIRECTIONPRODUCT IN USE
A clean, high-resolution capture of the Macromex B2B storefront showing dense product discovery alongside useful HORECA content. Prefer a real browser view with recognisable Macromex products over an isolated UI crop.
04
SELECTED EXPERIENCES
A few moments from the wider system.
Use these as evidence of how content, commerce and B2B decision-making meet. Replace each placeholder with a clean product capture.
IMAGE DIRECTIONPRODUCT DISCOVERY
Category or search page with a realistic range of products, filters and B2B-relevant information visible.
Portfolio discovery
A product structure that helps professional buyers move through a broad, specialist range with less friction.
IMAGE DIRECTIONCONTENT + COMMERCE
Recipe or profitable-menu experience showing the connection between editorial guidance and relevant products.
Menus and inspiration
Useful content that helps turn ingredients into decisions for a specific kitchen, menu or service model.
IMAGE DIRECTIONBUYING JOURNEY
Product detail, list or ordering state where the next commercial action is unmistakable and brand context remains visible.
A practical route to order
A clear handoff from exploration to the buying action, designed around how HORECA customers actually procure.
05
THE SYSTEM
Consistency is operational leverage.
One language for products, content and commerce.
Reusable components and shared rules make the platform easier to operate and extend. The value is not a tidy file. It is fewer one-off decisions and a more coherent experience every time something new goes live.
IMAGE DIRECTIONDESIGN SYSTEM / WORKING FILE
A real Figma working file or component overview for Macromex: product cards, navigation, content modules, tables, forms and responsive states. Show breadth and working detail, not a decorative UI kit.
06
WHAT WE DELIVERED
A commerce capability, not a collection of screens.
The work connected the customer-facing experience with the tools and decisions needed to keep it moving after launch.
01
B2B commerce strategy and product framing
02
Information architecture and product discovery
03
Responsive UX and UI design
04
Reusable design system
05
VTEX IO storefront engineering
06
Content and commerce patterns
07
QA and controlled release
08
A foundation for continuous improvement
07
THE OUTCOME
A clearer way into a complex business.
The platform gives buyers a more useful path through products and expertise, while giving the teams behind it a shared system they can keep improving.
Customers get more clarity. The business keeps the complexity where it belongs: inside a well-run system, not inside every buying decision.PLANNING A B2B COMMERCE CHANGE?