Перезвоните мне

Разработка интернет-магазина спортивной одежды для женщин

Улучшили онлайн-присутствие бренда: обновили дизайн, добавили функции и повысили производительность сайта

Отрасль

ECommerce

Регион

USA

Год

2023

Услуги
Бэкенд
Фронтенд
Технологии
JavaScript
Shopify
Сложность
Bona Fide обложка
Время разработки

3 месяца

Команда

1 PM, 2 Fullstack, 1 QA

Статус проекта

Проект успешно реализован

О клиенте

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

Сегодня Bona Fide — это современное производство площадью 29 000 квадратных футов с передовым оборудованием на площадке. Ежемесячно компания выпускает более 18 000 изделий, охватывая весь цикл — от идеи и дизайна до прямых продаж конечному покупателю.

Целевая аудитория Bona Fide — женщины, которые хотят выглядеть уверенно и привлекательно, ценят оригинальный дизайн, удобство и качество одежды. 

Ситуация, в которой обратился

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

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

Задача

Перед нашей командой были поставлены следующие задачи:

1. Интегрировать новый дизайн — адаптировать интерфейс сайта под новый дизайн от клиента, чтобы подчеркнуть уникальный стиль бренда и улучшить визуальное восприятие.

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

3. Провести техническую оптимизацию — сократить время загрузки страниц с помощью оптимизации кода и изображений.

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

Изображение проекта

Баннер Bona Fide

Решение

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

2. Упростили процесс регистрации, добавив возможность быстрой авторизации через социальные сети. 

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

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

5. В финале проекта интегрировали инструменты маркетинговой аналитики для отслеживания поведения пользователей и повышения эффективности рекламных кампаний.

Артем Беляков
Артем Беляков
Менеджер проекта

Работа над этим проектом была удобной и продуктивной для всей команды. Заказчик предоставил современный дизайн, который мы адаптировали под требования платформы Shopify. Мы сосредоточились на верстке ключевых страниц — Главной, Каталога, Личного кабинета и других, тщательно проверяя соответствие макетам по стилю и функциональности.

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

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

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

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

Читать полностью

РЕАЛИЗОВАННЫЙ ФУНКЦИОНАЛ

Новый дизайн сайта

Новый дизайн сайта

Обновили дизайн

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

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

Меню без лишних элементов

Меню без лишних элементов

Оптимизировали меню

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

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

Все необходимые функции при этом остались на месте.

Страница регистрации пользователя

Страница регистрации пользователя

Добавили авторизацию через соцсети

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

Обновленный интерфейс корзины

Обновленный интерфейс корзины

Доработали личный кабинет и корзину

Настроили личный кабинет с функциями от Shopify: восстановление пароля, просмотр истории заказов и управление личными данными. 

Добавили функцию «Просмотреть корзину», которая упростила процесс покупок и позволила пользователям контролировать свои заказы.

Фильтр товаров в каталоге

Фильтр товаров в каталоге

Добавили фильтр товаров и оптимизировали каталог

Настроили расширенные фильтры и поиск товаров с помощью приложения Shopify Product Filter & Search. 

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

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

Дополнительно мы улучшили отображение логотипов при подгрузке товаров.

Рекомендации с новыми настройками

Рекомендации с новыми настройками

Проработали функционал ленты рекомендованных товаров

Внедрили несколько дополнений в рекомендации: 

1) Внедрили модуль Complete Your Outfit, который предлагает товары для создания комплектов. Модуль также позволяет клиентам быстро добавлять дополнительные товары в корзину.

2) Доработали алгоритм, который помогает автоматически подбирать нужные товары в рекомендации. 

3) Добавили администраторам сайта возможность регулировать рекомендации вручную. Так в выдачу можно будет добавлять товары в зависимости от актуальных трендов, акций и новинок.

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

Блок с отзывами о товаре

Блок с отзывами о товаре

Интегрировали систему обратной связи

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

Система бонусов в личном кабинете

Система бонусов в личном кабинете

Интегрировали систему бонусов

Бонусную программу лояльности интегрировали через приложение Loyalty Program. Теперь пользователи могут управлять программой лояльности, отслеживать свои бонусы и получать доступ к эксклюзивным скидкам прямо из личного кабинета. 

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

Блок для работы с соцсетями

Блок для работы с соцсетями

Добавили интеграции с социальными сетями и рекламные блоки

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

Сделали страницу «Want to collab», через которую блогеры и инфлюенсеры могут подать заявку на сотрудничество с брендом. Это помогает клиенту расширить охваты и укрепить репутацию через партнерства.

Скорость сайта стала выше

Скорость сайта стала выше

Оптимизировали скорость и производительность сайта

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

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

Поп-ап с предложением подписаться на рассылку

Поп-ап с предложением подписаться на рассылку

Настроили аналитику и маркетинговые инструменты

Подключили Google Analytics и Facebook Pixel для детального отслеживания поведения пользователей и более точной настройки рекламных кампаний. 

Внедрили яркое всплывающее окно для сбора email-адресов. На нем предложили посетителям скидки при подписке, что помогло повысить конверсию и превратить больше посетителей сайта в клиентов.

Этапы разработки

1

Верстка

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

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

2

Бэкенд и интеграции

Мы интегрировали аналитические инструменты (Google Analytics и Facebook Pixel) для сбора данных и оптимизации рекламы. Внедрили приложения для работы с фильтрацией товаров, отзывами и бонусной системой. 

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

3

Тестирование и оптимизация производительности

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

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

Результаты

  1. Увеличили конверсию сайта

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

  2. Увеличили вовлеченность аудитории

    Система лояльности и улучшенная фильтрация товаров способствовали более высокой вовлеченности клиентов, что также отразилось на увеличении повторных покупок на 20%.

  3. Ускорили загрузку страниц, что снизило уровень отказов на 25%

    Удаление лишних приложений и интеграций обеспечило стабильность и скорость работы сайта.

  4. Улучшили пользовательский опыт

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

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

  5. Укрепили связи с аудиторией

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

Понравился кейс?

Обсудить мой проект

Ознакомьтесь с другими нашими проектами

Интернет-магазин спортивного питания

Превью магазин спортивного питания

Мобильное приложение спортивного издания «ПЛЕЙМЕЙКЕР»

Превью кейса Playmeyker

Сайт крупнейшей в Петербурге компании водного туризма

Превью кейса Нева Тревел

Каталог индийских фильмов Somindram

Превью кейса Somindram

Веб-конструктор для проектирования контейнеров

Превью Конструктор контейнеров

Приложение для сбора данных о качестве мобильной связи в зданиях

Превью кейса Network Analitics

Этот сайт использует cookies.

Этот сайт использует файлы cookie для хранения информации на вашем устройстве.