Редизайн интернет-магазина для художников Передвижник

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

О проекте

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

Первый магазин Передвижник был открыт в 2005 году, сегодня сеть магазинов широко представлена в Москве и других городах России. В интернет-магазине компании размещено более 20 000 художественных товаров российских и зарубежных производителей художественных материалов.

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

Задача и проблематика

Для интернет-магазина очень важно показать товары со всех сторон, а для бренда художественных товаров — особенно.  Дизайн сайта должен быть ярким и запоминающимся, чтобы привлечь внимание творческих людей, но в то же время довольно лаконичным и сдержанным, чтобы не отпугнуть целевую аудиторию старшего возраста. ЦА сайта обширна: возраст от 16 до 60 лет, преобладает женская аудитория, их доля составляет почти 70%. Среди потенциальных покупателей могут быть как новички, так и опытные художники — в целом, это люди, стремящиеся к творческой реализации.  

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

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

Решение

Команда Progressive Media с 2017 года занималась сопровождением сайта Передвижник. В 2022 году совместно с клиентом пришли к единому мнению, что текущая версия сайта перестала отвечать поставленным задачам. Интернет-магазин визуально устарел, и ему требовалось обновление. 

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

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

Главная страница сайта

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

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

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

— Выдача результата при вводе слова в поле ввода — подсказывает пользователям, что они могут искать на сайте интернет-магазина;  

— Популярные запросы пользователей интернет-магазина;

— В результатах фильтрации созданы готовые подборки по самым популярным категориям и характеристикам, по ним настраиваются SEO данные;

— История запросов хранит все недавние запросы пользователя, чтобы предоставить эти данные ему при следующем взаимодействии с сайтом;

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

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

75958cdc4554de41f786eb3b52509b48.png

Каталог

Основное внимание, как и в любом интернет-магазине, специалисты Progressive Media уделили Каталогу товаров. Фильтры в каталоге заменяют потенциальным покупателям продавца, они должны вести себя максимально предсказуемо и удобно, причем самые важные должны быть выше и заметней остальных.

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

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

b45b59af8c3c278e4de4cc9d06ef9bc2.png

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

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

— описание товара, где представлена детальная информация о продукте;

— информация по наличию товара на складе повышает шансы завершения конверсионного сценария;

— Отзывы нужны для того, чтобы товар лучше ранжировался и чаще попадал в результаты поиска покупателей;

— Доставка, в этом разделе указаны подробности доставки: какова стоимость доставки, есть ли бесплатная доставка и на каких условиях она будет предоставлена.

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

d829ca08c8d708ba6fd5ba2d9f97ee85.png

Личный кабинет

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

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

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

2421f5045ce47f79de574b1612e28380.png

Чекаут

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

Специалисты Progressive Media сделали путь пользователя максимально понятным и прозрачным:

— Отдельно вынесены разные способы доставки: курьером или самовывоз из пункта выдачи, самовывоз из магазина, реализован инструмент раздельной корзины;

— Возможность выбора разного способа оплаты заказа;

— Указана возможность применения скидки — это подсказывает пользователю, как выгоднее совершить покупку;  

— В чекаут добавлено поле для промокода;  

— Раздельный чекаут для физических и юридических лиц;

— Использование информации для чекаута из зарегистрированного аккаунта;

Команда проекта модернизировала пользовательский интерфейс чекаута — у пользователя есть возможность переноса способа доставки товара.

Чтобы автоматизировать доставку заказов на склады, в магазины и клиентам, специалисты Progressive Media использовали интеграцию с Яндекс.Доставкой. Пользователь сайта указывает нужный адрес, а Яндекс.Доставка инициирует доставку с помощью своей инфраструктуры и рассчитывает ее стоимость. 

Интеграция с Яндекс.Доставкой позволяет автоматизировать бизнес-процессы, отслеживать их в режиме реального времени: вести учет подарков, следить за начислением бонусов при заказе, регулировать статус контрагента (юридическое лицо и физическое лицо), выбрать тип доставки (курьер или пункт выдачи заказов) — все данные подтягиваются из Яндекса с интервалами доставки и стоимости. 

Для создания списка со всеми возможными адресами была проведена интеграция с сервисом DaData. При заполнении поля «Адрес», система обращается к сервису и выводит перечень подходящих адресов в виде списка. Проведенная интеграция облегчает процесс заполнения данных для пользователя, делает чекаут еще более удобным для использования. 

Дополнительные фичи

Инфо-арт

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

Сообщить о неточности товара

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

803c5976983cee768ff1752cba768966.png

Результат

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

Проведена отладка адаптивной верстки. Теперь интернет-магазин прекрасно отображается на смартфонах и планшетах. Контент моментально подстраивается под разрешение экрана и становится доступен для взаимодействия.

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

f8a2e79805dc42af638275c2eca695e7.png

Перейти на сайт

Полный текст статьи читайте на CMS Magazine