Development of e-commerce B2B user flow pages (catalog landing page, catalog page, product page, cart).
About
SPVLAB is a company manufacturing furniture for laboratories, production facilities, and other clients in Russia and CIS.
Their previous website was made a couple of years ago, and now it is difficult to use. There was no consistency in the UI elements, and the patterns were not standard for B2B e-commerce. Customers could not easily find what they needed, and the catalog could not be sorted. SPVLAB needed a better way to show their furniture online to business clients.
Tasks
UX Research: Analyze the current catalog and map out the customer decision-making journey to understand how B2B clients choose products.
Information Architecture: Regroup and restructure all product categories to make navigation simple and logical.
Design: layout for the landing catalog page, main catalog page, dynamic and reusable template for product pages, cart, additional informational pages to build customer trust and showcase company reliability.
Development: page layouts in webflow, creating and connecting CMS collections.
Here is the website's old version. There are a lot of issues on these pages. It looks inconsistent, unorganized, and illogical.
Landing catalog page
SPVLAB manufactures many types of furniture, that’s why we decided to split the landing catalog page into three main categories: «Laboratory furniture», «Metal furniture» and «Steel doors». Then I designed a hero section with dynamic tabs. Each category has its own unique visual style, background and content sections.
Here’s tabs from hero section:
Next block is showcase. It has slider with products and banner that allows users to jump into the subcategory they need. Products slider was made with Finsweet Components.
Below that, we placed complex solutions and fully equipped ready-made laboratories for any business need. This approach increases customer engagement. Instead of picking separate products manually, B2B clients can immediately choose a complete, pre-configured solution.
Catalog page
To build the catalog, I used Finsweet Attributes to set up all the filtering, sorting, categories, and the empty state. The product cards are now fully consistent. We also decided to show prices in the 'from...' format, as this fits the B2B model perfectly. To create the vector icon for the 'No products found' screen, I used the Recraft AI tool.
Product page
The product page required a lot of time and effort in both design and development. The layout features three key sections: a product configurator (to select the model, dimensions, and accessories), a detailed specifications block (showing features, key functions, and materials), and a related products section to increase the average order value. Webflow provides an opportunity to design page template and use it for all items in CMS collection.
The first section features a product image slider, where users can also view and download technical drawings in PDF format. This is also where clients select the required model parameters, materials, and accessories. The slider was built using Finsweet Components.
The second section gathers all technical information about the product. The layout is divided into a descriptive part with a collapsible 'read more' text, flagship features, and a technical specifications block with tabs.
The third section closes the page and works as an incentive for cross-selling and additional purchases.
Cart
The final step in the user journey is checkout, where the main goal is to generate a commercial proposal. In the cart, users can review and adjust their configured products one last time. From there, they can either submit a request for an exact price calculation or instantly generate a PDF proposal.
The outcome
Through this redesign, we transformed a confusing and outdated platform into a powerful, clean, and logical B2B e-commerce platform. SPVLAB received a modern design system that easily scales as their business grows.
Key results
Better UX: B2B clients can now easily find, filter, and configure complex laboratory furniture without getting lost.
Business Automation: The automated PDF commercial proposal feature significantly saves time for both buyers and SPVLAB managers.
Full Consistency: All product pages, categories, and informational sections now follow a unified, professional UI style.
Work in progress. The live website link will be added soon.
