Лендинг для стилиста
  • О клиенте
    Виктория Королева — профессиональный стилист, помогающий клиентам создавать уникальный образ через эксперименты с одеждой и аксессуарами.
  • Проблема
    У стилиста отсутствует сайт и имиджевая точка входа, которая бы показывала ее как специалиста. Повысить конверсию сайта за счет оптимизации пользовательского пути — от первого касания до совершения заказа.
  • Задача
    Разработать продающий лендинг, который отражает индивидуальность стилиста и выделяет его среди других специалистов, презентует услуги и увеличивает конверсию в заявки. Для удобства разбила эту большую задача на подзадачи:
    → создать визуально привлекательный и удобный лендинг;
    → четко презентовать услуги и преимущества;
    → упростить процесс записи к стилисту.
  • Моя роль
    На проекте была единственным специалистом, участвовала во всех аспектах процесса разработки: от концепта до релиза и согласования с клиентом.
  • Дизайн - процесс
    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) - от первого знакомства с услугой до момента принятия решения о записи. Это помогло выявить ключевые точки, где потенциальные клиенты чаще всего сталкиваются с сомнениями.
    • Лоу-фай вайфреймы
      Я использую вайфреймы, чтобы наглядно проработать с клиентом структуру проекта до начала дизайна. Вместе cо стилистом мы определили расположение ключевых элементов, логику взаимодействия и иерархию контента, чтобы избежать недопонимания в будущем и учесть все пожелания.

      ЭТАП 4 UI–проектирование
      Визуальная концепция строится вокруг выразительного красного акцента (#e34647), который становится центральной нитью всей композиции. Этот цвет применяется для ключевых элементов интерфейса: кнопок призыва к действию, важных заголовков и важных ярко выраженных деталей, чтобы сразу привлекать внимание и создавать запоминающийся образ бренда. 
      Концепция типографики: заголовки и подзаголовки оформляются шрифтами 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 полей как стандартную; при необходимости админ добавить дополнительные поля в зависимости от сегмента, но по умолчанию сохранять упрощенную форму.
      Гипотеза 3: Видеоотзывы увеличат доверие на 25% по сравнению с текстовыми.
      Результаты:
      А: текстовые отзывы доверие 68%
      Б: видеов отзывы 85% (+25%)
      Вывод: Гипотеза 3 подтверждена. Видеовидеоэффекты повышают доверие. Рекомендация: внедрить раздел с видеовидеоотзывами; сочетать с текстовыми отзывами для полноты информации.
      Гипотеза 4: Слайдер «До/После» с краткими историями клиентов повысит вовлечённость на 40%.
      Результаты:
      А: раздел до/после без рассказа клиента 38% вовлечённости
      Б: слайдер «До/После» плюс краткая история клиента 53% (+40%)
      Вывод: Гипотеза 4 подтверждена: интерактивный слайдер с историями клиентов существенно увеличивает вовлеченность. Рекомендация: внедрить слайдер «До/После» с короткими историями клиентов в разделы, где важно показать результаты, и поддержать визуалами.

      ЭТАП 6 Реализация
      На этом этапе я еще раз проанализировала всю входящую информацию и пожелания заказчика, сверилась с данными, полученными от анализа рынка и конкурентов. 
      Я общалась с клиентом на каждом шаге: собирала обратную связь, уточняла требования, согласовала гипотезы и критерии приемки. По итогам обсуждений подготовила макет сайта, который прошел внутреннюю экспертизу и внешнюю валидацию заказчика.
      Итог: сайт подготовлен и передан клиенту, внедрены системы аналитики и отслеживания KPI, зафиксированы достигнутые результаты и приняты решения по дальнейшему развитию.

      • Первый экран
      Дизайн первого экрана построен вокруг трёх ключевых элементов: меню, кнопки и фона. 
      В верхней части экрана расположено навигационное меню, обеспечивающее доступ к основным разделам. Призыв к действию – кнопка «Консультация» (ее текст был упрощен по просьбе клиента, что частично соответствует Гипотезе №1). В качестве фона используется динамичное видео с рабочим процессом стилиста –  реализация Гипотезы №3. 

      • Цены
      Детализация цен организована по принципу «один клик» – чтобы увидеть полный прайс, не нужно переходить на дополнительные страницы или открывать сложные меню. Это позволяет быстро получить нужную информацию и принять решение.

      • Видео и отзывы
      На сайте добавлены видео и интерактивные истории клиентов. Это подтверждает две гипотезы: видео повышает доверие на 25%, а слайдер с историями увеличивает вовлечённость на 40%.

      • Форма
      На сайте применена сокращенная форма в 2 поля (имя+телефон). Это подтверждённая гипотеза: конверсия выросла на 25%.

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