Redesign of e-Commerce on Shop Script
About the project
Our cooperation with the Bilka online store, the leader in the sale of accessories for mobile phones and tablets in Ukraine, has been going on for quite a long time. The site is systematically maintained and developed with the help of Webnauts team. SEO optimization is carried out, and a lot of functional improvements are implemented, without which it is difficult to move forward in modern e-commerce. A few years ago, the site successfully «moved» to a newer open source content management system (CMS) — Shop-Script 7.
But the modern world is changing very quickly and it is necessary to respond to all changes in time in order to «be in trend». We noticed that the site was visually outdated – its interface was no longer convenient to use, it began to seem «heavy» and not so attractive. At the same time, analytical indicators began to decline – traffic, the time the user spent on the site, the percentage of conversions. Also, it was necessary to work on responsiveness. All this led to the decision to redesign the site.
General idea and redesign of the main page
Since the site design was originally developed by our designer individually for the client, we implemented all the changes based on the existing concept: the general idea, name, logo and slogan, color palette. This approach helped us to retain the existing audience of the company, to make sure that even after the redesign, the site familiar to the buyer would be clearly recognizable.
This is how the main page looked after the update:
The site was visually simplified, made more transparent, and piled structures consisting of details, addresses and phone numbers of the store were removed from the upper part. Instead, all the necessary information was taken out in one line in the header (top of the site) and a separate page was created: Menu => Contacts
This information was also duplicated in the footer – the bottom of the site:
Pages with products in the selected category
We wanted to expand the page with the catalog of goods of the selected category, as well as add lightness and transparency to it. By removing empty bars on the sides, moving the catalog and filter, we have made the page easier to visually perceive. The filter was made customizable so that you can sort the goods according to the specified parameters – manufacturer and model.
The product cards also required elaboration. We made them more compact, but at the same time enlarged the product image. Changed the font: it has become more readable and pleasing to the eye. The color palette in which the product is presented has been transferred to the side in the form of color indicators. By selecting the desired color and clicking on it, the picture of the product changes. So, the user can choose the color of the model they like.
In addition to the price, code and name, a rating, «compare» and «add to cart» buttons have been added to each product card.
Now, after all the changes, the page has become lighter, and due to the increased space, it displays not three, but six types of goods at once.
Pages — product cards
Pages with the image of the selected product also received more space. This made it possible to fit the maximum amount of information about the product on the page. A small block with information about the availability of goods, their price, the «Add to Cart» button and the «Payment in installments»offer logically fit into the concept.
For images, we added the function to enlarge the image by click, so that the user can view the product he likes in more detail and from different angles:
Adding an item to the cart
Thanks to the bright and visible «Add to Cart» button, it has become much easier to place an order. It is conveniently located and calls the buyer to action.
When you click the «Add to Cart» button, there is an effect of the product «flying» to the cart. It makes you want to «walk» through the pages and «put» the goods you like into the cart!
After adding to the cart, the user immediately sees the number of selected products and their total cost. You can start checkout.
Checkout
So that the buyer does not have to fill in a large number of fields, entering information about themselves, the checkout page was simplified as much as possible:
For regular customers, it remains possible to create a personal account to automate the ordering process. Now you can do it in just two clicks:
Blog design
The blog in the «News» section has been made easier to understand by dividing the content into sections: «All news», «To help the consumer», «Brand news», «Phones, smartphones, characteristics». So it will be easier for the user to navigate in all the variety of content.
The content is easily perceived due to the transparent texture, bright images and no clutter on the page.
Responsive web design
Since mobile traffic today significantly exceeds the number of desktop visits, a modern website should display correctly on various devices. The site bilka.com.ua also has responsive properties. Easily and quickly, it dynamically adjusts to the mobile version. A clear and easy-to-use menu duplicates the main version of the site.
Visually demarcated sections do not create confusion in the assortment on a small screen, and a convenient shopping cart allows you to easily place an order:
Shop-Script version upgrade (from 7 to 8)
Since the changes in the design affected not only the visual, but also the functional part, we upgraded the platform from Shop-Script 7 to Shop-Script 8. To ensure that the site would work flawlessly after all the changes, we fixed the code compatibility issues that arose. Now the owners and administrators of the bilka.com.ua online store are developing their business with the help of the latest features that Shop Script offers today.
Conclusion
Thanks to the comprehensive approach of our specialists to the redesign, the bilka.com.ua website turned out to be stylish and modern. Easy and fast, logically understandable to the user, it has become an effective tool in e-commerce.
The updated style and functionality led to an increase in SEO indicators: the number of pages viewed, the time the user spent on the site, and the conversion rate. All these were the reason for the natural promotion of the site in the search engine.
