Сайт-каталог для SaaS-решений

Классному приложению — классный сайт!

К нам обратился лидер в области автоматизации с задачей — создать сайт для нового проекта.

EMS Sklad — коробочное решение для управления складскими процессами: от логистики и интеграции с маркетплейсами до формирования отчётов и аналитики.

Его особенность в том, что не нужно тратить значительную часть прибыли на индивидуальную настройку системы.

Компания на протяжении почти 20 лет работала с проектами своих клиентов, где вёлся складской учёт и создала решение, которое учитывает максимум требований.

Нам предстояла ответственная задача — понятно и наглядно рассказать о возможностях и преимуществах системы.

На одном сайте нам нужно было бы объединить интересы двух групп целевой аудитории в одном месте:

Бизнесы, которые ищут готовое решение
Разработчики клиентов, которым нужны простые и понятные инструменты для интеграции

Дизайн

В этом и была особенность проекта — важно было найти баланс между технической информативностью и лёгкостью восприятия. А ещё создать сайт, который поддержит общий стиль дочерних компаний:

Синий цвет

В этом и была особенность проекта — важно было найти баланс между технической информативностью и лёгкостью восприятия.

Металлический градиент в логотипе

Она подчёркивает твёрдую экспертизу компании и стальную надёжность. Это особенно важно для B2B-аудитории.

Шрифт Manrope

Легко читается, лаконичный и современный — он стал основой для минималистичного дизайна, который не отвлекает пользователя от сути.

Карточная структура интерфейса

Интерфейс мы создали в карточной структуре. Вдохновились подходом Yandex Cloud. Каждая функция оформлена как отдельный модуль с кратким описанием, визуальными элементами и понятным призывом к действию. Информация подаётся чётко и доступно. Это помогает быстрее находить нужные решения, а значит и совершать целевые действия.

Референс от Yandex Cloud

Наш результат

Мы осознали, что для пользователей EMS Sklad критически важно сразу понять, как работает система. Сухие текстовые описания вызывают больше вопросов, чем дают ответов.

Описывать возможности системы в тексте — это как рассказывать о закате, но не показывать его. Поэтому для каждой системы мы добавили скриншоты интерфейса и понятные графики. Пользователь видит не только, что умеет система, но и как это выглядит в действии.

Такой подход:

Снимает барьеры недоверия — пользователи понимают, что перед ними реальный, продуманный продукт.
Помогает быстрее оценить релевантность функционала для их задач.

СамопрезентацияФормирование лояльностиОт общего к частномуФормирование ценностиПодсказки пользователямДобавление интеграцийИспользование демо-версииУпрощение поискаПоддержка для разработчиков

Самопрезентация
Формирование лояльности
От общего к частному
Формирование ценности
Подсказки пользователям
Добавление интеграций
Использование демо-версии
Упрощение поиска
Поддержка для разработчиков

Хорошая самопрезентация —
50% успеха

Мы сделали отдельные блоки, где каждую возможность можно изучить детально, но при этом без излишнего информационного шума. Для этого:

Разбили описание на логичные блоки. Краткое введение, описание с картинками и возможностью перейти к странице с полным описанием функции или системы.

Добавили кейсы. Вместо абстрактных объяснений показали, как конкретная функция уже помогает бизнесам решать их задачи.

Формируем лояльность

Цифры всегда говорят громче слов. Мы представили ключевые показатели и преимущества EMS Sklad в отдельных блоках:

Результаты в числах: скорость обработки операций, экономия времени, объёмы выполненных задач.

Быстрый эффект: пользователь за секунды понимает, что продукт действительно решает задачи, а не просто обещает невозможное.

Эти блоки стали своеобразными «якорями доверия».

От общего к частному

Проблема большинства сайтов SaaS-продуктов — перегрузка информацией. Чтобы пользователь не утонул в массиве информации, мы внедрили элементы интерактивности:

Гибкая навигация. В каждом блоке с общим описанием есть кнопка «Подробнее,» которая раскрывает детальную информацию.

Адаптация под пользователя. Привлекательный визуал побуждает к изучению, но оставляет выбор: узнать поверхностно или углубиться в детали. Это удобно как для быстрого сканирования, так и для вдумчивого анализа.

Дизайн, который транслирует ценности

Добавили тонкие графические элементы: линии и точки, которые напоминают схемы автоматизации и сети. Они создают ассоциацию с высокотехнологичной инженерией и интеллектуальной автоматикой

Подсказки пользователям

Чтобы направить пользователей к целевому действию, мы создали удобную систему подсказок: зарегистрируйтесь на платформе или оставьте заявку для получения консультации от специалиста. Этот подход помогает мягко подвести к важным действиям, сохраняя фокус на главной цели.

Добавление интеграций

