Cases

Sales page with
online calculator for Stella Technic

Developed a cool online calculator for warehouse racks.
2020
Marketing
Design
Frontend
3D modeling
One Page Store
Sales page with <span><br>online calculator for Stella Technic</span>
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.
3d

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

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:
User instruction

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.
JS-module
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:
Online store

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

Contact us and we will share our experience and help with the implementation!

Write
Order a project
Кейсы
See
similar cases
Web-AR for GaussWeb-AR for Gauss
Web-AR
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
2022
AmarylisAmarylis
Design
Marketing
Branding
Bitrix
more ...
Internet store
Integration
Amarylis
In 2019, the company restarted the online store, and, faced with the task of designing the interface and creating design, turned
to us for help.
2020
Pro-CosmetikPro-Cosmetik
Marketing
Branding
Design
more ...
Bitrix
SMM
Advertising
Printing
Internet store
Integration
Pro-Cosmetik
Internet store for
professional
cosmetics chain.
2018
B.Billionaire / OpiumB.Billionaire / Opium
A photo
Advertising
B.Billionaire / Opium
Photo support for
luxury segment stores.
2019
Stella TechStella Tech
A photo
Stella Tech
Photo accompaniment of our friends
Stella Technic
2020
NoirotNoirot
A photo
Advertising
Noirot
Together with Nuaro LLC, our team did product photography for the catalog and advertising.
2019
CronwoodCronwood
Design
Frontend
One Page Store
Quiz
more ...
Cronwood
A brief excursion into the furniture world of Sevastopol
2019
Ostrich HouseOstrich House
Marketing
Design
Bitrix
more ...
A photo
SMM
Business card site
Printing
Online store
Ostrich House
Marketing and service positioning
2018
Panam PizzaPanam Pizza
Design
Layout
Frontend development
more ...
Creating Presentations
Panam Pizza
We developed a set of promotional materials for the franchise of the Panama pizzeria network.


2022
Premium TechnologiesPremium Technologies
Integration
Advertising
one page store
more ...
Promo page
Development
Marketing
Design
Layout
Landing page
Premium Technologies
We developed a promotional website and advertising campaigns to promote retail and small wholesale sales of Schüco products and additional services of Premium Technologies.
2021
ANO DPO RIPKiPMRANO DPO RIPKiPMR
Marketing
Branding
Design
Bitrix
more ...
Advertising
Internet store
End-to-End Analytics
ANO DPO RIPKiPMR
We created an online store of educational programs for medical workers and an advertising campaign at the federal level.
2018
PelmenikiPelmeniki
Marketing
Design
Promo page
A photo
more ...
Printing
Internet store
Pelmeniki
Creative and marketing
accompanying of the Pelmeniki project.
2020
Oscar-Et-ValentineOscar-Et-Valentine
Marketing
Design
Integration
more ...
Bitrix
Oscar-Et-Valentine
It happens that after the launch of the site, its redesign is immediately required. This is exactly what happened to the Oscar Et Valentine website.
2020
Show more