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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

Каталог

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

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

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

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

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

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

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

Чекаут

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

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

• Отдельно вынесены разные способы доставки: курьером или самовывоз из пункта выдачи, самовывоз из магазина, реализован инструмент раздельной корзины;
• Возможность выбора разного способа оплаты заказа;
• Указана возможность применения скидки – это подсказывает пользователю, как выгоднее совершить покупку;
• В чекаут добавлено поле для промокода;
• Раздельный чекаут для физических и юридических лиц;
• Использование информации для чекаута из зарегистрированного аккаунта;
• Команда проекта модернизировала пользовательский интерфейс чекаута – у пользователя есть возможность переноса способа доставки товара.

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

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

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

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

• Инфо-арт

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

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

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

3. Результаты сотрудничества

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

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

Бушеленкова Светлана

Руководитель отдела продюсирования, Progressive Media

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

Хлыстов Константин

Руководитель интернет-проектов Peredvizhnik.ru, Передвижник

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