СРОК ВЫПОЛНЕНИЯ: декабрь 2023 – февраль 2024
ШТАТ ПРОЕКТА (ПРОЕКТНАЯ РАБОТА): project manager, frontend-разработчик, backend-разработчик, тестировщик
ТЕХНОЛОГИИ: PHP 8.3, Laravel, PostgreSQL, HTML5, CSS, SCSS, JavaScript, Nuxt.js, Eslint, Git, Docker, Docker Compose
СТОИМОСТЬ ПРОЕКТА: ~ 2 млн. рублей
К НАМ ОБРАТИЛСЯ КЛИЕНТ
Владелец производства косметики в Корее и сети бьюти-магазинов, занимающей третье место на российском рынке в своей нише. Ритейлер активно использует возможности цифрового продвижения, учитывая запросы целевой аудитории и тренды сегмента.
Представители клиента обратились к нам в начале 2023 года. Тогда их интересовала только оценка нового бренд-сайта. После получения КП они взяли паузу на несколько месяцев и вернулись с другим проектом – онлайн-квизом по подбору косметики. Наша команда реализовала его за 10 рабочих дней – подробности в отдельном кейсе.
Через полгода мы вновь встретились с менеджерами клиента, и в этот раз нам передали в разработку брендовую платформу одного из флагманских продуктов компании.
МЫ УСТАНОВИЛИ ЦЕЛЬ ПРОЕКТА
Обновить имиджевый сайт корейской косметики, чтобы повысить интерес и лояльность целевой аудитории к продуктам бренда.
ВЫДЕЛИЛИ ОСНОВНЫЕ ЗАДАЧИ
- Верстка страниц с UX/UI-дизайном и интерактивными элементами.
- Оптимизация сайта для удобства пользователей и SEO.
- Создание функционала, который позволяет размещать и редактировать контент без сторонней помощи.
- Внедрение удобного поиска по каталогу бьюти-продуктов.
ВОЗНИКЛИ НЕБОЛЬШИЕ ТРУДНОСТИ
Frontend
Нестандартное оформление сайта и недостаточное количество брейкпоинтов. Клиент предоставил макеты, которые учитывают размеры экранов только трех устройств и не адаптированы под другие варианты.
Backend
Неопределенность в фильтрах поиска по каталогу: по целому слову, описанию, свойству продукта. Клиент изначально не продумал этот момент – мы помогли ему в выборе и настроили выдачу косметической продукции.
НАШЛИ РЕШЕНИЯ И ВОТ ЧТО СДЕЛАЛИ
Доработали дизайнерские макеты клиента. Расположили элементы в соответствии с размерной сеткой. Сделав подбор, конвертацию и обрезку, оптимизировали фото- и видеоконтент для правильного отображения на разных desktop и mobile устройствах. Сверстали компоненты так, чтобы вне зависимости от размера экрана иллюстрации масштабировались пропорционально ему.
Использовали плейсхолдер Skeleton для отображения структуры интерфейса при открытии страницы. Благодаря ему посетитель сайта сразу видит расположение элементов и часть контента, который постепенно добавляется. Skeleton позволяет минимизировать число покинувших страницу пользователей, так как им не надо ждать ее полную загрузку.
Параллельно с frontend разработали функционал главной страницы, «Блог», «О нас», «FAQ», «Где купить» и других блоков. Сделали к нему интуитивно понятную админ-панель с навигацией по разделам и шаблонами. Она позволяет клиенту самостоятельно заполнять карточки продукции, размещать и редактировать информационный контент.
В разработке применили архитектуру SPA — Single Page Application, которая не требует при переходе на другую страницу ее полного обновления. При открытии сайта браузер загружает сразу весь код, показывая только определенный модуль с контентом. Когда пользователь открывает новую страницу, браузер берет уже загруженные данные и продолжает их отображение, меняя блок с контентом. Это создает эффект моментальной загрузки: без мелькания и ожидания.
Реализовали два способа по поиску нужного бьюти-товара: по популярным запросам-тегам и через ручной ввод слов. Подборка косметических средств выдается при наборе первых трех букв и формируется по данным из названия, описания и тегов продуктов. Чем длиннее введенное слово, тем короче и точнее список косметики.
Учли пожелания клиента и настроили нативную систему рекомендаций продуктов. На home page разместили квиз по подбору косметических средств, пройдя который, пользователь получает список подходящей ему продукции. Для читателей блога встроили в статьи модуль с подбором средств, которые соответствуют теме контента.
В РЕЗУЛЬТАТЕ
Оригинальный вид платформы захватывает внимание посетителя с самого открытия. Быстрая загрузка, оживляющие дизайн видео, смена иллюстраций при наведении курсором, рекомендации через поиск, квиз, статьи – все продумано до мелочей, учитывает тренды и желания ЦА.
Бренд-сайт косметической продукции – это уже второй проект, за которым к нам обратился клиент. Впереди – третий, и скоро он перейдет из активной разработки в стадию тестирования.
