Разработка торговой платформы для компании по производству стеллажей для фургонов
Разработали сайт, который с первых месяцев помог кратно увеличить прибыль клиента
Торговля
Великобритания
2022
Услуги
Технологии
Сложность
Время разработки
9 месяцев
Команда
1 PM, 1 Design, 3 Frontend, 2 Backend, 1 QA
Статус проекта
Проект успешно реализован и продолжает поддерживаться
О клиенте
Компания Yoke Vans из Великобритании делает жизнь владельцев фургонов удобнее и безопаснее. Они разрабатывают системы стеллажей для хранения и организации инструментов и материалов, обшивают фургоны внутри и снаружи, а также предлагают противоугонные решения.
Целевая аудитория — владельцы фургонов, менеджеры и представители автопарков.
У клиента был сайт с устаревшим дизайном и ограниченным функционалом, который больше не отвечал требованиям бизнеса. Конверсия была низкая и прибыль он приносил небольшую. Клиент хотел изменить дизайн, пересобрать сайт и внедрить новые функции для продвижения своих услуг онлайн.
Разработать eCommerce-платформу, где пользователь может познакомиться с компанией, выбрать товар из ассортимента и заказать сопутствующие услуги. Для этого, помимо представления компании и товаров на сайте, было важно реализовать функционал оформления заказов и добавить возможность создания личного кабинета пользователя.
Изображение проекта
Решение
Компактный, но функциональный веб-сайт на платформах WordPress и WooCommerce. Помимо стандартного функционала мы разработали конструктор с выбором компонентов и материалов для товара. Реализовали систему фильтров, категорий и атрибутов, чтобы пользователь мог поэтапно выбрать свойства товара и купить именно то, что ему нужно. Также на сайте можно выбрать способ доставки в зависимости от вида товара в заказе.
Очередной проект нашего любимого постоянного клиента из Великобритании. До этого мы работали с ним на проектах с уклоном на кастомный дизайн, анимации и номинации AWWWARDS. Этот проект стал новой вехой в нашей коллаборации, так как он впервые решил разработать eCommerce проект. У клиента не было опыта работы с WooCommerce, но он хотел научиться работать с платформой. Изначально планировалось, что клиент будет собирать сайт самостоятельно, и мы составили ему подробный гайд на английском, как разворачивать и настраивать проекты с WooCommerce. Но это оказалось сложным, поэтому он все-таки попросил нас помочь с разработкой. Мы принялись за дело, параллельно показывая, как это все работает и настраивается на реальном примере.
Отсутствие опыта работы с eCommerce-проектами у клиента частично повлияло на ход проекта. Мы несколько раз пересобирали структуру категорий, фильтров и товаров по его запросу. Но в итоге получилось успешно собрать все задуманные идеи клиента, а также наглядно показать ему, как работает и настраивается система.
РЕАЛИЗОВАННЫЙ ФУНКЦИОНАЛ
Экраны личного кабинета
Личный кабинет
Добавили личный кабинет, с помощью которого можно: — просмотреть историю заказов и уточнить статус текущего (обработано, отправлено, доставлено); — настроить адреса: добавить адрес доставки, добавить адрес для выставления счета; — просмотреть избранные товары, которые пользователь отметил в каталоге; — настроить аккаунт: поменять имя, почту, пароль.
Страницы настроек товара
Конструктор заказа
Пользователь может собрать заказ под свой запрос. Подбор элементов для заказа происходит поэтапно, чтобы заказчик услуг не упустил деталей, а компания верно собрала заказ и рассчитала стоимость услуг. Для организации пространства в фургонах есть различные пакетные предложения на основе конструктора. Вот как происходит подбор конфигурации в конструкторе: 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
Разработали сайт, который представляет в сети компанию клиента и его услуги. Все поставленные клиентом задачи удалось реализовать.
-
Разработали удобный для пользователей функционал кастомизации заказа
Пользователь может подобрать для своего фургона индивидуальное наполнение прямо на сайте.
-
Кратно повысили конверсию сайта и продажи клиента
Новый сайт получился удобным и быстрым, что сразу сказалось на прибыли компании.
