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

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

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

При этом было важно не делать совершенно новый бренд, который постоянные покупатели перестанут узнавать. Поэтому визуально мы скорее освежали и систематизировали существующий стиль.

Больше всего внимания потребовал каталог.
У профессионального инструмента огромное количество характеристик, а пользователь часто уже примерно знает, что ищет. Ему не хочется долго ходить по разделам и открывать десять карточек только ради того, чтобы сравнить несколько параметров.

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

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

Быстрый просмотр товара
Одна из вещей, которая особенно хорошо работала в таком ассортименте, — быстрый просмотр.
Не обязательно каждый раз уходить на отдельную страницу товара, чтобы посмотреть несколько характеристик. Часть информации можно открыть прямо в каталоге, быстро сравнить варианты и продолжить выбор.
Это небольшое решение, но именно такие детали делают большой e-commerce заметно удобнее.

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

Карточка товара
На странице товара уже можно дать больше информации, но здесь возникала другая проблема — как показать технические характеристики и коммерческую часть так, чтобы они не конкурировали друг с другом.
Цена, наличие и покупка должны считываться сразу. Характеристики, описание и дополнительная информация — быть рядом, но не перегружать первый экран.
Поэтому страницу строила через чёткую визуальную иерархию и смысловые блоки.

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

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

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

Стало проще работать с каталогом, быстрее сравнивать товары и проходить путь от поиска инструмента до оформления заказа. При этом мы сохранили узнаваемость Diamtools и собрали интерфейс, который можно дальше масштабировать вместе с ассортиментом.