E-commerce
Más Marcos
Más Marcos
Redesigning the product catalog and purchase flow for a wholesale frame supplier with 300+ SKUs — making it effortless for bulk buyers to browse, identify, and place orders at scale.
Redesigning the product catalog and purchase flow for a wholesale frame supplier with 300+ SKUs — making it effortless for bulk buyers to browse, identify, and place orders at scale.
Year
Year
2026
2026
Role
Role
UX Research · UI Design · Web Dev
UX Research · UI Design · Web Dev
Tools
Tools
Figma · Shopify
Figma · Shopify
Audience
Audience
B2B Wholesale + End Users
B2B Wholesale + End Users
The Problem
Más Marcos is a frame supplier with over 300 products. Their primary customers are businesses that purchase wholesale — and these buyers needed to quickly scan a large catalog, filter by relevant attributes, and generate a purchase order without friction. The existing catalog made this nearly impossible.
Beyond B2B buyers, the platform also serves end consumers who want to browse and request quotes. The challenge was designing a single catalog experience that serves both audiences effectively, without overwhelming either one.
Más Marcos is a frame supplier with over 300 products. Their primary customers are businesses that purchase wholesale — and these buyers needed to quickly scan a large catalog, filter by relevant attributes, and generate a purchase order without friction. The existing catalog made this nearly impossible.
Beyond B2B buyers, the platform also serves end consumers who want to browse and request quotes. The challenge was designing a single catalog experience that serves both audiences effectively, without overwhelming either one.
Más Marcos is a frame supplier with over 300 products. Their primary customers are businesses that purchase wholesale — and these buyers needed to quickly scan a large catalog, filter by relevant attributes, and generate a purchase order without friction. The existing catalog made this nearly impossible.
Beyond B2B buyers, the platform also serves end consumers who want to browse and request quotes. The challenge was designing a single catalog experience that serves both audiences effectively, without overwhelming either one.
My Role
I led the full cycle from research to live product in close collaboration with the development team. This included conducting a UX audit of the existing catalog experience, interviewing wholesale buyers to understand their ordering workflow, and designing a new catalog architecture in Figma. I also contributed to the development and deployment of the website alongside the team. The project required balancing the needs of two distinct user types — B2B buyers focused on efficiency and bulk selection, and B2C users browsing with more exploratory intent.
I led the full cycle from research to live product in close collaboration with the development team. This included conducting a UX audit of the existing catalog experience, interviewing wholesale buyers to understand their ordering workflow, and designing a new catalog architecture in Figma. I also contributed to the development and deployment of the website alongside the team. The project required balancing the needs of two distinct user types — B2B buyers focused on efficiency and bulk selection, and B2C users browsing with more exploratory intent.
I led the full cycle from research to live product in close collaboration with the development team. This included conducting a UX audit of the existing catalog experience, interviewing wholesale buyers to understand their ordering workflow, and designing a new catalog architecture in Figma. I also contributed to the development and deployment of the website alongside the team. The project required balancing the needs of two distinct user types — B2B buyers focused on efficiency and bulk selection, and B2C users browsing with more exploratory intent.
Process
UX Audit
UX Audit
01
Evaluated the existing catalog against heuristic principles, identifying key pain points in navigation and product discovery.
Evaluated the existing catalog against heuristic principles, identifying key pain points in navigation and product discovery.
User Research
User Research
02
Interviewed B2B buyers to map their ordering process, identify must-have filter criteria, and understand how they reference product specs.
Interviewed B2B buyers to map their ordering process, identify must-have filter criteria, and understand how they reference product specs.
IA Design
IA Design
03
Defined a new category taxonomy for 300+ products, establishing consistent attributes and naming conventions.
Defined a new category taxonomy for 300+ products, establishing consistent attributes and naming conventions.
UI Design
UI Design
04
Designed catalog pages, product cards, filtering system, and order flow in Figma — optimized for both quick scanning and detailed review.
Designed catalog pages, product cards, filtering system, and order flow in Figma — optimized for both quick scanning and detailed review.
Development
Development
05
Built and deployed the website, implementing the Figma designs with a focus on performance and ease of catalog maintenance.
Built and deployed the website, implementing the Figma designs with a focus on performance and ease of catalog maintenance.
Key Choices
Faceted filtering as the core interaction
Faceted filtering as the core interaction
With 300+ products, search alone is insufficient. The catalog was built around a robust filtering system — by material, size, color, and style — allowing wholesale buyers to narrow down to exactly what they need in seconds.
With 300+ products, search alone is insufficient. The catalog was built around a robust filtering system — by material, size, color, and style — allowing wholesale buyers to narrow down to exactly what they need in seconds.
With 300+ products, search alone is insufficient. The catalog was built around a robust filtering system — by material, size, color, and style — allowing wholesale buyers to narrow down to exactly what they need in seconds.
Dual-mode product cards
Dual-mode product cards
Cards were designed to serve both B2B users (who scan for code and spec) and B2C users (who respond to visual presentation). A compact list view and a visual grid view let each audience navigate in the format that works for them.
Cards were designed to serve both B2B users (who scan for code and spec) and B2C users (who respond to visual presentation). A compact list view and a visual grid view let each audience navigate in the format that works for them.
Cards were designed to serve both B2B users (who scan for code and spec) and B2C users (who respond to visual presentation). A compact list view and a visual grid view let each audience navigate in the format that works for them.
Streamlined order generation flow
Streamlined order generation flow
Wholesale buyers can select products, specify quantities, and generate a purchase order directly from the catalog — reducing the back-and-forth that previously happened over WhatsApp or phone.
Wholesale buyers can select products, specify quantities, and generate a purchase order directly from the catalog — reducing the back-and-forth that previously happened over WhatsApp or phone.
Wholesale buyers can select products, specify quantities, and generate a purchase order directly from the catalog — reducing the back-and-forth that previously happened over WhatsApp or phone.
The Result
A fully designed and built e-commerce catalog with structured categories, powerful filtering, and a streamlined B2B order flow. The platform serves both wholesale buyers needing efficiency and end consumers browsing for individual frames.
A fully designed and built e-commerce catalog with structured categories, powerful filtering, and a streamlined B2B order flow. The platform serves both wholesale buyers needing efficiency and end consumers browsing for individual frames.
A fully designed and built e-commerce catalog with structured categories, powerful filtering, and a streamlined B2B order flow. The platform serves both wholesale buyers needing efficiency and end consumers browsing for individual frames.
Outcome
This project was a strong lesson in information architecture at scale. Organizing 300+ products into a navigable, filterable system requires a deep understanding of how different users mentally categorize the same products — a wholesale buyer groups by material and size, while an end consumer groups by style and aesthetic.
Serving two distinct audiences in a single product is a classic design tension. The solution was not to pick one over the other, but to design interaction patterns flexible enough to accommodate both — without making either feel like a secondary use case.
This project was a strong lesson in information architecture at scale. Organizing 300+ products into a navigable, filterable system requires a deep understanding of how different users mentally categorize the same products — a wholesale buyer groups by material and size, while an end consumer groups by style and aesthetic.
Serving two distinct audiences in a single product is a classic design tension. The solution was not to pick one over the other, but to design interaction patterns flexible enough to accommodate both — without making either feel like a secondary use case.
This project was a strong lesson in information architecture at scale. Organizing 300+ products into a navigable, filterable system requires a deep understanding of how different users mentally categorize the same products — a wholesale buyer groups by material and size, while an end consumer groups by style and aesthetic.
Serving two distinct audiences in a single product is a classic design tension. The solution was not to pick one over the other, but to design interaction patterns flexible enough to accommodate both — without making either feel like a secondary use case.