Разработка торговой платформы для компании по производству стеллажей для фургонов
Разработали сайт, который с первых месяцев помог кратно увеличить прибыль клиента
Торговля
Великобритания
2022
Услуги
Технологии
Сложность
Время разработки
9 месяцев
Статус проекта
Проект успешно реализован и продолжает поддерживаться
О клиенте
Компания Yoke Vans из Великобритании делает жизнь владельцев фургонов удобнее и безопаснее. Они разрабатывают системы стеллажей для хранения и организации инструментов и материалов, обшивают фургоны внутри и снаружи, а также предлагают противоугонные решения.
Целевая аудитория — владельцы фургонов, менеджеры и представители автопарков.
У клиента был сайт с устаревшим дизайном и ограниченным функционалом, который больше не отвечал требованиям бизнеса. Конверсия была низкая и прибыль он приносил небольшую. Клиент хотел изменить дизайн, пересобрать сайт и внедрить новые функции для продвижения своих услуг онлайн.
Разработать eCommerce-платформу, где пользователь может познакомиться с компанией, выбрать товар из ассортимента и заказать сопутствующие услуги. Для этого, помимо представления компании и товаров на сайте, было важно реализовать функционал оформления заказов и добавить возможность создания личного кабинета пользователя.
Изображение проекта
Решение
Компактный, но функциональный веб-сайт на платформах WordPress и WooCommerce. Помимо стандартного функционала мы разработали конструктор с выбором компонентов и материалов для товара. Реализовали систему фильтров, категорий и атрибутов, чтобы пользователь мог поэтапно выбрать свойства товара и купить именно то, что ему нужно. Также на сайте можно выбрать способ доставки в зависимости от вида товара в заказе.
РЕАЛИЗОВАННЫЙ ФУНКЦИОНАЛ
Экраны личного кабинета
Личный кабинет
Добавили личный кабинет, с помощью которого можно:
— просмотреть историю заказов и уточнить статус текущего (обработано, отправлено, доставлено);
— настроить адреса: добавить адрес доставки, добавить адрес для выставления счета;
— просмотреть избранные товары, которые пользователь отметил в каталоге;
— настроить аккаунт: поменять имя, почту, пароль.
Страницы настроек товара
Конструктор заказа
Пользователь может собрать заказ под свой запрос.
Подбор элементов для заказа происходит поэтапно, чтобы заказчик услуг не упустил деталей, а компания верно собрала заказ и рассчитала стоимость услуг.
Для организации пространства в фургонах есть различные пакетные предложения на основе конструктора. Вот как происходит подбор конфигурации в конструкторе:
1) выбор варианта конструктора;
2) наполнение его элементами, например, фальшпол, расположение стеллажей, багажника;
3) выбор материалов, которые будут использованы для проекта.
Фильтры на странице выбора фургона
Персонализация заказа с помощью системы фильтров и категорий
Мы настроили систему категорий, атрибутов и фильтров товаров, чтобы пользователь смог подобрать решение под конкретный фургон.
На сайте нужно указать марку фургона, его модель, год выпуска и расположение дверей, и тогда система подберет и предложит самый лучший вариант стеллажа для этой машины.
Страницы выбора способов доставки
Выбор способа доставки
Во время оформления заказа пользователь может выбрать удобный день доставки, заказать доставку курьером или оформить самовывоз.
Внедренные интеграции
Внедренные интеграции
Чтобы обеспечить сайту полный функционал, мы использовали множество технологий и плагинов:
— WooCommerce — основное решение для отображения товаров, корзины, чекаута, купонов и оформленных заказов;
— YITH WooCommerce Wishlist для страницы избранных товаров;
— Klarna и Stripe для платежных шлюзов;
— Contact Form 7 для контактных форм;
— Wordfence Security для безопасности и защиты от взломов;
— Advanced Custom Fields для кастомных полей и редактирования контента.
Этапы разработки
Дизайн
Дизайн был предоставлен заказчиком, но некоторые компоненты наши дизайнеры доработали с помощью Figma.
Верстка
Верстка была реализована на сборщике модулей Webpack с использованием основных языков верстки: HTML, CSS, JS, а также различных JS-библиотек. В процессе использовали методологию БЭМ, благодаря чему сайт получился грамотным с точки зрения HTML-структуры.
Чтобы сайт работал максимально быстро, оптимизировали и минимизировали код.
Бэкенд
Большинство функций реализовали с помощью чистого PHP кода. Для реализации некоторых функций и интеграций при развертке сайта на CMS WordPress использовали готовые плагины, решения WooCommerce и платежные шлюзы.
Тестирование
Команда QA провела тесты, чтобы убедиться в корректном отображении верстки сайта и функциональных решений. Проверили функционал добавления товаров, оформления заказа, контроля обновлений в личном кабинете.
После UI/UX тестирования некоторые элементы сайта обновили для улучшения пользовательского опыта.
Результаты
-
Запустили полноценный eCommerce-сайт на WordPress и WooCommerce
Разработали сайт, который представляет в сети компанию клиента и его услуги. Все поставленные клиентом задачи удалось реализовать.
-
Разработали удобный для пользователей функционал кастомизации заказа
Пользователь может подобрать для своего фургона индивидуальное наполнение прямо на сайте.
-
Кратно повысили конверсию сайта и продажи клиента
Новый сайт получился удобным и быстрым, что сразу сказалось на прибыли компании.
