Наши работы 6 мин 2017-08-08

Разработка сервиса по печати на воздушных шарах

Никто не может грустить, когда у него есть воздушный шарик!

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

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

Сегодня производители воздушных шариков решили пойти навстречу розничным клиентам. Так родилась идея создания инструмента для заказа услуги индивидуальной печати на воздушных шарах.

«Весёлая затея» — хорошая идея

К нам обратились две компании:

Они решили запустить совместный проект печати на воздушных шарах и создать для него отдельный сервис под маркой «Весёлая затея».

Обоснование и цель проекта

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

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

Именно поэтому главной целью проекта стало расширение рынка печати на воздушных шарах за счёт привлечения розничных потребителей.

Постановка задачи

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

B2C Для B2C-клиентов предполагалось создавать украшения на праздники и памятные даты.
B2B Для B2B-покупателей — изготавливать брендированную продукцию.

Поиск решения

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

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

Казалось бы, ничего особенного, осталось подобрать похожее готовое решение и адаптировать его под наши цели, но… Оказалось, что готовых решений не существует.

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

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

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

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

Техническая реализация

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

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

Мгновенную реакцию интерфейса должна была обеспечить библиотека Vue.js, которая могла бы работать как автономно, так и в сочетании с другими библиотеками.

Клиентскую часть сайта мы разработали из различных скриптовых библиотек.

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

Тестирование

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

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

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

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

Оптимизация

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

Уменьшили объем загружаемых данных

Убрали долгую загрузку изображений в прелоадер

Оптимизировали работу с кэшем браузера

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

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

Дизайн

Каким бы серьёзным и сложным не был наш сервис «внутри», он должен быть праздничным снаружи. Мы решили использовать яркую солнечную цветовую гамму, большие красочные фотографии шаров, фоновые подложки с видом города, инфографику.

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

Сценарии пользователей

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

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

Что в итоге

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

Работа над проектом до сих пор не закончена. В планах остаётся разработка мобильного приложения, отдельного сервиса для оптовых клиентов, сервиса печати на фольгированных шарах и т.п. Но уже сейчас у каждого из вас есть простой и удобный инструмент для заказа индивидуальной печати на воздушных шарах - https://print.zatey.ru.