Кейс по редизайну сайта | Сделал вокальную студию "Нота За Нотой" настоящим хитом
Месяц назад ко мне обратились за редизайном сайта для вокальной студии «Нота За Нотой». В этом кейсе я подробно расскажу об этапах разработки сайта и поделюсь своими впечатлениями от данного проекта. С какими сложностями мы сталкивались, какие решения находили с клиентом. Обо всём этом читайте далее в статье.
О клиенте
Вокальная студия «Нота За Нотой» предоставляет уроки вокала для детей и взрослых. Есть офлайн и онлайн форматы работы. Основатель студии имеет более 13 лет вокальной практики, обучил более 120 учеников и имеет 8 лет опыта преподавания.
Проблемы старого сайта
Перед началом работы над редизайном я провёл аудит текущего сайта. Он состоял из следующих страниц: главная страница сайта с услугами, страница блога, страницы под статьи и страница с выступлениями. Для проведения аудита я проанализировал Яндекс.Метрику, Google Analytics и сам сайт на различных устройствах, чтобы проверить корректность вёрстки. При аудите я выявил следующие недостатки сайта:
- Не актуальная структура. Блок с отзывами и раздел "Для кого" имели неправильное расположение на сайте. Пользователи зачастую не долистывали до этих важных блоков. Также на сайте отсутствовал блок со статьями из блога, который показывает экспертность педагога.
- Устаревший дизайн. На сайте использовался несовременный дизайн, который мог отпугивать пользователей и затруднять изучение информации. Иконки имели разный стиль.
- Низкая конверсия. За 7 месяцев работы на сайте было 2500 просмотров и 4 клиента.
- Ошибки по UX. На сайте была неудобная навигация, мешавшая пользователям перемещаться по сайту. Были базовые ошибки, такие как отсутствие эффекта при наведении на кнопку и перехода на главную страницу при нажатии на логотип.
Задачи для нового сайта
После проведения аудита я составил список задач, которые необходимо решить при редизайне сайта:
- Оптимизация структуры сайта.
- Разработка удобного и современного дизайна для пользователей.
- Повышение конверсии.
- Улучшение пользовательского опыта (UX)
Этап 1 - маркетинговые исследования
Теперь давайте перейдём к первому этапу работы над проектом — маркетинговым исследованиям. Они включают анализ целевой аудитории и анализ конкурентов. Анализ целевой аудитории позволяет определить, для кого предназначены услуги по вокалу. А анализ конкурентов, простыми словами, помогает выявить сильные и слабые стороны аналогичных вокальных студий и школ.
Анализ целевой аудитории
Для анализа целевой аудитории я подошёл с комплексным подходом. Он в себя включал:
- Анализ социальных медиа: блог-платформ, сайтов-отзовиков, форумов, социальных сетей и видео на YouTube, посвящённых услугам по вокалу.
- Анализ отзывов клиентов и конкурентов. Люди часто делятся своими проблемами, страхами и запросами, с которыми они пришли на вокал. Эта информация полезна для анализа целевой аудитории.
- Анализ Яндекс. Метрики и Google Analytics. За время работы сайта в системах по аналитики накопилось множество информации по аудитории и поведению пользователей на сайте. После аналитики я сделал следующие выводы: преобладает женская аудитория, основная возрастная группа - 18-24 года, большинство посетителей заходят на сайт с телефонов, интересы аудитории: развлечения и досуг, финансы, работа, образование, отдых и путешествия.
После анализа я составил список возражений, которые могут отталкивать людей от записи на урок по вокалу. Также составил список сегментов целевой аудитории, чтобы разработать сайт, охватывающий все запросы ЦА.
Анализ конкурентов
Наши основные конкуренты — это вокальные студии и школы. Их я и начал анализировать. После анализа конкурентов я сделал следующие выводы:
- Предложение пробных уроков. Большинство сайтов предлагают сначала запись на пробный урок, а затем переход на полноценное обучение с покупкой курса.
- Формат школ. Большинство сайтов позиционируются как школы, что подразумевает систематический подход к обучению.
- Информация о студии. На всех проанализированных сайтах есть раздел с информацией о студии, включая фотографии помещений и преподавателей.
- Качество дизайна. У многих сайтов обнаружены базовые ошибки в дизайне, такие как неудачная цветовая гамма или неправильная композиция.
- Подача информации. На некоторых сайтах информация представлена бессистемно, что затрудняет её восприятие.
- Визуальный материал. На сайтах много визуального контента — фотографии, видео с уроков и концертов. Это привлекает внимание и помогает посетителям лучше понять, что их ждёт при обучении.
Этап 2 - копирайтинг
После проведения маркетинговых исследований можно переходить к копирайтингу. На этом этапе важно выделиться среди конкурентов. Для этого я сделал следующее:
- Сосредоточился на экспертности педагога и её многолетнем опыте. Это поможет заручиться доверием посетителей и выделиться среди других предложений на рынке.
- Уделал внимание ценам, которые ниже рынка по России.
- Подчеркнул в тексте подход преподавателя к работе с учеником, что также помогает выделиться среди конкурентов.
Весь текст я расположил в Figma и утвердил с заказчиком.
Этап 3 - дизайн-макет сайта
Теперь мы готовы перейти к разработке дизайна сайта. Для главной страницы сайта я собрал множество референсов, из которых составил "франкенштейна". Для каждого блока на сайте подобрал свой референс.
Основные сайты, из которых я брал референсы для проекта:
Также я разработал дизайн для страницы с блогом, страница 404 и страницы для статей. Сделал 3 версии прототипа: для десктопов, планшетов и мобильных устройств. После создания макета сайта я отправил видеопрезентацию клиенту. Мы быстро согласовали прототип с минимальными корректировками.
Этап 4 - вёрстка сайта на Tilda с добавлением анимации
На этом этапе я начал переносить весь прототип с Figma на Tilda. Сделал адаптивный сайт с 5 версиями для разных разрешений, поэтому любой пользователь сможет комфортно пользоваться сайтом. Также добавил анимацию, что помогает удерживать внимание пользователя.
После вёрстки я настроил систему для сбора заявок и сделал SEO-оптимизацию, чтобы поисковые системы лучше ранжировали сайт.
Этап 5 - тестирование
Последний этап редизайна сайта — тестирование. Я проверил сайт на различных устройствах и протестировал весь его функционал. Для этого использовал телефон, планшет, ноутбук, ПК и сервис для проверки адаптивности ILOVEADAPTIVE.
Этап 6 - запуск сайта
Прежде чем запустить новый сайт, я записал видеопрезентацию для клиента, где рассказал обо всей проделанной работе. У клиента не оказалось замечаний, поэтому мы сразу перешли к запуску и достигли поставленных целей:
- Оптимизировали структуру сайта. Убрали ненужную страницу с выступлениями, изменили расположение блоков “Для кого” и отзывы, добавили новый блок со статьями на главной странице, что повышает экспертность педагога и доверие к нему.
- Разработали современный дизайн сайта, ориентируясь на пожелания клиента, специфику вокальной студии и современные референсы. Это помогло создать удобный и современный сайт.
- Повысили конверсию, изменив позиционирование студии, призывы к действию на сайте и структуру главной страницы. Охватили всю целевую аудиторию по услугам вокала и сделали для них конкурентоспособное предложение.
- Сделали сайт более комфортным для пользователей. В этом мы убедились на этапе тестирования с разными людьми.
Далее я добавил отзыв от Марины, где она поделилась впечатлениями от нашей совместной работы. Ссылка на сайт «Нота За Нотой»
Нужно разработать сайт? Смело обращайтесь ко мне. Я предлагаю комплексный подход к решению ваших задач и гарантирую качественный результат. В этом вы можете убедиться, изучив отзывы моих клиентов по ссылке в телеграм-канале: https://t.me/feedback_webmagic