Cases
Sales page with
online calculator for Stella Technic
Developed a cool online calculator for warehouse racks.
2020
Address:
stella.3owls.ruthe site
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 tasks did we solve when developing an online calculator for Stella Technician
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.
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.
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.
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.
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.
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:
stella.3owls.ru
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
See
similar cases
similar cases
Web-AR for Gauss
Made a small promotional site and a decision with augmented reality on Web-A for the company Varton
2022
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.
to us for help.
2020
Noirot
Together with Nuaro LLC, our team did product photography for the catalog and advertising.
2019
Panam Pizza
We developed a set of promotional materials for the franchise of the Panama pizzeria network.
2022
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 RIPKiPMR
We created an online store of educational programs for medical workers and an advertising campaign at the federal level.
2018
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