Редизайн интернет-магазина для художников Передвижник
ЗаказчикПередвижник — это одна из крупнейших сетей магазинов по продажам профессиональных материалов для художников, архитекторов, дизайнеров. Бренд существует больше 15 лет и хорошо известен на рынкеЗадачаЗадача по разработке нового современного дизайна сайта с понятной навигацией, инструментами удобного подбора товаров, предназначенных для широкой аудитории потенциальных пользователей интернет-магазина
О проекте
Передвижник — это одна из крупнейших сетей магазинов по продажам профессиональных материалов для художников, архитекторов, дизайнеров. Бренд существует больше 15 лет и хорошо известен на рынке.
Первый магазин Передвижник был открыт в 2005 году, сегодня сеть магазинов широко представлена в Москве и других городах России. В интернет-магазине компании размещено более 20 000 художественных товаров российских и зарубежных производителей художественных материалов.
Передвижник — это не только продажа художественных материалов, но и участие в культурно-просветительной жизни клиентов. Компания является организатором многих различных зрелищных мероприятий для творческих людей.
Задача и проблематика
Для интернет-магазина очень важно показать товары со всех сторон, а для бренда художественных товаров — особенно. Дизайн сайта должен быть ярким и запоминающимся, чтобы привлечь внимание творческих людей, но в то же время довольно лаконичным и сдержанным, чтобы не отпугнуть целевую аудиторию старшего возраста. ЦА сайта обширна: возраст от 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-специалистами, вносят изменения на сайте согласно стандартам поискового продвижения.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
