О проекте

В течение 2020 года страница за страницей мы обновляли дизайн интернет-магазина. Активное участие в работе над проектом принимали маркетологи FORS. Главной целью было сделать интернет-магазин удобным для розничных и оптовых закупок.

Команда fuse8

Руководитель проекта
Вениамин Мустафин

Дизайнеры
Алексей Пилишков
Валентин Кротов

Команда «47.ru»

Директор по маркетингу
Тимур Кушаков

Разработчик
Артём Ванат

Процесс

Мы начали работу над проектом с изучения целевой аудитории интернет-магазина 47.ru. Это физические лица, юридические лица и специалисты. 

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

Мы также изучили сайты конкурентов FORS и популярные интернет-магазины — «Леруа-Мерлен», «Ситилинк», OZON, DNS, AliExpress и другие. Последние формируют пользовательский опыт — то, как люди привыкли взаимодействовать с коммерческими площадками в сети. Поэтому изучать их интерфейсные решения — всегда хорошая идея.

Собрав этот багаж знаний и идей, мы предложили свое видение дизайна интернет-магазина 47.ru в виде прототипов. Затем обсудили их с заказчиком, внесли коррективы и начали, страница за страницей, создавать дизайн-макеты обновленного сайта 47.ru.

Результат

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

Самый заметный объект на главной странице — блок с категориями товаров. Он выполняет сразу две задачи:

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

Каталог

Сверху страницы есть раскрывающееся навигационное меню с разбивкой на категории товаров.

Слева — дополнительное меню с товарами, относящимися к выбранной категории.

Пользователь может переключаться между двумя видами отображения товаров в каталоге: плиткой или таблицей.

Плитка удобна для сравнения товаров визуально. При наведении на карточку появляется дополнительная информация и кнопка «В корзину».

Таблица удобна для крупных закупок. На странице помещается больше товаров. В правой колонке — кнопка для моментального добавления в корзину.

Страница товара

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

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

Ниже на странице товара — информация о доставке, адресах пунктов самовывоза, и раздел «С этим товаром покупают». Его мы дополнили тэгами, которые помогут покупателю найти сопутствующие товары.

Сравнение товаров

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

Сравнив товары и выбрав из списка подходящую модель, покупатель может сразу добавить её в корзину.

Корзина

Корзина на сайте 47.ru — это инструмент управления заказом. Здесь можно добавить единицу товара, заменить его на аналог, удалить ненужное, поделиться списком с кем-то еще или распечатать его.

Снизу на странице есть список удаленных товаров. Если покупатель случайно убрал из корзины нужный товар, он может вернуть его обратно в один клик.

Из корзины можно купить товар в один клик. Для этого нужно ввести только номер телефона и электронную почту. Менеджеры 47.ru свяжутся с покупателем, чтобы подтвердить заказ и уточнить способы его получения и оплаты.

Оформление заказа

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

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

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

Дизайн-система

Мы создали для заказчика большую библиотеку компонентов. В ней собраны все визаульные элементы сайта в разных состояниях. Теперь, если заказчику потребуется создать новую страницу на 47.ru, у дизайнера это не займет много времени.