Бренд-сайт

для ритейлера косметики из тройки лидеров рынка

E-commerceПродуктовый сайтFrontendBackend

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

Отрасль

Ритейл

Дата

Дек.2023 – Фев.2024

Стоимость

~ 2 млн. рублей

Услуги

Backend-разработка, Frontend-разработка, UI/UX дизайн, Тестирование

Команда

Project manager, Frontend-разработчик, Backend-разработчик, Тестировщик

Технологии

PHP 8.3, Laravel, PostgreSQL, HTML5, CSS, SCSS, JavaScript, Nuxt.js, Eslint, Git, Docker, Docker Compose

О клиенте

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

Представители клиента обратились к нам в начале 2023 года. Тогда их интересовала только оценка нового бренд-сайта. После получения КП они взяли паузу на несколько месяцев и вернулись с другим проектом – онлайн-квизом по подбору косметики. Наша команда реализовала его за 10 рабочих дней – подробности в отдельном кейсе.

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

Задача

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

Решение

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

Ключевые вызовы проекта

Frontend

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

Backend

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

Реализация и наши решения

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

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

Параллельно с frontend разработали функционал основных страниц.

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

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

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

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

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

Результаты

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

Бренд-сайт косметической продукции – это уже второй проект, за которым к нам обратился клиент. Впереди – третий, и скоро он перейдет из активной разработки в стадию тестирования.