Перезагрузка: как мы вдохнули новую жизнь в сайт сервиса для управления проектами Shtab

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

Задачи

Перед редизайном и обновлением сайта мы поставили следующие задачи:

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

Решение

В рамках проекты мы:

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

Больше строгости, но воздушности в дизайне

Редизайн мы начали с переработки первого экрана главной страницы сайта. Сократили количество цветов градиента до одного оттенка, заменили безликие иконки на элементы интерфейса сервиса, а также добавили динамический заголовок со сменой УТП. Эти решения помогли сделать первый экран более презентабельным.

Было:

Стало:

Блок про основные функции Shtab с большим количеством текста оформили в качестве слайдера с удобным переключением между слайдами.

Было:

Стало:

Как выстроить правильные ассоциации

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

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

Читай, смотри, вдохновляйся: сделали цепляющие блоки с контентом

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

Помимо этого, добавили новые блоки с YouTube-видео (а затем и RuTube), на которых специалисты Shtab рассказывают о возможностях сервиса и делятся полезными лайфхаками по работе.

Теперь и на Android

Ко времени апдейта сайта у Shtab вышло нативное приложение на Android, поэтому в блоке с загрузкой мы добавили кнопки Google Play и RuStore.

Для десктопной версии также добавили QR-коды, которые позволяют сразу же перейти в необходимый магазин приложений на смартфоне и установить Shtab.

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

подчеркнули преимущества и возможности работы в сервисе со смартфона;

продемонстрировали интерфейсы на iOS и Android;

добавили ссылки на магазины приложений.

Коробочная версия с калькулятором стоимости

Shtab в этом году запустил on-premise версию сервиса (установка на собственном сервере), поэтому под это событие мы разработали отдельную страницу. На ней мы отразили преимущества софта и то, какое ПО он заменяет:

Отразили технические требования:

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

Результат

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

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