- Заказчик
- «Клуб приключений» — это туристическое сообщество. Команда организует путешествия по регионам России, странам Европы и Африки.
- Задача
- Обновить сайт, который не менялся с 2006-го года: спроектировать личные кабинеты для пользователей и инструкторов; разработать единую дизайн-систему для сайта и личных кабинетов.
«Клуб приключений» — это туристическое сообщество. Команда организует путешествия по регионам России, странам Европы и Африки. Опытные инструкторы продумывают маршруты разного уровня сложности для путешествий по местам от Заполярья до Килиманджаро. В 2021 году у путешественников появились новая айдентика и название — «Клуб приключений».
Команда клуба обратилась к нам с задачей обновить сайт, который не менялся с 2006-го года:
- спроектировать личные кабинеты для пользователей и инструкторов;
- разработать единую дизайн-систему для сайта и личных кабинетов.
Планирование и старт работ
Под проект собрали дизайн-команду: аналитик, UX/UI-дизайнер, арт-директор и продюсер. При необходимости подключались SEO-специалист и арт-директор отдела брендинга. На старте запустили работы по SEO, аналитике и анализу нового фирменного стиля. Работали по итерациям: еженедельно продвигались как в проектировании, так и в дизайне нового сайта.
Вместе с арт-директором отдела брендинга провели дизайн-аудит, чтобы понять, как сохранить визуальное единство носителей. Построили дизайн-систему на основе нового фирменного стиля. На следующих этапах также подключали арт-директора брендинга к ревью дизайн-концепции и групп страниц, чтобы убедиться в целостности системы.
Проектирование структуры сайта
Собрали CJM и сформулировали требования к контенту и функционалу ключевых страниц сайта: главной, каталога маршрутов и детальной странице маршрута. На основе данных веб-аналитики и социальных сетей сегментировали пользователей по методу персон: непоходник, новичок и походник. Использовали эти группы при проектировании фильтров и детальных страниц маршрутов, чтобы пользователь мог быстро сориентироваться и подобрать приключение.
Веб-аналитика и юзабилити-анализ показали, что структура старого сайта неудобна для пользователя: каталог маршрутов повторяется трижды, а полезную информацию тяжело найти. Предложили объединить каталог маршрутов и фильтрацию на одной странице вместе с ключевыми параметрами для фильтров и сортировки.
Подключили SEO-специалиста. Подняли конверсионные, но тяжело находимые страницы на верхние уровни структуры сайта. Подобрали для них более очевидные названия. Например, заменили «Топонимы» на «Регионы для путешествий».
Проектирование сайта
Пользователь сначала изучает информацию о местах и маршруте и только потом принимает решение о путешествии. Чтобы читать было проще и интереснее, разбили большой объем текста на смысловые блоки и внедрили графику. Сквозные сетка и блоки от страницы маршрута до личного кабинета позволяют бесшовно переключаться на сайте, что во многом делает навигацию удобнее.
Обновленная структура текстовых блоков увеличит конверсию в покупку. Путь пользователя сократился: выбрать маршрут стало проще, а для оплаты не нужно совершать много действий.
На протяжении всего проекта аналитик и UX/UI-дизайнер работали совместно — это повысило скорость работы и уровень погруженности в задачи. Например, при передаче прототипов на отрисовку, дизайнер уже знал, как работает каждый из блоков.
Разработка дизайна сайта
Одна из ключевых страниц основного сайта — страница маршрута. Здесь важно отработать оставшиеся сомнения, при этом не перегрузить большим объемом текста. Поэтому разбили информацию на блоки:
- обзор всего маршрута, регион, сложность, длительность и особенности;
- карта и детальный план каждого дня;
- снаряжение которое стоит взять с собой — список можно распечатать;
- отзывы с оценками и фото от путешественников этого маршрута;
- цены и даты — вынесли в плавающий блок.
Создали лаконичный и простой дизайн сайта и спроектировали страницы, на которых вся информация четко структурирована. Для этого не использовали «рыбный» контент, а сразу работали с тем, который будет на сайте. Внедряли таблицы, иконки и схемы, чтобы обозначить часть информации графически и уменьшить объем текста.
Личный кабинет инструктора
Системное хранение и управление информацией о походах сэкономят время инструктора. Ему больше не нужно хранить данные о походах в голове или на бумажках — все собрано в специальном личном кабинете.
Личный кабинет пользователя и сообщество «Клуба приключений»
Создали вариативный личный кабинет под каждую группу пользователей. Для новичков в нем больше информации о предстоящих походах, можно задать вопрос инструктору, познакомиться с другими путешественниками и обсудить маршрут. Опытные походники могут посмотреть историю путешествий, написать отзывы и добавить фото.
Интерфейс сайта отзывчив и перестраивается после того, как пользователь авторизуется в Личном кабинете: маршруты походов, где уже был пользователь, отмечаются как пройденные; появляются направления и типы походов, сложность и регионы которых пользователь выбрал при регистрации.
«Клуб приключений» — сообщество путешественников, для которых важно делиться впечатлениями. Через личный кабинет пользователи могут делиться фотографиями и видео из путешествий, общаться друг с другом и звать в поездки.
Добавили геймификацию, чтобы вовлечь пользователей во взаимодействие с сайтом: начисляем баллы за отзывы, присваиваем звания за участие в новых походах, отмечаем на карте пройденные маршруты и разведанные регионы. Баллы можно тратить на покупку мерча или на часть оплаты за новые походы.
Результат
Продумали и упростили структуру сайта и спроектировали функционал двух личных кабинетов. Разработали дизайн-систему на основе новой айдентики «Клуба Приключений», которая объединила графические носители с сайтом.
Формат дизайн-команды лучше всего подходит для больших комплексных проектов. Над задачами работают одни и те же специалисты, которые полностью погружены в бизнес-процессы клиента. В итоге команда мыслит «продуктом», а не «от релиза к релизу». Вся работа выстроена под постоянное, комплексное и быстрое внедрение изменений.
После отрисовки дизайна сайта и личных кабинетов в течение нескольких месяцев мы продолжали работать в формате дизайн-команды. Совместно с клиентом определяли необходимые доработки, делили весь объем задач на смысловые блоки и двигались недельными итерациями.