2025

Редизайн сайта лагеря «Артек»

Международный детский центр «Артек» - крупнейший лагерь в России, принимающий тысячи детей ежегодно. Основная цель сайта - информировать посетителей, а также направлять их во внутреннюю систему АИС «Артек», где происходит подача документов, заявок и отслеживание статусов путёвок

Целевая аудитория
Сайт лагеря «Артек» ориентирован на 2 основные группы пользователей:
  • Родители - подают документы, ищут информацию о путёвках, сроках и условиях участия
  • Дети - знакомятся с программами смен, событиями и жизнью лагеря
Ценность для бизнеса
Редизайн позволил сделать цифровой путь пользователя к подаче заявки значительно короче, понятнее и визуально современнее. Обновлённый интерфейс стал более привлекательным для детей и подростков, что усилило эмоциональное вовлечение и интерес к лагерю. В результате чего, нам удалось бы повысить конверсию в подачу заявок и повысить эффективность привлечения участников
Моя роль
Как продуктовый дизайнер, я отвечал за исследование пользовательских сценариев, проектирование новой структуры сайта, разработку дизайн-системы и UI макетов, участие в юзабилити-тестах и передаче макетов разработчикам
Цели продукта (задача)
  • Редизайн сайта должен был решить проблему устаревшего интерфейса и сложной навигации, которая мешала пользователям быстро находить нужную информацию и переходить в внутреннюю систему АИС «Артек» для подачи заявок.
  • А также, редизайн сайта должен был укрепить формирование современного и привлекательного образа лагеря, сделав его современным, динамичным и визуально близким детям, что повышало бы узнаваемость бренда «Артек» среди подростков, сделав лагерь более конкурентоспособным на фоне других крупных ВДЦ
Как решал задачу
01. Постановка задачи
Провели встречу с заказчиком, где выяснили ключевые вопросы, на которые нужно ответить:
  • Какие основные бизнес-задачи сайта «Артек»?
  • Кто конкретно наши целевые пользователи и какие у них задачи?
  • Какие ограничения (технические, правовые, брендовые) влияют на решение?
  • Какие KPI будем считать успешными после релиза?
02. Исследование
Анализ текущего сайта
Провёл аудит существующего сайта «Артек»: изучил навигацию, структуру контента, точки входа в АИС и пользовательские сценарии.

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

А старый сайт выглядел примерно вот так:
Анализ конкурентов
Исследовал сайты крупных образовательных и детских центров (лагерей), чтобы понять, как они выстраивают взаимодействие с родителями и детьми.
Сравнительная таблица-анализ интерфейсов / структуры сайтов конкурентов
Общие выводы
  • Путь до заявки: У конкурентов видно множество программ и информации - но не всегда интуитивно понятно “что дальше” и “как подать”. Значит, для вас стоит сделать более простой пользовательский маршрут

  • Контент-баланс: Родители ценят безопасность и комфорт (инфраструктура, медицинское обеспечение), дети - эмоции, визуал, активность. Сайт должен говорить и тому, и тому

  • Логистика и доверие: Транспорт, стоимость, расписание смен - часто “скрытые” части. Чёткая информация повышает доверие, уменьшает барьеры

  • Цифровой путь и конверсия: Сайт конкурентов часто остаётся “показательным”, но не оптимизированным под онлайн-подачу и отслеживание
Глубинные интервью
Провёл глубинные интервью с двумя основными группами пользователей - детьми (10–16 лет) и их родителями
Ключевые инсайты:
  • Родители чувствуют неуверенность из-за громоздкости формы подачи документов и отсутствия понятной инструкции
  • Дети теряют интерес на этапе знакомства с программой лагеря из-за недостатка вовлекающего контента и визуальной атмосферы «Артека»
  • Обе группы хотят видеть единый, логичный путь - от вдохновения к действию (подаче заявки)
Формулировка болей и идей:
  • Низкая вовлечённость детей
  • Перегруженный путь для родителей
  • Отсутствие ясной связи между разделами «О лагере» и «Подача заявки»
Job stories
Применил метод Jobs To Be Done для обеих аудиторий:
  • Родитель: «Когда я подаю заявку, хочу быть уверен, что всё оформлено правильно и не потеряется, чтобы ребёнок точно получил шанс попасть в лагерь»
  • Ребёнок: «Когда я узнаю об “Артеке”, хочу увидеть, чем он уникален, чтобы убедить родителей отправить меня туда»
Ключевые продуктовые решения
03. Прототипирование
Структурные блоки
После этапа исследования, я приступил к разработке структуры для каждой страницы сайта. Каждая страница разрабатывалась на основе реальных пользовательских задач и болей, выявленных в интервью
Быстрые wireframes
Для визуализации структуры MVP-версии обновлённого сайта «Артека», мы подготовили быстрые черновые прототипы:
Отмечу, что на прототипах представлены только ключевые пользовательские страницы. Остальные второстепенные и преимущественно текстовые шаблонные разделы - такие как документация, правила заезда и выезда, нормы поведения на территории лагеря и другие информативные страницы - были реализованы на базе внутренней CMS. Благодаря единым шаблонам они имеют схожую структуру и визуальное оформление, поэтому не несут уникальной ценности с точки зрения дизайн-процесса. По этой причине я решил не включать их в портфолио
Главная
Хотелось бы чуть подробнее остановиться на работе над главной страницей. Именно на этом этапе у заказчика возникла идея снять маркетинговое видео для YouTube, в котором дети сами выбирают будущий дизайн сайта. Для реализации этого формата мы подготовили три альтернативных концепции главной страницы, из которых участники собрали один комбинированный вариант - своего рода «сборную» версию из понравившихся им блоков

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

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

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

  • Отслеживание влияния на MVP-объём
