en

Baza Drov – supplier of wood and coal

Go to website

Distributor of solid fuel materials

  • Site type: online store
  • Terms: 30 days
  • Status: Completed
  • Made: SEO, Ui/Ux, Web dev
Website image Baza Drov Website image Baza Drov

01 Client

Baza Drov is a company that offers its customers solid fuel at the best prices on the Ukrainian market.

02 Goals and objectives

Redesign the site based on analyses of the existing site and the collected data for SEO promotion of the site
  1. The site should be in white, black and brown colors
  2. The new site should preserve existing traffic
  3. Make sure that the site's positions are not lost
  4. Implement product filtering by purpose and price.
  5. Create a calculator to calculate the cost of delivery
  6. The site should have the ability to choose a language (Ukrainian and Russian)
  7. When launching the site, internal SEO optimization should be implemented immediately
  8. Implement the ability to purchase goods through the cart
  9. In the cart, it should be possible to choose a delivery option (self-delivery, or by our transport), as well as payment (cash, card payment)
  10. Take care of convenient filling of the site with information and other aspects from the point of view of administration

03 Decision

We created this online store using the miniShop2 tool, which is available in the MODx CMS. During development, we turned to third-party API services to complete certain tasks.

Website design

Before starting work on the site design, we familiarized ourselves with its structure and the terms of reference that we received from the marketing department. After that, we reviewed all the client's wishes and started creating the site design.

Colors

Colors

Fonts

Open Sans Medium
Open Sans Regular
Oswald Medium
Oswald Regular

Icons for shipping methods

Delivery icon
Sea shipping icon
Pickup icon
Photos of some sections
Site photo Baza Drov - 1
Site photo Baza Drov - 2
Site photo Baza Drov - 3
Site photo Baza Drov - 4
Product page
Perhaps the most attention in working with this site was paid to the single product page and the product catalog. The appearance of these pages is shown in the photo below.
Site photo Baza Drov - 1
Site photo Baza Drov - 2
Site photo Baza Drov - 3
Delivery map

Design for phones

For this project, we made 2 versions of the design: for laptops and for phones. You can see how the site looks on mobile devices in the photo below.

Mobile version photo Baza Drov 1
Mobile version photo Baza Drov 1
Mobile version photo Baza Drov 2
Mobile version photo Baza Drov 2
Mobile version photo Baza Drov 3
Mobile version photo Baza Drov 3
Mobile version photo Baza Drov 4
Mobile version photo Baza Drov 4
Mobile version photo Baza Drov 5
Mobile version photo Baza Drov 5

Website development

The site has a not quite usual filtering. Its implementation is due to the requirements of the site from the point of view of SEO. It consists in the fact that such filters as categories of lumber, firewood by purpose, coal by purpose and briquettes by purpose redirect us to another nested page of a certain category when clicked. In addition, for a certain category of goods, nesting by cities and districts of the Kyiv region was made

Roman Melnychuk

Site animation

The site also has some animation work. It can only be observed during certain user interactions with elements (for example, hovering over a button).

Delivery calculator

The calculator itself looks simple on the surface, but “under the hood”, everything is not so simple. While developing it, we encountered the problem that in order to save on delivery costs and correctly calculate this cost, we had to take into account how many cubes of products fit in a certain car. In addition, we had to take into account the fuel consumption of a certain car and determine the delivery distance. To determine the distance, we created an API for settlements in the Kyiv region and, depending on the choice of location, we determine and substitute the distance into the calculation.
Photo Baza Drov 1

Shipping cost calculator

Page structure

The home page, the single product page, and the site menu have certain features in appearance and implementation during device adaptation. For example, this can be observed in the photo, which shows how the sequence of elements on the page changes.

1-click purchase

Based on our experience and knowledge, we decided to create a "1-click purchase" button and we were right, it really works. Most of the orders that a customer receives from the site are placed through it.

Mini basket

For the convenience of using the site, namely the products in the cart, it was decided to create a mini cart of the site. This allows the user to easily understand what is in the cart (without visiting it) and change the quantity of the product, or remove the unnecessary

Back-end

The most interesting stage of backend development was the creation of a calculator for the cost of delivering firewood. As well as the implementation of a search for settlements in the Kyiv region with autocomplete. The search used the JSON file search technology using PHP+Ajax, which reduced the load on the server.
Dmytro Kosyk

Working with the admin

At the beginning of the work, a decision was made to develop an online store, not a catalog site. This was done so that the client could easily arrange everything on the site, which saves time for both the client and the manager.

Multilingualism

The site was developed in 2 languages: Ukrainian and Russian. Since before the start of development, a semantic core was assembled, which clearly showed the need for these 2 languages ​​for promotion in the region.

Functionality for SEO

During development, internal SEO optimization of the site was immediately carried out. What was done:

  • Micro-markup has been implemented for: product card, FAQ, breadcrumbs and more;
  • A dynamic sitemap.xml has been developed with implemented requirements for multilingual sites.;
  • It is possible to create a custom menu in the product category (for relinking and UI/UX);
  • Ability to create landing pages for cities and districts.

Many other points useful for SEO were also taken into account..

Mini basket

For the convenience of using the site, namely the products in the cart, it was decided to create a mini cart for the site. This allows the user to easily understand what is in the cart (without visiting it) and change the quantity of the product, or remove the unwanted one.
Photo Baza Drov 1

Synchronization of prices in price lists

All prices in the price list section are automatically pulled from the products in the category. To set up synchronization, you only need to specify the category ID.
Photo Baza Drov 1

Ability to change units of measurement

The product was provided with the possibility of changing the units of measurement. For example, firewood is measured in m3, coal in tons, and so on.

Telegram API integration

Data from all forms, the calculator, and when placing an order are sent to Telegram. This reduces the time for customer processing by the sales manager.
Photo Baza Drov 1

04 Technologies and tools

jQuery
Modx Revolution
Gulp
Figma
MySQL
PHP
LESS
Telegram API

05 Result

As a result of our work, the client received a fully functioning site with all his wishes according to the functionality. When transferring to the main domain, we managed to maintain the site's position and not lose monthly traffic. After completion, we transferred all access to the client and gave access to the admin panel for SEO specialists from our agency, because after our work they started promoting the site

Roman Melnychuk

06 Client's words about the project

I ordered the development of an online store and its promotion here. The online store is already ready, everything is great. We are still working on promotion, we already have the first results. But I think everything will be fine in terms of SEO, so you can safely contact us for websites and marketing.

Review author: Serhii
Serhii

Founder

07 Project team

Project management

Roman Melnychuk

Marketing

Design

Development

Content

Are you impressed by this project?
Rate it!

Other projects

Let's create an online store with a marketing structure

When ordering two or more services, we have discount system