We apologize for any inconvenience. Our website is currently under development, and some information may be outdated. For the most accurate details, please reach out to us through our contact forms or messaging services. Thank you for your understanding!

Development of a web builder for a warehouse container supplier

Shortened the user’s path to purchase and unloaded client’s sales department

Industry

Construction

Region

USA

Year

2024

Services
Backend
Frontend
Technologies
Canvas
JavaScript
Laravel
Next.js
PHP
Complexity
Conexbuilder Cover
Development time

10 months

Team

1 TM, 1 PM, 1 Frontend, 1 Backend , 1 QA

Project status

The project continues to evolve and scale

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.

Client’s situation

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.

Task

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.

Conexbuilder Banner

Solution

To develop a new builder based on Canvas technology. This technology will provide high performance and the ability to use many elements.

Artem Belyakov PM
Artem Belyakov
Project Tech Lead

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.

Read completely

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

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.

Project Creation Screen Interface

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.

Container Elements

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

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

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

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 CRM System

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

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

01.

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.

02.

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.

03.

Backend

The backend was developed on Laravel to create a convenient and multifunctional personal account.

04.

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

  1. 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. 

  2. 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.

  3. 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.

  4. 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. 

Did you like the case?

    This website uses cookies.

    This website uses cookies.

    I agree to the Cookies Policy