A catalogue website for a manufacturer
of building materials
Braer is a holding company that produces ceramic construction materials in line with European quality standards. It manufactures new class brick products, combining aesthetics, innovation and multi-generational traditions.
braer.ru
Overarching objective
To make the website more user-friendly and develop a convenient catalogue with seamless navigation and a sleek, modern design.
Scope of works
We carried out an extensive analysis of the company and its business environment; updated the brand’s design system; developed the website’s structure, including personal accounts and a vast catalogue of products and services; and introduced tailor-made features.
Pre-project analytics
We performed a thorough pre-implementation analysis, examining over 40 competitor sites to identify their strengths and research the UI/UX aspects.
This helped us single out the most effective solutions and use them in our prototypes. As such, our focus was to create a high-quality and user-friendly product that would satisfy all user needs and expectations.
Website structure
We completely rethought the existing site structure. Every page was thoroughly reviewed and made more user-friendly and accessible.
Prototyping
At the prototyping phase, we paid particular attention to the structure of the pages to make them more informative and effective.
Our priority here was to simplify user interaction with the product catalogue and fill the home page with useful content to illustrate the company’s profile and services at a glance.
Design system
development
We fulfilled everything the client wished for in the design and developed a corporate visual style that fuses brutality, clarity, modernity, and convenience.
We also created a comprehensive UI kit which reflects the harmony of all website components: grids, colours, font, icons, and other elements.
Choice of palette, typography,
and illustrations
The selected colour palette highlights the brand and makes it stand out from the competition.
The Pragmatica font is perfect for headings and body text, complementing the design and reflecting the visual style.
The client’s products are presented in minimalist vector illustrations which support the brand’s core design concept.
Development of animations
Adding animations to visualise the complex production process proved to be a great decision and helped make things clear and interesting for the user.
We paid extra attention to the special brick collection, creating a custom dark theme and individual card design to underline the exclusivity and premium nature of the products.
Functionality and capabilities
Catalogue structure
We significantly expanded the catalogue capabilities. The category page now displays collections, filters, and products in different formats (tile or list).
We also optimised the layout and introduced custom filters to make the list easier to navigate. This helped make space for products without sacrificing the quality of experience when using filters.
Placement of orders in pallets
We successfully integrated the ordering functionality not only in pieces, but also
in pallets (m2).
Such a non-standard solution required custom development and a high level of professionalism from our team. As a result, customers got a convenient and practical order management tool.
Thing
Pallet
A product card
that sells
The card was designed to have the same effect as a detailed product consultation. Much like a skilled salesperson in an offline store, it describes the product’s key benefits, dispels doubts, and shows real photos of built projects to demonstrate the brickwork. The card also features eye-catching and clear animations to immerse the user in the selection process.
The page became a compelling and useful tool to help customers make an informed purchase decision.
Redesign
of the personal account
We optimised personal accounts, improving the structure and streamlining the content. All materials are now intuitively organised into sections, allowing users to find the information and files they need more quickly.
Material orders can be placed and tracked through the personal account. In addition, we simplified order management for distributors by removing redundant statuses, adding messenger chat history, and much more.
Responsive
web design
A mobile version is an essential component of a successful website. That’s why we took a thorough approach to adaptive versions, making them as convenient as possible and optimising them for different devices.
The filters on the mobile version were designed to allow seamless, one-handed use. We also considered how users interact with the website on different devices and developed flexible, intuitive UIs that are convenient to navigate in any scenario.
