DRIVE UNIVERSITY
КОММЕРЧЕСКИй проект
Компания-заказчик
Цель проекта
боли клиентов
что было сделано при создании проекта
КТО?
ЧТО?
ПОЧЕМУ?
КАК?
DRIVE FITNESS
Разработка макета информационного лендинга
для фитнес-университета
для фитнес-университета
Компания провела ребрендинг и теперь необходимо обновить стилистику сайта университета,
чтобы он соответствовал не только основному сайту сети фитнес залов,
но и поддерживал целостность визуального оформления всех социальных сетей
чтобы он соответствовал не только основному сайту сети фитнес залов,
но и поддерживал целостность визуального оформления всех социальных сетей
О компании
«Drive Fitness» это сеть фитнес-клубов, осуществляющая свою деятельность в Екатеринбурге, Перми и Тюмени.
Сеть выделяется своим отношением к клиентам, а также высоким уровнем сервиса как непосредственно в клубах, так и при решении вопросов по телефону и онлайн.
Драйв – это люди, эмоции, цели, результаты, победы, образ жизни. Для каждого Драйв свой. И это круто! (с)
Сеть выделяется своим отношением к клиентам, а также высоким уровнем сервиса как непосредственно в клубах, так и при решении вопросов по телефону и онлайн.
Драйв – это люди, эмоции, цели, результаты, победы, образ жизни. Для каждого Драйв свой. И это круто! (с)
Цель данного проекта — создать дизайн-концепцию информационного лендинга для привлечения новых клиентов на программы обучения и семинары для тренеров и других специалистов сферы фитнеса, где у них будет возможность:
— Ознакомиться с ближайшими мероприятиями по обучению
— Отправить свою заявку на обучение
— Ознакомиться с компанией не только со стороны популярного фитнес-клуба, но и как обучающей инстанцией
— Ознакомиться с необходимой документацией
— Ознакомиться с ближайшими мероприятиями по обучению
— Отправить свою заявку на обучение
— Ознакомиться с компанией не только со стороны популярного фитнес-клуба, но и как обучающей инстанцией
— Ознакомиться с необходимой документацией
Проблемы
1
устаревший образ компании
Компания провела ребрендинг,
а на текущем сайте была использована устаревшая визуальная концепция
а на текущем сайте была использована устаревшая визуальная концепция
2
Большое количество информации
Из-за большого количества обучающих программ, семинаров и мероприятий, сайт перегружен информацией без иерархии и структуры
3
Сайт перегружен дизайном
Много ярких объектов и форм, которые отвлекают внимание от основного информационного содержания сайта
— Какие основные задачи данного проекта?
— Главная задача — сделать сайт не только красивым и соответствующим новому стилю, но и удобным для восприятия. Информацию необходимо структурировать и разделить по блокам, дополнительную информацию убрать в модальные окна. Убрать старый акцентный красный цвет и сделать ориентир на новый визуал для данного направления работы компании.
— Какие существуют ограничения по проекту?
— Сайт должен быть выдержан в стилистике бренд-бука компании. Сайт должен быть построен на стандартных блоках Tilda.
ЭТАП 1
исследование
Несмотря на то, что по техническому заданию заранее оговорены необходимые блоки и их содержание, необходимо определить, как привлечь внимание
и заложить фундамент высокой конверсии сайта, для этого необходимо изучить целевую аудиторию данного проекта
и заложить фундамент высокой конверсии сайта, для этого необходимо изучить целевую аудиторию данного проекта
Целевая аудитория
Основная целевая аудитория это люди от 25 до 40 лет, которые увлечены спортом, фитнесом, тематикой здорового образа жизни. Люди начинают интересоваться темой обучения, когда точно решили начать заниматься, нужно чтобы сайт транслировал именно необходимую им информацию.
Поскольку сложно выделить из всей целевой аудитории какие-то конкретные персоны, при создании концепции я решила использовать метод Jobs To Be Done, поскольку он позволит более глубоко погрузиться в тему и понять, что необходимо нашему потенциальному клиенту, что для него важно.
JOBS TO BE DONE
Выводы
— Сайт должен быть максимально привязан к основному стилю бренда и быть узнаваемым, поскольку это повышает лояльность и доверие клиентов к университету
— Вся важная информация должна быть доступна на первых двух экранах и быть изложена лаконично и кратко, визуально понятно, чтобы клиент мог быстро её считать
— В описаниях программ и семинаров важно сразу установить сроки обучения, рассказать о выпускных документах и преподавателях
— Также важно рассказать о преподавателях, их достижениях, предоставить фото, чтобы также повысить доверие потенциальных клиентов
— Меньше объёмных текстов на самом лендинге, больше кратких описаний и изображений
— Вся важная информация должна быть доступна на первых двух экранах и быть изложена лаконично и кратко, визуально понятно, чтобы клиент мог быстро её считать
— В описаниях программ и семинаров важно сразу установить сроки обучения, рассказать о выпускных документах и преподавателях
— Также важно рассказать о преподавателях, их достижениях, предоставить фото, чтобы также повысить доверие потенциальных клиентов
— Меньше объёмных текстов на самом лендинге, больше кратких описаний и изображений
бенчмаркинг
Несмотря на то, что бренд Drive Fitness локально достаточно известный, в данном проекте в качестве основных конкурентов я не стала брать другие фитнес-клубы, поскольку уровень клуба не говорит об уровне преподавания.
В процессе исследования было выявлено, что все основные конкуренты имеют не лендинг,
а полноценные сайты с большим количеством информации, зачастую перегруженные,
поэтому моя задача выделить самые лучшие идеи и применить их на сайте университета,
не утяжеляя его информационно и визуально.
а полноценные сайты с большим количеством информации, зачастую перегруженные,
поэтому моя задача выделить самые лучшие идеи и применить их на сайте университета,
не утяжеляя его информационно и визуально.
Большое количество информации в данном вопросе является необходимым аспектом,
но для удобства и эстетичности необходимо структурировать тексты и обозначить чёткую иерархию, чтобы у клиента не возникало путаницы и усталости в процессе просмотра сайта.
но для удобства и эстетичности необходимо структурировать тексты и обозначить чёткую иерархию, чтобы у клиента не возникало путаницы и усталости в процессе просмотра сайта.
Основными конкурентами «Drive University» являются такие же фитнес-университеты, поэтому я проводила анализ среди компаний, которые проводят именно очное обучение.
выводы по исследованию
Основная целевая аудитория это люди от 25 до 40 лет, которые увлечены спортом, фитнесом, тематикой здорового образа жизни. Люди начинают интересоваться темой обучения, когда точно решили начать заниматься, нужно чтобы сайт транслировал именно необходимую им информацию.
Весь визуал должен соответствовать бренд-буку компании и цветовому решению направления.
Пожелание от клиента — сделать первый экран имиджевым, поэтому он будет перекликаться с первым экраном основного сайта, с крупным лого и фирменными пиктограммами. Также важно рассказать о ближайших мероприятиях и дать возможность перейти на форму записи, чтобы клиент не тратил много времени на поиск.
Небольшой текстовый блок о компании с мотивирующим изображением, который не будет перегружать страницу текстом, но при этом даст представление о компании и покажет tone-of-voice бренда.
Для того, чтобы пользователь мог сразу иметь представление о количестве семинаров и программ, решено сделать слайдеры с карточками с названием, кратким описанием, сроками образовательных единиц. Во-первых, это не перегружает экран и задает определенную организованность всей стилистике, во-вторых, это позволяет ознакомиться со всеми программами, не дела страницу огромным полотном (эта проблема была на старой версии сайта). Вся основная информация о мероприятии будет размещена в модальном окне с понятной иерархией.
Для того, чтобы повысить доверие и лояльность, будут размещены отзывы с фотографиями с учебных мероприятий, а также ссылками на профили людей в социальных сетях, чтобы потенциальные клиенты могли убедиться в их реальности.
Для поддержания стилистики бренда, будут использованы фирменные пиктограммы, а также краткие описания преимуществ, которые говорят сами за себя.
Блок будет сделан по принципу блоков с программами и семинарами, с фото людей и подробным описанием их заслуг и деятельности в модальном окне, чтобы не перегружать клиента информацией.
Стандартный, но необходимый блок в виде аккордеона, который позволит человеку найти ответы на свои вопросы, не обращаясь при этом никуда больше и не уходя с сайта. Также будет добавлен небольшой блок с возможностью задать дополнительные вопросы с помощью формы обратной связи, если все-таки не все вопросы были решены.
Для того, чтобы клиент понимал, какие в итоге документы и какого образца он получит по завершению обучения.
Обеспечит возможность записаться на курсы, ответить на какие-то дополнительные вопросы. Будет содержать минимальное количество данных для связи, чтобы не пугать клиента огромной анкетой для решения маленького вопроса.
Блок с картой и реквизитами, которые также будут спрятаны в модальное окно для удобства пользователя.
ЭТАП 2
wireframes
Поскольку изначальное требование клиента — это создать сайт, который можно будет легко сверстать на стандартных блоках Тильда, то прототип и дизайн-макет разрабатывается только для версии сайта для компьютеров.
Первый экран лендинга имиджевый — название бренда говорит само за себя, изображение позади будет отражать суть сайта, а также перекликаться с основным сайтом компании, за счёт использования пиктограмм.
Небольшой информационный блок об университете не будет слишком акцентным и перегруженным — немного текста и мотивирующая картинка, чтобы не отвлекать.
Также на первом экране будет располагаться информация о ближайших мероприятиях с возможностью оставить заявку для записи на них. Акцент сделан именно на дате, а не на содержании мероприятия, поскольку заинтересованному человеку важно именно расписание, о сути и содержании он осведомлён.
Расписание семинаров и программ представлено в виде горизонтального слайдера — он позволяет вместить достаточно большое количество мероприятий
и при этом не перегружать страницу, превращая
ее в длинное полотно.
и при этом не перегружать страницу, превращая
ее в длинное полотно.
На карточке только самая важная информация. Если клиент заинтересуется, то по нажатию на кнопку подробнее увидит модальное окно с подробной информацией о мероприятии.
Отзывы также представлены на горизонтальном слайдере, чтобы обозначить наличие реальных отзывов, но при этом не показывать их все и сразу. Если человеку будет интересно, то он просто пролистает и почитает несколько. Важно было разместить сюда не только отзыв, но и поток, название курса, который проходил человек, поскольку это отражает достоверность.
Поскольку весь сайт для упорядоченности построен
на карточном дизайне, то и преимущества визуально поддерживают эту идею. В качестве акцента и привязки
к стилю бренда будут использованы фирменные пиктограммы, а для лаконичности — крупный заголовок
и небольшое описание.
на карточном дизайне, то и преимущества визуально поддерживают эту идею. В качестве акцента и привязки
к стилю бренда будут использованы фирменные пиктограммы, а для лаконичности — крупный заголовок
и небольшое описание.
Блок о преподавателях построен по аналогии с расписанием семинаров и программ — пользователь уже видел этот блок ранее, позволяет скрывать большое количество информации.
В процессе работы над сайтом было принято решение сделать одну дополнительную страницу для лендинга — это страницу со сведениями об образовательной организации. У университета достаточно много важных документов, которые обязательно должны быть размещены онлайн, но перегружать сайт, на котором транслируется только нужная для записи на курсы информация, официальными бумагами неправильно.
Все документы было решено вынести на отдельную страницу и с помощью аккордеона структурировать
их по содержанию.
Все документы было решено вынести на отдельную страницу и с помощью аккордеона структурировать
их по содержанию.
Блок с вопросами в виде аккордеона — это уже определённый паттерн, поэтому пользователь сразу визуально сможет понять, что к чему. Также это удобно, сразу помогает понять, есть ли здесь вопрос, который появился у человека.
Если же всё-таки остались какие-то вопросы,
то для повышения лояльности и доверия к бренду ниже представлена ссылка на форму обратной связи,
чтобы клиент был уверен в том, что его хотят услышать
и хотят ему помочь.
Если же всё-таки остались какие-то вопросы,
то для повышения лояльности и доверия к бренду ниже представлена ссылка на форму обратной связи,
чтобы клиент был уверен в том, что его хотят услышать
и хотят ему помочь.
ЭТАП 3
ui-KIT
Работа велась в условиях бренд-бука компании, поэтому все цветовые и шрифтовые решения соответствуют новой
концепции бренда
концепции бренда
ЭТАП 4
ДИЗАЙН-макет
Для того, чтобы вся информация была максимально структурирована и удобна для восприятия, подробные описания программ, семинаров, а также данные преподавателей было решено раскрывать в модальных окнах.
Также в процессы согласования прототипа было решено поменять местами блок контактной информации и заявки.
Также в процессы согласования прототипа было решено поменять местами блок контактной информации и заявки.
Также в процессе работы с заказчиком было решено вынести сведения об образовательной деятельности на отдельную страницу, поскольку данный блок содержит достаточно большое количество специфической информации, которая могла перегрузить лендинг. Все информация разделена на блоки, ссылки на документы прикреплены в каждом разделе.
