Сайт Websoft: как объединились инновации, технологии и комплексное представление лидера HR Tech

1. Вводная задача от заказчика, проблематика, цели

Websoft — ведущий Российский разработчик цифровых HR-решений, на рынке с 1999 года. Продукт компании: умная платформа для решения всех задач современного HR: управление талантами, HR-сервисы, коммуникации.

В 2023 году мы впервые участвовали в Workspace Digital Awards с проектом «Современные технологии». Проект получился классный, но времени тогда катастрофически не хватало: мы загрузили только визуал, без описания, и очевидно, что не выиграли.

Зато выиграли в 2025 году, когда Елена, директор по маркетингу и PR, нашла этот проект на Workspace и написала нам в 8 вечера в Телеграм, что ей очень понравился дизайн сайта, особенно 3D! Так мы и начали сотрудничать)

Websoft — тот тип заказчика, который четко понимает своё позиционирование, место на рынке и цели продукта. Поэтому бриф прошел легко: заказчик досконально знает свой продукт, а мы умеем вытаскивать из этого смыслы. Новый сайт должен был стать имиджевым — без крика «купи-купи». После погружения в специфику бизнеса основные задачи мы сформулировали так:

• Показать инновационность. Websoft внимательно следит за трендами и постоянно улучшает свой продукт. Сайт должен транслировать ту современность, которой живет компания изнутри.
• Собирать заявки. Не лидогенерация, а направление пользователя в тот момент, когда он задумывается об услуге.
• Стать механизмом коммуникации. У компании насыщенная жизнь: множество мероприятий, релизов, событий. Задача сайта — собрать всё это в одном месте и сделать так, чтобы текущие клиенты возвращались к сайту. Отсюда вытекает и простота редактирования контента как сопутствующая, но очень важная задача.

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

Целевая аудитория сайта — представители крупных компаний: HR-специалисты, HR-эксперты, HR в IT, HR и IT-директора. Чаще всего это женщины 27–45 лет с гуманитарным складом ума, для которых важны понятность, доверие и простота взаимодействия.

При этом сроки были сжаты: 9 страниц с уникальным дизайном + 8 технических страниц за 1 месяц. Всё, чтобы показать новый сайт и обновленный брендинг на отраслевом мероприятии. Меньше кофе, больше макетов — примерно так выглядел наш план.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Анализ ниши и конкурентов

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

• 2 брифа: наш и тот, что Websoft делали для брендинга;
• старый сайт, где всё же сохранилось немного актуальной информации;
• внутренние презентации о продуктах компании, на которые мы опирались больше всего;
• рейтинги и премии, в которых участвует Websoft;
• пресс-материалы и публикации, чтобы подобрать TOV сайта.

Чтобы лишний раз не отвлекать команду заказчика, мы собирали максимум информации самостоятельно: мониторили СМИ и медиа-упоминания.

После проекта мы спросили Елену, что для нее было самым ценным в работе с нами. Она ответила: «Глубокое погружение в нашу специфику — вы действительно разобрались в том, что такое HR Tech и в нашей аудитории».

Конкурентов изучали с двух сторон: смотрели тех, за кем следит сам Websoft, и дополняли список своими находками — например, интеграторами HR-платформ.

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

Часть наблюдений:

• большинство сайтов, естественно, многостраничные;
• у многих акцент на динамичную анимацию и «технологичность»;
• часто используются градиенты;
• информация подана довольно структурировано;
• встречаются как слабые проекты с точки зрения визуала и смыслов, так и сильные, продуманные решения.

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

Прототип

Схематично определили темы блоков, а дальше начались тексты. Здесь нельзя просто проанализировать конкурентов и по подобию написать текст: HR Tech слишком специфичен, продукт уникальный, а значит, формулировки нужно рассматривать под лупой.

Мы подготовили основу и пошли синхронизироваться с Еленой — директором по маркетингу и PR, и Артуром — директором по стратегии. Они включились на максимум: добавляли точные формулировки, а мы разворачивали их в тексты.

На первом этапе сделали прототипы четырёх страниц — проверили направление, убедились, что двигаемся верно, и взялись за остальные пять.

