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

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

– «освежить» дизайн главной страницы, сделать сайт более современным, при этом сильно не отходя от того, что было;

– актуализировать контент;

– оптимизировать большое количество текста в некоторых блоках;

– разработать для главной страницы новый блок с иллюстрацией в виде штаб-квартиры;

– создать новые страницы: мобильные приложения, коробочная версия. 

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

– полностью переработали первый экран главной страницы: от посыла до визуальной составляющей;

– добавили блок с динамическими данными по статистике пользователей сервиса;

– переработали блок с основными возможностями софта, сделав его в формате слайдера;

– разработали новый информационный блок, сравнивающий сервис со штаб-квартирой;

– обновили блок со статьями из блога;

– добавили ссылки с роликами-эксплейнерами с YouTube-канала;

– обновили блок со скачиванием мобильных приложений;

– разработали новые страницы.

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

Было:

Стало:

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

Было:

Стало:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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