Разработка сайта со стильной айдентикой, презентацией услуг и онлайн-покупкой клубных карт
О заказчике
«Лазурный» — это масштабный спортивный комплекс с пятидесятиметровым бассейном олимпийского стандарта в Кемерове. Также пространство центра включает фитнес-зал, тренажерный зал, турецкий хамам, финскую сауну.
В 2019 году «Лазурный» закрылся на реконструкцию, во время которой было отремонтировано здание и все его помещения. Обновился инвентарь, оборудование, улучшены характеристики бассейна и общий интерьер комплекса. Ремонт стал большим событием — так как аналогов бассейна в городе нет, кемеровчане с нетерпением ждали его открытия.
Вместе с внешней трансформацией изменилась и общая концепция — теперь в центре действует клубный формат, как в федеральных спортивных сетях премиум-класса. Управляющие провели полноценный ребрендинг, чтобы представить городу новый комплекс — современный, комфортный и стильный.
Предстояло разработать сайт, демонстрирующий трансформацию комплекса и его новую концепцию, которая отражается как в визуальной составляющей бренда, так и в его внутренних процессах.
Задачи проекта
- презентация услуг комплекса
- разработка стильного дизайна сайта в рамках общего ребрендинга
- демонстрация обновленного пространства комплекса
- реализация покупки клубных карт онлайн через личный кабинет
Волна — основа дизайн-концепции
При разработке мы использовали брендбук спортивного комплекса с системой визуального стиля, которая помогает донести ценности бренда и наладить коммуникацию с аудиторией.
Главное преимущество спортивного комплекса «Лазурный» — это огромный спортивный бассейн. Поэтому в основе концепции лежит простой и понятный каждому образ волны.
Фирменная палитра включает пять цветов: темно-синий, синий, голубой, приглушенный желто-зеленый и малиновый.
Фирменный стиль был применен при разработке сайта, дизайна визиток, мерча, интерьера и других артефактов, требующих визуального оформления.
Ненавязчивая и лаконичная анимация
Разработанную айдентику мы внедрили в дизайн сайта, придерживаясь минималистичности и развивая ассоциацию с волной и водой.
Волна активна — она всегда находится в движении, и в продолжение этой идеи мы применили анимацию, которая оживляет сайт и создает дополнительные ассоциации с активностью в бассейне. Например, на фоне первого экрана главной страницы мы изобразили воду с переливающимся светом на плавательной дорожке.
Анимированные элементы дизайна являются визуальной подсказкой, которая помогает пользователю ориентироваться на сайте. Мы сделали анимацию ненавязчивой и лаконичной, чтобы она не отвлекала пользователей от целевого действия и при этом создавала дополнительные образы и положительные впечатления от визуала.
Мы анимировали кнопки, фотографии тренеров, ссылки, блоки и другие элементы. При наведении курсора на них, можно увидеть движение, изменение цвета, появления тени или изображения.
Презентация услуг
Сразу на первом экране главной страницы мы вовлекаем пользователя в изучение наиболее востребованных услуг комплекса. Так как бассейн является флагманским продуктом, мы визуально выделили его среди других направлений.
При нажатии на кнопку пользователь попадает на страницу выбранной услуги. На ней размещена информация:
- о локации и ее оборудовании
- о спортивном направлении и его эффективности
- фотографии пространства, в котором проходят тренировки
- правила и график посещения
Полезный блок «Что взять с собой», который помогает клиенту сориентироваться, как собрать сумку на тренировку.
В конце страницы предлагаем ознакомиться с другими услугами центра или по кнопке «Купить» перейти к оформлению клубной карты.
Также информацию об услугах можно найти, перейдя в соответствующий раздел навигации, которая расположена в верхней части сайта.
Знакомство с тренером
В «Лазурном» предусмотрено как свободное посещение бассейна и тренажерного зала, так и групповые и индивидуальные тренировки. Чтобы клиенты могли заочно познакомиться с тренером и выбрать преподавателя для себя или ребенка, мы разработали раздел «Команда». Фильтрация позволяет сегментировать сотрудников комплекса по нужному направлению.
Пространство
Так как центру важно рассказать о новом ремонте, оснащении и стильном интерьере, мы посвятили этому отдельный раздел «Пространство». В галереях пользователи могут ознакомиться с фотографиями локаций и почитать об их модернизации.
Покупка клубной карты
Узнать стоимость занятий и оформить клубную карту пользователь может в разделе «Цены и акции». В блоках размещены предложения с различными комбинациями услуг.
При нажатии разворачивается подробная информация о клубной карте. Внутри — кнопки, которые предлагают завершить покупку и направляют в личный кабинет для оплаты или оформления рассрочки. В личном кабинете реализована интеграция с 1С, которая в том числе используется для вывода расписания в соответствующем разделе.
Быстрый доступ к разделу с клубными картами обеспечивается через кнопку «Купить» — она выделена салатовым цветом и всегда находится в поле зрения пользователя, чтобы он мог в любой момент перейти к покупке.
Версия для слабовидящих
В рамках проекта разработана версия для слабовидящих, чтобы все посетители «Лазурного» могли ознакомиться с услугами и приобрести клубную карту.
Итоги проекта:
- Создан сайт, дизайн которого соответствует общей визуальной концепции бренда
- Новый сайт в удобном формате презентует услуги комплекса — структура сайта и визуальное оформление помогают пользователю быстро найти интересующую его информацию
- Реализована онлайн-покупка клубных карт
- Разработана версия сайта для слабовидящих
Новый сайт демонстрирует изменения, которые произошли в «Лазурном» после ремонта, отражает образ современного и комфортного спортивного комплекса, помогает пользователям узнать о его услугах и оформить клубную карту. Что немаловажно, сайт очень управляемый со стороны заказчика — практически каждый элемент можно редактировать из административной панели.
Мария Серафимова, менеджер проекта