EMBLEMS
Emblems — уникальный сервис для формирования коммерческих предложений
Emblems — это сервис, который превращает подготовку коммерческого предложения в точную, быструю и визуально убедительную операцию. Он создан для B2B-компаний, которым важно не просто отправить прайс, а донести ценность продукта через стиль, структуру и бренд.
О проекте
Тематика: Сувениры
Тип проекта: Порталы и сервисы
Сайт проекта: https://emblems.by/
#Сувениры
#B2B
#Брендирование
#Электронная коммерция
Задача
Цель сервиса
Создать сервис, который автоматизирует формирование коммерческих предложений для нишевых B2B-компаний. Упростить процесс добавления товаров, визуализации бренда и генерации презентационных файлов — без участия дизайнера и верстальщика.
Сделать подготовку КП быстрой, гибкой и визуально убедительной. Пользователь вставляет ссылку на товар — сервис сам парсит данные, подставляет логотип, формирует презентацию и позволяет управлять характеристиками, ценами и стилем отображения. Всё — в одном окне, без Excel и ручной сборки.
Emblems — уникальный сервис для формирования коммерческих предложений на просторах СНГ
Сервис автоматически собирает КП из ссылки на товар, подставляет фирменный стиль, визуализирует данные и формирует презентацию, готовую к отправке. Всё — без дизайнера, без верстки, без Excel.
Мы с энтузиазмом взялись за такую задачу, ведь именно в таком проекте мы могли применить все наши технические навыки и дать волю фантазии о том, каким мог бы быть такой сервис.
Существует огромное множество нишевых бизнесов, которые вынуждены каждый день создавать и ежедневно рассылать огромное количество коммерческих предложений своим клиентам.
При этом необходимо понимать, что у каждого бизнеса свои особенности:
актуализация на внешней составляющей продукта;
возможность брендирования каждого товара под конкретного покупателя;
необходимость создать коммерческое предложение из разных товаров разных поставщиков;
возможность организованного хранения коммерческих предложений;
возможность создавать коммерческие предложения в различных форматах и разрешениях.
Идея
Разработка сервиса
И мы, и заказчик понимали, что такой продукт будет уникальным в своем роде. Четкого понимания, как это должно выглядеть на старте работ, еще не было. Однако нами был составлен список первоначальных требований и функций, которые точно должны быть у такого сервиса.
В первоначальном техническом задании были определены следующие обязательные функции для такого сервиса:
Составление технического задания
конструктор — поле с товарами и возможностью их редактирования
блок управления фонами — возможность настраивать рабочее окружение самого проекта под себя или под конечного заказчика
блок управления элементами рабочей области
работа с сортировкой
работа с сортировкой
работа с ценами
парсер товаров с других сайтов
Начнем со сложного ...
Пока наш дизайнер рисовал макеты — мы решили не терять время и решить краеугольный и самый важный функционал нашего сервиса: парсеры.
Необходимо было разработать удобный функционал добавления товаров с других сайтов. А что может быть удобнее, чем вставить ссылку на товар и получить все его данные? Задача оказалась нетривиальной. Был определен список сайтов, под которые мы в индивидуальном порядке разработали 9 парсеров, которые могут забирать товары по одному или группами. При этом каждый парсер был настолько уникален, что забирал у некоторых сайтов даже личные цены и скидки того, кто такое коммерческое предложение создает.
Дизайн и верстка
К тому времени как парсеры товаров были разработаны — наш дизайнер совместно с отделом front-end разработки сделали то, что понравилось заказчику с первого взгляда. Мы практически ничего не меняли в начальных макетах, поэтому этап верстки проекта прошел крайне быстро и без остановок, почти…
Первые трудности
Несмотря на то, что сам сервис мы нарисовали и внедрили верстку достаточно быстро, оставался еще один момент: генерация файлов и презентация. Необходимо было придумать, как и в каком виде разместить товары в презентации и при генерации файлов.
Проблема
Проблема не кажется такой сложной если бы не одно но! Вариантов отрисовки товаров должно быть 5!
Нам необходимо было рассмотреть каждый возможный кейс, когда товары в коммерческом предложении и презентации размещаются в книжном (вертикальном) формате, а также 4 варианта размещения товаров в горизонтальном варианте.
Нам необходимо было рассмотреть каждый возможный кейс, когда товары в коммерческом предложении и презентации размещаются в книжном (вертикальном) формате, а также 4 варианта размещения товаров в горизонтальном варианте.
Процесс
Задача оказалось решаемой. Были созданы все вышеуказанные варианты отображения товаров, при этом для каждого варианта мы задали свой уникальный стиль отображения характеристик каждого товара, а также правила заполнения листа и переносов в PDF варианте.
Решение
Далее как по маслу
После того как были решены самые трудные задачи, мы приступили к программированию всего оставшегося функционала:
Для удобства пользователей разработали функционал изменения фонов в коммерческом предложении. Это очень полезно для тех, кто создает коммерческие предложения под конкретного клиента.
Было решено добавить блок управления характеристиками товаров. Такой функционал является хорошим инструментом для того, чтобы индивидуально настроить каждое КП под свои нужды.
Сортировка товаров в коммерческом предложении с возможностью вручную расставить товары в нужной последовательности.
Работа с ценами. В таком функционале мы позволили пользователю прямо в сервисе массово изменять цены на товары, учитывая свои внутренние правила формирования цены.
В течении трех месяцев проект насчитывал довольно объемный функционал полезных инструментов, которые могли облегчить жизнь пользователям. Было решено запустить MVP версию проекта для узкого круга пользователей.
Новые задачи и новые вызовы
Запуск MVP версии сервиса произвел фурор. Мы собрали огромное множество положительных отзывов о том, как такой сервис облегчил жизнь менеджерам и ускорил их производительность в несколько раз. Вместе с тем, к хорошему привыкаешь быстро, и к нам пришли за новыми функциями, которые, как оказалось, очень нужны заинтересованным лицам:
Шаблоны
Мультивалютность
Функционал нанесений
Что такое шаблоны?
Шаблоны позволяют дополнительно кастомизировать внешние аспекты коммерческого предложения индивидуально — под себя или под конечного клиента. Однажды создав шаблон, в дальнейшем вы можете применять настройки КП в один клик в любое время и для любого КП.
Настройка фонов
Настройка отображения разметки в мессенджере: Заголовок, описание, картинка. Данный функционал позволяет индивидуально под каждое КП создаю свою разметку
Контактные данные в коммерческом предложении
Водяной знак на каждом листе PDF
Скачивание коммерческого предложения
Сервис позволяет скачать готовое коммерческое предложение в PDF одним кликом. Файл собирается автоматически — с учетом выбранных товаров, бренда, цен и визуального стиля. Никакой ручной верстки, всё готово к отправке клиенту.
При желании пользователь может выбрать нужный ему вариант формата страницы
Также мы позволяем пользователю управлять количеством товаров на странице
Скачивание КП
Формирование ссылки на КП
Каждое КП можно не только скачать, но и отправить как ссылку
Это удобно для быстрой коммуникации: клиент открывает презентацию в браузере, без вложений и лишних файлов. Ссылка ведёт на интерактивную версию, которую можно обновлять в реальном времени.
В КП размещен 1 товар на слайд
1
В КП размещены 4 товара на слайд
4
В КП размещены 3 товара на слайд
3
В КП размещены 2 товара на слайд
2
Нанесение
Нанесения?
Какие нанесения?
Какие нанесения?
Иногда бизнес продает нишевые товары, которые требуют корпоративного брендирования.
Не у каждого бизнеса есть свой дизайнер. Не каждый пользователь — дизайнер. Мы решили немного помочь пользователям с этой проблемой. Нами был разработан отдельный большой функционал, который позволяет показать конечному клиенту, как будет выглядеть логотип его компании или любой другой рисунок на товаре.
Не у каждого бизнеса есть свой дизайнер. Не каждый пользователь — дизайнер. Мы решили немного помочь пользователям с этой проблемой. Нами был разработан отдельный большой функционал, который позволяет показать конечному клиенту, как будет выглядеть логотип его компании или любой другой рисунок на товаре.
Функции такого мини приложения в рамках данного сервиса:
Изменение настроек и стиля текста;
Добавление текста на товар;
Добавление логотипа на товар;
Управление слоями, если добавляемых нанесений несколько;
Режим перспективы, который позволяет красиво добавлять изображения не только на фронтально размещенные товары, но и на товары, которые лежат под углом.
На такой функционал мы потратили месяц! Однако игра стоила свеч. Самый первый отзыв, который мы получили: «Вы что, хотите у дизайнеров отобрать всю работу?»
Сервис работает и расширяется. Он уникален. Ничего похожего пока нет.
Вишенка на торте
Мы собираем положительные отзывы, и прирост пользователей растет с каждой неделей. Заказчик решил дать такому сервису значительное ускорение в росте. Изначально сервис парсил товары только с определенных крупных сайтов поставщиков. И, в принципе, сама идея парсинга товара с сайта в свое КП лежит в основе такого сервиса. Но как расширить такой функционал? Ведь невозможно под каждый сайт написать свой отдельный парсер — такая задача будет бесконечной. Мы решили бросить вызов и максимально приблизиться к универсальности созданного сервиса Emblems. Мы создали универсальный парсер товаров!
Теперь пользователь имеет возможность вставить ссылку в сервисе на абсолютно любой товар в любом интернет-магазине, и, если у товара есть такая разметка, то сервис emblems. by создаст такой товар и заполнит необходимые свойства: наименование, картинка, цена и, иногда, некоторые другие характеристики.
Давайте разбираться. Мы собрали статистику и отзывы о том, что самое важное для пользователей при добавлении товара в коммерческое предложение. Оказалось, что это не столько характеристики, сколько наименование товара, его цена и картинка. Как правило, у пользователей, которые не используют сервис emblems, основное время при создании КП уходит на добавление картинки в excel-файл, а затем — заполнение таблицы. И тут у нас родилась идея. А что, если мы скажем, что у любого технически исправного и наполненного сайта с товарами, такая информация содержится в едином для всех сайтов виде? Да, это разметка schema.org и OG-разметка.
UI-Kit
Обязательной частью любого проекта SLAM является создание отдельного UI-kit, который будет далее использоваться для развития проекта — нашими или другими специалистами.
Aa
Alegreya Sans
Regular
Medium
Bold
15
16
18
20
30
40
60
White
HEX
#FFFFFF
255 255 255
RGB
RGB
245 245 245
#F5F5F5
HEX
Light Gray
0 71 186
#0047BA
HEX
Blue
RGB
RGB
Black
HEX
#181818
24 24 24
Gradient
HEX
#2265D1 - #E951AD
34 101 209 - 233 81 173
RGB
127 132 147
#7F8493
HEX
Gray
RGB
Сохранить перспективу
UI KIT
UI Kit
Дизайн-система проекта состоит из UI-элементов и описанных компонентов.
Button
Сбросить
Сохранить
Сбросить
Сохранить
Исходное
Ховер и клик
Ховер
Клик
Исходное
On
Off
Hover
Disable On
Исходное
Link
Добавление фона
Select boxes
Switch
Input
Сохранить перспективу
Monserrat
Monserrat
Monserrat
Monserrat
Rosatom
Alegreya
Roboto
Вставьте ссылку, чтобы добавить товар
+
Вставьте ссылку, чтобы добавить товар
https://*servername/site*/*servername/srna
+
+
Фон КП
Ховер и клик
ite*/*serve
Результаты проекта
Сервис сократил время подготовки КП с нескольких часов до 5−10 минут. Уже на первом этапе MVP показал высокий уровень вовлечённости и готовность к масштабированию
Сервис продолжает развиваться и прирастать пользователями. А где новые пользователи, там и новые функции. Уже сейчас мы видим набор функций, который поможет усовершенствовать сервис и сделать его еще более полезным для пользователей. Но это будет уже совсем другая история…
И все ради того, чтобы…
Компании получили инструмент, который объединяет визуал, структуру и данные в одном окне. АРТЭ не просто сделал удобный сервис, но дал возможность всем игрокам рынка сувениров в СНГ продавать быстрее, больше и эффективнее
Компании получили инструмент, который объединяет визуал, структуру и данные в одном окне. АРТЭ не просто сделал удобный сервис, но дал возможность всем игрокам рынка сувениров в СНГ продавать быстрее, больше и эффективнее