Eurostal - dynamic 3D configurator for a Polish tin garage manufacturer
The Eurostal configurator enables full customization of tin garages for customers from many countries. The implemented solution allows dynamic generation of a 3D garage model based on options selected by the user.
About the client
Eurostal has been active on the market since 2009. Thanks to many years of experience and a qualified team, it has become a leader in the production of light steel structures. Eurostal's offer includes tin garages, halls, warehouses, tool and garden sheds, waste and wood shelters, dog pens and various, even the most complex, unusual structures realized always with the aim of meeting another customer need.
It conducts its activities mainly outside Poland (including the Czech Republic, Slovakia, Hungary, Romania, as well as Germany and Italy) where it has gained the recognition of thousands of customers.
Country
Poland
Industry
Production of steel structures
Scope of work
UX/UI Design, Programming
Challenge
3D product configurator on WooCommerce
Before implementing the configurator, the user could only place an order from the available product range. Creating a custom-made garage required direct contact and discussing details during a conversation with a salesperson.
The commission submitted by the client consisted of preparing a 3D garage configurator that would streamline and shorten the sales process. Creating the configurator was intended to enable users to freely design their garage, thereby shortening the working time that sales representatives had to spend on establishing structural details.
Scope of work
- UX/UI design of the configurator
- Implementation of the configurator engine using the ThreeJS library
- Implementation of choice fields according to the prepared design
- Connecting the Frontend solution with the configurator engine
- Implementation of the configurator in the client's environment
Key elements
During the work on the configurator, we had to pay special attention to the technical aspect of the garages produced by the client. The dimension of the structure depends on many elements that the user can adapt to their needs. In addition to technical aspects, it was very important to enable a real-time preview of the garage.
Compliance of garage technical parameters
All garage parameters must be consistent with the technical specification so that the configured garage complies with the actual production possibilities. E.g., the height of the garage depends on the height of the selected gate, the type of roof and the height of the garage affects the possibility of embedding the door, and the degree of roof inclination depends on the width. All dependencies are calculated based on technical data provided by the client.
Dynamic 3D model
One of the main assumptions was the possibility of freely viewing the garage. This required the creation of a 3D view, thanks to which the user can rotate the garage in any direction and zoom in / out of the view by scrolling. Changes in the model are generated automatically after the user selects an option, without the need to reload the page.
Equipment choice
When configuring their garage, the user has the possibility of setting the height and width of the gate and adapting its horizontal position. Doors and windows that can be freely moved in 2 planes are also available as an option. In addition, the user can choose the type of construction, color of the cladding and select accessories, e.g., an alarm system.
Price automation
The configurator system enables expansion with automatic price calculation based on parameters, options and accessories selected by the user. At this point, according to the client's decision, the functionality is disabled.
Full structure configuration
Selection of additions and choice of colors
Our solution
3D product configurator using ThreeJS
Due to the fact that the Eurostal online store is built on the WooCommerce platform, we had to ensure proper operation in this system. The implemented solution had to enable editing configurator parameters from the WordPress administration panel.
A very large number of possible garage configurations made it impossible to use simple forms of visualization, e.g., uploading photos of different garage versions. The Eurostal configurator engine was built using the ThreeJS library, which draws a 3D model by executing an algorithm calculating coordinates. This means that the configurator does not need to upload ready-made photos / renders of the product - the 3D model is generated in real time.
Technologies used
Result of work
The last stage of work was performing photo optimization which accelerated the loading time, adding a simple contact form and publishing the configurator on several client stores.
As a result of the work, our client received a ready-made product configurator that can be freely expanded, both with sales and structural functions affecting the appearance and specificity of the garages sold - the technology used does not impose limitations.
Client opinion
Great cooperation in creating the site and the configurator. WEBO company are professionals who meet deadlines and have a great approach to the client. Everything works without a hitch, I recommend!
Are you interested in our offer?
Contact us and start cooperation
-/ Our recent projects
See our other website projects
- Websites
- UX/UI
Headless website for a Polish 5G network solutions provider
is-wireless.com is a modern website operating based on CMS WordPress. The whole thing was made in headless mode for maximum speed.
- Websites
- UX/UI
Mutiny Group - Marketing agency website made in WordPress Full Site Editing
Mutiny is an agency from Tri-City offering activities in the field of: Marketing and PR, Events, Scenography, Photo / Video, Graphics and 3D and IT. Our task was a comprehensive implementation from UX/UI design to implementation using WordPress FSE
-/ Our clients
Meet the companies that trusted us