При изучении целевой аудитории стало очевидно, что для бизнеса крайне важны интеграции с популярными платформами, особенно маркетплейсами. Это растущий рынок с множеством поставщиков, и наш подход позволил подчеркнуть конкурентное преимущество системы. Мы выделили специальный блок с интеграциями, который невозможно не заметить, — наглядно, структурировано и убедительно.

Используем демо-версию

В Call to Action, призывах к действию, мы выбрали ненавязчивый подход: вместо прямого призыва к покупке мы предложили консультацию и просмотр демо-версии или бесплатный пробный период. Это специфика бизнеса — решения требуют обсуждения. Чтобы пользователей не отталкивали формы обратной связи, оставили минимальное количество полей и указали факты об опыте компании, пользе для бизнеса от системы.

Упрощаем поиск

Мы знаем, что поиск информации на сайте иногда приносит больше проблем, чем пользы. Поэтому разработали систему, которая действительно помогает. Результаты поиска разбиваются на логичные категории. Для популярных запросов создана отдельная страница, которая позволяет сразу найти ответ на интересующий вопрос.

Поддержка для разработчиков

Учитывая, что часть аудитории — это разработчики, которые работают с системой на стороне клиента, мы создали отдельный полноценный раздел «Поддержка». Здесь открытая база знаний, документация по API и детализированные инструкции. Вся информация визуально организована по категориям, а встроенный поиск делает её доступной. Теперь разработчики не просто работают с системой, а рекомендуют её, потому что все процессы понятны и предсказуемы.

Разработка

Затем проект оказался в руках front-end и back-end разработчиков, которые превратили макеты Figma в работающий проект. Его разработали на WordPress — идеальное решение для сайтов-каталогов. Эта CMS позволяет добавлять и обновлять контент без технических знаний, а её гибкость поможет легко масштабировать проект в будущем.

Верстка

Вёрстка слайдеров, добавление проверок корректности ввода, фильтры — все легко на плечи наших frontend разработчиков. Они создали хедер, который подстраивается под действия пользователя.

При прокрутке вверх он появляется, упрощая навигацию
При прокрутке вниз исчезает, чтобы не закрывать контент. Кроме того, для удобства реализован компактный вариант хедера, который появляется при возврате к верхней части страницы.

Баннеры на главной и других страницах, например, в разделе «Возможности», можно менять прямо в админ-панели. Пользователь может загрузить изображение или видео, в зависимости от цели. Эти баннеры автоматически растягиваются на всю высоту экрана, независимо от устройства, создавая единый стиль отображения.

Эффективное управление тарифами

На странице с тарифами пользователи могут легко переключаться между планами и сравнивать их. В админ-панели легко управлять карточками тарифов: добавлять, редактировать или удалять их. Эти решения сделали сайт простым в использовании и интерактивным, а управление контентом максимально удобным.

В раздел с новостями можно сортировать материалы по дате или названию. На странице конкретной новости автоматически формируется оглавление на основе заголовков, упрощая навигацию. А в админ-панели можно добавить текст, заголовки и изображения любого объёма. Команда сверстала весь дизайн пиксель к пикселю.

В конце проекта мы спросили команду о сложностях проекта, а в ответ услышали:
«Сложностей нет, мы готовы реализовать даже самые креативные и нестандартные задачи».

Нужна качественная разработка, с которой можно будет расти и развиваться?

Оставить заявку

Внедрение RabbitMQ

Осноpвным функционалом сайта были формы обратной связи, и для их надёжной работы мы внедрили RabbitMQ. Он инструмент обеспечивает бесперебойный обмен сообщениями, исключает перегрузки и задержки. Для нашего клиента это значит, что сайт будет работать стабильно, а данные отправляться, даже если трафик вырастет или проект станет масштабнее.

Использование Elasticsearch

Чтобы улучшить пользовательский опыт, мы добавили Elasticsearch. Этот инструмент делает поиск на сайте быстрым и точным: он исправляет опечатки, подсказывает подходящие результаты и выделяет нужный блок. Пользователи легко могут находить информацию, даже если ввели запрос с ошибкой.

Паттерн проектирования «Фабрика»

Чтобы сайт можно было легко развивать и масштабировать, мы использовали паттерн проектирования «Фабрика». Этот подход помогает выбирать нужный метод или класс в зависимости от запроса пользователя. Это значит, что если в будущем потребуется добавить новый раздел или функцию, это можно будет сделать быстро и без кардинальных изменений в исходном коде. Такой подход делает сайт готовым к любым доработкам.

В итоге сделали сайт, который стал лучшим аргументом

Новый сайт теперь помогает пользователям принимать решения и мягко подводит к целевым действиям. И является своего рода мостом между продуктом и клиентом, который транслирует ценности EMS Sklad: надёжность, технологичность и эффективность.

Вверх