Образовательный E-Commerce проект в индустрии красоты — сайт Международной академии KEUNE

Главное о кейсе

Сайт был запущен в конце июля 2020 года. За этот период его посетили более 35 тысяч пользователей. Курсами онлайн, согласно системам статистики, заинтересовались более 2 000 посетителей (свыше 5 000 достижений цели по оформлению заказа.

Сайт был высоко оценен со стороны Заказчика и голландских партнёров Академии.

Бизнес-задача и ее решение

В результате сайт Международной академии KEUNE DESIGN выглядит современно, стильно и обладает обширным функционалом. Внушает доверие, привлекает потенциальных клиентов ― будущих и действующих специалистов индустрии моды и красоты, желающих повысить профессиональный уровень, получить опыт работы с ведущими стилистами и дизайнерами из России и из-за рубежа, найти более высокооплачиваемую работу.

Прочая информация о кейсе

Международная академия KEUNE DESIGN объединяет академию парикмахерского искусства, центр подготовки и развития администраторов салонов, курсы менеджмента в индустрии красоты и авторские программы сертификации от компании KEUNE HAIRCOSMETICS из Нидерландов. KEUNE HAIRCOSMETICS — мировой лидер в производстве профессиональной косметики для волос, представленный в 70 странах мира: Европе, США, Канаде, Австралии, России и странах Азии.

Разработка интернет-магазина в образовательной сфере

Сайт Академии KEUNE ― полнофункциональный E-Commerce проект, где в роли товаров выступают авторские образовательные программы как для начинающих специалистов и администраторов индустрии красоты, так и профессионалов, повышающих квалификацию.

Сайт выполнен как интернет-магазин на CMS 1C-Битрикс с индивидуальной сборкой, где товары ― это обучающие курсы Академии, с фильтрацией по профессии, специализации, квалификации, групповым или индивидуальным курсам и пр. Корзина интернет-магазина доработана под специфику продуктов ― и с ними можно поступать в точности как с товарами: отказаться от покупки и вернуть заказ, поместить в избранное, приобрести комплект, воспользоваться скидкой, показать историю заказов и пр.

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

Для корректной работы всех систем сайта потребовалась «ручная сборка» интеграций с 1С УТ11 и платформой для онлайн-обучения GetCourse. Личный кабинет пользователя (обучающегося) на сайте интегрирован с его аккаунтом на GetCourse для двустороннего обмена данными. В результате в личном кабинете на сайте Академии легко отслеживать динамику обучения, накапливать и тратить бонусные баллы, применять личную скидку, получать рекомендации по учебному плану и прочее. При этом в аккаунт GetCourse оперативно поступают данные с сайта — если студенту удобнее работать с курсами на платформе.

Интеграция с 1С также настроена для двустороннего обмена данными о текущем заказе, истории покупок, оплате, программе лояльности, скидкам ― и возможности аннулировать заказ, работать с корзиной по привычному сценарию интернет-магазина.

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

Компонент календаря, разработанный для сайта Академии KEUNE, позволяет интуитивно понятно отображать всё многообразие курсов любой продолжительности, всех уровней подготовки, по разным дисциплинам, которые могут идти одновременно. Причем некоторые программы в Академии междисциплинарные, и разделение по профессиональным сферам не всегда актуально. Для большей наглядности в каталоге курсов и календаре при переходе из раздела в раздел меняется цвет карточек, что упрощает навигацию.

Поиск учитывает 6 характеристик каждого курса: цена, даты начала и окончания, продолжительность с привязкой к календарю, преподаватель, город, формат. Искать можно по разделам, продолжительности и другим характеристикам ― разные варианты фильтрации и отображения контента помогают каждому пользователю выбрать удобный формат представления данных, находить информацию различными способами.

Дизайн сайта Международной академии KEUNE

Особую роль в проекте играет дизайн: для индустрии красоты и моды важен внешний вид сайта, понимание трендов. Для Академии KEUNE в Digital-агентстве VediTa разработали бренд и всю айдентику, выполнили индивидуальный дизайн сайта.

При создании бренда за основу взяли элементы фирменного стиля KEUNE HAIRCOSMETICS и в едином стиле с ними создали логотип Академии, разработали руководство по использованию айдентики на 16 листах (гайдлайн). В гайдлайне максимально подробно прописаны правила использования элементов фирменного стиля: логотипа, цветовой палитры, типографики, UX/UI элементов и т.д.

В основу дизайна сайта Международной академии KEUNE DESIGN заложены большие качественные фотографии. Они лучше слов рассказывают о профессионализме преподавателей, уровне обучения студентов, внимании к деталям, понимании тенденций индустрии моды и красоты.

Сложная задача собрать и визуально организовать фотографии с подиумов и конкурсов, обучающие материалы, технические детали для администраторов и менеджеров решена за счёт облегчённой модульной сетки сайта. Акцентные фотографии и сдержанный минимализм текстовых блоков формируют впечатление эксклюзивного сервиса, профессионализма и принадлежности к миру высокой моды.

Вёрстка, наполнение и структура сайта

Для Международной академии KEUNE DESIGN важно сохранить лёгкую для восприятия структуру сайта при всём многообразии материалов: организационных документов, правил внутреннего распорядка, обучающих и справочных материалов, расписаний, анонсов мероприятий и пр.

Целевая аудитория сайта — как новички отрасли, так и профессионалы индустрии красоты, администраторы и менеджеры салонов, модели, партнёры, организаторы модных съёмок, показов и т.д. Часть информации по типам аудитории помещена в специальные разделы (управляющим, моделям, партнёрам), вынесены блоки акций, отзывов, блог, раздел с новостями, FAQ (ответы на часто задаваемые вопросы).

Вёрстка по индивидуально разработанной модульной сетке позволяет размещать колоссальный объём информации без увеличения времени загрузки и ощущения перегруженности информацией. Обширный список учебных программ, обычно размещаемых последовательно и линейно (лонгридом), компактно свёрстан в виде горизонтального слайдера, либо показывается на специально разработанной календарной сетке.

Заглавный слайдер позволяет загружать картинки любого размера в высоком разрешении мгновенно и без ухудшения качества фотографии. Чтобы добиться такого эффекта, в слайдере используется встроенная технология lazy load, вместо того чтобы отдельно настраивать и загружать дополнительный скрипт с аналогичной функцией. В результате уменьшается время загрузки, а картинка появляется на странице сразу в готовом виде.

Особого внимания заслуживает адаптивный дизайн: изменения масштаба и перекомпоновка элементов на 6 разрешениях экрана (1920*1200, 1440*1050, 1280*800, 1024*768 (и 768*1024), 575*960, 320*480). При изменении разрешения экрана размер текстовых блоков и иллюстраций меняется соразмерно, без потери качества изображений, читабельности текстов и навигационных элементов, благодаря специально разработанным для сайта скриптам.

К примеру, в информационных блоках с иллюстрациями используется скрипт, благодаря которому не текст подгоняется под размер блока картинки, как это делается обычно, а видимая часть фотографии изменяется под нужный объём контента. Так на одном из скриншотов видно, что фотография модели кадрируется то по пояс, то по линии бёдер в зависимости от количества текста при меняющемся масштабе контентного блока при изменении разрешения экрана.

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

Текущая доступность работы

Сайт клиент наполняет самостоятельно, в кейсе представлен скрин сайта подготовленного к запуску

Скриншоты