Разработка сайта для сети салонов красоты — кейс «Апельсин»

цифровая трансформация сети салонов красоты

разработали новое позиционирование бренда с помощью зрительно-кинестических ассоциаций в дизайне и создали удобный внутренний сервис по работе с прайс-листами, сократив время печати с 2 дней до 1 часа

[ui/ux]
[разработка]
[реклама]
[сайты]
[b2c]
[веб-сервисы]
[услуги]

введение в проект

Сеть салонов красоты «Апельсин» — успешный бизнес, который более 20 лет работает оффлайн. Сейчас это 10 салонов бизнес-класса в Санкт-Петербурге, несколько сотен высокопрофессиональных сотрудников и тысячи клиентов.

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

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

нам предстояло

  • Разработать идею всей коммуникации, чтобы сформировать открытый и понятный образ для клиентов разных поколений.
  • Продумать удобную структуру сайта, чтобы пользователи легко находили нужные услуги и записывались на них в режиме онлайн без общения с администратором салона.
  • Создать дизайн, который будет не только отражать миссию и ценности, но и значительно выделять компанию на фоне конкурентов.
  • Качественно донести информацию об услугах (их более 100 видов) и проводимых акциях, при этом проработать юзабилити сайта и увеличить количество записей в салоны через взаимодействие с площадкой.
  • Укрепить репутацию компании и повысить узнаваемость бренда для дальнейшей разработки и внедрения маркетинговых инструментов, направленных на повышение спроса.

поиск решения

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

Так родилась концепция «Красота — как состояние», в основе которой лежит идея погрузить клиента в состояние предвкушения и удовольствия ещё до того, как он переступит порог салона и окажется в руках мастера.

идея и реализация

На пути к идеальному решению мы прошли 2 итерации:

  • Первое визуальное представление было построено вокруг модных журналов. Девушки всегда воодушевляются красивыми картинками, и мы подумали, может предложить им «почитать» сайт как любимый журнал? Вдохновлённые модными обложками, оформили блок с услугами салона. Получилось интересно, но совершенно оторвано от реальности и не вызывает нужных эмоций.
  • Поэтому мы решили использовать реальные фотографии салона для их аккаунта в социальных сетях и представили блок услуг в виде плитки, как отсылка к профилю пользователя соцсети — привычная и понятная форма визуального отображения информации для посетителя.

Фотографии подобраны таким образом, чтобы запустить связанные c прикосновениями зрительно-кинестетические ассоциации, создавая особые эмоции и атмосферу вокруг каждой услуги.

Через текст передали ощущения — при наведении на карточку появляются 3 слова. Для каждой услуги они уникальны и описывают ощущения от процедуры, закрывая страхи пользователя. Это рождает настоящие чувства, которые остаются с пользователем при дальнейшей коммуникации с сайтом.

Дизайн

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

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

Основной цвет — бежевый оттенок, который создаёт ощущение визуальной тишины и акцентирует внимание на фотографиях. Изображения с обнажёнными участками кожи, руками мастеров и мягким светом вызывают зрительно-кинестические ассоциации: прикосновение, уход, безопасность. Такой визуальный симбиоз воспринимается как нечто естественное и близкое, пробуждая чувство сопричастности. Что может быть естественнее, чем забота о своей красоте?

Для фирменной типографики использовали сочетание Viaoda Libre и Jost.

Viaoda Libre — выразительный засечный шрифт с изящными формами. Мягкие линии и утончённые засечки шрифта создают ощущение лёгкости, тактильности и эстетики высокого уровня без излишней вычурности.

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

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

Система коммуникации

В рамках мультиканального подхода к коммуникации бренда и пользователя разработали оформление социальных сетей, рекламных баннеров и креативов в едином визуальном стиле, отражающим идеи описанной ранее концепции «Красота — как состояние»

Для полного соответствия концепции пришлось даже подкорректировать логотип — убрали текстовую часть и снизили насыщенность основного визуального элемента с ярко оранжевого на телесный оттенок.

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

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

Услуги и примеры работ

При условии большого количества услуг (более 100), создали компактную форму карточек с визуальным отражением, подробным описанием и указанием продолжительности услуг. Для некоторых услуг страницы с полным описанием пока не проработаны, поэтому все карточки продуманы таким образом, чтобы максимально раскрыть суть услуги и подвести посетителя к записи.

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

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

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

Конструктор страниц

У сети «Апельсин» представлено более 100 видов услуг, каждая из которых имеет свои особенности, нюансы и отличается по подходу. Однотипная подача информации в таком случае неэффективна: для одних процедур важно акцентировать внимание на процессе, для других — на ожидаемом результате или решаемых проблемах.

Поэтому в дизайне мы разработали множество визуально-смысловых блоков, чтобы можно было собирать из админки страницы любой сложности.

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

Навигация по услугам

В косметологии структура услуг сложна и многослойна: одна и та же процедура может относиться к разным направлениям и применяться к различным зонам.

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

мастера

Дополнительно реализовали выбор мастера: карточки специалистов содержат фотографии, информацию о профессиональном опыте и специализации. Знакомство происходит до этапа записи, что снижает барьер и формирует ощущение персонального подхода уже на этапе выбора услуги.

Статьи как инструмент продвижения

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

Для повышения вовлечённости использовали мультимедийный формат подачи: текстовый контент дополняется видеоматериалами, иллюстрациями, таблицами и фотогалереями. Интерактивный формат подачи помогает удерживать внимание, увеличивает глубину просмотра и улучшает поведенческие показатели сайта, что дополнительно положительно влияет на SEO-продвижение.

