Редизайн для бренда профессиональной косметики с разделением сценариев для двух аудиторий

Запрос клиента

Сайт выглядел устаревшим и плохо работал на привлечение молодой аудитории.

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

Старт работы

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

Обсудили сайты, которые команда Аркадия (ARKADIA) считала удачными и неудачными примерами. Так мы зафиксировали общее понимание стиля и направления редизайна.

От прототипов к дизайн-концепции

Работу начали с карты сайта: она помогла зафиксировать структуру и продумать, как в рамках одного интерфейса разделить два сегмента — розничных покупателей и профессиональных косметологов.

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

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

Затем сделали «протодизайн»: коллаж на базе каркаса главной страницы, чтобы заранее проверить, как визуальный язык работает на контенте ARKADIA, и при необходимости скорректировать направление.

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

Навигация

Переработали хедер и сделали его двухуровневым. В основном уровне оставили ключевые разделы, которые ведут к покупке. В выпадающем меню «Каталог» — чёткое разделение на домашнюю и профессиональную линии.

Раздел «Косметологам» собрали как единый хаб для профессиональной аудитории: меню ведёт в профильные разделы и в каталог профессиональной линии. ​Так информация для косметологов не утяжеляет хедер и остаётся логично сгруппированной.

​Главная страница

Главную страницу спроектировали как единую точку входа для двух аудиторий — покупателей домашней линии и профессиональных косметологов.

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

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

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

Авторизация и регистрация

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

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

Регистрацию для косметологов разбили на два шага — «Образование» и «Личные данные»: на первом этапе пользователь загружает подтверждающий документ, поэтому требования понятны сразу и не становятся сюрпризом в конце.

Каталог

Реализовали единый каталог с удобным переключением между линиями. Структура остаётся чистой: при выборе линии отображаются только её категории.

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

Фильтров немного, поэтому разместили их сразу над товарами. Применённые фильтры показываются тегами — их легко снять по одному или сбросить все сразу.

​Страница товара

Страница товара требовала особенной проработки: нужно было структурировать большой объём информации и при этом сохранить ощущение лёгкости и ясности.

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

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

Добавили рекомендации сопутствующих товаров с возможностью добавить комплект в корзину одним действием.

Корзина и оформление заказа

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

Мы разделили этапы и сделали их проще.

Корзину построили по привычной логике и добавили полезные элементы: например, отсчёт до бесплатной курьерской доставки и блок с допродажами.

Оформление заказа сделали пошаговым. Три последовательных этапа помогают пользователю понимать прогресс и снижают тревожность перед подтверждением заказа.

Личный кабинет

Личный кабинет спроектировали с учётом двух аудиторий. Для косметологов предусмотрели дополнительные разделы, связанные с их профессиональной деятельностью.

Пользователь может управлять данными, отслеживать заказы и их статусы; систему статусов детально проработали с учётом разных способов доставки, чтобы ожидание было максимально прозрачным.

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

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

Для косметологов добавили разделы с обучением и полезными материалами по продукции ARKADIA.

Вебинары и семинары

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

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

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

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

Внутренние страницы и дизайн-гайд

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

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

Чтобы у команды разработки не возникало вопросов, мы описали логику экранов, предусмотрели все состояния интерфейса и собрали кит.

Так клиент получил не просто набор макетов, а целостную дизайн‑систему, готовую к масштабированию и развитию.

Итоги

Мы обновили сайт Аркадия (ARKADIA), чтобы он соответствовал современным требованиям к юзабилити и лучше работал на доверие и узнаваемость бренда.

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

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