Редизайн и модернизация интернет-магазина «Вектор»

«Вектор» — магазин профессионального прачечного оборудования для прачечных и химчисток, работает с 2000 года. Основной сегмент — B2B. Компания осуществляет поставки оборудования для прачечных от ведущих фирм-производителей и имеет филиалы и пункты выдачи в 10 городах России. 

В интернет-магазине можно изучить оборудование, добавить товары в корзину и оформить заявку на товар.

Проблема

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

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

Решение

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

Обновили технологии до современных стандартов, обновив версии PHP и Laravel, переработали backend под новую вёрстку, что позволило улучшить производительность и безопасность системы. Разработали функционал для формирования реестра заявок в формате .xls, чтобы заказчик мог легко сводить заявки в единую таблицу для удобного мониторинга и отчётности.

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

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

Упростили информацию о товаре на странице товара: пересобрали первый экран и добавили навигацию.

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

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

Особенности дизайна:

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

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

Результат

Компания получила платформу для дальнейшего
масштабирования.

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