Development of a web builder for a warehouse container supplier
Shortened the user’s path to purchase and unloaded client’s sales department
Construction
USA
2024
About the client
Conexwest is a USA-based company that specializes in the customization of shipping containers. The company transforms containers for various needs: for transportation, for offices, for warehouses and other premises.
The target audiences of the company are individual entrepreneurs, transport, logistics and other enterprises. The audience appreciates their solutions for mobility (the container can be easily rearranged or transported) and flexibility, since the builder provides the opportunity to make any container configuration — add windows, doors, pipes, ventilation and more.
The company has been on the market for a long time and they already had a container builder on the site. Over time, it became irrelevant, difficult to maintain and add new features.
Improve the current container builder.
Client requirements for the builder:
1) visually pleasing and intuitive user interface;
2) easy elements management and their variability;
3) speed and efficiency;
4) system scalability for further development.
Solution
To develop a new builder based on Canvas technology. This technology will provide high performance and the ability to use many elements.
We’ve done a great project. It showed how we are able to work with new technologies and bring useful changes to the client’s work. In addition, as part of our cooperation, we are simultaneously working on four projects, each of them plays an important role in the overall system of the company.
Our role in these projects is not only to develop high-quality products, but also to integrate them into a single ecosystem that enhances the effectiveness of the client’s business processes. The client highly appreciates our professionalism, quick response to requests and our flexibility in meeting their business needs. It is particularly noted that the developed solutions have had a significant impact on improving the work of the marketing, sales department, as well as on overall business efficiency. We are proud that we were able to help and strive to continue making our cooperation even more successful.
The builder possibilities
Personal account screens
Project management from personal account
The user can create a personal account with following features:
– creation of new projects;
– management of personal data and security settings;
– editing projects: you can make a copy to experiment with the settings, or just delete unnecessary projects;
– tracking the status of the project.
Project creation screens
Creating a project from scratch or based on a template
When a user wants to create a new project, the system offers two ways: start it from scratch or use a template from the list of projects that are ordered most often (offices, shipping containers, etc.)
Next, you need to select the container parameters: new or used, its size.
These settings can also be changed while working on the project.
An interface for project creating
Configuring the project in the workspace
After selecting the container type and dimensions, the user gets to the main workspace, where he can add the necessary elements to the container.
The container can be viewed from 5 angles, as well as outside and inside.
To the left of the container there are elements for adding to the configuration: doors, windows, lighting, ventilation, etc.
On the right is a list of previously added elements. Here you can also find detailed information about the project and go to additional settings.
Elements for containers
Elements builder
Thanks to Canvas technology, you can interact with a wide range of elements in the builder. The builder allows to:
– select the type of windows;
– choose the type of doors;
– choose equipment: ventilation, air conditioning, lighting, electrics;
– choose a color for painting the container from a palette of 63 colors;
– place the company logo or text on the container.
Markup when moving container elements
Adding and moving elements
Elements can be easily added or moved around the container work space.
When placing elements, several marking options appear. It shows the distance to the adjacent element and its location relative to all sides of the container.
If the user tries to position an element incorrectly in relation to another (too close, asymmetrically, etc.), the system will not allow this and will return the element to its original place.
Elements settings screens
Changing elements settings
When added to the container, each element gets its own number. All added elements are displayed in layers on the right side of the screen — each element = a separate layer.
Elements can be edited by changing their sizes, colors, and settings. For example, the user can change the location of the door handle, the side of the door opening.
You can go to the settings from the right menu or select an item and press the “gear”, which opens the settings.
The changes in the builder are saved automatically, but the user also has the option to save them.
A comments window
Comments
If the user wants to explain the configuration, make a note, or discuss the project with colleagues via shared access, they can leave a comment on any element.
The comment will be displayed under the element, it can be edited or deleted.
Integration with the CRM system
Sending a project to the CRM system
The builder is configured to integrate with the client’s CRM system, in which sales managers work.
When the project is ready, the user can send it to the managers for calculation. The application contains information about the company with the address, as well as comments from the client.
Managers receive the project specification, pre-calculate its cost and contact the client.
Project link creation screen
Sending a project to other users
The user can share a link to their project by email or via messengers.
Clicking the link will open the project in viewing mode. To make changes, the user to whom the project was sent must register in the system.
Stages of work
Requirements collection and design
This stage formulated the basis for the development of a web builder. The main task was to develop a convenient and easy-to-use product that would simplify for the customer to choose a container and additional options for it.
To determine the requirements for the project, we analyzed the client’s business objectives, studied the needs of the target audience through reviews, and analyzed the container market.
Based on this research, we understood the main parameters that are important to add to the functionality. For example, adding elements, resizing and coloring containers.
For the product’s high performance, we chose Canvas, and with this in mind, we formed the technical requirements for the project.
Frontend
The Next.js framework was used for front-end development with Canvas technology. Next.js allows you to create a reactive web application, and Canvas — an interactive container builder.
During development, we focused on high performance, adaptability and visual appeal of the builder. It was also important that the builder worked equally well on any device.
Backend
The backend was developed on Laravel to create a convenient and multifunctional personal account.
Testing
We have tested the functionality for errors and bugs. The detected errors were immediately corrected.
Also at this stage, we optimized the basic functions of the builder to improve performance and ensure a more stable operation of the project.
Results
-
Simplified the user’s path to purchase a container
Customers can configure the required container on the company’s website. This greatly simplifies interaction with the company, reduces selection time and is a competitive advantage of Conexwest.
-
We have facilitated the sales and marketing department work
Thanks to the builder, we have reduced the amount of work for sales managers. Now they can focus not on figuring out the customer’s requirements, but on calculations, commercial proposals and delivery organization. This has increased the throughput of the sales department, managers can process more applications per month.
-
Accelerated and optimized site working with the help of Canvas implementation
We have completely updated the technology of the builder. The client received a flexible and easily scalable product. Now the builder works quickly, without failures, it can be easily refined and developed without overloading the site.
-
Work on the project continues
The client has many ideas on how to automate processes in the company, and we have remained his technical partner along the way. Now we are perfecting the current functionality.
Also in the future, the client wants to integrate the drawings made by the builder directly into the production process. The drawing will be transmitted to the robot, which will use it to cut holes for windows, doors, etc. This will significantly reduce the production time and simplify the process.
Feedback
OnePix has helped the client accelerate quote preparation, improve pricing accuracy, reduce manual revisions, and increase quote-to-order conversion. The NetSuite integration has also enabled the client to automate processes, decrease errors, and shorten operational processing time.
Did you like the case?
Contact the manager to discuss your project
