Как мы увеличили конверсию сайта в несколько раз, сделав редизайн интернет-магазина современной одежды Stylish

Всем привет! На связи Далер — основатель ByteTown, сегодня я хочу рассказать вам про наш новый кейс.

Stylish — магазин стильной одежды со своим производством. Бренд представлен во многих городах страны: Москва, Казань, Екатеринбург, Челябинск, Магнитогорск.

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

Основной сложностью был ограниченный дедлайн: нужно было практически с нуля разработать интернет-магазин и подключить необходимые интеграции к черной пятнице. На весь проект было затрачено 5 месяцев.

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

Так как аудитория бренда тесно пересекается с инстаграмом (проект Meta Platforms Inc., деятельность которой в России запрещена), был продуман функционал историй и подборки от блогеров.

После того, как дизайн был готов, мы начали параллельно разрабатывать фронтенд, бекенд и API спецификацию. Для этого применили подход contract-first, когда сначала разрабатывается и согласовывается с разработчиками API спецификация. Далее началась активная работа по аналитике, дизайну и разработке

Так как у клиента уже был сайт, начали с анализа метрик и просмотра вебвизора. Как оказалось, конверсия на сайте и правда была очень низкая: всего 0,3%. Изучив метрику, были выявлены основные точки, на которых посетитель уходит с сайта, на их основе была начата проработка карты сайта и составление прототипов. На данном этапе особое внимание уделили каталогу, карточке товара и оформлению заказа.

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

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

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

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

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

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

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

Со стороны фронтенда:

Для разработки использовался next.js — фреймворк для создания веб-приложений на React с серверным рендерингом. Данный фреймворк предоставляет набор инструментов и готовых компонентов, которые ускоряют процесс разработки, автоматически оптимизирует скорость загрузки страниц и улучшает общую производительность приложения, обеспечивает SEO и масштабируемость приложения.

Для добавления статической типизации и строгой проверки типов в JavaScript использовался TypeScript. Он позволяет улучшить качество кода, упростить его понимание и поддержку.

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

Со стороны бэкенда:

— Использовали CMS 1С-Битрикс из-за большого объема готового функционала для интернет магазина, а также php фреймворк Slim для создания кастомного rest api.

— Организовали вывод динамической информации на фронтенд: Поскольку фронтенд написан на React, требовалось создать свое rest api для получения данных с бекенда.

— Настроили импорт данных из клиентского 1с. Требовались кастомные доработки по специфичным требованиям клиента.

— Настроили административную панель сайта для удобной работы менеджеров клиента с сайтом.

— Создали фильтры для товаров для упрощения поиска по каталогу.

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

— Настроили интеграцию со СДЭК для автоматического создания заявок на доставку.

— Интегрировали систему лояльности prime hill для начисления бонусных баллов за заказы и списания.

— Истории

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

— Подборки от блогеров

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

— Онлайн-консультация в карточке товара

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

— Lookbook

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

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

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

Также прикрепляем для вас ссылку на разработанный сайт

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

А также подписывайтесь на социальные сети:

Telegram-канал: ByteTown

Telegram для связи: ByteTown