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

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

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

• Обновили карточки 240 товаров в каталоге, страницы 28 категорий и 20 подкатегорий.
• Средняя продолжительность посещения увеличилась на 33%.
• В среднем пользователи просматривают по 5 страниц за сессию.
• Количество заявок на оборудование выросло на 35%.

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

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

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

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

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

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

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

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

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

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

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

На странице сравнения товаров убрали дублирующуюся информацию, добавили функцию просмотра во весь экран с каруселью вложенных превью и возможностью просмотра видео.

Переосмыслили и расставили акцентные точки на ключевых элементах навигации: Наименование, Цена, Кнопка. Разместили
навигацию по информации о товаре.

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

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

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

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

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

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

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

1. Провели аудит интернет-магазина и выявили области, требующие улучшения.
2. Исследовали потребности и предпочтения целевой аудитории через анализ конкурентов и визуальный анализ. Анализировались прямые конкуренты и крупные игроки в той же сфере.
3. Изучили путь пользователя и разработали гипотезы на основе аналитики.
4. Спроектировали демонстрационные варианты, при этом стараясь сохранить фирменный стиль старого сайта. Одни из ключевых элементов конкурентов, которые мы использовали: 

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

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

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

Добились улучшения пользовательского опыта и повышение удобства использования.

Сохранили привычное функционирование сайта для посетителей.

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