Мобильная версия магазина «Ваш Дом»: новый каталог, поиск и сравнение товаров

О клиенте

«Ваш Дом» входит в число основных игроков рынка розничной торговли стройматериалами в Ростове-на-Дону и Ростовской области. У компании 16 магазинов и больше 400 сотрудников, в ассортименте больше 20 000 товаров.

Интернет-магазин стройматериалов и товаров для дома работает на vashdom24.ru. Мы сделали редизайн его мобильной версии.

Задача

Клиент хотел обновить дизайн мобильной версии и поднять её конверсию. Для этого нужно было:

1. проработать UX/UI-дизайн и сделать сайт удобнее;
2. переработать основной каталог товаров и карточки товаров;
3. добавить нижнее навигационное меню для быстрого перехода к главным разделам сайта;
4. доработать поиск товаров по сайту;
5. добавить сравнение товаров.

Что сделали

Главный экран

Добавили на главный экран акции и новинки, нижнее навигационное меню и информативное бургер-меню. Строку поиска закрепили, основной каталог обновили.

На макете под баннером новинок четыре плитки с преимуществами магазина: доставка от 2 часов («вовремя или бесплатно»), самовывоз из 16 магазинов («соберём за 30 минут»), клуб покупателей с выгодой до 20% и больше 20 000 товаров в наличии. В нижнем меню разделы «Главная», «Каталог», «Магазины», «Войти» и «Корзина».

Каталог и карточки товаров

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

Сравнение товаров

При сравнении товары сортируются по категориям, а карточки сравниваемых товаров закреплены и не уходят с экрана при прокрутке вниз.

На макете два товара стоят в колонках, их можно листать («1 из 2», «2 из 2»). Под ними строки характеристик: страна производства, вес, цвет, толщина шва, срок годности. Для пустого списка есть отдельный экран «Список сравнения пуст» с кнопками «Добавить из каталога» и «Перейти в избранное».

Поиск

При клике на строку поиска открывается блок с популярными категориями и недавно просмотренными товарами. В результатах поиска теперь видны категории найденных товаров.

На макетах четыре состояния поиска:

• пустая строка: популярные категории («Затирки», «Ламинат», «Дрели», «Ванны», «Вентиляторы вытяжные») и блок «Вы недавно смотрели»;
• ввод «Кле»: подсказки по категориям («Клеи плиточные», «Шпаклевки» и другие) и по товарам с ценой;
• результаты по запросу «Клей»: 263 товара, быстрые переходы в категории «Клей плиточный» и «Клей универсальный», сортировка по цене и фильтры;
• пустой результат: экран с советом проверить ввод или изменить запрос.

UI: шрифт, цвета, иконки

Основной шрифт: Roboto Condensed. Палитра из десяти цветов: фирменный оранжевый #EE741D, светлый персиковый #FCE3D2, тёмные #282828 и #4F4F4F, серые #828282, #C4C4C4 и #D9D9D9, светлые #F2F2F2 и #F6F6F6, белый #FFFFFF.

В интерфейсе использовали набор из 30 линейных оранжевых иконок: для меню, сервисов магазина и товарных категорий.

Результат

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

В мобильной версии появились нижнее меню, закреплённый поиск с подсказками, новые фильтры каталога и сравнение товаров.

Похожие проекты мы делаем в услуге «Разработка дизайна мобильной версии сайта». Когда сайту пора на редизайн, разберём в глоссарии.