Разработка сайта–каталога компании «Amber Magic»

Клиент: Компания по изготовлению изделий из янтаря в Калининградской области.

Продукт: Косметические средства из натурального янтаря.

Задача: Разработать двуязычный адаптивный сайт – каталог для новой линейки продукции компании.

Цели:

1. Создать бренд новой линейки продукции компании;
2. Привлечь новых клиентов, мотивировать к покупке.

Анализ аудитории

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

Для «Amber Maagic» мы нашли 5 сайтов – конкурентов в той же отрасли в России и в Европе, изучили их структуру и провели анализ трафика с помощью сервиса SimilarWeb.

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

Направили заказчику бриф на заполнение. Затем назначили встречу, чтобы утвердить все детали проекта.

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

Разработка макетов сайта

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

Пока фото — материалы обрабатывались, команда дизайнеров агентства «Business Boom» занялась формированием конкурентного дизайнерского решения на основе собранных данных на этапе анализа.

Для веб – сайта были выбраны следующие основные цвета: оттенки янтаря (Желтый, оранжевый), чёрный цвет и оттенки серого для контраста с яркими янтарными акцентами и создания уютной атмосферы натурального качественного продукта. Белый цвет был использован для пустых пространств, чтобы сделать веб – сайт более лёгким для глаз пользователей.

В соответствии с техническим заданием, структура веб – сайта должна была быть следующей:

1. Главная страница
2. Раздел «Новинки»
3. Каталог
4. Хиты продаж
5. О продукции
6. О бренде
7. Акции
8. Контакты

Также мы добавили корзину, поиск и раздел «Избранное» для оформления заказа.

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

Разработка адаптивного дизайна сайта:

Утвержденные макеты послужили каркасом для наращивания нашего дизайнерского решения.

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

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

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

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

В нижней части каталога расположен раздел «Акции», чтобы показать клиенту позиции товара по более доступным ценам.

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

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

В разделе контакты была добавлена карта и изображение здания компании для более точной навигации.

Корзину мы разработали в виде списка, в котором покупатель может посмотреть количество товаров, их стоимость по отдельности, общую сумму, а также использовать промо — код на скидку и оформить свой заказ.

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

Мы всегда идём навстречу и прислушиваемся к заказчику во время работы, чтобы достичь наилучшего результата.

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

Верстка сайта каталога

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

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

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

Также прописали Title description и подготовили базу для SEO – продвижения сайта.

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

Нам удалось разогнать этот параметр до 89 баллов в Desktop – версии и до 73 баллов в версии для мобильных устройств, что является довольно хорошим показателем, для сайта – каталога.

Результат: Мы смогли разработать двуязычный адаптивный сайт – каталог для новой линейки продукции компании «Amber Magic». Достигли поставленных целей и смогли разогнать оптимизировать веб – сайт до хорошего уровня.