Разработка интернет-магазина Лика Комфорт
Цели
Создать сайт для компании, занимающейся продажей и монтажом климатической техники на рынке Западной Украины. Требования к интернет-магазину были типичными для ecommerce: понятная навигация, удобный поиск, оформление и оплата заказа. На сайте необходим личный кабинет, возможность онлайн оплаты, оформления кредита и рассрочки, покупка с помощью бонусов. Зарегистрированным пользователям должна быть предоставлена возможность оценивать и комментировать товары.
Используемые технологии
Front-end: React.js
Back-end: Framework Laravel
Решения
Согласно фирменной стилистики и брендбуку от заказчика, наши дизайнеры разработали дизайн, используя светлые и темные тона зеленого в сочетании с нейтральным белым цветом. Большое внимание было уделено как UX, так и UI составляющим веб-дизайна. Были разработаны уникальные иконки для разделов каталога.
В каталоге товаров присутствует легкая анимация, что позволяет пользователю плавно и мягко осуществлять переходы, не отвлекаясь от основной цели — изучения и просмотра контента.
В интернет-магазине Lika Comfort представлены товары различных категорий. В навигационном меню для удобства пользователей мы сразу вывели основные фильтры товаров, также бренды ведущих производителей. Также усилили акценты на категориях и подкатегориях товаров прорисованными кастомными иконками.
На первом экране сразу под хедером реализован баннер, для специальных предложений. Этот блок нацелен получить максимальное внимание посетителей. Стилистика баннера на главной странице не нарушает общую стилистику сайта.
Далее на главной странице размещены товарные блоки с новинками, акционными товарами. Эти блоки помогают клиенту определиться с покупкой и завлекают в каталог магазина.
Поскольку наш заказчик занимается не только продажей климатической техники, но и проектированием, установкой и монтажом, то было принято решение на главной реализовать блок с основными услугами. С помощью разной величины каждого блока с услугами мы сделали акценты на более значимые и популярные услуги. Также добавили интерактивную анимацию на функциональные блоки.
На странице каталога товаров в левой части реализованы фильтры, которые можно добавлять и настраивать через админ панель сайта. После выбора фильтров контент на странице плавно и быстро меняется без перезагрузки всей страницы за счет использования в разработке сайта библиотеки React.
Далее рассмотрим карточку товара, она достаточно функциональна и удобна, позволяет сосредоточить и акцентировать внимание пользователя на главном. Есть возможность покупки в 1 клик без регистрации аккаунта, добавления к заказу дополнительных услуг, добавления товара в Избранное и в Сравнение. Отзывы о товаре и оценку могут оставлять только зарегистрированные пользователи с подтвержденной покупкой данного товара. На странице ярко выделена кнопка «Купить», крупным текстом добавлена цена и сумма кешбека для стимулирования пользователя к приобретению товара. Интерфейс карточки позволяет переключиться сразу на характеристики, описание товара, отзывы без скроллинга страницы.
Информация на карточке товара дает исчерпывающие ответы на все вопросы покупателя.
Для повышения юзабилити и конверсии сайта был внедрен функционал по подбору оборудования в режиме онлайн. Всего 3 шага и пользователю открывается ассортимент подходящего оборудования исходя из его потребностей.
Бэкенд сайта реализован на PHP-фреймворке Laravel. Это позволило создать сайт с нуля и реализовать все идеи заказчика на должном уровне.
Конечно же сайт адаптирован под различные разрешения экрана, благодаря этому информация корректно отображается на разных устройствах.