Emblems.by — Уникальный сервис на просторах СНГ

ЗаказчикООО «Айрон и К», специализируется на производстве и продаже сувенирной продукции с нанесением корпоративной символики (электроника, гаджеты, товары для спорта, канцелярские принадлежности и др).ЗадачаРазработка сервиса создания коммерческих предложений

Мы сотрудничаем с компанией ARTE уже давно и сделали для них уже много классных задач. Это и новый сайт, и конфигуратор товаров с калькулятором нанесения, даже функцию резервов на очереди разработали. И на этот раз мы не подкачали и доказали, что умеем делать крутые вещи. Вместе с ARTE мы разработали сервис создания коммерческих предложений Emblems.by!

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

  • Актуализация на внешней составляющей продукта;
  • Брендирование каждого товара под конкретного покупателя;  
  • Необходимость создать коммерческое предложение из разных товаров разных поставщиков;  
  • Возможность организованного хранения коммерческих предложений;  
  • Возможность создавать коммерческие предложения в различных форматах и разрешениях.

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

Разработка сервиса

Составление технического задания

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

1. Конструктор — поле с товарами и возможностью их редактирования.

ccff74f28dab63bac30d1526fe8503ed.png   

2. Блок управления фонами — возможность настраивать рабочее окружение самого проекта под себя или под конечного заказчика.

3efd7d025c21fd46cf7831a666c7b715.png   

3. Блок управления элементами рабочей области.

bfb0f12ddf61b0c71c79a3ffc5408d0c.png   

4. Режим работы с ценами.

8542145718aa05bf0483bd0ab58c7e47.png   

5. Настройка сортировки.

ad015448d000e63818b70ccc7be9c0ea.png  

 6. Парсер товаров с других сайтов.

0fe85d91eb63eeb241df01002cb25c42.png   

7. Создание презентаций и генерация файлов.

b678df4d5cec5c8d9c8bc92c7fa2cb8b.png   

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

Необходимо было разработать удобный функционал добавления товаров с других сайтов. А что может быть удобнее чем вставить ссылку на товар и получить все его данные? Но задача оказалась не из простых. Мы составили список сайтов и разработали для них 9 уникальных парсеров, которые могут забирать товары по одному или группами. Причем каждый парсер настолько крут, что может вытаскивать у некоторых сайтов даже личные цены и скидки того, кто такое коммерческое предложение создает.

Дизайн и верстка

К тому времени, как парсеры товаров были готовы, наш дизайнер и отдел front-end разработки сделали то, что понравилось клиенту с первого взгляда. Мы практически ничего не меняли в изначальных макетах, поэтому этап верстки проекта прошел гладко, почти…

Первые трудности или «миссия невыполнима»

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

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

Но и такое по силам нашим дизайнерам и front-end отделу, в чем мы, конечно, не сомневались.

Были созданы все необходимые варианты отображения товаров, при этом для каждого варианта разработан свой уникальный стиль отображения характеристик товаров, а также правила заполнения листа и переносов в PDF варианте.

А дальше как по маслу

После того, как были решены самые трудные задачи, мы приступили к программированию оставшегося функционала:

    • Функция изменения фонов в коммерческом предложении. Это очень полезно для тех, кто создает коммерческие предложения под конкретного клиента.
    • Блок управления характеристиками товаров. Такая функциональность является хорошим инструментом для того, чтобы индивидуально настроить каждое КП под свои нужды.
    • Сортировка товаров в коммерческом предложении, где можно вручную расставить товары в нужной последовательности.

8166d323031b522af49667d870463234.png

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

Новые задачи и новые вызовы

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

  1. Шаблоны. 
  2. Мультивалютность. 
  3. Функция нанесений.

Какие такие шаблоны?

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

Шаблон позволяет создать и запомнить следующие настройки:

  1. Настройка фонов. 
  2. Настройка отображения разметки в мессенджере: заголовок, описание, картинка. Данная функция позволяет индивидуально под каждое КП создавать свою разметку. 
  3. Контактные данные в коммерческом предложении.
  4. Водяной знак на каждом листе PDF.

76c31c41d80125c508b662ccf5998c5a.png   

Нанесения? Какие нанесения? Иногда бизнес продает нишевые товары, которые требуют корпоративного брендирования. Но не у каждого бизнеса есть свой дизайнер. Как и не каждый пользователь дизайнер. Мы решили немного помочь с этой проблемой.

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

Функции такого мини-приложения в рамках данного сервиса:

  1. Добавление логотипа на товар. 
  2. Добавление текста на товар. 
  3. Изменение настроек и стиля текста. 
  4. Управление слоями если добавляемых нанесений несколько. 
  5. Режим перспективы, который позволяет красиво добавлять картинки не только на фронтально размещенные товары, а еще и на товары, которые лежат под углом.

1bc2be85adab759cc65587285414558a.png   

На такой функционал мы потратили целый месяц! Однако игра стоила свеч. Самый первый отзыв, который мы получили:

«Вы что, хотите у дизайнеров отобрать всю работу?»

Вишенка на торте или сервис нам запили Сервис работает и расширяется. Он уникален, пока что на рынке нет похожих по функциональности решений. Мы собираем положительные отзывы и прирост пользователей растет с каждой неделей.

Рост посещаемости вызвал резкий спрос на большее количество сайтов, с которых мы могли бы забирать товары в КП. Изначально сервис парсил товары только с определенных сайтов крупных поставщиков. И в принципе сама идея парсинга товара с сайта в свое КП лежит в основе такого сервиса. Но как же расширить такой функционал? Ведь невозможно под каждый сайт написать свой отдельный парсер. Такая задача будет просто бесконечной. И вот мы решили бросить вызов и максимально приблизиться к универсальности созданного сервиса emblems. Мы создали универсальный парсер товаров!

Давайте разбираться, как это работает. Мы собрали статистику и отзывы о том, что же самое важное для пользователей при добавлении товара в коммерческое предложение. Оказалось, что это не столько характеристики, сколько наименование товара, его цена и картинка. Как правило, у пользователей, которые не используют сервис emblems основное время при создании КП уходит на добавление картинки в excel файл, а затем заполнение таблицы. И тут у нас появилась идея. А что, если мы скажем, что у любого технически исправного и наполненного сайта с товарами, такая информация содержится в едином для всех сайтов виде? Да, это разметка schema.org и OG-разметка.

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

Итог

Сервис продолжает развиваться и увеличивать количество пользователей. А где новые пользователи, там и новые функции. Уже сейчас мы видим функциональности, которые помогут усовершенствовать сервис и сделать его еще более полезным. Но это будет уже совсем другая история…

P.S. Приятный бонус

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

Вам нужна сильная техническая команда для разработки кастомного проекта?  Просто напишите нам!

Перейти на сайт

Полный текст статьи читайте на CMS Magazine