Automation of the purchasing process for a packaging industry client.
For a cardboard packaging manufacturer, we have automated the process of ordering products by customers using a 3D visualization product configurator.
Backend
Frontend
Client description
Janbox is a company that has been specializing in the production of high-quality corrugated cardboard boxes and die-cut cardboard boxes for over 20 years.
The client offers a wide range of product customization options, starting from the material and additional finishing, all the way to prints.
The aim of the project
Until now, Janbox has been taking orders manually, often involving lengthy communication between the customer and the sales representative. During these interactions, customers inquired about available box dimensions, textures, finishes, additional customizations, and shared their information through email. The goal of the project was to simplify and automate the purchasing process for customers placing orders for cardboard boxes.
Which technologies we used?
VUE.JS
HTML
CSS
WORDPRESS
ADOBE XD
Main challenges
During the project's execution, several challenges emerged. The team had to segment dynamic layers in the 3D packaging model, simultaneously considering the customer's requirements when altering the form's steps. The configurator includes numerous dependencies among the box size, chosen material type, and finish, all of which needed to be incorporated into the tool's logic.
The configurator allows users to upload their own graphics, which will be placed on the box. Consequently, we had to devise a solution to validate graphic files and appropriately integrate them onto the developed 3D models, allowing users to obtain a three-dimensional preview of their design
This tool has allowed us to save a significant amount of time and energy that we used to dedicate to clarifying orders with customers through email correspondence.
Solution
As part of the project, we streamlined the ordering process for JanBox's clients and automated a portion of the sales team's tedious work using a 3D product configurator.
The implementation of 3D visualization in the configurator, allowing easy viewing of the designed packaging from all angles, has proven to be enticing for potential customers. They can actively engage in the entire process, designing boxes tailored to their needs without the need for extensive conversations with consultants regarding their purchase vision. This solution enables sales representatives to focus on advising customers and building relationships rather than laboriously gathering order-related data.
Thanks to the 3D configurator, JanBox not only improved the entire ordering process but also gained a new sales channel, ultimately resulting in increased product sales and revenue growth for the company.
See how the configurator works
Test the configuratorFunctionalities of the configurator
The main features include:
- A 6-stage purchase form, including a thank you page.
- 3D box visualization.
- Integration of the form with other solutions within the company, automation, and enabling further order processing.
- Availability of the configurator in English, German, French, Spanish, and Portuguese.
Branding & design
Not only did our team prepare 3D models of boxes and their components, but we also modernly designed all the elements of the configurator, incorporating the client's visual identity. The tool is highly intuitive, enjoyable, and easy to use, allowing users to focus on their goal: configuring a box that perfectly suits their needs.
Let’s talk!
Do you have a similar project in mind? Contact us!
The project team
The project team consisted of a Tech Leader, Project Manager, Senior Fullstack Developer, Senior Front-end Developer, and Senior Graphic Designer.
Realization process
- Identifying the client's problemLengthy process of selecting box preferences solely through email or phone communication..
- Analysis and Refinement of RequirementsAt this stage, we collaborated with the client to develop a new purchasing path, enabling the creation of a six-step configurator along with the implementation of 3D visualization.
- Prototype PreparationWe prepared UI prototypes and step division using an accordion approach to maintain simplicity and ensure accessibility across different devices.
- Defining the Technological StackAs part of the technological analysis, we opted for using Vue.js, HTML5, CSS3, and the WordPress system, upon which the client's website was based. Graphic elements were prepared using Adobe XD.
- 3D Views PreparationAn essential stage of the project was our designer's preparation of 3D models for each box, in a way that allowed the construction of a 3D product visualizer.
- Deployment and MaintenanceAfter completing the configurator tests, it was successfully deployed on the client's website and is being maintained by us.
- Let’s talk!If you need a similar solution, don't hesitate to contact us.Book a meeting
Project effects
BEFORE
- Time-consuming and inconvenient ordering process.
- Salespeople spending time gathering order-related data.
- Lack of product visualization capabilities.
AFTER
- Automation of the ordering process and time savings.
- Real-time 3D packaging preview capability.
- Opening a new sales channel and increasing revenue.
What the company has gained
By implementing the configurator on the website, the company gained a fully automated tool for order processing. Instead of time-consuming communication and email-based data exchange, customers can now create fully personalized packaging in just a few steps that cater to their needs. As a result, the order processing time significantly shortened, leading to increased customer satisfaction and revenue growth.
See also
Marketplace platform for selling new and used cars with financing
At the company, which sells cars and vans along with financing, we have cut sales costs by 60% by creating a new sales channel in the form of a dedicated marketplace platform. The platform allows new and used cars to be purchased online in four simple steps.
More