Sales page with
online calculator for Stella Technic

Developed a cool online calculator for warehouse racks.
3D modeling
One Page Store
Stella-Technician has been operating on the Russian market since 1991, supplying warehouse equipment. One of the products is prefabricated storage racks, which are in demand by the company's customers. Our team was faced with the task of developing an online calculator that would allow customers to website to design and calculate the cost of your own version of a warehouse rack. As it turned out during the work: the task is not trivial and interesting.

Task set by the customer

Develop a calculator for calculating prefabricated storage racks

Project Summary

Preparing to launch the page:
2 months
Delivery of work:
June 2020

What tools did you use

Calculator design done in Excel, prototype and design in Figma, used 3D max for modeling, HTML/CSS and a lot of JS. We spent many hours in Skype, discussing the principle of work and agreeing on the result.
The site was developed on mod-x. We connected a ready-made module and page layout to the site: the calculator sends the list of item id for the online store, sends the assembled racks to the cart — immediately with the price.

Studied business process, developed solution concept

Before starting work, we carefully studied the technical characteristics of the racks and their design. Then we described in detail what tasks the sales manager solves for the customer in what sequence. We found out what data and in what format customers can give, and where they need hints and help.
Branding and identity

We made a prototype interface

We have described all possible user options for ordering. Among them: choosing the size of the rack and the option of its installation, adding the possibility of intra-warehouse movement. It is important for buyers to choose the size of the base and determine the colors of the boxes from which the system is assembled.
Many Information obtained from sales managers: 87% of customers order the most popular sizes and types of racks. These types were made the default choice when starting to work with the calculator.
Interesting: from the point of view of the interface, it turned out to be logical to assemble the rack from the bottom up, but according to the technology, it is necessary to proceed in the reverse order.
Colleagues from the Stella-Technik company agreed: this is the logic of the page more convenient for the end user. To avoid confusion, we, together with the company, have developed a special instruction for assembling storage racks. Excel was very useful for us to create a prototype.
Branding and identity

We made 3D models
and renders of rack elements

Our team was faced with a choice: take photos of all the original parts and use them, or make a 3D model. The photos (including the photographer's work and subsequent retouching) cost about 3 times more. K there was also a risk that changes would be required, and this is additional shooting.
We chose to develop photo-realistic renderings of 3D models. This was a good decision: we reduced the development budget and easily made changes when needed.

Developed design

When developing the page design, we were practically not limited by anything, except for the set corporate colors and colors of components, and we had room for creativity.
Used a grid of 12 wide 90px columns: to create a sense of stability. Font — Montserrat. While working on the design, we prepared all the necessary visualizations for the calculator to work: rows of boxes of all colors and accessories.
Later, we had the task of preparing a page design for its integration into the websites of the company's counterparties - our design solutions made it possible to cope with the task with minimal effort.

Developed and implemented custom assembly instructions

For the convenience of the company's customers, together with Stella-Technic employees, we have developed detailed instructions for assembling any rack option. The instructions are available on the website in pdf format and are suitable for printing on A4.
In addition, we prepared a file for printing in a printing house, in color, on high-quality paper, to be sent to customers along with the order. It was not easy for our designers to adapt to the development of technical documentation: more often they are faced with advertising printing tasks. Take a look what we got:

Developed a JS-module
for assembly, visualization
and cost calculation

We were a little worried: our frontend development department has little experience with mod-x. When connecting, we encountered only one problem: the assembled rack in the basket looked like a set of components, and the user could already change the composition in the basket.
This part was successfully solved: they began to combine the rack into a commodity item with a specification. We got the first positive experience from working with mod-x.
Online store
Designed and connected the page to the online store
The whole interface works exclusively in the browser: when choosing the type of racks, we set the dimensions and the number of required components. We add visualization that the user sees to them, and then we form a list of items needed to create the rack, and its cost.
We've made it possible to create an unlimited number of warehouse racks on one page so that users can choose and compare what they've got.
Look here:

Result of work

Sales page with a calculator for the company, integrated into internal systems
5 weeks
Took page development including modeling and calculator creation
1.2 sec.
Page loading speed with Yandex.Metrica running
3 people
Project team needed to implement this solution
Order a project

Do you have a similar task? Contact us and we will share our experience and help with the implementation!

similar cases
3D modeling
Business card site
Web-AR for Gauss
Made a small promotional site and a decision with augmented reality on Web-A for the company Varton
Еще ...
Hotel Paradiso is located on a mountain slope in South Tyrol and offers its guests winter and summer leisure programs
Show more