Как мы разработали pinkbus.ru: сервис-конструктор по продаже дизайнерских вещей

Давно не делали публикации о выполненных проектах. А о разработке нами этого, одного из самых сложных за 15 лет существования агентства, никто толком не знает, хотя окончательно pinkbus.ru был сдан в 2018 году. Сегодня исправляем эту оплошность.

В 2014 году разработали сайт для продажи вещей с принтами от иллюстраторов и дизайнеров. Наша разработка на тот момент была уникальной, потратили на нее около 200 часов и после сделали ряд улучшений. Функционал конструктора оказался актуальным и сегодня: с января 2021 года в наше агентство поступило несколько заявок на создание подобного функционала.

Цели и задачи

Целью было сделать сайт-сервис для продажи дизайнерских вещей, в котором иллюстраторы смогут формировать расположение принтов на предметах и устанавливать сумму, которую хотят получить за продажу вещи со своим дизайном на площадке PinkBus. Еще одним пунктом была реализация комьюнити-платформы для общения между иллюстраторами, дизайнерами и ценителями их работ.

Особенности проекта

Важным было по максимуму автоматизировать процесс формирования заказа, расчета доставки и выбора разных способов оплаты, включая Яндекс.Деньги и VISA.

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

Немного фактов:

1. Серверная часть построена на фреймфорке Ruby on Rails, с использованием open-source библиотек.

2. На сайте реализована сложная система генерации превью товаров с принтами.

3. На иллюстраторов можно подписаться, чтобы получать информацию о появлении новых работ.

4. Разработан функционал для формирования макетов для печати.

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

Начинали с нескольких категорий, для которых отрисовали мокапы вещей в формате SVG:

1. холст,

2. постер,

3. сумка,

4. картина,

5. обложка,

6. чехол,

7. косметичка,

8. сумка пляжная.

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

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

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

В процессе работы над проектом дизайнеры студии сделали 25 макетов сайта и разработали 19 мокапов для представления продукции. Каждый уникален, ведь для формирования итогового представления зонта, например, нужно просчитать 8 секций и собрать их в одно изображение, причем в реальном времени.

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

Результат

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

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