Категория:
Интернет-магазин с каталогом и уникальным функционалом
Описание проекта:
Создание интернет-магазина Automerc с фронтендом на Next.js и бэкендом на Next.js, каталогом на базе TecDoc, уникальным функционалом, простым и удобным интерфейсом.
Проект включал:
UX/UI дизайн, веб-разработку, запуск сайта, готового к SEO-продвижению
Длительность:
3 месяца
С чем клиент пришел к нам
В студию Digital Devils с запросом на разработку интернет-магазина с нуля обратилась компания Automerc, которая реализует новые и б/у запчасти после авторазбора для автомобилей всех марок и моделей.
Клиент хотел получить сайт со стильным дизайном и удобным каталогом, хорошо продуманным юзабилити для представления собственного бренда в интернете и повышения продаж. До этого времен весь пул заказов формировался из уличной рекламы и сарафанного радио.
Цель проекта:
создание сайта для продажи запчастей онлайн в Минске и РБ.Перед нашей командой стояли следующие задачи:
Разработать интернет-магазин с каталогом запасных частей;
Обеспечить удобство использования сайта, как для конечных покупателей, так и для сотрудников компании через интуитивно понятную административную панель;
Реализовать функции поиска и фильтрации товара по различным параметрам;
Добавить на сайт Корзину и Личный кабинет с расширенными возможностями для покупателей.
Какие возникли проблемы?
Анализ рынка и товарного ассортимента заказчика показал, что каталог должен включать десятки тысяч позиций + практически каждый месяц выходят новые модели и модификации авто и соответственно комплектующие к ним.
Здесь нам на помощь пришла платная база TecDoc, которая содержит более миллиарда записей по автозапчастям. По итогу, всю информация о товаре на сайте (категории, конфигурации авто, заводские артикулы и т.д.) мы взяли именно с TecDoc.
Нам предстояло продумать интерфейс и юзабилити каталога так, чтобы покупатели могли, максимум в 4-5 шагов найти нужную запчасть или ее аналог.
Для этого на сайте была реализована гибкая фильтрация с возможностью подбора запчастей под конкретное авто. Дополнительно, в каталоге можно с помощью сортировки выбрать производителя деталей и предпочтительный диапазон цен.
Техническая часть
Фронтенд
Для разработки фронтенда интернет-магазина использовался Next.js, что позволило ускорить загрузку страниц и заложить отличную основу для SEO-оптимизации, интеграции сайта с различными API и базами данных.Бэкенд
Для бэкенда был выбран фреймворк Next.js, открывающий широкие возможности для упрощения процессов обработки заказов, управления клиентской информацией и синхронизацией платежей.База данный
В качестве базы данных использовалась MySQL.Полученные результаты
Клиент остался доволен, как ходом работы, так и готовым сайтом интернет-магазина.
Специалисты Digital Devils регулярно отчитывались о промежуточных результатах, проводили презентации, участвовали в совместных планерках и совещаниях.
Заказчик особенно высоко оценил внимательность команды к пожеланиям относительно дизайна и реализации отдельных решений, прозрачность и скорость процесса разработки.
Цвета
Для удобства визуального восприятия информации в дизайне интернет-магазина задействовались контраст и цветовая иерархия.
Используемые в оформлении сайта цвета на 100% соответствуют фирменному стилю компании. Основная палитра, акцентные элементы и вспомогательные оттенки четко распределены по зонам, чтобы направлять пользователя и мотивировать его на покупку.
Шрифт
Подобранные дизайнерами Digital Devils задают динамичный ритм восприятия контента, помогают выстраивать визуальную иерархию информации, положительно влияют на конверсию.
H1
Bold
32px
H2
Bold
24px
H3
Bold
20px
Body
Medium
16px
Small
Medium
14px
Главная
На главной странице разместили привлекающие внимание баннеры, информацию о компании. В верхний блок добавили основное меню и строку поиска, в подвал – полезные для покупателей разделы с контактами, оплатой и доставкой.
Для оформления страницы был разработан минималистический дизайн, который облегчает взаимодействие с каталогом. Чтобы максимально упростить интерфейс и сделать его удобным для пользователя мы просмотрели десятки сайтов-конкурентов и выбрали наиболее удачные решения для компании, занимающейся продажей автозапчастей.
Регистрация
Форма регистрации имеет понятную последовательность шагов и предельно простой дизайн. Пользователям доступно два способа быстрой регистрации:
В дальнейшем пользователь может дополнить данные о себе при оформлении заказа или в личном кабинете.
Личный кабинет
На сайте реализован Личный кабинет со следующими возможностями: отслеживать прошлые заказы, просмотр текущей корзины, добавление машин в свой гараж и выбор активного авто, получение персональных скидок и бонусных программ.
При оформлении заказа есть возможность использовать промокоды, которые предоставляются пользователям персонально.
Корзина
За счет интуитивного интерфейса с ясными кнопками “Добавить в корзину” и удобным механизмом поиска товаров покупатели могут легко добавлять нужные запчасти в Корзину.
Ее боковое отображение в карточке позволяет быстро просматривать, что именно лежит в Корзине, регулировать количество товара, видеть общую стоимость покупок.
Оформление заказа
Для оформления заказа покупатели достаточно сделать несколько кликов мыши.
Блок занимает одну страницу, каждый элемент которой продуман до мелочей, обеспечивает высокую конверсию и положительно влияет на продажи. Пользователям доступен выбор способа оплаты и доставки.
Гараж
Гараж – это возможность для пользователей добавлять в профиль свои автомобили (их может быть несколько) и использовать их для более быстрого поиска автозапчастей.
Раздел призван упрощает подбор запчастей и экономит время покупателей, способствует развитию базы постоянных клиентов магазина.
