Интернет-магазин «Вектор»

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

Индикатор прокрутки статьи

Интернет-магазин «Вектор»

Главное о кейсе

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

Обновили карточки 240 товаров в каталоге, страницы 28 категорий и 20 подкатегорий.

редизайн сайта

 

Бизнес-задача и ее решение

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

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

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

задачи для разработки сайта

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

Крафт (мастерство), реализация, технические детали

Установили фиксированный каталог слева при скролле, который облегчает навигацию по категориям и сокращает время пользователя на поиск нужного раздела, что способствует улучшению UX (пользовательского опыта) и повышению удовлетворенности. Это самая важная и связующая деталь дизайна, поскольку под нее подстраивается весь остальной контент сайта.

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

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

главная страница сайта

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

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

лучшие карточки товаров

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

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

Убрали дублирующуюся информацию на странице сравнения товаров, тем самым усилив восприятие контента.

сравнение товаров на сайте

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

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

элементы визуального стиля

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

​​Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

  1. Провели аудит интернет-магазина и выявили области, требующие улучшения.
  2. Исследовали потребности и предпочтения целевой аудитории через анализ конкурентов и визуальный анализ. Анализировались прямые конкуренты и крупные игроки в той же сфере.
  3. Изучили путь пользователя и разработали гипотезы на основе аналитики.
  4. Спроектировали демонстрационные варианты, при этом стараясь сохранить фирменный стиль старого сайта. Одни из ключевых элементов конкурентов, которые мы использовали:
    — Преобладание описания товаров над визуалом.
    — Отсутствие декоративных элементов, которые отвлекают внимание от продуктов и уникальных торговых предложений.
    — Главная страница ориентирована помощь в подборе товара с минимальным количеством элементов взаимодействия. 
  5. Создали и согласовали итоговый вариант дизайна с учетом современных тенденций и выбранных референсов.
  6. Выполнили вёрстку и перенесли её в шаблоны Blade, поскольку эта технология уже использовалась на предыдущей версии проекта, что помогло обеспечить совместимость и ускорить процесс.
  7. Обновили технологии до современных стандартов, обновив версии PHP и Laravel. Переработали backend под новую вёрстку, что позволило улучшить производительность и безопасность системы.
  8. Разработали функционал для формирования реестра заявок в формате .xls, чтобы заказчик мог легко сводить заявки в единую таблицу для удобного мониторинга и отчётности.
  9. Реализовали генерацию URL-ссылок для продвижения на основе выбранных фильтров. Фильтры теперь формируют уникальный URL-адрес, превращая страницы каталога в лендинги, что способствует SEO и упрощает продвижение в интернете.

Как проект повлиял на жизнь пользователей

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

Расскажите о вашем проекте

Заполните форму и мы ответим вам в течение рабочего дня

Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Резюме.pdf

Нажимая на кнопку, вы принимаете политику конфиденциальности и даете согласие на обработку ваших персональных данных