About the project
KT-Stal is an online metal products supplier with more than 14 years of experience, operating in Kharkiv, Kyiv, and Poltava. The company serves both B2B clients (contractors, procurement managers, and architects) and B2C customers.
The goal of the project was to make buying rebar, metal products, and roofing materials as simple and intuitive as shopping for everyday products online, with real-time pricing, transparent terms, and minimal reliance on manager assistance.
The biggest challenge was translating offline purchasing behaviors — such as calling managers to calculate weight, cutting, or delivery costs — into a fully automated online experience.
Objectives
- Redesign the website to support long-term business scaling;
- Move sales processes online and reduce dependency on managers;
- Create a user-friendly catalog for a large and complex product assortment (2,000+ SKUs);
- Develop informative product pages tailored to different product categories;
- Address the specific needs and behavior patterns of both B2B and B2C audiences;
- Combine the complexity of the metal products industry with a simple and intuitive user experience.
Homepage and Navigation
We designed the homepage to function as a powerful sales tool. Users immediately see the company's unique value proposition (UVP) and key catalog categories, allowing them to jump straight into product selection without any extra steps.
We placed the "Download Price List" button with real-time pricing directly on the first screen and in the main menu. We also highlighted essential services: free cutting, fast dispatch, delivery, storage, and product exchange. The homepage also features blocks with popular products and top categories to simplify navigation and speed up product discovery.
Catalog and Search
We completely overhauled the catalog and its architecture to simplify browsing through a huge number of categories and diverse product types. For the desktop version, we kept an open navigation menu displaying all categories, making it easier to quickly find and add products from multiple categories.
Filters and product previews in the search results were designed with different product types in mind, including flexible sorting and switching between measurement units (kg, linear meters, square meters, and pieces) and product specifications. The search was designed as a standalone user flow, featuring predictive product and category suggestions, as well as the ability to add products directly to the cart from the search results.
Custom Product Pages With Comprehensive Details
We developed custom product page templates for different product groups, each tailored to its own specifications, attributes, and purchasing logic.
Users can order metal-cutting services directly from the product page (via angle grinder or plasma cutting) by entering custom dimensions.
For more complex categories, such as corrugated sheeting, we integrated built-in cost calculators.
Informative Shopping Cart
The cart was designed as a dynamic pop-up without page reloads, allowing users to quickly edit their orders without interrupting the shopping flow. It instantly displays current prices for the selected city, along with the total weight and length of products.
Prices update automatically upon any changes, instantly notifying the user. Products are devided into “in stock” and “available on order” groups. Users can also reserve products for up to three days without payment.
Checkout Flow
The checkout process was divided into simple and intuitive steps that adapt depending on the customer type (individual or business). We designed the feature that automatically analyzes the weight and volume of products, selects the optimal transportation option, and displays the vehicle load percentage.
Users can choose a convenient delivery time slot (morning, afternoon, or evening) and their preferred payment method: online (for sole proprietors), cash at the warehouse, or cashless payment (with or without VAT).
Functional User Account
Users can view and sort their purchase history, track order statuses, repeat orders in just a few clicks, and edit or pay for orders directly from their personal account.
Design System for Fast Scaling
We developed a comprehensive design system (UI kit) that includes all necessary UI elements, components, their states, and typography. This ensures visual consistency across the interface and allows the project to scale quickly and efficiently in the future.
Results
Thanks to a deeply optimized user flow, we managed to create a platform where complex industrial processes became intuitive for both B2B and B2C audiences.
- Sales automation: reduced staff workload through dynamic price updates, integrated calculators, and a transparent checkout process.
- Mobile-friendly UX: optimized the mobile experience with sticky bottom navigation for comfortable one-handed use.
- Seamless customer journey: intuitive search, custom product pages for different item types, and a functional user account simplified the purchasing process.
- Platform for growth: created a design system that became a reliable foundation for future project scaling without losing visual consistency.
The KT-Stal case study shows how thoughtful UX/UI design and a deep understanding of business processes can digitize a complex industry, such as metal products distribution, and elevate trust in the brand to a completely new level.