прайс-листы

Ранее обновление цен на услуги в салонах происходило вручную: прайс-листы велись в Excel, изменения передавались менеджерам и затем размещались на сайте. Такой процесс был трудозатратным, требовал участия нескольких сотрудников и повышал риск ошибок.

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

Дополнительно реализован функционал генерации прайс-листов в PDF. Интегрированная библиотека преобразует HTML-таблицу в оформленный PDF-документ с фирменным стилем. После обновления данных в админке сотрудники могут скачать актуальный прайс по нужному филиалу напрямую с сайта. Благодаря автоматизации время обновления прайсов сократилось с 2 дней до 1 часа.

Мобильная версия

Работали в парадигме mobile-first: сайт с телефона выглядит и ощущается как мобильное приложение за счёт фиксированного нижнего меню навигации, упрощённой структуры экранов и крупной типографики — всё построено так, чтобы взаимодействие было интуитивным и быстрым.

Такой подход особенно важен, поскольку большинство пользователей заходят на сайт именно с мобильных устройств. Мы провели серию UX-исследований, чтобы выявить реальные сценарии использования и адаптировать интерфейс под повседневные привычки аудитории.

Продвижение

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

Продумали и запустили комплексное продвижение услуг бренда в Яндекс, ВК и Одноклассниках. Привлекали на сайт новую аудиторию через все каналы и тестировали различные стратегии, чтобы найти оптимальный подход к рекламе.

seo-оптимизация

На старте проект практически не имел органического трафика: большая часть страниц не индексировалась или не входила даже в ТОП-50 по ключевым запросам. Нашей основной задачей было сформировать стабильный поток новых клиентов за счёт SEO-продвижения услуг и улучшить видимость сайта в поисковых системах.

На первом этапе провели технический аудит: удалили дублирующиеся и технические страницы, настроили редиректы, обновили sitemap.xml и robots.txt, проверили alt-атрибуты изображений и оптимизировали метаданные, что позволило очистить структуру сайта и обеспечить точную индексацию актуальных страниц.

Далее сфокусировались на росте позиций по ключевым услугам. На старте большинство страниц находились вне ТОП-50. Для продвижения применили комбинированную ссылочную стратегию: ручное размещение ссылок и запуск тематических PBN-сайтов под отдельные направления. Контент регулярно обновлялся и контролировался с помощью краулинговых инструментов. В результате сайт вышел в ТОП-10 по всем приоритетным запросам, а по ряду услуг, включая парикмахерские направления, занял 1-е позиции.

Следующим этапом стало расширение небрендового трафика. После семантического анализа выделили высокочастотные запросы по отдельным услугам и запустили дополнительные проекты под направления: окрашивание, эпиляция, ботулинотерапия, SMAS-лифтинг, что помогло увеличить долю небрендового трафика с 9% до 15–18% и привлечь новую аудиторию.

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

Результат

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

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

Выстроили эмоциональную коммуникацию бренда. Разработали визуальную концепцию с использованием зрительно-кинестетических ассоциаций и минималистичного дизайна.

Автоматизировали управление услугами и обновление цен. Реализовали модуль редактируемых прайс-листов в административной панели. Настроили генерацию актуальных PDF-файлов с брендированным оформлением и сократили время обновления прайсов с 2 дней до 1 часа.

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

Обеспечили стабильное развитие поискового трафика. Провели технический аудит сайта, устранили ошибки индексации. Построили комбинированную SEO-стратегию: ручное ссылочное продвижение и запуск тематических проектов под отдельные услуги. Вывели сайт в ТОП-10 по ключевым запросам, обеспечили рост небрендового трафика с 9% до 15–18%.

Настроили мультиканальную систему продвижения и аналитики. Синхронизировали онлайн-запись с системой управления салоном. Настроили сквозную аналитику по всем каналам трафика. Запустили рекламные кампании в Яндекс, ВК и Одноклассниках.

отзыв клиента

Вячеслав Валентинович Федоров

Основатель сети салонов «Апельсин»

Мы хотели создать полноценный сайт и изменить наш старый образ на совершенно новый, чтобы построить эффективную коммуникацию через интернет.

Это должен был быть не только современный модный сайт, но и технически выверенный. При этом мы понимали, что будут сложности с четкой постановкой задач из-за нехватки знаний о том, как работает интернет. В первую очередь мне важно, как складывается общение с коллегами. Мне важны люди. Если меня партнеры слышат, то мы работаем продуктивно. С media bay все сложилось — будем продолжать сотрудничество и в других направлениях.

команда проекта

арт-директор

Андрей Иванов

менеджеры проекта

Мария Падалко

Александра Ливадченко

разработчик

Александр Курносов

дизайнер

Алёна Булганина

подписывайтесь на наш telegram‑канал

там мы шутим, рассказываем про проекты и делимся опытом

Дизайн-причал Media Bay

Подписаться

Обсудить задачу

Андрей

[Исполнительный директор]

ответит на ваши вопросы, расскажет про подход и технологии

Написать в Телеграм

    Оставьте контакты

    Расскажите о задаче

    Заполняя форму, вы соглашаетесь на обработку персональных данных

    [следующий прооект]

    Запустили сайт и рекламу для производителя спецкрепежа

    Как быстро запустить сайт для производителя спецкрепежа и получить 5 заявок в первый день

    [производство]
    [сайты]
    [ui/ux]
    [разработка]
    [реклама]