Расширение функционала и перенос интернет-магазина 4fresh на собственную платформу

Главное о кейсе

4fresh – интернет-магазин экотоваров. Руководство компании пришло к нам с запросом на обновление концепции нео-маркета. Нужно было полностью перезапустить платформу, добавить новые функции и сделать упор на продажу товаров собственного производства. На это у нас было всего лишь 5 месяцев.

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

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

Суммарно на разработку сайта разработчики QTIM потратили 15 000 часов. При этом мы уложились ровно за 5 месяцев и сумели выпустить проект в релиз без опозданий.

Как проект изменил жизнь пользователей

Вместе с переносом сайта на собственное решение мы добавили несколько новых инструментов:

«Избранное» и публичные вишлисты. В работе раздела было учтено более 40 пользовательских сценариев и добавлена система публичных подборок. Теперь пользователи могут собирать понравившиеся товары в вишлисты, делиться ими друг с другом или искать интересные продукты в коллекциях других покупателей.

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

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

Комьюнити. Мы создали блог по типу Т–Ж, в котором пользователи могут публиковать статьи и подписываться на других авторов. В будущем за комментарии и размещение контента покупатели смогут зарабатывать бонусные баллы и списывать их при оформлении покупки.

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

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

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

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

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

4fresh club. Клуб с улучшенными условиями программы лояльности и доступом к закрытым распродажами. Среди привилегий — максимальный кэшбэк 15%, возможность выбрать 3 любимых категории товара и получать за их покупку дополнительные фрэшкоины, а также бонусы за развернутые отзывы. Участники клуба получают доступ к онлайн и офлайн встречам комьюнити. Условие вступления — сделать заказ суммарно на сумму свыше 20 тыс. руб за год.

Бизнес-задача и ее решение

Перенос сайта на собственную платформу упростил задачу масштабирования и увеличения возможной нагрузки на систему при приросте количества пользователей в будущем. Мы воплотили обновленную концепцию 4fresh, добавив больше возможностей для продажи товаров собственного производства и их промотирования на сайте компании. Новые функции позволили улучшить пользовательский опыт и удобство клиентов, а также добавить для них дополнительную ценность интернет-магазина: подбор продукции по рекомендациям специалистов, расшифровка составов, внутреннее коммьюнити. Интерфейс сайта мы адаптировали так, чтобы открывать его было комфортно на любых девайсах, включая телевизоры с разрешением 8К. Мы подключили к сайту API сразу 10-ти разных платежных систем, чтобы каждый пользователь мог выбрать для себя наиболее удобный способ оплаты. Например, WebMoney или ЮMoney.

Перенос интернет-магазина на собственное решение открыл для бизнеса возможность комфортно масштабироваться в дальнейшем — теперь даже при резком увеличении количества пользователей сайт не рискует «упасть» из-за повышенной нагрузки. Работая на базе платформы, разработанной «с нуля», 4fresh больше не ограничен во внедрении новых функций, а значит сможет и дальше делать сайт удобнее и интереснее для покупателей.

Крафт (мастерство), реализация, технические детали

Мы работали над созданием новой платформы совместно с inhouse-специалистами заказчика: на нашей стороне была разработка, команда 4fresh занималась созданием дизайн-макетов. Наши процессы постоянно переплетались друг с другом, и иногда закончить определенные этапы вовремя оказывалось попросту невозможным — даже единичные задержки порой полностью ломали планирование и цепочку взаимодействий. Поэтому впоследствии мы начинали продумывать логику работы будущей платформы и проектировать блоки еще задолго до получения новых макетов со стороны заказчиков. Так нам удалось вести эти процессы параллельно.

У заказчика был запрос на микросервисную архитектуру, вместе с тем мы стартовали работу над проектом сразу на двух стеках — PHP и NodeJS. Такой симбиоз позволил нам разделить работу над разными частями сайта внутри команды и создавать их одновременно для еще большей экономии времени.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Учитывая объем задач и сжатые сроки работы, сдать проект вовремя и без ущерба результату было практически невозможно. Делать низкокачественный продукт не хотелось, поэтому у нас закономерно появилась мысль о наращивании трудовых ресурсов. Мы начали привлекать аутстафф-разработчиков и провели около 30 собеседований в поисках нужных специалистов, но ни один из них так и не попал к нам в команду, т.к. не прошел требования по навыкам. Так проект 4fresh подтолкнул нас к перестройке системы найма и расширению воронки поиска кандидатов.

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

Когда до релиза проекта оставалось всего 1,5 месяца, количество работы увеличилось на 70% — появлялись новые функции и требования, дизайн-отдел массово передавал оставшиеся макеты. При таких вводных нам не удалось избежать переработок. Сотрудники задерживались, кто-то доделывал часть работ прямо из самолета по пути в отпуск, писать код наравне со всей остальной командой сел даже CEO. Мы стремились по максимуму поддерживать команду в момент стресса, постоянно оставались в контакте друг с другом и вводили новые способы мотивации: как финансовые, так и моральные.

Прочая информация о кейсе

Скриншоты