Разработка интернет-магазина по продаже сумок B2C

Кейс «Разработка сайта сумок b2c»

В 2017 году устроился на работу в компанию Slavia, как руководитель интернет проектов. За время работы командой создали замечательный сайт, который на данный момент находится на высоких позиция по высокочастотным запросом по Москве, а также отличная поддержка омниканальной торговли.

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

Сейчас вам покажу весь проект по разработке интернет-магазина https://slaviabag.ru/

P.S. Сайт самописный на Yii2 Framework

Погнали!

Главная

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

1. Меню сделано вертикальное, так как количество категорий не такое большое, чтобы на старте проекта делать боковое, плюс оно всегда у покупателя на виду
2. В самой верхней строке вынесены основные важные пункты для интернет-магазина, но первым стоит «Магазины», так как сайт сделан для поддержки и развития омниканальной торговли.
3. На поиск нет большого акцента, так как у товар сумки и аксессуары, нет большого различия, людям привычнее использовать меню
4. Справа по стандарту находится: обратный звонок с контактами, личный кабинет, избранное и корзина
5. Большое внимание отбирает баннер. Он может быть как большой во весь экран, так и состоять из трех частей.

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

Дальше идет блок с самыми востребованными категориями, а под ними идет блок тегов, который насыщает страницу LSI словами (слова задающие тематику), с возможностью перейти на страницу

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

После идет блок с популярными товарами, которые подгружаются за счет модуля рекомендаций https://retailrocket.ru/

Блок с новинками, которые поступили в магазин и новинки на сайте, так как товар на сайте появляется быстрее в какие-то моменты.

Ну и конечно главная часть любого сайта — это подвал.

1. Как мы видим текста нет!
2. Дублирование меню.
3. Основные информационные страницы
4. Возможность подписаться
5. Информация о соц сетях
6. Рейтинг на Яндекс.Маркете
7. Способы оплаты

Каталог

Каталог представляет из себя туже структуру, что и категория, но несет в себе все товары сайта

Категория

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

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

Товары на листинге крупные.

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

Есть иконки новинка, хит или скидка.

Указывается наличие и количество товаров, если он под акцией.

При наведении показываются кнопки «Купить в 1 клик» и «В Корзину»

В конце листинга идет подгрузка рекомендация по категории на основании модуля рекомендаций.

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

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

1. Фотография товара большая
2. С боку от фотографии привью, местами видео
3. Под фотографией идет предупреждение о цвете
4. Есть элементы иконок новинка, скидка или акция
5. Также на фото добавлен модуль рекомендаций для соц сетей
6. Заголовок товара формируется автоматически на основании шаблона
7. Артикул товара
8. Цена без скидки, так и может быть со скидкой
9. Под ценой информация о онлайн оплате, дополнительный элемент для конверсии
10. В наличии позволяет посмотреть, где находится товар, покупатель может конкретно посмотреть в каком магазине есть сумка
11. Просмотры, формируются в реальном времени
12. «Как купить?» позволяет посмотреть не опытному покупателю, что необходимо сделать для покупки
13. Далее кнопки «В корзину» и «Купить в 1 клик» + иконка добавить товар в избранное
14. Возможность перейти в карточку товара данной сумки, но другого цвета
15. Сроки доставки и стоимости
16. С боку есть бренд сумки и производитель

Блок с описанием, в который входят характеристики, и краткое описание товара.

Блок с отзывами, которые оставили и также возможность оставить отзыв к товару.

Магазины, данный блок показывает в каких магазинах есть товар.

Возможность простора магазина на карте, где есть товара.

В данном блоке информации о доставке с калькулятором и информация об оплате

Блок рекомендация с похожими товарами и недавно просмотренными + УТП

Краткое описание, которые делается генерацией по шаблону.

Корзина

Оформление заказа построено на одной странице, от товаров до доставки и оплаты.

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

Дальше идет информация о самом товаре с возможностью удалить или увеличить количество.

Следующий этап — это ввод контактных данных, где обязательно поле телефон и e-mail.

Выбор варианта доставки.

1. Необходимо выбрать город, относительно города покажутся возможные способы доставки
2. Выбор доставки. У доставки показывается цена доставки
3. Указание даты ближайшей доставки
4. Указание адреса доставки или выбор пункта самовывоза.

1. Выбор способы оплаты. Сделана интеграция с оплатой через Сбербанк и через Яндекс.Кассу
2. Возможность ввода «Промокод»
3. Комментарий к заказу
4. Итого по всему заказу с информацией
5. Если выбрана оплата онлайн, то дается дополнительная скидка, и также кнопка в итоге «Перейти к оплате»

Магазины

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

Магазины указаны на всех картах.

Страница с подробным описанием магазина: фотографии, бренды, адрес, описание как проехать, бренды товаров, которые есть в магазине и товары в магазине

Прорисовано местоположение магазина в торговом центре. После идет форма обратной связи.

Магазин на карте и модуль недавно просмотренных товаров.

Оплата

Оформленная страница с видами оплаты

Доставка

На странице находится форма для расчета доставки на основании данных для интернет-магазина. Дальше идет список по видам доставки с ценой.

Гарантия

Оформленная страница с условиями по гарантии

Отзывы

На страница присутствует:

1. Отзыв клиента с рейтингом, текстом и фотографиям
2. Ответ менеджера
3. Форма для «Оставить отзывы» с полями: имя, e-mail, отзыв, ссылка на видео, рейтинг, прикрепление фотографий

Вопрос-ответ

Список в виде табов с возможностью при клике открывать и закрывать видимость.

Контакты

Страница и информацией о компании, где она находится и возможность оставить вопрос.

Местоположение на карте интернет-магазина.

Как оформить заказ

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

Как оплатить картой

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

Статьи

На данной странице список статей в виде плитки из привью, заголовка и текста.

Статья состоит из теста, фотографий, видео, списка и других элементов.

404 ошибка

Страница возникающая в случае если был переход на несуществующею страницу.

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

При входе в личный кабинет, вы увидите следующие данные:

1. Боковое меню: личный кабинет, мои сообщения, мои скидки, мои данные, мои заказы, мои доставки, оформить возврат
2. В центре: Моя корзина, Мои доставки, Информация обо мне, Информация о скидке — по сути краткая информация заказам в работе или те, что еще процессе.

Создали в личном кабинете возможность переписываться с менеджерами на несколько тем, переписка веется в виде чата.

Также менеджер может сделать индивидуальную рассылку зарегистрированному пользователю

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

Данный

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

Также проверка телефона проходит по СМС и позволяет привязать дисконтную карту

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

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

Вот мы с вами рассмотрели основные страницы и блоки по интернет-магазину сумок https://slaviabag.ru/. В данном разборе я вам показал что было сделано и как, скорее всего выйдет ещё пару статей, но с описание более подробных элементов и что они дали в результате.