Сервис «Конструктор чехлов» для ZIBELINO

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

Команда Mobileocean обратилась в Студию Батюкова со следующей целью: разработать удобный и простой конструктор для создания дизайна чехлов на мобильные устройства с максимальной автоматизацией процесса оформления и обработки заказа.

Головным брендом для конструктора был выбран ZIBELINO: команда заказчика начала продажи именно с этих товаров, постепенно добавляя другие позиции (Mobileocean, Orongo, Kondjian).

Так как продукция производителя представлена на маркетплейсах, а не в отдельном интернет-магазине (спойлер на будущее – пока что 😉), необходимо было продумать пользовательский путь до конструктора и автоматизировать процесс оформления заказа через подключение АПИ Ozon и Wildberries.

Задачи

1. Изучить похожие сервисы, выявить сильные и слабые стороны и учесть их при разработке своего конструктора;
2. Разработать дизайн конструктора чехлов;
3. Разработать административную панель для работы с заказами и моделями устройств;
4. Подключить интеграцию с маркетплейсами и Битрикс24 для автоматизации процесса совершения заказа;
5. Завершить все работы за 2 месяца.

Пользовательский путь

Главная цель: максимально упростить путь покупателя до конструктора без лишних заморочек.

Итоговый пользовательский путь выглядит так:

1. Покупатель оформляет заказ на чехол с кастомным дизайном на Ozon или Wildberries;
2. В чат с продавцом приходит сообщение со ссылкой на конструктор;
3. Покупатель переходит по ссылке в конструктор, где уже отображается чехол на модель устройства, выбранную при заказе — ничего искать и выбирать вручную не нужно;
4. Покупатель создает свой дизайн для чехла.
5. Чехол изготавливается и доставляется в ПВЗ маркетплейса.

Все понятно и удобно: ссылка на конструктор всегда под рукой (в чате с продавцом), нужный чехол в конструкторе подставляется автоматически, информация о доставке отображается в приложении маркетплейса.

Возможности конструктора

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

• Изображениями: можно загрузить любое фото из своей галереи или по ссылке, а также выбрать изображение из галереи готовых фонов, подготовленных дизайнерами Заказчика. Количество загружаемых изображений не ограничено! Можно составить целый коллаж.
• Текстом: большой выбор шрифтов и богатая палитра цветов позволяют сохранить эстетику задуманного дизайна. Можно добавить любое количество текстовых полей.

Все слои можно менять местами, а скрывать их или удалять максимально просто: в отдельном списке всех слоев или по клику на элемент на чехле.

Если возникли сложности

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

Дизайн

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

Разработка дизайна началась с мобильной версии, в которой важно было сохранить достаточно большую область для редактирования.

Фирменный цвет ZIBELINO — темно-бордовый, очень самостоятельный и акцентный сам по себе: подобрать подходящий цвет ему в пару было не самой простой задачей.

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

Все любят маскотов (особенно наш дизайнер Андрей), поэтому для Конструктора он отрисовал свой вариант соболька ZIBELINO.

Изнанка

User-friendly интерфейс — лишь вершина айсберга нашей работы над конструктором для ZIBELINO. Невидимым для обычного пользователя стали работы по:

1. Разработке административной панели;
2. Подключению АПИ и вебхуков Ozon и Wildberries;
3. Синхронизации с Битрикс24.

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

Интеграция с маркетплейсами

Ozon

Подключение АПИ Ozon позволяет нам:

• Получать информацию о заказах на артикулы конструктора;
• Создавать чат с покупателем и отправлять ему сообщение;
• Отправлять пользователю напоминания о том, что он еще не создал свой дизайн;
• Синхронизировать статус «Отменен пользователем»: если пользователь отменяет заказ, то ссылка на конструктор становится недоступной, напоминания не приходят;
• Работать с кабинетами нескольких продавцов одновременно.

Wildberries

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

Но несмотря на некоторые отличия от Ozon мы смогли настроить похожий пользовательский путь и автоматизировать работу с заказами с WB.

Вебхук WB позволяет нам:

• Получать информацию о заказах на артикулы конструктора;
• Находить созданный покупателем чат с продавцом;
• Отправлять сообщение со ссылкой на конструктор;
• Отправлять пользователю напоминания о том, что он еще не создал свой дизайн;
• Синхронизировать статус «Отменен пользователем»: если пользователь отменяет заказ, то ссылка на конструктор становится недоступной, напоминания не приходят.

Битрикс24

Вся информация о заказах также отправляется в Битрикс24. Со своей стороны мы настроили двухстороннюю синхронизацию всех процессов:

• Создание заказа: как только заказ «падает» в нашу систему, в Битрикс24 создается Сделка. Все данные о заказе хранятся в Сделке и своевременно обновляются;
• Синхронизация статусов: менеджер может поменять статус и в Битрикс24, и в админ.панели — все данные будут актуализироваться во второй системе моментально;
• Синхронизация комментариев: менеджеры могут видеть все комментарии по заказу и в админ.панели, и на платформе Битрикс24.

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

Административная панель

В административной панели доступны следующие разделы:

• Информация о всех заказах;
• Список доступных к заказу чехлов и совместимых с ними устройств;
• Возможность загружать новые чехлы и устройства и скрывать неактуальные;
• Редактирование контента;
• Шрифты;
• Вопросы и ответы;
• Управление правами доступа к разделам для администратора, менеджеров и сотрудников склада.

На момент запуска к заказу были доступны только чехлы телефонов, но при разработке мы учли возможность расширения: заказчик может в любой момент ввести в продажу чехлы для новых типов устройств (планшеты, кейсы для наушников и т.п.), и система автоматически подстроится — дополнительной разработки не потребуется.

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