Главное правило прототипирования — не перегружать страницы, но при этом раскрыть тему. У нас получилось 9 прототипов с четкой логикой и структурой, которые уже можно было превращать в дизайн.

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

Дизайн-концепция

Стоит сказать, что изначально у нас было подробное руководство по использованию визуальных образов. Агентство DDVB разработало для Websoft брендинг, и у нас был задан визуальный стиль.

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

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

Баланс между обилием 3D-графики, иконок, анимаций и текстов удалось сохранить. На созвоне с Еленой и Артуром стало понятно: мы попали в точку благодаря тому, что хорошо проанализировали ожидания. Фирменный стиль помог выдержать общую линию и собрать всё в единую систему.

Отдельный акцент сделали на странице Websoft Enterprise. Это премиальный продукт для очень крупного бизнеса, и мы подчеркнули его статус: единственная страница сайта, выполненная в тёмно-синем цвете, чтобы сразу выделяться на фоне остальных.

Логотип показан в инверсии, а 3D-элементы — в синей цветовой гамме, чтобы страница была однородной, при этом считывалась консистентно по отношению ко всему сайту.

Дизайн или как параллельные столкнулись

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

Из-за сжатых сроков работа дальше строилась так:

• когда главная и одна внутренняя страница были согласованы, мы начали их верстать;
• параллельно дорисовывали 2 страницы и отрисовывали с нуля ещё 7 страниц;
• пока один довёрстывал сайт, второй начинал его адаптировать.

Спойлер: мы успели сдать все 9 страниц в срок, а спустя пару недель продолжили разрабатывать оставшиеся 10 страниц с новой карты сайта.

Теперь о дизайне.

Если говорить про общую стилистику, мы сделали акцент на 3D-графике. Она транслирует инновационность компании, создаёт эффект вовлечения и усиливает узнаваемость бренда, так как 3D — часть фирменного стиля заказчика.

С одной стороны, 3D — необычно для нашего взгляда, с другой — привычно, потому что мы живем в многомерном мире. Но в рамках дизайна, конечно, они всегда цепляют взгляд.

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

Если взглянуть на все страницы, то можно заметить, что сайт динамичный за счёт анимации. Одна из любимых анимаций нашей команды находится в блоке, где описаны преимущества Российской HR-платформы. 7 преимуществ синхронно движутся с 3D-иконками, на каждом новом преимуществе становится главной одна из 7 иконок.

Человек прокручивает страницу, взгляд скользит вправо-влево, возникает эффект вовлечённой игры. Результат — пользователь задерживается на сайте дольше, что улучшает и конверсию, и поведенческие метрики.

С бегущими логотипами партнёров мы пошли нестандартным путем. Слайдер бы «прятал» часть брендов, а нам важно было показать всех. Решение — три ряда бегущих логотипов. Блок не утяжеляет дизайн, при этом демонстрирует масштаб компании и вызывает доверие.

Рассказ «О компании» усилили цифрами. Это привычный инструмент, но мы сделали его живым: цифры расположены на плашках, а ключевая, про количество клиентов, выделена контрастным фиолетовым цветом и обращает на себя внимание. Для динамики добавили видео: с напоминанием, что Websoft — не только цифры, но ещё и люди.

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

С правой стороны меню — кнопка «Обратный звонок», которая следует за пользователем при скролле и сокращает путь до заявки. А функциональный поиск решает задачу для тех, кто приходит за конкретной информацией.

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

После завершения проекта мы спросили Елену — директора по маркетингу и PR Websoft, о том, что ей понравилось на этапе дизайна. Она прокомментировала нашу работу так: «Профессиональный подход к UX/UI — предложенные решения были не просто красивыми, но и функциональными. А современный дизайн повысил доверие к бренду при освещении в СМИ».

Продукты, партнёры и компания Websoft

Ключевая цель сайта — представить Websoft как вендора и системно рассказать о продуктах. Поэтому каждая продуктовая страница стала самостоятельной историей.

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

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

Страница Enterprise выполнена в тёмных цветах. Помним, что это единственная страница, которая отличается по стилю, чтобы обратить внимание на премиальность продукта.

Контент подгружается постепенно и привлекает внимание из-за анимации по скроллу. Есть белые блоки, на которые сразу падает взгляд из-за неожиданности, там прописаны самые важные тезисы. Часть информации скрыта в тултипе (всплывающая подсказка), чтобы не перегрузить сайт.

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

