Кто приезжает
Школьники со всего края, от 6 до 18 лет. Кроме самих смен есть конкурсы, олимпиады и профессиональные пробы.
Созвездие
Краевой детский центр
Редизайн сайта детского центра «Созвездие»: личный кабинет и онлайн-бронирование. Кейс АНИТ
- Клиент
- КДЦ «Созвездие», Хабаровский край
- Задача
- Редизайн сайта, кабинет, бронирование
- Тип сайта
- Корпоративный сайт с личным кабинетом
- Тип проекта
- Индивидуальная разработка под ключ
- Стек
- 1С-Битрикс, PHP, HTML, CSS, JavaScript
- Сайт
- new.kdcsozvezdie.ru
01О клиенте
Краевой детский центр «Созвездие»
Государственное учреждение Хабаровского края. Центр вырос из пионерского лагеря имени Гагарина под Переяславкой, а с 2001 года работает самостоятельно: тематические смены, своя школа вожатых, лицензии на образовательную и медицинскую деятельность.
Госстатус требует от сайта того, чего не требуют от коммерческого: «Сведения об образовательной организации», температурный режим по корпусам, версия для слабовидящих. Плюс персональные данные детей, которые нельзя выносить за пределы учреждения.
Где это
Загородные дружины в районе имени Лазо, на берегу Кии, и морская «Азимут». Административный корпус и отдел путёвок в Хабаровске.
Масштаб
Больше 5000 детей в год: смены идут круглый год, летний поток тут не единственный. В штате педагоги, вожатые, психологи и тренеры.
02Цели и задачи
На старом сайте путь родителя обрывался на полпути
kdcsozvezdie.ru до редизайна. Сайт работал, но почти всё, ради чего родитель на него заходил, лежало где-то ещё.
Проблемы
- Личного кабинета нет: статус путёвки и документы родитель узнавал у менеджера
- Бронирование на отдельном поддомене: путь обрывался на середине
- Вёрстка неадаптивная: с телефона страницу приходилось растягивать пальцами
- Навигация сложная: нужный раздел приходилось искать
Задача проекта
Собрать сайт вокруг того, зачем на него заходят: выбрать смену, забронировать путёвку, прочитать программу, посмотреть, кто работает с детьми, найти ответ на свой вопрос.
Вторая половина задачи — то, что учреждение публикует по закону: сведения об организации, версия для слабовидящих, защита данных детей.
03Аналитика и сценарии
С чего начинается проект: аудитории, сценарии, структура
Любой проект мы начинаем с аналитики, и «Созвездие» не исключение. Разобрали, кто приходит на сайт и за чем, собрали обратную связь родителей и сотрудников центра, разложили их путь по шагам, разобрали текущий сайт и сравнили с решениями в этой и смежных сферах. Из этого выросли структура разделов, логика бронирования и приоритеты: что нужно сразу, а что может подождать.
Целевая аудитория
- Родители — бронирование, документы
- Вожатые — вакансии, обучение
- Дети — проекты, мероприятия
Родитель приходит за сменой
Главный сценарий: подобрать смену по возрасту, датам и тематике. Под него сделан отдельный каталог, а всё нужное для выбора вынесено на карточку.
Телефон — основной экран
Родитель выбирает лагерь с телефона, к компьютеру за этим садятся редко. Поэтому мобильные раскладки рисовали параллельно с десктопными, а не подгоняли после.
Вопросы повторяются
Про документы и порядок заезда менеджеров спрашивают снова и снова. Мы собрали ответы в FAQ по категориям и продублировали их внутри кабинета.
Вожатые — отдельная аудитория
У них свои задачи: набор, обучение, материалы. В родительских разделах это мешало бы и тем и другим, поэтому вожатым сделали отдельный вход.
Путёвку оформляют там же, где выбрали смену, без перехода на сторонний сервис.
В кабинете родитель ведёт документы сам: скачивает, подписывает, загружает обратно.
Бронирование уложили в три шага: смена, условия и документы, данные ребёнка.
Этапы работы
Анализ
- Разбор старого сайта
- Сценарии аудиторий
- Структура разделов
Дизайн
- Прототипы экранов
- Логика бронирования
- Мобильные раскладки
Разработка
- Дизайн-система
- Вёрстка и разработка
- Интеграция кабинета
Запуск
- Тестирование
- Публикация
- Запуск сервиса
Путь родителя
Поиск
Поисковик, рекомендации, соцсети
Изучение сайта
Программы, дружины, фото
Выбор смены
Даты, возраст, направленность
Регистрация
Аккаунт, данные ребёнка
Бронирование
Условия, документы
04Карта сайта
Пятнадцать типов страниц вместо одного шаблона
Сведения об организации, пресс-центр, каталог смен, личный кабинет: у каждого своя логика и свой шаблон. Таблице с температурой по корпусам и карточке смены с кнопкой брони нужна разная вёрстка.
Обязательное и справочное
- О нас
- Сведения об образовательной организации
- Состав организации
- Мероприятия и дружины
- Температурный режим
- Вакансии
Что публикует центр
- Пресс-центр · Новости
- Пресс-центр · Статьи
- Ресурсный центр
- Ответы на вопросы
- Родителям
Что можно сделать на сайте
- Личный кабинет
- Онлайн-бронирование
- Контакты
- Детское объединение «Я — вожатый»
05UI/UX
Одна дизайн-система на весь сайт
#1F3463
#F4C200
#F0F1F2
#E5EBF0
AaManrope
H1 — Заголовок
H2 — Заголовок
H3 — Заголовок
H4 — Заголовок
H5 — Заголовок
Кнопки и состояния
Забронировать Забронировать — при наведении Задать вопрос Задать вопрос — при наведении Все вопросы Все вопросы — при наведении Акции Акции — при наведении
Иконки кабинета
Поля: из входа в кабинет и из формы вопроса
Пароль Заполните поле Имя +7 (___) ___-__-__ Ваш вопрос Отправить
Меню на планшете
Ширина 768px: в шапке остаются логотип, три иконки и «Бронирование», вся навигация уходит под кнопку слева. Меню открывается на весь экран: 12 разделов, у шести из них второй уровень. Сценарий проигрывается сам, пока вы листаете страницу.
06Главная
С главной видно всё, за чем сюда приходят
Родитель, вожатый и ребёнок ищут на сайте разное. Поэтому четыре самых частых раздела вынесены плитками сразу под баннер, а кнопка бронирования стоит в шапке и не уезжает при прокрутке.
07Смены
Подходит ли смена ребёнку, видно из карточки
Возраст участников, сроки, дружина и направленность вынесены на саму карточку. Родителю не нужно открывать каждую программу, чтобы понять, что «8–10, 11–12» — это не про его четырнадцатилетнего.
08Личный кабинет
Бронь за три шага — там же, где документы
Родитель входит по почте и паролю, дальше делает всё сам: смотрит статус брони, скачивает договор, загружает подписанный обратно. Раньше за каждым из этих шагов звонили менеджеру.
Слева в кабинете постоянное меню со всеми разделами
Как проходит бронирование
09Вход и регистрация
Родитель входит в кабинет с почты и пароля
Авторизация и регистрация живут в одном окне, двумя вкладками. Полей минимум, восстановление пароля тут же, под формой.
10Проекты
Проекты центра больше не теряются в новостной ленте
У викторины свой движок с таймером и проверкой ответов, у «Людей „Созвездия“» — карточки с профилями. Каждый проект получил постоянный адрес, по которому его найдут и через год.
Онлайн-викторины
Интерактивные тесты и конкурсы для участников: прогресс по вопросам, таймер и мгновенная проверка ответов.
Люди «Созвездия»
Истории участников, вожатых и педагогов: карточки людей и подробный профиль. На скриншоте открыта одна из внутренних рубрик, «Человек „Созвездия“».
В разделе также: Медиацентр, «Аллея звёзд», «Фирменный стиль» и «Открытие года».
11О центре
Раздел «О нас»: то, что обычно выясняют звонком
Часть страниц здесь учреждение обязано публиковать. Мы всё равно делали их читаемыми, а не «чтобы было». Отсюда же, из шапки, включается версия для слабовидящих: она работает на любой странице сайта, а не только на главной.
Температурный режим
Обязательная для госучреждения страница: фактическая и допустимая температура по каждому помещению, отдельной таблицей на корпус.
12Пресс-центр и сервисы
Пресс-центр: новости, статьи и ответы на вопросы
Центр пишет о сменах, конкурсах и жизни дружин, и пишет постоянно. Под этот поток сделан отдельный раздел с переключателем категорий, лентой и страницами статей.
Лента новостей
Четыре раздела в одной ленте: новости, блог, печатные издания, видеодайджест. У каждой карточки категория, дата и счётчик просмотров. На десктопе слева стоит навигация по категориям, на телефоне она сворачивается в чипы над лентой.
Страница новости
В боковой колонке дата, шеринг в соцсети и счётчик реакций, оттуда же возврат к списку и форма вопроса. Под текстом фотогалерея со смены.
Ответы на вопросы
Частые вопросы сгруппированы по темам: путёвки, питание, смены. Те же ответы продублированы внутри кабинета, чтобы родитель не искал их на публичной части.
13Адаптивность
Три раскладки на каждый экран сайта
Каждый экран сайта рисовался сразу в трёх ширинах. Показана главная, все три кадра сняты от шапки. На планшете полное меню сворачивается в бургер, а четыре плитки быстрых разделов встают в два ряда. На смартфоне из шапки уходит «Бронирование», баннер перестраивается вертикально (фото сверху, текст под ним), плитки и лента новостей листаются вбок.
14Итоги
Сайт, кабинет и бронирование теперь одна система
Всё собрано на 1С-Битрикс и работает на боевом домене. Возвращаемся к четырём проблемам из начала кейса и смотрим, что стало с каждой.
Бронирование вернулось на сайт
Было: за бронью человек уходил на отдельный поддомен. Стало: карточка смены → «Забронировать» → вход → кабинет, весь путь на основном домене. Старая система на поддомене пока работает параллельно.
Документы — без звонка менеджеру
Было: личного кабинета нет. Стало: закрытый раздел, где родитель сам ведёт брони, путёвки и документы к ним.
Одна система вместо разнобоя
Было: устаревший неадаптивный дизайн. Стало: единая дизайн-система, кнопки, поля и карточки собраны из общего кита.
Телефон — полноценный вход
Было: слабая мобильная версия. Стало: три брейкпоинта, каталог и кабинет одинаково рабочие с телефона.
Соберём такой же сайт для вашего центра
Спроектируем структуру, нарисуем дизайн-систему и соберём на 1С-Битрикс. Публичная часть, кабинет и бронирование останутся в одной системе: один домен, одна админка, один вход для родителя. Расскажите про свой проект, вернёмся с объёмом работ и сроками.