Разработка сайта для интернет-магазина климатической техники Лика Комфорт

Клиент

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

Цели

Создать сайт интернет-магазин для компании, занимающейся продажей и монтажом климатической техники.

Задачи

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

 

Используемые технологии

Front-end: React.js

Back-end: Framework Laravel

 

Решения

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

Лика Комфорт

 

В каталоге товаров присутствует легкая анимация, что позволяет пользователю плавно и мягко осуществлять переходы, не отвлекаясь от основной цели — изучения и просмотра контента.

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

Разработка интернет-магазина

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

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

Разработка интернет-магазина

 

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

Разработка интернет-магазина

 

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

Разработка интернет-магазина

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

Разработка интернет-магазина

Информация на карточке товара дает исчерпывающие ответы на все вопросы покупателя.

Разработка интернет-магазина

 

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

Разработка интернет-магазина

Бэкенд сайта реализован на PHP-фреймворке Laravel. Это позволило создать сайт с нуля и реализовать все идеи заказчика на должном уровне.

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