sobaka@pavlova.cc
+7 (812) 320-57-87
Редизайн ключевых экранов интернет-магазина
Помогли крупнейшему розничному продавцу строительных товаров сделать и без того удобный интернет-магазин еще удобнее.
~ 450 000 ₽
Перерисовали в дизайн-системе заказчика каталог и карточку товара со всеми составляющими.
Контекст
Результат
Бюджет
2019

Редизайн ключевых экранов интернет-магазина

Заказчик

Торговый дом «Петрович» продает строительные и отделочные материалы розничным покупателям. Лидер в своем сегменте, желтые грузовики с надписью «Вам везет! Петрович» на Северо-Западе знакомы буквально всем.
Редизайн ключевых экранов интернет-магазина "Петрович" | SobakaPav.ru
Да и не только на Северо-Западе
Компания давно и всерьез старается охватить все возможные каналы продаж. Вот как потребителю удобно, так пусть и покупает. Хочешь — закажи через колл-центр или мобильное приложение. Хочешь — приезжай на склад, посмотри, руками потрогай. Хочешь — заходи в интернет-магазин, выбирай и сравнивай.
Когда твой главный козырь — многоканальность продаж, каждый из каналов должен быть — и оставаться — удобным, человечным, приятным глазу и еще раз удобным.

Не-проблема

Интернет-магазин «Петровича» таким и был.
Да, он немного устарел. И внешне, и функционально.
Допустим, выглядел не слишком современно. Мобильная версия сайта была не адаптивом, а отдельной сущностью. Но это ерунда на самом деле, потому что пользователю не мешает.
Наши дизайнеры не нашли серьезных недостатков. Во время UX-анализа мы в основном придирались к мелочам
Единственная не-ерунда, довольно обычная для огромных компаний: разные подразделения не особо разговаривают друг с другом. Разработчики не знают, чего хотят маркетологи, и наоборот. Соответственно, и сайт улучшают-дополняют не очень-то оглядываясь на то, что делают другие.
Со временем сайт может буквально утонуть под ворохом бессистемных улучшений. В «Петровиче» не собирались дожидаться этого.
Кроме того, хороший — не значит идеальный. Идеального вообще не бывает. Очень хороший интерфейс всегда можно сделать лучше.
В компании решили, что интернет-магазину пора стать лучше. И начали огромный проект — полный редизайн сайта. В том числе:
  • Во-первых, создали новую дизайн-систему (библиотеку компонентов), чтобы все переделать на ее основе.
  • Во-вторых, собрали по всем подразделениям претензии и пожелания к сайту.
  • В-третьих, обратились к нам.

Задача

Зачем, кстати, к нам? Если у них есть хорошие дизайнеры, сильная команда разработчиков, огромная внутренняя экспертиза? (Дизайн-систему вот сделали — огонь.)
Не затем же, чтоб кнопку передвинуть и конверсию на полпроцента увеличить? С этом они без нас бы прекрасно справились.
Обычно крупные компании не стремятся отдавать вовне то, что неплохо могут сделать и своими силами. Зачем, если сами с усами?
Что вообще есть у внешнего подрядчика такого, чего внутри компании нет? Second opinion да свежий взгляд на знакомый продукт. Со стороны иногда виднее.
Нам предстояло:
  1. Проанализировать существующие UX-решения. Пока только двух страниц (зато ключевых — карточки товара и каталога).
  2. Перерисовать эти страницы в дизайн-системе заказчика.
  3. Учесть пожелания к этим страницам от разных подразделений «Петровича».

Поехали!

На первой встрече мы поговорили с product mаnager'ом, главным дизайнером и одним из разработчиков.
Разработчик показал нам дизайн-систему «Петровича». Очень сложная, обстоятельная библиотека элементов, не просто UI-kit какой-нибудь. К тому же интегрированная с веб-инструментом, который позволяет вносить изменения в код прямо из дизайна в Figma.
Мы должны были нарисовать интерактивные прототипы карточки товара и каталога со всеми составляющими для мобильной и десктопной версий в соответствии с этой дизайн-системой, не отступая от нее ни на шаг.

Анализ

Тут и рассказывать толком нечего. Мы провели UX-анализ карточки товара и каталога на старом сайте. Много мелких придирок, но серьезных UX-недостатков практически не нашли.
Использовали Miro: и комментировать удобно, и заказчику показывать.
Комментариев много, но вообще-то мы до мелочей докапываемся: тут кнопку можно передвинуть, тут кликабельный элемент не очень заметен и т. д. Хороший сайт, хороший интерфейс, как и было сказано

