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

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



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

Оптимизация сайта
- Произвели оптимизацию разметки и изображений для улучшения позиций в поисковых системах и ускорения загрузки страниц.
- Произвели компрессию изображений без потери качества для уменьшения их размера и, соответственно, времени загрузки страниц.
- Настроили кэширование статических ресурсов, что позволило пользователям загружать повторно посещаемые страницы гораздо быстрее.
- Уменьшили количество HTTP-запросов путем объединения файлов CSS и JavaScript, а также оптимизации элементов страницы.
- Разместили статический контент на CDN, чтобы ускорить загрузку ресурсов для пользователей из разных регионов.

Результаты
Выросло время, которое клиенты проводят на сайте благодаря более эффективной подаче и доступности товаров.
Конверсия увеличилась на 20% после обновления каталога и страницы товара.
Снижение отказов на странице товаров на 15%, благодаря функционалу предпросмотров и возможности быстрой покупки.
Повышение общего удовлетворения пользователей сайтом и рост числа повторных покупок.
Технологии
React
Redux
Nest.js
Material UI
Node.js
AWS
ElasticSearch
Docker
Команда
2
Frontend разработчик
2
Backend разработчик
1
Team Lead
1
Project manager
Вам может быть интересно
Заполняйте форму или пишите нам!
Заполняйте форму или пишите нам
Подготовим варианты решений, рекомендации по р азработке, да и просто будем рады поговорить.
Наша почта:partners@fortech.dev
Заполните форму или напишите на почту partners@fortech.dev
Телеграм:@fortech_sales
Получить консультацию partners@fortech.dev