Мы заранее оценили потенциальные риски расширения объёма работ, но благодаря плотной коммуникации и быстрому прототипированию смогли удержать финальную версию в рамках запланированного функционала

Также отмечу: что при всём этом дополнительные согласования и переработка концепций не повлияли на общие сроки разработки. Мы встроили новые задачи в существующий процесс и скоординировали работу так, чтобы сохранить темп и качество итогового решения
04. Тестирование
Юзабилити-тестирование
После всех внесенных правок по главной и финального согласования прототипа с заказчиком, мы провели модерируемое юзабилити-тестирование всех прототипов. В исследовании участвовали 17 респондентов - это дети старшего школьного возраста и их родители, что позволило оценить удобство интерфейса сразу для двух ключевых аудиторий
Как это все происходило у нас:
  • Мы проводили модерируемые сессии в формате живого наблюдения
  • Каждый респондент выполнял типичные задачи (найти и выбрать подходящую программу, перейти к подаче заявки, разобраться, как попасть в АИС «Артек», выяснить информацию об условиях, сменах и правилах и тд)
  • Мы фиксировали поведение, комментарии и эмоциональные реакции участников
Что получилось хорошо:
  • Понятная логика основных сценариев
Большинство респондентов легко ориентировались в структуре прототипа, особенно в сценариях (выбор программы, поиск важной информации, переход в АИС). Пользователи отмечали, что новая архитектура «гораздо проще, чем на текущем сайте»

  • Чёткие и заметные CTA
СТА воспринимались очевидно и логично. Даже дети отмечали, что им понравилась наша идея со скроллом и анимацией в виде горы
Что требовало доработки:
  • Сложность понимания перехода в АИС у детей
Несмотря на улучшения, часть респондентов (дети) не понимали: что такое АИС, зачем туда переходить и что произойдёт после клика. Мы добавили объясняющий экран и визуальные подсказки, в следствии чего, путаница уменьшилась

  • Перегруженность некоторых блоков текстом
Родители просили упростить длинные описания, а дети - сделать страницы более «лёгкими» визуально. Мы переработали текстовые блоки и усилили визуальную иерархию
Основные выводы
По результатам тестирования мы:
  • Упростили переход в АИС и объяснили его в интерфейсе
  • Уучшили визуальную иерархию и читабельность блоков
  • Усилили навигационные элементы
  • Сократили длину текстов и переработали микрокопирайтинг
  • Уточнили пользовательские сценарии для обеих аудиторий
05. Подготовка к разработке

На финальном этапе мы перевели проект из стадии концептуального дизайна в полностью готовый к реализации пакет материалов

Финализация макетов и адаптивов
Мы завершили проработку всех экранов, включая основные страницы, внутренние шаблоны и мобильные адаптивы. Особое внимание уделили:
  • Консистентности элементов на разных разрешениях
  • Корректности поведения интерфейса в мобильных сценариях
  • Сохранению логики пользовательских потоков на всех устройствах
Каждый макет был финализирован с учётом результатов юзабилити-тестирования и требований заказчика
+30 страниц на базе CMS
Создание UI Kit и дизайн-системы
Чтобы упростить разработку и обеспечить стабильность визуального стиля, мы собрали полноценный UI Kit, включающий:
  • Цветовую палитру и типографику
  • Кнопки, формы, карточки, навигацию и прочие компоненты
  • Состояние элементов
  • Правила отступов и сетку
  • Рекомендации по использованию изображений и иконок
Передача в разработку и сопровождение
После подготовки всех материалов мы передали макеты на верстку и активно сопровождали процесс разработки.
Моя роль включала:
  • Регулярные ревью промежуточных сборок
  • Проверку соответствия верстки макетам
  • Совместное решение спорных решений вместе с разработчиками
  • Согласование всех изменений и улучшений с дизайн-лидом
  • Оперативную доработку отдельных элементов интерфейса при необходимости
Результаты
Редизайн позволил добиться значимых улучшений по ключевым целям бизнеса. По итогам анализа поведения пользователей и сравнения с предыдущей версией сайта были зафиксированы следующие результаты:

  • Рост конверсии переходов в АИС «Артек»
1) Конверсия перехода в АИС выросла на 25%
2) Время необходимое пользователю для выполнения этого действия, сократилось почти на треть

  • Улучшение понимания программы и структуры сайта
1) На 22% увеличилась глубина просмотров
2) Время, проведённое на странице программы, выросло на 15%
3) Пользователи стали реже возвращаться к предыдущим разделам (–12%), что говорит о более интуитивном пути навигации

  • Сокращение пользовательского пути
1) Путь «Главная → Программа → Подача заявки» стал короче на 2–3 шага
2) Время выполнения типового сценария сократилось на 28% у родителей и на 34% у детей
Made on
Tilda