Постановка

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

Карточка товара

Перерисовали в дизайн-системе заказчика карточку товара со всеми составляющими, от ценника до блока покупки и блока сопутствующих товаров. Вот всех состояниях: а их очень много, особенно у мини-карточки для корзины и блока «Комплект».
Составляющие карточки и каталога
Не только красиво перерисовали, конечно, но и переделали все что, что нужно было переделать в соответствии с бизнес-требованиями, которые мы помогли сформулировать.
Вот, к примеру, задача: «Переверстать таблицу характеристик и описания». Зачем? Затем, что описание товара и таблица характеристик могут быть сколь угодно огромными. Раньше они выводились полностью — и до остальной информации добраться бывало нелегко.
Мы оставили по умолчанию только начало описания и начало таблицы, остальное выводится по кнопке «Показать еще». Таблица открывается в отдельной вкладке, так можно показать характеристики полнее и подробней.
Новая карточка товара, минимальный вид
Подробная информация о наличии товара раньше давалась в узкой правой колонке, а в мобильной версии — в поповере. Убрали в попап, по умолчанию схлопнутый: если уж кому-то нужна эта информация, то нужна со всеми подробностями.
Акции, услуги, особые условия доставки, разбросанные по всей карточке, мы собрали в один блок (требование «Блок для значков документов и сертификатов в карточке товара»)
Полный вид карточки (верхняя часть): блок «Обратите внимание», описание товара и таблица характеристик развернуты, виден «Самый полезный отзыв»
Переделали блок с табами в нижней части страницы: «Детали» (объемный и не вполне читабельный текст), «Вопросы» и «Отзывы». Для отзывов и вопросов раньше использовали стандартный плагин, визуально они выбивались и из старого дизайна, и из нового.
В этот же блок отправили и ссылки на сертификаты.
Мобильное приложение для здорового образа жизни: карта фокусов | SobakaPav.ru
Перерисовали этот блок в новой дизайн-системе, не забывая о задачах «Изменить расположение отзывов на товар, чтобы сделать их просмотр более очевидным пользователю» и «Сделать табы заметнее»
И все, что «Собака» предложила, тоже сделали: добавили историю просмотра, переверстали хлебные крошки, нарисовали вариант карточки для печати и т. д.
Карточка для печати

Каталог

И с каталогом все точно так же: работаем в дизайн-системе, придерживаемся сформулированного нами списка задач.
Например, переделали внешний вид и механику фильтров. Скрыли часть непопулярных фильтров (их можно вызвать отдельной кнопкой), чтоб было проще пользоваться остальными.
В мобильной версии вынесли фильтры на отдельный экран, кнопку фильтрации передвинули на видное место, добавили состояния примененных фильтров.
Задачи были вот такие: «Представление и механика фильтров в целом», «Блок фильтра товаров с возможностью скрыть непопулярные фильтры», «Тултипы для всплывающих подсказок в списке фильтров», «Графические элементы в фильтрах»
Нет смысла перечислять подробности, но если вдруг интересно, они есть в этом документе
Одно из принципиальных решений заказчика — показывать в мини-карточках все важные сущности товара: варианты цены, акции, условия, комплекты.
Интерфейс мобильного приложения для здорового образа жизни: создаем структуру | SobakaPav.ru
На наш вкус — многовато информации разом, но для заказчика это важно

Результат

Разобрались в разрозненных, никак не структурированных бизнес-пожеланиях от разных подразделений компании-заказчика. Превратили их в понятный набор конкретных бизнес-требований. Реализовали эти требования в дизайне.
Вот это — настоящий результат нашей работы. Это, а не красивые картинки (которые мы, конечно, нарисовали и сдали в срок; заказчику понравилось, а позже он вернулся за добавкой).
~ 450 000 ₽
Бюджет
«Работалось совершенно комфортно на первых 70% проекта — растянули начальные этапы, и в конце пришлось подбиваться по срокам. Поставленная задача была выполнена, результаты уйдут в разработку рано или поздно. Могу рекомендовать для оперативного аутсорсинга дизайн-решений».
Александр Королев
Продукт-менеджер
Всегда приятно усилить и без того сильную команду. И результат выходит очень крутой.
Результат
Другие кейсы