Лендинг для стилиста
-
О клиентеВиктория Королева — профессиональный стилист, помогающий клиентам создавать уникальный образ через эксперименты с одеждой и аксессуарами.
-
ПроблемаУ стилиста отсутствует сайт и имиджевая точка входа, которая бы показывала ее как специалиста. Повысить конверсию сайта за счет оптимизации пользовательского пути — от первого касания до совершения заказа.
-
ЗадачаРазработать продающий лендинг, который отражает индивидуальность стилиста и выделяет его среди других специалистов, презентует услуги и увеличивает конверсию в заявки. Для удобства разбила эту большую задача на подзадачи:
→ создать визуально привлекательный и удобный лендинг;
→ четко презентовать услуги и преимущества;
→ упростить процесс записи к стилисту. -
Моя рольНа проекте была единственным специалистом, участвовала во всех аспектах процесса разработки: от концепта до релиза и согласования с клиентом.
-
Дизайн - процесс1. Брифование
2. Исследование
3. UX-проектирование
4. UI-проектирование
5. Тестирование
6. Реализация
О каждом шаге расскажу подробнее ниже.
Этапы дизайн-процесса
ЭТАП 1 Брифование
На онлайн-брифинге мы утвердили ключевые принципы будущего лендинга: творческий, но лаконичный стиль с акцентным красным цветом и фокус на конверсию через четкие CTA и простую форму заявки.
Анализ соцсетей и материалов Виктории показал её сильные стороны для сайта: экспертный контент, успешные кейсы преображений и высокая вовлечённость аудитории в видео-разборах гардероба.
Анализ соцсетей и материалов Виктории показал её сильные стороны для сайта: экспертный контент, успешные кейсы преображений и высокая вовлечённость аудитории в видео-разборах гардероба.
ЭТАП 2 Исследование
- Анализ конкурентов
Ключевые недостатки конкурентов:
1. Низкая конверсия: мало призывов к действию, сложные или неудобные формы заявки
2. Недостаток социальных доказательств: отсутствие видеоотзывов, а также мало визуальных примеров работ
3. Только мобильная адаптация
4. Отсутствие персонализации: нет вариантов под разные потребности клиентов
5. Отсутствие единой визуальный стилистики
- Портрет пользователей
Целевой аудиторией являются мужчины и женщины, для которых стиль — это не просто одежда, а важный инструмент самовыражения и достижения целей. Это деловые женщины, создающие уверенный имидж для переговоров; молодые экспериментаторы, ищущие смелые образы для соцсетей; и занятые профессионалы, которые хотят выглядеть безупречно без лишних усилий.
- Анализ поведенческих метрик
→ анализ зон внимания и размещения ключевых элементов (CTA, контакты, формы),
→ проверка логики навигации и удобства взаимодействия.
Это позволило выявить типичные для ниши ошибки: «спрятанные» призывы к действию, отсутствие отзывов, сложные формы. Этот подход помог сформировать гипотезы, какие элементы работают на конверсию, и сразу показал проблемные зоны, требующие исправления.
На основе анализа конкурентов, сайт должен:
Четко вести к действию: яркая, заметная кнопка.
Иметь упрощенную запись: форма для записи прямо на сайт (достаточно 2-3 поля).
Наличие социальных доказательств: блок с отзывами, сертификатами и примерами работ.
Хорошую навигацию: за 2-3 клика найти любую услугу и способ связи.
- A/B-тестирование
Финальным этапом исследования стало тестирование гипотез - создала несколько вариантов ключевых элементов (например, CTA-кнопок) и провела A/B-тестирование, чтобы определить наиболее эффективные решения. В результате для кнопки был выбран вариант с формулировкой «Получить консультацию», показавший наилучшую конверсию; применена короткая форма заявки; добавлены видеоотзывы и слайдер с результатами «До/После».
ЭТАП 3 UX-проектирование
- Карта пути клиента (CJM)
На основе собранной информации составила карту пути клиента (CJM) - от первого знакомства с услугой до момента принятия решения о записи. Это помогло выявить ключевые точки, где потенциальные клиенты чаще всего сталкиваются с сомнениями.
- Лоу-фай вайфреймы
ЭТАП 4 UI–проектирование
Визуальная концепция строится вокруг выразительного красного акцента (#e34647), который становится центральной нитью всей композиции. Этот цвет применяется для ключевых элементов интерфейса: кнопок призыва к действию, важных заголовков и важных ярко выраженных деталей, чтобы сразу привлекать внимание и создавать запоминающийся образ бренда.
Концепция типографики: заголовки и подзаголовки оформляются шрифтами Alumni Sans 600, что придает проекту современный, строгий и одновременно дружелюбный вид. В сочетании с тонким весом текста основной контент читается легко благодаря шрифту Noto Sans Display 300. Для более выразительных элементов, таких как выделенные фрагменты текста или особые акценты, применяется Noto Sans Display Regular 300, который обеспечивает контраст и визуальную иерархию без перегрузки страницы.
Концепция типографики: заголовки и подзаголовки оформляются шрифтами Alumni Sans 600, что придает проекту современный, строгий и одновременно дружелюбный вид. В сочетании с тонким весом текста основной контент читается легко благодаря шрифту Noto Sans Display 300. Для более выразительных элементов, таких как выделенные фрагменты текста или особые акценты, применяется Noto Sans Display Regular 300, который обеспечивает контраст и визуальную иерархию без перегрузки страницы.
ЭТАП 5 Тестирование
В рамках проведённых тестов я собрала данные по различным гипотезам, направленным на улучшение показателей сайта и повышения вовлечённости пользователей. В процессе использовались разные варианты элементов, такие как кнопки, формы, отзывы и слайдеры, с целью определения наиболее эффективных решений. Ниже представлены результаты тестирования, основанные на собранных данных, а также выводы о подтверждении или опровержении каждой гипотезы.
Гипотеза 1: Кнопка «Получить консультацию» даст на 20% больше кликов, чем «Записаться».
Результаты:
А: «Записаться» (контроль) CTR кнопки 4.8%
Б: «Получить консультацию» CTR кнопки 6.0% (+25% относительно А)
В: «Обсудить мой стиль» CTR кнопки 5.2% (+8.3% относительно А)
Вывод: Гипотеза 1 частично подтверждена — вариант Б лучше. Рекомендуется использовать «Получить консультацию» как основной.
Гипотеза 2: Форма из 2 полей (имя + телефон) увеличит конверсию на 15% по сравнению с 5-полной.
Результаты:
А: 5 полей (поля имя, email, телефон, цель, бюджет) 11.0% конверсии
Б: 2 поля 13.8% (+25% относительно А)
Вывод: Гипотеза 2 подтверждена, сокращение количества полей улучшило конверсию. Рекомендация: использовать форму из 2 полей как стандартную; при необходимости админ добавить дополнительные поля в зависимости от сегмента, но по умолчанию сохранять упрощенную форму.
Гипотеза 1: Кнопка «Получить консультацию» даст на 20% больше кликов, чем «Записаться».
Результаты:
А: «Записаться» (контроль) CTR кнопки 4.8%
Б: «Получить консультацию» CTR кнопки 6.0% (+25% относительно А)
В: «Обсудить мой стиль» CTR кнопки 5.2% (+8.3% относительно А)
Вывод: Гипотеза 1 частично подтверждена — вариант Б лучше. Рекомендуется использовать «Получить консультацию» как основной.
Гипотеза 2: Форма из 2 полей (имя + телефон) увеличит конверсию на 15% по сравнению с 5-полной.
Результаты:
А: 5 полей (поля имя, email, телефон, цель, бюджет) 11.0% конверсии
Б: 2 поля 13.8% (+25% относительно А)
Вывод: Гипотеза 2 подтверждена, сокращение количества полей улучшило конверсию. Рекомендация: использовать форму из 2 полей как стандартную; при необходимости админ добавить дополнительные поля в зависимости от сегмента, но по умолчанию сохранять упрощенную форму.
Гипотеза 3: Видеоотзывы увеличат доверие на 25% по сравнению с текстовыми.
Результаты:
А: текстовые отзывы доверие 68%
Б: видеов отзывы 85% (+25%)
Вывод: Гипотеза 3 подтверждена. Видеовидеоэффекты повышают доверие. Рекомендация: внедрить раздел с видеовидеоотзывами; сочетать с текстовыми отзывами для полноты информации.
Гипотеза 4: Слайдер «До/После» с краткими историями клиентов повысит вовлечённость на 40%.
Результаты:
А: раздел до/после без рассказа клиента 38% вовлечённости
Б: слайдер «До/После» плюс краткая история клиента 53% (+40%)
Вывод: Гипотеза 4 подтверждена: интерактивный слайдер с историями клиентов существенно увеличивает вовлеченность. Рекомендация: внедрить слайдер «До/После» с короткими историями клиентов в разделы, где важно показать результаты, и поддержать визуалами.
Результаты:
А: текстовые отзывы доверие 68%
Б: видеов отзывы 85% (+25%)
Вывод: Гипотеза 3 подтверждена. Видеовидеоэффекты повышают доверие. Рекомендация: внедрить раздел с видеовидеоотзывами; сочетать с текстовыми отзывами для полноты информации.
Гипотеза 4: Слайдер «До/После» с краткими историями клиентов повысит вовлечённость на 40%.
Результаты:
А: раздел до/после без рассказа клиента 38% вовлечённости
Б: слайдер «До/После» плюс краткая история клиента 53% (+40%)
Вывод: Гипотеза 4 подтверждена: интерактивный слайдер с историями клиентов существенно увеличивает вовлеченность. Рекомендация: внедрить слайдер «До/После» с короткими историями клиентов в разделы, где важно показать результаты, и поддержать визуалами.
ЭТАП 6 Реализация
На этом этапе я еще раз проанализировала всю входящую информацию и пожелания заказчика, сверилась с данными, полученными от анализа рынка и конкурентов.
Я общалась с клиентом на каждом шаге: собирала обратную связь, уточняла требования, согласовала гипотезы и критерии приемки. По итогам обсуждений подготовила макет сайта, который прошел внутреннюю экспертизу и внешнюю валидацию заказчика.
Итог: сайт подготовлен и передан клиенту, внедрены системы аналитики и отслеживания KPI, зафиксированы достигнутые результаты и приняты решения по дальнейшему развитию.
Я общалась с клиентом на каждом шаге: собирала обратную связь, уточняла требования, согласовала гипотезы и критерии приемки. По итогам обсуждений подготовила макет сайта, который прошел внутреннюю экспертизу и внешнюю валидацию заказчика.
Итог: сайт подготовлен и передан клиенту, внедрены системы аналитики и отслеживания KPI, зафиксированы достигнутые результаты и приняты решения по дальнейшему развитию.
- Первый экран
В верхней части экрана расположено навигационное меню, обеспечивающее доступ к основным разделам. Призыв к действию – кнопка «Консультация» (ее текст был упрощен по просьбе клиента, что частично соответствует Гипотезе №1). В качестве фона используется динамичное видео с рабочим процессом стилиста – реализация Гипотезы №3.
- Цены
- Видео и отзывы
- Форма
Сайт был разработан на основе детального брифа, полностью согласованного с заказчиком. При создании я учла актуальные тенденции в дизайне и маркетинге, а также провела анализ конкурентов, чтобы предложить лучшее решение. Ключевые гипотезы по повышению конверсии и вовлечённости были проверены на практике и успешно внедрены в структуру и дизайн сайта.