™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_0
Back

PROFINVEST Promotional Website

™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_1
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_2
PROFINVEST: a hybrid B2B platform combining engineering solutions and e-commerce

PROFINVEST operates in two main areas: supply of complex aluminum systems for architects and developers, and sales of components for manufacturers and installers. The goal was to create a single digital platform that primarily represents the company as an engineering partner, while also providing a convenient tool for fast online purchasing of hardware.
We developed the platform on Drupal CMS, where the corporate presentation and the online store coexist in one ecosystem without interfering with each other.

Challenge #1: visual separation and corporate brand priority

The main challenge was to avoid turning the website into a typical online store. It had to look like a premium, technology-focused resource for professionals, where e-commerce plays only a supporting role.
Our solution – interface architecture:
– Homepage zoning: we moved away from standard banners and implemented an interactive layout. The central and largest area is dedicated to engineering “Profile Systems” (the corporate part), while the hardware store is placed in a vertical sidebar on the right. This immediately separates user flows.
– Trust-oriented design: a minimalist style, strong typography, and a focus on real project photography create the image of a reliable B2B partner rather than just a seller.

Challenge #2: expert navigation and technical data management

The target audience – architects and engineers – needs fast access to specifications, drawings, and technical documentation. Marketing texts do not work here.
Our solution – professional data structure:
– Audience segmentation: a “Who our systems are for” block allows each type of specialist to get relevant technical information in one click.
– Engineering catalog: system pages contain not just descriptions, but detailed technical specifications, cross-section galleries, and node diagrams.
– Documentation center: users can view and download PDF catalogs directly from system pages, as well as through a dedicated “Catalogs” widget that is always accessible.

Challenge #3: a convenient online store for procurement

The “Hardware” section requires a completely different logic – fast search, selection, and ordering. Engineering complexity here had to give way to usability.
Our solution – full-featured store functionality:
Even though the store is part of the corporate website, it provides a complete set of features for comfortable purchasing:
– Specialized filtering: filters by technical parameters allow procurement managers to quickly find compatible components (handles, hinges, seals).
– Full purchase flow: users can add products to the cart, place orders, and choose delivery and payment methods just like in a regular e-commerce store.
– User account: regular customers have access to order history and can create favorites lists for repeated purchases.

Result: a unified digital ecosystem for the construction industry

For architects, this is a detailed knowledge base and a source of inspiration. For procurement managers, it is a fast and convenient store. For the business, it is a controlled digital tool that communicates expertise and generates sales in two directions at the same time.
What did we do?
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_3
UI/UX, design
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_4
Programming
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_5
Nesting
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_6
Filling
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_7
Testing
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_8
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_9
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_10
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_11
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_12
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_13
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_14
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_15
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_16
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_17
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_18
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_19
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_20
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_21
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_22
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_23
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_24
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_25
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_26
Spent time
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_27
PROFINVEST Promotional Website On laptop
PROFINVEST Promotional Website On tablet
Home page
™ Глянець, студія веб-дизайну — PROFINVEST Promotional Website_28
Tools and Technology
which we used to work on the site
Drupal 10
SASS
CSS3
HTML5
JavaScript
PhpStorm
PHP
MySQL
JQuery
AJAX
Symfony
Twig
Composer
Git
Figma
Adobe Photoshop
ChatGPT
PROFINVEST Promotional Website
Internal pages
Accessibility menu
Contrast settings
Font size
Letter spacing
Line height
Images
Font
Reset the settings