Development of an eCommerce platform for a company that manufactures van racking systems
Developed a website that has helped to multiply the client’s profit since the first months
ECommerce
UK
2022
About the client
The Yoke Vans company from the UK makes the life of van owners more convenient and safer. They develop racking systems for storing and organizing tools and materials, sheathe vans inside and out, and offer anti-theft solutions.
Their target audience is van owners, managers and representatives of fleets.
The client had a website with an outdated design and limited functionality that no longer met the business requirements. The conversion rate was low and the profit was small. The client wanted to redesign, rebuild the site and implement new features to promote their services online.
To develop an eCommerce platform where the user can get acquainted with the company, choose a product from the assortment and order related services. To do this, in addition to presenting the company and products on the site, it was important to implement the ordering functionality and add the ability to create a user’s personal account on the website.
Solution
A compact yet functional website on WordPress and WooCommerce platforms. In addition to the standard functionality, we have developed a builder with a selection of components and materials for the product. We also implemented a system of the product’s filters, categories and attributes so that the user can gradually select the properties and order exactly what he needs. It is also possible to choose the delivery method on the website, depending on the type of product in the order.
It was another project of our beloved regular customer from the UK. Before that, we worked with him on projects with a focus on custom design, animation and AWWWARDS nominations. This project has become a new milestone in our collaboration with the client, as he decided to develop an eCommerce project for the first time. Before that, the client had no experience with WooCommerce, but he wanted to learn how to work with this platform. Initially, it was planned that the client would build the site on his own, and we compiled a detailed guide in English for him on how to deploy and configure projects with WooCommerce. But it turned out to be difficult, so he still asked us to help with the development. We got down to business, simultaneously showing how it all works and is configured using a real example.
The client’s lack of experience with eCommerce projects partially affected the progress of the project. We have reassembled the structure of categories, filters and products several times according to his request. But in the end, it turned out to successfully collect all the client’s conceived ideas, as well as visually show him how the system works and is configured.
Implemented features
Personal account pages
Personal account
We have added a personal account with which user can:
– view the order history and clarify the status of the current one (processed, shipped, delivered);
– add shipping and billing addresses;
– view the selected products that the user has marked as “favorite” in the catalog;
– set up an account: change name, email, password.
Product settings pages
Shelving builder
The user can assemble the order according to his request.
The element selection for the order occurs in stages, ensuring that the client does not miss any details and that the company accurately assembled the order and calculates the service cost.
To organize the space in the vans, there are various package offers based on the constructor. The selection takes place in stages:
1) choosing a constructor option;
2) filling it with elements, for example, false floor, arrangement of racks, trunk;
3) selection of materials to be used for the project.
So, if the customer needs the van ply lining, he first chooses the upholstery options, and then the materials.
Filters on the van selection page
Personalization of the order using filters and categories system
We have set up a system of product categories, attributes and filters so that the user can choose a solution for a specific van.
On the website, you need to specify the brand of the van, its model, manufacture year and the doors location, and then the system will select and offer the best racking option for this car.
Pages for choosing delivery methods
Choosing the delivery method
During the order process, the user can choose a convenient delivery day, order delivery by courier, or arrange pickup.
Implemented integrations
Implemented integrations
To provide the site with full functionality, we used a variety of technologies and plugins:
— WooCommerce is the main solution for displaying products, shopping cart, checkout, coupons and completed orders;
— YITH WooCommerce Wishlist for the selected products page;
— Klarna and Stripe for payment gateways;
— Contact Form 7 for contact forms;
— Wordfence Security for security and anti-hacking;
— Advanced Custom Fields for custom fields and content editing.
Stages of work
Design
The design was provided by the customer, but some components were modified by our designers using Figma.
Layout
The layout was implemented on the Webpack module builder using the main layout languages: HTML, CSS, JS, as well as various JS libraries. In the process, the BEM methodology was used, so that the site turned out to be literate in terms of HTML structure.
To make the site work as fast as possible, we optimized and minimized the code.
Backend
Most of the functions were implemented using PHP code. Ready-made plugins, WooCommerce solutions and payment gateways were used to implement some features and integrations when deploying the site on the WordPress CMS.
Testing
The QA team conducted tests to ensure that the site layout and functional solutions were displayed correctly. We checked the functionality of adding products, placing an order, and monitoring updates in your personal account.
After UI/UX testing, some site elements were updated to improve the user experience.
Results
-
Launched a full-fledged eCommerce site on WordPress and WooCommerce
We have developed a website that represents the client’s company and its services on the web. All the tasks set by the client were successfully implemented.
-
Developed a user-friendly customization functionality for the order
The user can choose an individual filling for his van directly on the website.
-
Increased the conversion rate of the site and the customer’s sales many times
The new website turned out to be convenient and fast, which immediately affected the company’s profits.
Did you like the case?
Contact the manager to discuss your project