Здесь представлена вся партнёрская сеть. При скролле снизу показываются 3 статуса, кликнув на которые, мы легко перейдём на партнёров одного из типов. Навигация и удобство на этой странице — наше всё.

Одна из функций сайта: коммуникационная, через неё Websoft планировал общаться с клиентами и партнёрами. Ранее была проблема: новостей так много, что просто не успевали обо всём рассказать через рассылки.

Появилось 3 направления: кейсы, пресс-центр, события.

• Страница кейсов выполнена в формате Tilda-потоков, чтобы сотрудники Websoft могли самостоятельно управлять кейсами и переносить их с внешнего сайта.
• Пресс-центр создан в основном на zero-блоках. Есть дата релиза, которая показывает, что сайт живёт, а компания развивается. Обложка, название и лид-абзац призывают нажать на «Подробнее», где открывается внутренняя страница со своей структурой.
• События также созданы с помощью zero-блоков. Фотографии событий по форме напоминают логотип Websoft и работают на узнаваемость. События разделили на 3 категории: все, анонсы, завершённые, и добавили табы-переключатели.

Такое решение делает навигацию интуитивной: пользователь сразу видит нужную категорию и не тратит время на поиск. Удобно и быстро — именно то, что нужно занятым HR-специалистам.

О компании — очень важная и необходимая страница, где рассказываем о миссии, 25-летней истории и ключевых лицах Websoft. Здесь же интегрированы вакансии и перелинковка на страницу партнёров.

Страница говорит о главном: Websoft — не интегратор и не агентство, а разработчик собственной платформы. Именно поэтому её интерфейс показывается открыто. Ценности компании подчеркнули через факты, цифры и историю, а наглядно подтвердили их при переходе к кейсам, партнёрам и продуктам.

На каждой странице сайта в меню есть кнопка «Обратный звонок», а в конце практически каждой страницы есть открытая форма для заявки. Таким образом, мы не убеждаем кричаще купить, а говорим: «Обращайтесь, если мы нужны вам».

3. Результаты сотрудничества

После завершения 1 этапа Елена поделилась своими ощущениями от проекта в целом. Мы не ожидали такой искренней реакции и поэтому было приятно вдвойне.

Спустя несколько месяцев после запуска мы спросили Елену, какой результат принёс компании новый сайт. Вот что изменилось:

Поведение пользователей:

• Одна из задач редизайна заключалась в том, чтобы сайт стал основным инструментом коммуникации. После релиза у нас значительно возросла активность пользователей: клиенты и партнёры стали чаще заходить на сайт и проводить на нём больше времени.
• Улучшилась навигация и пользовательский опыт — получили положительную обратную связь от HR-директоров и руководителей IT о более интуитивном интерфейсе.
• Выросла конверсия в лиды: больше целевых обращений через формы обратной связи.

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

Медийность и PR-эффект:

• Сайт стал полноценной «визитной карточкой» для журналистов — современный дизайн повысил доверие к бренду при освещении в СМИ.
• Удобная структура помогает журналистам быстрее находить нужную информацию о компании и продуктах.
• Websoft занял 1-е место в рейтинге по импортозамещению SAP SF в России и 1-е место в исследовании ТеДо — новый сайт стал важным фактором в презентации компании для аналитиков.

Позиционирование:

• Сайт помогает позиционировать Websoft как технологичного лидера рынка HR Tech.
• Лучше демонстрирует масштаб компании: 25+ лет на рынке, резидент «Сколково», лидер по импортозамещению SAP.
• Поддерживает ребрендинг и обновление визуальной айдентики.*
• Елена резюмировала: «Новый сайт стал важной частью нашей маркетинговой экосистемы и значительно усилил нашу позицию на рынке».
• Нам Websoft принес новую награду! Заняли 2-е место в конкурсе Рейтинга Рунета, категория «Информационные технологии».
• В результате Websoft получил сайт, который отражает масштаб и экспертность компании, помогает выстраивать доверие с B2B-аудиторией, журналистами, жюри конкурсов и премий, и подчёркивает статус лидера в HR Tech.