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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инфо-арт

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

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

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

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

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

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