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

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

разработали новое позиционирование бренда с помощью зрительно-кинестических ассоциаций в дизайне и создали удобный внутренний сервис по работе с прайс-листами, сократив время печати с 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]
    [разработка]
    [реклама]