---
publishYear: 2019
name: Petrovich
title: Редизайн ключевых экранов интернет-магазина
excerpt: Перерисовали в дизайн-системе заказчика каталог и карточку товара со всеми составляющими.
logo:
src: ~/assets/images/portfolio/petrovich/logo.jpg
alt: Петрович logo
link: https://rf.petrovich.ru/
image: ~/assets/images/portfolio/petrovich/petrovich.png
imageAlt: Редизайн ключевых экранов интернет-магазина
thumbnail:
src: ~/assets/images/portfolio/cards/petrovich.svg
src2: ~/assets/images/portfolio/cards-l/petrovich_big.svg
alt: Собака Павлова • Петрович • Редизайн ключевых экранов интернет-магазина
doubleSize: true
tags:
- ec
- redesign
- mass
context: Помогли крупнейшему розничному продавцу строительных товаров сделать и без того удобный интернет-магазин еще удобнее.
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), [редизайн интерфейса](/services/redesign), [продуктовые исследования](/services/research) и [многое другое](/services).
collection: services
page: ux-design
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: ot-vinta
- collection: portfolio
page: stroynastroy
- collection: portfolio
page: okey
- collection: portfolio
page: okna-peterburga
- collection: portfolio
page: remtech
- collection: portfolio
page: goodwood
result:
-
src: ~/assets/images/portfolio/figma.svg
text: Интерактивный прототип
link: https://www.figma.com/design/XafDYGGDS9qzT9h9Fvf5pCDy/%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87
budget: ~ 750 000 ₽
review:
text: «Работалось совершенно комфортно на первых 70% проекта — растянули начальные этапы, и в конце пришлось подбиваться по срокам. Поставленная задача была выполнена, результаты уйдут в разработку рано или поздно. Могу рекомендовать для оперативного аутсорсинга дизайн-решений».
photo: ~/assets/images/portfolio/petrovich/person.jpg
person: Александр Королев
position: Продукт-менеджер
director: "Всегда приятно усилить и без того сильную команду. И результат выходит очень крутой"
metadata:
canonical: https://sobakapav.ru/portfolio/petrovich
title: Интерфейс интернет-магазина • Дизайн магазина «Петрович» (практический кейс)
description: "Сделали редизайн карточки товара и каталога — двух ключевых экранов на сайте крупного строительного интернет-магазина. Улучшили UX, используя дизайн-систему заказчика."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/petrovich/petrovich.png'
width: 1430
height: 1095
type: website
---
### Заказчик
[Торговый дом «Петрович»](https://petrovich.ru/) продает строительные и отделочные материалы розничным покупателям. Лидер [в своем сегменте](https://ru.wikipedia.org/wiki/DIY), желтые грузовики с надписью «Вам везет! Петрович» на Северо-Западе знакомы буквально всем.
_Да и [не только](http://fotokto.ru/photo/view/5628130.html) на Северо-Западе_
Компания давно и всерьез старается охватить все возможные каналы продаж. Вот как потребителю удобно, так пусть и покупает. Хочешь — закажи через колл-центр или мобильное приложение. Хочешь — приезжай на склад, посмотри, руками потрогай. Хочешь — заходи в интернет-магазин, выбирай и сравнивай.
Когда твой главный козырь — многоканальность продаж, каждый из каналов должен быть — и оставаться — удобным, человечным, приятным глазу и еще раз удобным.
### Не-проблема
Интернет-магазин «Петровича» таким и был.
Да, он немного устарел. И внешне, и функционально.
Допустим, выглядел не слишком современно. Мобильная версия сайта была не адаптивом, а отдельной сущностью. Но это ерунда на самом деле, потому что пользователю не мешает.
_Наши дизайнеры не нашли серьезных недостатков. Во время UX-анализа мы в основном придирались к мелочам_
Единственная не-ерунда, довольно обычная для огромных компаний: разные подразделения не особо разговаривают друг с другом. Разработчики не знают, чего хотят маркетологи, и наоборот. Соответственно, и сайт улучшают-дополняют не очень-то оглядываясь на то, что делают другие.
Со временем сайт может буквально утонуть под ворохом бессистемных улучшений. В «Петровиче» не собирались дожидаться этого.
Кроме того, хороший — не значит идеальный. Идеального вообще не бывает. Очень хороший интерфейс всегда можно сделать лучше.
В компании решили, что интернет-магазину пора стать лучше. И начали огромный проект — полный редизайн сайта. В том числе:
- Во-первых, создали новую дизайн-систему (библиотеку компонентов), чтобы все переделать на ее основе.
- Во-вторых, собрали по всем подразделениям претензии и пожелания к сайту.
- В-третьих, обратились к нам.
### Задача
Зачем, кстати, к нам? Если у них есть хорошие дизайнеры, сильная команда разработчиков, огромная внутренняя экспертиза? (Дизайн-систему вот сделали — огонь.)
Не затем же, чтоб кнопку передвинуть и конверсию на полпроцента увеличить? С этом они без нас бы прекрасно справились.
Обычно крупные компании не стремятся отдавать вовне то, что неплохо могут сделать и своими силами. Зачем, если сами с усами?
Что вообще есть у внешнего подрядчика такого, чего внутри компании нет? Second opinion да свежий взгляд на знакомый продукт. Со стороны иногда виднее.
Нам предстояло:
1. Проанализировать существующие UX-решения. Пока только двух страниц (зато ключевых — карточки товара и каталога).
2. Перерисовать эти страницы в дизайн-системе заказчика.
3. Учесть пожелания к этим страницам от разных подразделений «Петровича».
### Поехали!
На первой встрече мы поговорили с product mаnager'ом, главным дизайнером и одним из разработчиков.
Разработчик показал нам дизайн-систему «Петровича». Очень сложная, обстоятельная библиотека элементов, не просто UI-kit какой-нибудь. К тому же интегрированная с веб-инструментом, который позволяет вносить изменения в код прямо из дизайна в Figma.
Мы должны были нарисовать интерактивные прототипы карточки товара и каталога со всеми составляющими для мобильной и десктопной версий в соответствии с этой дизайн-системой, не отступая от нее ни на шаг.
### Анализ
Тут и рассказывать толком нечего. Мы провели UX-анализ карточки товара и каталога на старом сайте. Много мелких придирок, но серьезных UX-недостатков практически не нашли.
Использовали Miro: и комментировать удобно, и заказчику показывать.
_Комментариев много, но вообще-то мы до мелочей докапываемся: тут кнопку можно передвинуть, тут кликабельный элемент не очень заметен и т. д. Хороший сайт, хороший интерфейс, как и было сказано_
### Постановка
В «Петровиче» собрали хотелки, пожелания и предложения со всех департаментов — и бизнесовые, и визуальные, и насчет функциональности. Кому чего не хватает и кому где жмет.
Получился огромный неструктурированный список.
Мы разобрали его и собрали обратно: объединили похожее, разбили
слишком общие требования на конкретные составляющие, назадавали вопросов, чтобы уточнить непонятное.
_Каталог. Список пожеланий превращается в набор бизнес-задач_
Добавили свои предложения. Ранжировали задачи по важности. Сверились с заказчиком: да, все правильно.
_Карточка товара, набор задач. Под заголовком «Собака Павлова» — наши предложения_
Превратили список пожеланий во внятный набор бизнес-задач — и начали рисовать.
### Карточка товара
Перерисовали в дизайн-системе заказчика карточку товара со всеми составляющими, от ценника до блока покупки и блока сопутствующих товаров. Вот всех состояниях: а их очень много, особенно у мини-карточки для корзины и блока «Комплект».
Не только красиво перерисовали, конечно, но и переделали все что, что нужно было переделать в соответствии с бизнес-требованиями, которые мы помогли сформулировать.
Вот, к примеру, задача: «Переверстать таблицу характеристик и описания». Зачем? Затем, что описание товара и таблица характеристик могут быть сколь угодно огромными. Раньше они выводились полностью — и до остальной информации добраться бывало нелегко.
Мы оставили по умолчанию только начало описания и начало таблицы, остальное выводится по кнопке «Показать еще». Таблица открывается в отдельной вкладке, так можно показать характеристики полнее и подробней.
_Новая карточка товара, минимальный вид_
Подробная информация о наличии товара раньше давалась в узкой правой колонке, а в мобильной версии — в поповере. Убрали в попап, по умолчанию схлопнутый: если уж кому-то нужна эта информация, то нужна со всеми подробностями.
Акции, услуги, особые условия доставки, разбросанные по всей карточке, мы собрали в один блок (требование «Блок для значков документов и сертификатов в карточке товара»)
_Полный вид карточки (верхняя часть): блок «Обратите внимание», описание товара и таблица характеристик развернуты, виден «Самый полезный отзыв»_
Переделали блок с табами в нижней части страницы: «Детали» (объемный и не вполне читабельный текст), «Вопросы» и «Отзывы». Для отзывов и вопросов раньше использовали стандартный плагин, визуально они выбивались и из старого дизайна, и из нового.
В этот же блок отправили и ссылки на сертификаты.
_Перерисовали этот блок в новой дизайн-системе, не забывая о задачах «Изменить расположение отзывов на товар, чтобы сделать их просмотр более очевидным пользователю» и «Сделать табы заметнее»_
И все, что «Собака» предложила, тоже сделали: добавили историю просмотра, переверстали хлебные крошки, нарисовали вариант карточки для печати и т. д.
_Карточка для печати_
### Каталог
И с каталогом все точно так же: работаем в дизайн-системе, придерживаемся сформулированного нами списка задач.
Например, переделали внешний вид и механику фильтров. Скрыли часть непопулярных фильтров (их можно вызвать отдельной кнопкой), чтоб было проще пользоваться остальными.
В мобильной версии вынесли фильтры на отдельный экран, кнопку фильтрации передвинули на видное место, добавили состояния примененных фильтров.
_Задачи были вот такие: «Представление и механика фильтров в целом», «Блок фильтра товаров с возможностью скрыть непопулярные фильтры», «Тултипы для всплывающих подсказок в списке фильтров», «Графические элементы в фильтрах»_
_Нет смысла перечислять подробности, но если вдруг интересно, они есть в этом документе_
Одно из принципиальных решений заказчика — показывать в мини-карточках все важные сущности товара: варианты цены, акции, условия, комплекты.
_На наш вкус — многовато информации разом, но для заказчика это важно_
### Результат
Разобрались в разрозненных, никак не структурированных бизнес-пожеланиях от разных подразделений компании-заказчика. Превратили их в понятный набор конкретных бизнес-требований. Реализовали эти требования в дизайне.
Вот это — настоящий результат нашей работы. Это, а не красивые картинки (которые мы, конечно, нарисовали и сдали в срок; заказчику понравилось, а позже он вернулся за добавкой).
**Каталог**
_Категория первого уровня_
**Прототип**
_Конструктор форм_
**Каталог**
_Коллекции_
**Каталог**
_Бренд-зона_