+375 (29) 626-44-35 Заказать проект

Разработка интернет-магазина мебели mystar.by

Сайты
2023
Разработка интернет-магазина мебели mystar.by

Задача

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

Проект:
MySTAR — зарегистрированная торговая марка мебели производства ОАО «Ивацевичдрев»
Цель:
создать интернет-магазин мебели для розничной торговли

Процесс

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

Руководство ОАО «Ивацевичдрев» ставили перед собой три основный цели, которые они желают достичь при помощи интернет-магазина. Во-первых, за счет современного сайта улучшить имидж компании. Во-вторых, увеличить показатели продаж через новый канал сбыта. В-третьих, выйти на новые регионы страны.

картинка

Дизайн

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

картинка

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

Функционал

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

картинка

С целью удобного взаимодействия «сайт-клиент» наша команда разработала навигационное и «бургер» меню. В главном меню представлены гиперссылки на основные разделы сайта: «Акции», «Каталог», «О нас», «Магазины», «Доставка и оплата», «Гарантия», а также перечень основных типов продукции.

картинка

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

картинка

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

картинка

Ниже шапки расположен интерактивный объект страницы — слайдер. В нашем случае это не типичная «карусель с картинками» в виде баннера.

картинка

Область баннера, содержит ссылки на разные элементы мебели. При наведении курсора на круглые маркеры, появляется информационное pop-up окно. Благодаря этой функции пользователь не только может изучить то, как несколько изделий выглядят в интерьере, но и перейти на карточку каждого из них в отдельности.

картинка

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

картинка

Завершающим элементом главной страницы стал блок “Широкая сеть точек продаж”. В данном блоке размещена информация о местоположении магазинов. Для этой цели мы применили сервис «Яндекс.Карта» с маркер-указателями. При нажатии на маркер, открывается pop-up окно с подробной информацией о выбранном магазине.

картинка

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

картинка

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

Широкий ассортимент магазина предполагает продуманную навигацию по каталогу. Для удобства пользователя мы добавили фильтры и сортировку. Пользователь может провести сортировку по стандартным параметрам: «Сначала дешевые», «Сначала дорогие», «По популярности», «По новизне». Помимо этого также есть возможность фильтровать выдачу по типу комнаты: «Гостиная», «Спальня», «Прихожая», «Подростковая», «Офис», «Кухня».

картинка

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

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

картинка

Помимо этого есть кнопки: «Добавить в корзину», «Добавить в сравнение», «Добавить в избранное». Стоит отметить, что на карточке товара реализована кнопка "Сообщить о поступлении товара". Она появляется в случае его отсутствия при клике на кнопку корзины.

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

картинка

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

картинка

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

картинка

Помимо скидки на элементы коллекции в корзине реализованы другие виды дисконтирования: «Персональная скидка», «Скидка за количество товаров», «Промокод», «Акция», «Скидка по отдельному товару».

картинка

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

  • ЕРИП;
  • Банковской картой («MasterCard», «Visa», «Мир», «UnionPay»);
  • Рассрочка в магазине;
  • Наличными в магазин.
картинка

После оформление заказа, появляется pop-up окно с информацией, о том, что заказ успешно оформлен и при нажатии на кнопку “Спасибо”, закрывается.

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

Кому подойдет подобный интернет-магазин?

Подобный проект подойдёт тем представителям бизнеса, которые хотят создать полноценный продающий сайт с богатым функционалом и интеграциями для вывода бизнеса на новый уровень.
Клиент:
ОАО «Ивацевичдрев»
Тип проекта:
Сайт под ключ
Тип работы:
Интернет-магазин
Индустрия:
Торговля

Стек технологий:

  • HTML5
  • CSS3
  • JS
  • Bitrix
  • Git

Команда:

  • Менеджер проекта 1
  • Бизнес-аналитик 1
  • Дизайнер 1
  • Front-End разработчик 1
  • Back-End разработчик 2
  • Тестировщик 1
Заказать проект или проконсультироваться можно по адресу info@imedia.by или заполните онлайн заявку и мы позвоним Вам в течение 1 часа!
Оставить заявку
Поделиться: