Онлайн-квиз

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

E-commerceСервисFrontendBackend

Проект — интерактивный онлайн-квиз для сети косметических магазинов, который помогает пользователям подобрать уходовые средства и получает результаты на e-mail. Приложение было рассчитано на использование с iPad (на мероприятиях, акциях) и включает систему рекомендаций + административную панель для управления товарами и настройками.

Отрасль

Ритейл

Дата

Август 2023

Стоимость

< 500 000 руб.

Услуги

Backend-разработка, Frontend-разработка, Адаптация под iPadOS

Команда

3 разработчика

Технологии

PHP 8.2, Laravel, PostgreSQL, HTML5, CSS, JavaScript, Vue.js, Git, Docker, Docker Compose

О клиенте

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

Задача

Реализовать интерактивное веб-приложение с онлайн-квизом и e-mail рассылкой результатов.

Верстка интерфейса по макетам дизайнера.
Адаптация сервиса под систему iPadOS.
E-mail-верстка писем.
Разработка функционала для рекомендательной системы.
Создание административной панели.

Решение

Разработали адаптированный под iPad интерактивный квиз с системой рекомендаций, который подбирает косметику по ответам пользователя и отправляет результат на e-mail.

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

Клиент предоставил дизайнерские макеты в Figma, список вопросов теста в Excel и объяснил свое видение разработки. Мы внимательно ознакомились с информацией, сделали верстку и продумали способы оцифровки требуемых процессов.

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

Верстка

Онлайн-квиз является интерактивным инструментом маркетинговой кампании и транслируется с экранов iPad. Мы адаптировали интерфейс под iPadOS и максимально точно расположили его элементы для корректного отображения с планшетов.

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

Функционал

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

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

Админпанель

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

Разработка админпанели и внесение корректив в онлайн-квиз без участия разработчиков – это прагматичное решение. Оно дает возможность актуализировать данные и использовать веб-приложение в других рекламных кампаниях.

Результаты

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