Close
Bartergaz

Bartergaz

Energy website, 2024

Barter supplies LPG, propane, LNG and network gas to homes and businesses across Poland. For WMC agency and Webmetric I designed the whole Bartergaz website, desktop and mobile, around one goal: getting each visitor to the right product and the right local advisor, then audited the build against the design.

Role
Product design
Client
Bartergaz
Year
2024
Services
Web designUXUI designPrototypingDesign QA

01 — Context

A Polish energy company since 1999

Barter is a Polish-owned energy company that has been selling and distributing gas since 1999: autogas and LPG, gas in cylinders, heating propane, LNG and network gas, plus coal, aggregates, fertilisers, rail logistics and customs services. Customers range from households heating with propane to industrial plants running on LNG, and many of them are looked after by advisors responsible for a product and a region.

Home, top to bottom — the “Powered by energy!” hero, products and services, numbers, news, the contact form, the advisor finder and the offices
Home, top to bottom — the “Powered by energy!” hero, products and services, numbers, news, the contact form, the advisor finder and the offices

02 — Challenge

Many products, one right person

The offer is broad and technical, and the questions are personal: what does my home or plant need, and who handles my region? A single generic form would push all of that sorting onto the sales team. The new site had to help visitors identify the right product and reach the right advisor on their own, without reading a catalogue first.

Heating gas — propane and tanks for homes: product hero, propane price and six service cards
Heating gas — propane and tanks for homes: product hero, propane price and six service cards
Liquefied natural gas (LNG) — the same product template for an industrial buyer
Liquefied natural gas (LNG) — the same product template for an industrial buyer

Pick a product, point at your region, and you get the people who handle it.

Contact, step 1 — Choose a category: eleven product and service cards, Rail logistics on hover
Contact, step 1 — Choose a category: eleven product and service cards, Rail logistics on hover

03 — Approach

Contact in three steps

I turned the contact page into an advisor finder. First the visitor picks a category, such as heating gas or LNG; for products sold regionally they then pick their voivodeship, on a map of Poland on desktop and from a list on mobile; finally they see the advisors who cover it, grouped by department, with a direct phone number and email. A back link restarts the search at any point.

Contact, step 2 — Choose your voivodeship, with Lubelskie highlighted on hover
Contact, step 2 — Choose your voivodeship, with Lubelskie highlighted on hover
Mobile — step 1, categories in two columns
Mobile — step 1, categories in two columns
Mobile — step 2, the voivodeship list
Mobile — step 2, the voivodeship list
Mobile — step 3, advisors grouped by department
Mobile — step 3, advisors grouped by department

04 — Deliverables

What shipped

Pages
Home, product pages, Contact, Careers, Blog, About us
Contact flow
Category → region → advisors
Home sections
Products, numbers, news, contact form, advisor finder
Type
Obviously and Inter
Breakpoints
Desktop and mobile
Design QA
Audit of the built site, with notes screen by screen
Contact, step 3 — Your advisors: advisors grouped by department, with phone and email
Contact, step 3 — Your advisors: advisors grouped by department, with phone and email

05 — Design system

Energy without the clichés

The site keeps a calm, white base and lets the Barter blue do the signalling: buttons, active tabs, highlighted regions and the thin rules that mark each advisor and branch. Headlines are set in Obviously, which gives the brand its energy, while Inter handles dense product, contact and address content. Numbers, news and contact categories share one outlined card style across the site.

Design system — grey, black and blue ramps, Obviously in four weights and the outlined number cards
Design system — grey, black and blue ramps, Obviously in four weights and the outlined number cards
Careers — Join us and the job benefits cards
Careers — Join us and the job benefits cards
Home — contact form and the Find an advisor map
Home — contact form and the Find an advisor map
Home — Products and services on mobile and desktop, tabs for gas, coal, aggregates, fertilisers and services
Home — Products and services on mobile and desktop, tabs for gas, coal, aggregates, fertilisers and services

06 — Outcome

From catalogue to guided path

The live site replaces a catalogue and a generic form with a guided path: visitors describe their need in two or three simple choices and end up with the phone number and email of the person who handles their product and region. The same structure works for a household and an industrial buyer, and the finder is one click away from the homepage, the product pages and the contact page. I also reviewed the built site against the design and documented the fixes screen by screen.