< 600 screens, 7 months of work

How we created a new design for the online configurator of an industrial company

Our client, PK Vesta, an international industrial company, requested a redesign of the WebSteel online system.

Sales geographyCIS countries
Webernetic - photo 6
Webernetic - photo 7
Online configurator design< 600 screens7 months of work
Webernetic - photo 8
Webernetic - photo 9

A bit about how the platform works

Clients design buildings themselves, choose sizes, colors, add various elements through the online configurator interface. After creating a model, the user online sees the cost of the building, can get a quote or place an order for a turnkey construction. It is important to note that the system is designed to meet the needs of users without experience in construction and building design.

Target audience

80%

Of users are legal entities needing a building for commercial purposes

10%

Investors considering buildings for potential investments

10%

Private individuals ordering buildings for personal use

Main wishes

01

To make the design simple and intuitive so that the customer can easily navigate the service

02

Adhere to a minimalistic style

03

Take into account the bilingual nature of the site — Russian and English

04

Use elements in the design that load relatively quickly. Despite the fact that the main market is the CIS, the factory plans to enter the markets of Africa and the Middle East, where in most countries the Internet is weak

05

Implement adaptive layout to accommodate major resolutions (8K, 5K, 4K, 2.5K and Full HD and HD), aspect ratios (16:9,3:2, etc.) and major browsers

06

To work out the content and create a design for a new section — industry solutions. On this page it was decided to place ready-made layouts of structures. This will save users' time for designing structures

07

Use neutral corporate colors (light gray, accent — dark blue, yellow)

08

To update the design not only of the service itself, but also of other elements — pop-ups, login/registration forms, personal cabinet

Stages of work on the project:

1st stage

Interviews with clients

Hours talking to the users of the platform, that's about 20 clients, to get their opinion about the service and understand what is inconvenient, what is missing. As a result, we got complete information about the expectations and pains of the target audience. And in the new design we focused on the platform features that are most important for users.

2nd stage

Moodboard

Moodboard when creating a website design is a collection of styles, color combinations, fonts, references and other elements.
The main idea was to create a design from cards . This style can be found in major corporations, such as Google.

Webernetic - photo 10
Webernetic - photo 11
3rd stage

Prototypes

A prototype is a mockup of future pages that is created to show how they will look like. The design is further developed on the basis of prototypes.

Webernetic - photo 12
4th stage

Design

The rendering was done in iterations — we started with the first, welcome, page of the system and then went through the entire user journey, gradually creating a design for each step.

Webernetic - photo 13

The whole process of creating a model and placing an order was divided into 3 steps.

Webernetic - photo 14
Now each step has its own specific tasks and goals, which avoids confusion and mistakes. Users understand where to move, where they are now. And the basic information for each step is fixed, and it can be viewed at any time in a pop-up window.
Webernetic - photo 15
01

Selecting geo parameters

The main part of the screen is the map, so that the user can understand, without reading the text, that now it is necessary to choose a place for construction. Since not everyone is comfortable navigating the map, we added a search bar.

01

The step is needed to сalculate the cost of delivery.

02

It helps to determine the loads on the building according to the peculiarities of the selected climatic zone. The designer needs this information to consider the necessary structural requirements for reliability and stability, such as reinforcements, thermal insulation, etc.

Building a route
After selecting the desired location, the route from the company to the construction site is laid out. This way the user can make sure that he has chosen the right geodata.
Webernetic - photo 16
Hints for users
There were hints in the system before, but they consisted of a large amount of solid text. This format frightened users, so they did not read them, and solved arising questions on their own. We divided all the information into logical blocks and added graphics to make the prompts clearer.
Webernetic - photo 17
Webernetic - photo 18
02

Creating the building itself

Here it was important to provide complete information necessary for modeling the future structure. At the same time, it was important to make the whole algorithm of creating the structure understandable even to a person with no experience in designing buildings and structures. That is why we added brief background information and knowledge base "How the system works" to each characteristic.

Webernetic - photo 19
Some functions are paid for
For example, you can view online a VR-version of the future object in real size at the proposed construction site.
To emphasize the user's attention on additional features, we have highlighted them with special signs. And we created separate pages with a detailed description of how this or that function or option works, why to use it and how much it costs.
Webernetic - photo 20
Webernetic - photo 21
Webernetic - photo 22
03

Getting a quote and placing an order

The key information for the user is highlighted with the help of color. For example, at the payment stage it is a commercial offer and order details — order composition, production terms, prepayment amount. The Call-to-Action button is also highlighted to direct the client to make a target action — call to order. And if you need help, you can contact by clicking on the "Ask a Question" button.

Assistance at all stages

When placing an order, the customer can determine a convenient payment option. To help make the best choice for him, we have highlighted how the options differ from each other.

Clarification of the order

Detailed what was included in the order and emphasized the company's unique selling proposition.

Webernetic - photo 23

Personal cabinet

All applications in one place. Download kp, add to favorites, share a model in one click

Webernetic - photo 24
Webernetic - photo 25

Sorting by readiness

Sorting makes it easy to track an order depending on its status: in progress, completed, early orders.

Ability to track % order readiness

Visualized the order readiness data with a pie chart. This format is intuitive, and users can quickly assess how close a job is to completion.

Webernetic - photo 26
Webernetic - photo 27
Webernetic - photo 28

The chronology of the order

If you want, you can get detailed information on what stage the order is at now- all in the format of the journey from point A (manufacturer) to point B (customer) with intermediate data and date tracking.

Favourites

Part of the target audience - designers and legal entities that have many objects. To prevent users from wasting their time searching for the required structure or creating a new design, we have added the ability to add the required variants to favorites.

Webernetic - photo 29
Webernetic - photo 30

Comparison

We have added the ability to compare variants by main characteristics (port of delivery, place of production, condition of buildings. The customer can choose whether it is more important for him to analyze all characteristics or only differences.

Order history

You can also view the order history of paid functions in your personal cabinet.

Webernetic - photo 31

Industry solutions

We have developed a new section for the service - industry solutions. These pages contain ready-made layouts of buildings. Here we paid special attention to structuring the information for the menu so that the user could quickly find the necessary solutions.

Promotional offers

We highlighted promotional offers with color to attract users' attention and encourage them to make purchases. This will allow us to offer customers favorable conditions and increase conversion rates and sales.

Size filters

When creating the design for the filter, we used graphics to make it easy for the user to read the information.

Webernetic - photo 32
Webernetic - photo 33
Webernetic - photo 34

Conclusions

Such a large amount of work has been done with one goal in — to make the service easier and more convenient to use. To achieve this, we paid special attention to the preparatory work: market research, castaways, prototyping.

Now users can find what they need, design and order buildings faster. Page load speeds are minimal despite the amount of photo content.

How does this help the company achieve its goals?

The intuitive design helps to meet the user's needs quickly and accurately. As a result, the customer is loyal to the company and ready to order its services and recommend it to others.

Webernetic - photo 35
Webernetic - photo 36
Get a design that delivers visible results. Let's discuss your goals and objectives now!

Elena

ACCOUNT MANAGER

Webernetic - photo 37
Up