Catalog site for SaaS solutions

A cool application — a cool website!

A leader in the field of automation approached us with the task of creating a website for a new project.

EMS Sklad is a boxed solution for managing warehouse processes: from logistics and integration with marketplaces to reporting and analytics. Its peculiarity is that it is not necessary to spend a significant part of profit on individual system customization.

For almost 20 years the company has been working with the projects of its clients, where warehouse accounting was carried out, and created a solution that takes into account the maximum requirements.

We were faced with the responsible task of clearly and visually communicating the features and benefits of the system.

On one website we would need to combine the interests of two groups of the target audience in one place:

Businesses looking for an off-the-shelf solution.
Customer developers who need simple and clear tools for integration.

Design

This was the peculiarity of the project — it was important to find a balance between technical informativeness and ease of perception. And also to create a site that would support the overall style of the subsidiaries:

The color blue

A symbol of reliability, stability and confidence in quality. This color not only inspires trust, but is also ideal for an IT product.

Steel texture in the logo

It emphasizes the company's solid expertise and steely reliability. This is especially important for the B2B audience.

Manrope font

Easy to read, laconic and modern — it became the basis for a minimalist design that doesn't distract the user from the essence.

The card structure of the interface

We created the interface in a card structure. We were inspired by the Yandex Cloud approach. Each function is designed as a separate module with a brief description, visual elements and a clear call to action. The information is presented clearly and easily. This helps you find the right solutions faster, and therefore take targeted actions.

Yandex Cloud Reference

Our result

We realized that it is critical for EMS Sklad users to immediately understand how the system works. Dry text descriptions raise more questions than they answer.

Describing system features in text is like telling about a sunset but not showing it. That's why we added interface screenshots and clear graphics for each system. The user sees not only what the system can do, but also what it looks like in action

This approach:

Removes barriers of mistrust — users realize that they have a real, well-thought-out product in front of them.
Helps to evaluate the relevance of the functionality for their tasks faster.

Self-presentationBuilding loyaltyFrom general to privateValue formationTips for usersAdding integrationsUsing the demo versionSimplify the searchSupport for developers

Self-presentation
Building loyalty
From general to private
Value formation
Tips for users
Adding integrations
Using the demo version
Simplify the search
Support for developers

Good self-presentation is 50% of success

We have made separate blocks where each opportunity can be explored in detail, but without too much information noise. To do this:

We divided the description into logical blocks. A short introduction, a description with pictures and an opportunity to go to the page with a full description of the function or system.

Added case studies. Instead of abstract explanations, we showed how a specific function already helps businesses solve their problems.

Building loyalty

Numbers always speak louder than words. We presented the key indicators and benefits of EMS Sklad in separate blocks:

Results in numbers: speed of transaction processing, time savings, volumes of completed tasks.

Quick effect: the user realizes in seconds that the product really solves tasks, not just promises the impossible. These blocks have become a kind of “trust anchors”.

From the general to the particular

The problem with most SaaS product sites is information overload. To prevent the user from drowning in the mass of information, we introduced elements of interactivity:

Flexible navigation. In each block with a general description there is a button “Read more,” which reveals detailed information.

Adaptation to the user. Attractive visuals encourage exploration, but leave the choice to learn superficially or go into more detail. This is convenient for both quick scanning and thoughtful analysis.

A design that translates values

We added subtle graphic elements: lines and dots that resemble automation circuits and networks. They create an association with high-tech engineering and intelligent automation.

Tips for users

To achieve a targeted action, we tell users what they need to do to get advice from a specialist - register on the platform or leave a request. This approach helps to gently lead to important actions while keeping the focus on the main goal.

Adding integrations

When studying the target audience, it became clear that integrations with popular platforms, especially marketplaces, are extremely important for businesses. This is a growing market with many suppliers, and our approach allowed us to emphasize the competitive advantage of the system. We highlighted a special block with integrations that is impossible to overlook - visual, structured and convincing.

Using the demo version

In Call to Action, a call to action, we chose an unobtrusive approach: instead of a direct call to purchase, we offered a consultation and viewing a demo or a free trial. This is a specificity of business - solutions require discussion. To avoid users being repulsed by feedback forms, we left the minimum number of fields and specified facts about the company's experience and the business benefits of the system.

Simplify the search

We know that searching for information on the site sometimes brings more problems than benefits. That's why we developed a system that really helps. Search results are divided into logical categories.

A separate page has been created for popular queries, which allows you to immediately find the answer to the question you are interested in.

Support for developers

Taking into account that part of the audience are developers who work with the system on the client side, we created a separate full-fledged section “Support”. Here you can find an open knowledge base, API documentation and detailed instructions. All information is visually organized by categories, and built-in search makes it accessible. Now developers don't just work with the system, but recommend it, because all processes are clear and predictable.

Development

The project was then in the hands of front-end and back-end developers who turned Figma's layouts into a working project. It was developed on WordPress - an ideal solution for catalog sites. This CMS allows you to add and update content without technical knowledge, and its flexibility will help you easily scale the project in the future.

Layout

Slider layout, adding input validity checks, filters - everything is easy on the shoulders of our frontend developers.
They created a header that adjusts to the user's actions.

When scrolling up, it appears, simplifying navigation.
When scrolling down, it disappears to avoid covering the content. In addition, for convenience, a compact version of the header is implemented, which appears when you return to the top of the page.

Banners on the homepage and other pages, for example, in the “Features” section, can be changed directly in the admin panel. The user can upload an image or a video, depending on the purpose. These banners automatically stretch to the full height of the screen, regardless of device, creating a uniform display style.

Effective tariff management

On the rates page, users can easily switch between plans and compare them. In the admin panel it is easy to manage tariff cards: add, edit or delete them.

These solutions made the site easy to use and interactive, and content management as convenient as possible.

In the section with news you can sort materials by date or title. On the page of a particular news item, a table of contents is automatically generated based on the headings, simplifying navigation. And in the admin panel you can add text, headlines and images of any size.
The team rolled out the entire design pixel to pixel.

At the end of the project, we asked the team about the difficulties of the project, and in response we heard:
“There are no difficulties, we are ready to realize even the most creative and non-standard tasks”.

Need quality development that you can grow and develop with?

Submit a request

Implementation of RabbitMQ

The main functionality of the site was feedback forms, and for their reliable operation we implemented RabbitMQ. It provides uninterrupted message exchange, eliminates overloads and delays. For our client, this means that the site will work stably and data will be sent even if traffic grows or the project becomes larger.

Using Elasticsearch

To improve the user experience, we added Elasticsearch. This tool makes site search fast and accurate: it corrects typos, suggests relevant results, and highlights the right block. Users can easily find information even if they entered a query with a mistake.

The "Factory" design pattern

To make the site easy to develop and scale, we used the Factory design pattern. This approach helps to select the right method or class depending on the user's query. This means that if a new section or feature needs to be added in the future, it can be done quickly and without drastic changes to the source code. This approach makes the site ready for any revisions. After eliminating all the minor issues, the site was ready for launch - reliable, user-friendly and fully functional.

In the end, they made a website that became a better argument

The new website now helps users to make decisions and gently leads to targeted actions. And it is a kind of bridge between the product and the customer, which communicates the values of EMS Sklad: reliability, technology and efficiency.