Мультибрендовый интернет-магазин на базе сайта Timberland.ru

Из Timberland в Bootwood: «Ребята, это ASAP!»

Чего хотел клиент

Наш клиент — ДжамильКо, ведущий дистрибьютор брендов одежды, обуви и аксессуаров из-за рубежа. Один из самых известных брендов под его крылом — это Timberland.

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

Нам нужно было как можно скорее вырастить новый мультибрендовый интернет-магазин на базе старого сайта timberland.ru под новым зонтичным брендом Bootwood.

Для начала мы должны были:

• перенастроить все интеграции в связи со сменой названия и домена; 
• внести в интерфейс изменения, связанные со сменой названия и добавлением новых брендов;
• переработать архитектуру интернет-магазина, чтобы монобренд Timberland стал мультибрендом Bootwood.

Добавляем новые бренды

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

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

Рабочий интернет-магазин ≠ хороший интернет-магазин. Сайты, которым 10-15 лет, словно настом, покрыты костыльным кодом. Чем его больше, тем медленнее сайт реагирует на действия пользователя, и тем труднее разработчикам это исправить. Архитектура такого сайта выглядит как-то так: 

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

В перспективе ДжамильКо хотел добавить на Bootwood больше брендов. Мы предусмотрели вариант, который позволял бы клиенту делать это без подключения разработчиков.

Проводим рефреш

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

Идём в релиз

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

Мы знали, что так будет, поэтому постарались облегчить постоянным покупателям интернет-магазина переход с timberland.ru на bootwood.com: 

• сделали редирект с прошлого сайта timberland.ru;
• оставили возможность регистрации по бонусным картам Timberland — у людей сохранился персональный «ключ», с помощью которого они могли войти на новый сайт;
• сохранили визуальную преемственность: сделали отсылку к бренду в заголовке главной страницы и оставили основные элементы UI-дизайна (рамки, кнопки, фотографии) острыми, без скруглений, как это было у Timberland.

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

Всё падает! Аудит и рефакторинг сайта

Начинаем рефакторинг и внедряем elasticsearch

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

Загрузка страницы могла длиться до двух секунд. Это не долго — это критично для существования бизнеса.

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

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

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

Это сработало. Elasticsearch стал для нас волшебной таблеткой — после его внедрения сайт ожил. Скорость в результате всех наших манипуляций увеличилась на 34%. И главное — мы успели в срок. Чувствовали ли мы себя атлантами? Да, немного.

Улучшаем дизайн

Параллельно с рефакторингом проводили дизайнерский аудит. Мы разобрали сайт по косточкам, чтобы выявить, какие проблемы с UX есть на каждой страничке. Описали эти проблемы и предложили решения. Делали это сразу и для мобильной версии, чтобы клиент видел объём работы, и мы могли грамотно спланировать дальнейшие спринты.

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

Реализовать все улучшения к осени не позволяло время. Поэтому мы изучали поведение пользователей по Яндекс Метрике, чтобы сформулировать гипотезы и понять, какие изменения лучше внести сейчас.

С какими изменениями вошли в сезон активных продаж 

• Сделали баннеры на главной динамическими. На главной не было автоматического пролистывания баннеров. Индикаторы для смены находились вне зоны фокуса пользователя — а значит, он мог пропустить объявления. Новое решение позволило этого избежать.

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

• Сделали отдельную категорию с брендами в выпадающем меню. Пользователи привыкли, что в магазине есть только один бренд. Чтобы показать, что ассортимент расширился, вынесли бренды как отдельную категорию. 

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

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

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

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

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

• Добавили в корзину возможность частичной оплаты. Модель «покупай сейчас — плати потом» даёт ощущение выгодной покупки, поэтому сервисы Яндекс Сплит и Долями популярны у пользователей. Ну, и ещё — с ними реально удобнее покупать (это не реклама).

• Визуализировали изменения статуса заказа. Плашки меняют цвет, когда меняется статус заказа. Это создаёт ощущение того, что процесс движется, и пользователь меньше тревожится за свой заказ. 

К чему всё это привело? Показатели отказов с каталога сократились в 2,5 раза, а глубина просмотра страниц интернет-магазина выросла в 2 раза. Ну, классно же! И это мы только начали.

Развитие Bootwood: воплощение намеченных планов и улучшение клиентского сервиса

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

Решение объединить несколько брендов под одним помогает менее популярным брендам получить новую аудиторию. В большинстве люди приходят на Bootwood за Timberland и New Balance, и открывают для себя новые имена.

Мы стараемся заботиться о том, чтобы не только сайт удовлетворял потребности покупателей, но и вся коммуникация Bootwood была консистентной. Например, однажды мы увидели, что письма, которые приходят в подтверждении покупки дефолтные — выглядят как обычный email. Мы подогнали их дизайн под стиль сайта, чтобы людям было красиво.

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

Итоги

На смену Timberland пришёл Bootwood. Интернет-магазин сменил название, изменилась внутренняя структура сайта, но нам удалось сохранить постоянных покупателей и их доверие. И даже больше — поднять коммерческие показатели. Клиент счастлив, а мы продолжаем поддерживать и улучшать Bootwood. 

Раз в квартал делаем отчёт по проекту: анализируем популярные сценарии поведения пользователей, сравниваем показатели до/после, корректируем бэклог и берем в работу только приоритетное на текущий момент. Так у нас получается внедрять актуальные для бизнеса изменения. Прямо сейчас — тестируем мультикорзину. Фича увеличит опциональность оформления заказа и позволит делать частичные возвраты. 

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

Результат наглядно

Отзыв клиента