Когда работаешь над развивающимся продуктом, в котором регулярно обновляются и дополняются возможности, есть необходимость периодически актуализировать сайт. В этом кейсе расскажем, как мы произвели апдейт сайта сервиса для управления проектами Shtab, сохранив преемственность в дизайне, но сделав его более современным и понятным.
Задачи
Перед редизайном и обновлением сайта мы поставили следующие задачи:
- «освежить» дизайн главной страницы, сделать сайт более современным, при этом сильно не отходя от того, что было;
- актуализировать контент;
- оптимизировать большое количество текста в некоторых блоках;
- разработать для главной страницы новый блок с иллюстрацией в виде штаб-квартиры;
- создать новые страницы: мобильные приложения, коробочная версия.
Решение
В рамках проекты мы:
- полностью переработали первый экран главной страницы: от посыла до визуальной составляющей;
- добавили блок с динамическими данными по статистике пользователей сервиса;
- переработали блок с основными возможностями софта, сделав его в формате слайдера;
- разработали новый информационный блок, сравнивающий сервис со штаб-квартирой;
- обновили блок со статьями из блога;
- добавили ссылки с роликами-эксплейнерами с YouTube-канала;
- обновили блок со скачиванием мобильных приложений;
- разработали новые страницы.
Больше строгости, но воздушности в дизайне
Редизайн мы начали с переработки первого экрана главной страницы сайта. Сократили количество цветов градиента до одного оттенка, заменили безликие иконки на элементы интерфейса сервиса, а также добавили динамический заголовок со сменой УТП. Эти решения помогли сделать первый экран более презентабельным.
Было:
Стало:
Блок про основные функции Shtab с большим количеством текста оформили в качестве слайдера с удобным переключением между слайдами.
Было:
Стало:
Как выстроить правильные ассоциации
Когда задумывался Shtab, на этапе нейминга была заложена ассоциация со штаб-квартирой как у крупной корпорации. По замыслу Shtab — первый шаг и помощник для компаний, которые мечтают о самых высоких вершинах. Сервис помогает организовать работу разных команд и бизнесов, вне зависимости от направления и масштабов.
Чтобы подчеркнуть эту ассоциацию, мы разработали схематичное изображение крупной штаб-квартиры, вокруг которой разместили небольшие блоки с подсказками о том, как сервис помогает каждому из направлений. А также добавили возможность перейти в раздел со всеми возможностями Shtab.
Читай, смотри, вдохновляйся: сделали цепляющие блоки с контентом
Мы переработали блок со статьями, который раньше был представлен заголовками и кратким описанием. Добавили к материалам обложки, а также фото авторов, чтобы показать, что это не безликие тексты, а написанные реальными людьми статьи.
Помимо этого, добавили новые блоки с YouTube-видео (а затем и RuTube), на которых специалисты Shtab рассказывают о возможностях сервиса и делятся полезными лайфхаками по работе.
Теперь и на Android
Ко времени апдейта сайта у Shtab вышло нативное приложение на Android, поэтому в блоке с загрузкой мы добавили кнопки Google Play и RuStore.
Для десктопной версии также добавили QR-коды, которые позволяют сразу же перейти в необходимый магазин приложений на смартфоне и установить Shtab.
Вместе с тем мы разработали отдельную страницу для мобильных приложений. На ней мы в отдельных наглядных блоках:
- подчеркнули преимущества и возможности работы в сервисе со смартфона;
- продемонстрировали интерфейсы на iOS и Android;
- добавили ссылки на магазины приложений.
Коробочная версия с калькулятором стоимости
Shtab в этом году запустил on-premise версию сервиса (установка на собственном сервере), поэтому под это событие мы разработали отдельную страницу. На ней мы отразили преимущества софта и то, какое ПО он заменяет:
Отразили технические требования:
Но самое интересное на этой странице с точки зрения разработки — калькулятор стоимости. В нем пользователь может выбрать период и число сотрудников, отметить нужна ли ему будет техническая поддержка, после чего ему будет сразу доступна итоговая стоимость и возможность оставить заявку.
Результат
Мы сохранили преемственность по дизайну, при этом вдохнули в сайт новую жизнь, наполнили его дополнительными страницами, а главную сделали более понятной, структурной и презентабельной.
В будущем планируем переработать структурно страницу со всеми возможностями сервиса, а также разработать страницы о команде, сравнениях с аналогичным ПО и сценариях использования Shtab разными направлениями бизнеса.