Что такое Live-stream-shopping
Миллениалы изобрели телемагазины. Эта шутка точно описывает live-stream-shopping как разновидность e-commerce. В общем виде так оно и есть. Live-stream-shopping — это возможность наблюдать за эфиром и сразу же заказывать онлайн то, что показывают на стриме. Развитие сегмента подстегнула пандемия коронавируса: многие сидят дома и все покупают онлайн, как еще выделить площадку на фоне бесконечно одинаковых онлайн-магазинов?
Активнее всего отрасль развивается в Китае: по предварительным подсчетам, в 2020 году онлайн-продажи, в том числе через стримы, составили около $242 млрд. Сейчас LSS набирает обороты в России. Самый яркий пример — «Залипакинг» (стримы с российскими звездами, блогерами и инфлюенсерами) от AliExpress.
Начнем с прототипа
Заказчики обратились к нам в августе. Они знали китайский язык и следили за ростом e-commerce в Азии. Ресерч темы показал, что за пределами Китая аналогов немного и у подобного стартапа на европейском рынке может быть будущее.
Ребята пришли к нам по «старой памяти»: до этого мы уже работали с одним из них над совместным проектом — приложением Energo для аренды пауербанков в Москве. Они предложили взяться за разработку live-stream-shopping приложения Eyebuy — российского аналога китайского e-commerce.
Задача показалась интересной, но мы честно признались: опыта создания мобильных приложений, как это, у нас нет. При этом очень хотелось испытать наш стек, попробовать реализовать на нем всю запрошенную функциональность и получить опыт разработки подобного проекта. Чтобы не рисковать, мы решили стартовать с прототипа. У заказчика не было четкого скоупа и большого бюджета, но было желание стартануть с тем, чего на европейском рынке ещё практически нет.
Вместе мы хотели проверить жизнеспособность стартапа до масштабной разработки и больших вложений. И убедиться (или нет) в возможности реализовать задумку технически. Поэтому работа была экспериментальной, не в формате классического проекта.
Поиск референсов
Мы начали работу с изучения аналогов. В России подобных проектов мало, и найти такие, которые мы хотели бы взять в качестве референсов, мы не смогли.
Хорошие примеры нашлись на зарубежном рынке. Обнаружили шведскую платформу BamBuser, которые заинтересовали нас своим SDK для стриминга. Сначала мы решили взять его за основу, но передумали: лучше делать все своими руками, чтобы изучить все подводные камни.
На фичи и флоу смотрели в индийском сервисе BulBulTV. Принцип работы сервиса приглянулся, и в наборе фич для своего проекта мы решили ориентироваться на него. В качестве отстройки придумали свою killer feature — пользователь переходит из нашего приложения в интернет-магазин, корзина с понравившимся ему товарами уже собрана. Пользователю нужно только оплатить заказ и ждать посылку.
Показавший себя стек
Мы договорились на разработку дизайна интерфейса для веба и мобильного приложения Eyebuy и разработку прототипа самого приложения.
Успешный опыт работы над Energo (приложение по аренде пауэрбанков) не оставлял сомнений в выборе стека: взяли наш классический стек — React Native для мобилки, React для фронта веб-версии и node.js для бэка. Команду сформировали из трех человек: проектного менеджера, UI/UX дизайнера и одного фулстек-разработчика.
Экспресс-дизайн
Работа шла быстро, с дизайном тоже разобрались оперативно. Со стороны заказчика требований к оформлению не было, но были референсы, да и на стадии прототипа у дизайна прикладной характер — понять, что где расположено. У нашего дизайнера был опыт создания мобильного приложения, похожего на Eyebuy (для видеосозвонов), поэтому сделать «функционально и без заморочек» она смогла быстро, но не без проблем.
Референсы ускорили работу, но не стали таблеткой от всех проблем. Например, споткнулись на формате товарных карточек. На клиентских вайрфреймах они перекрывали сам стрим. Сейчас работают как истории в Инстаграме: если пользователя товар пока не заинтересовал, ничего не мешает ему наблюдать за происходящим на стриме.
Первые стримы
На стартовую разработку live-stream-shopping приложения ушел месяц. Мы собрали прототип и протестировали его с владельцами небольших шоурумов. На этом этапе максимальное количество уникальных пользователей доходило до 40 человек, а находились одновременно в стриме 25 клиентов.
Поначалу стримы работали с перебоями: количество зрителей фиксировалось неправильно. Мы использовали библиотеку Socket.IO и записывали количество real-time пользователей в переменную. То есть действие «пользователь подключился к стриму» увеличивало число в переменной, но не всегда корректно уменьшало при отключении пользователя.
Комментарии зрителей хаотично прыгали по экрану стримера и отвлекали его. Проблема решилась невероятно просто: сортировкой комментариев по дате.
Оставалась проблема с killer feature — интегрироваться с корзиной каждого нового магазина приходилось вручную. Не могли написать универсальный код, который делал бы это автоматически, поскольку у всех разные движки и структура сайта.
Мы фиксили баги на ходу и уже понимали, что брендам это интересно: желающих тестировать прототип было достаточно.
Переход к пилоту
Интерес к live-stream-shopping приложению тестовые стримы подтвердили, и мы перешли к разработке пилотного проекта.
Как вы помните, четкого скоупа задач и нормального планирования (Jira в проект удалось внедрить недавно) поначалу не было, ведь мы договорились на прототип.
Разработка live stream shopping приложения стала для нас челленджем, и за время работы мы столкнулись с рядом легко и не очень исправляемых багов. Так например, основа такого приложения — стримминг. Когда мы тестировали приложение, видео в в flv-формате на Android-устройстве проигрывалось хорошо. Все изменилось при тестинге на IPhone: iOS не поддерживает флеш-форматы видеофайлов. Это исправили легко: изменили формат видео на hls на сервере.
Правда, на этом проблемы с айфонами не закончились: по дефолту на них нельзя запускать видео вместе со звуком. Варианта два: запускать замьюченный стрим и надеяться, что пользователи сами поймут, как включить звук, или выкатывать поп-ап с просьбой включить звук при старте. Выбрали поп-ап, потому что пользователи заходили на стрим и спрашивали в комментариях, как включить звук.
Первые «большие» стримы
С пилотом заказчик пошел к крупным брендам: Летуаль, Mascotte, Декатлон. Им идея была интересна, и они согласились на тестовые стримы.
Здесь эфиры прошли хорошо: они не падали, качество было высоким. Например, на стриме Mascotte было уже 500 уникальных зрителей (в противовес 40 на первых тестах) и 39 человек онлайн одновременно. Во время этого эфира тестировали killer feature: пользователи собирали айтемы в корзину прямо на стриме, а корзина на сайте Mascotte собиралась автоматически. За время стрима в корзину перешли 83 раза.
Но оставались трудности с добавлением товаров в стриме. Стримы повторяются, и разработчику каждый раз нужно добавлять товары по новой. Эту проблему пофиксили: храним массивы в ассоциативном объекте, а товары привязываются к конкретному стримеру.
Вот что нам предстоит доделать:
- Записи эфиров не сохраняются. На старте проекта тестировали это вручную (запускаешь стрим → записываешь видео → сохраняешь на Google drive).Сейчас мы ищем нормальное автоматизированное решение и пока нашли библиотеку для стриминга — node-media-server. С ней можно сохранять стрим в формате mp4. Но в документации ничего не сказано про сохранение файлов на носитель, поэтому придется дописывать эту функциональность самим.
- Добавлять товары в стримы пока приходится руками. Нужна автоматизация.
- Остается задача-вопрос с открытым финалом: что делать, если к стриму подключится миллион пользователей? Здесь нас страхует то, что мы писали на node.js, который помогает выдерживать большую нагрузку.
Итог: переход к MVP и постоянные клиенты
Пилотная версия приложения оказалась востребованной. Мы перешли к следующей стадии разработки live-stream-shopping-приложения — MVP, в которой планируем уменьшить объем ручного труда. Так магазины смогут вести несколько стримов одновременно и легко загружать товары в админку.
Приложение пока нельзя скачать и метрик эффективности нет, но тестовые стримы с 500 и более уникальных пользователей — это уже успех. Сейчас заказчик ищет новых клиентов, а мы оцениваем фичи, которые клиенты запрашивают после тестовых стримов. При этом у проекта уже появились постоянные клиенты: ювелирный бренд и бренд одежды.
Команда проекта: Елена Фарберова (PM), Юлия Вакуленко (UI/UX дизайнер), Константин Земляков (full-stack разработчик)
Кейс подготовили: Дарья Лобачева, Екатерина Кобзева
