Amers E-commerce

Амерс - украинская фабрика, занимающаяся изготовлением мебели более 20 лет.

coder desktop
coder mobile 1
coder mobile 2
coder mobile 3

Актуальные проблемы рынка мебели

При анализе мы принимали во внимание производителей мебели, которые работают в среднем и выше среднего ценовых сегментах.
Ориентировочная стоимость одного дивана колеблется от 25,000 до 60,000 тысяч гривен.

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

  • Это может быть отсутствие такой суммы на карточке;
  • Недоверие к ресурсу, на котором нужно осуществить такую проплату;
  • Неудобный интерфейс;
coder mobile 3
coder mobile 3

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

Разработка технического задания и планирование функционала

На этапе планирования разработки флеш мы описали будущий функционал, и определили основные цели и приоритеты:

  • Разработка презентабельного UI, который будет удобным и максимально информативным для пользователей;
  • Моделирование и рендеринг диванов;
  • Создание мобильной версии сайта;
  • Реализация удобной и интуитивно понятной панели управления и администрирования веб-ресурсом;
  • Высокая скорость загрузки сайта на всех устройствах в соответствии с требованиями Google Core Web Vitals;
  • Модуль изменения цветов и текстур моделей диванов;
  • Бонусная программа лояльности для клиентов;
  • Оплата частями от Приватбанк и монобанк.

Подбор шрифтов и фирменных цветов

Fonts & palette

Аа

Montserrat SemiBold

Montserrat Medium

Montserrat Regular

  • #F7F7F7
  • #000000
  • #877271
  • #7F7F7F
  • #E5E5E5

Создание удобного UI (User interface) сайта для пользователя

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

Далее расскажем подробнее о решениях, которые были реализованы для сайта фабрики Amers.

Catalogue

Catalogue
Catalogue
Catalogue
Catalogue
Catalogue

Профессиональное моделирование диванов

Только 3D моделирование и рендеринг позволили нам получить четкие и реалистичные изображения. Мы разработали точные модели всего каталога, который должен быть представлен на сайте, а это 32 модели, и изобразили их в 5 текстурах по 10 - 15 цветов в каждой. Большая объемная работа, которая унесла много сил и времени, но результат этого стоит.
В дальнейшем эти модели можно использовать при дизайне интерьеров, и при создании нового фото контента для представления и продвижения модельного ряда.

Model

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

360°

Чтобы обеспечить полный обзор продукта в одном цвете и текстуре, надо 71 изображения. Одна модель содержит 5 текстур, а в каждой из них 12-30 цветов. Для получения 3D изображения приходится рендерить сотни снимков.

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

Инструмент изменения цвета и текстур

Чтобы пользователь мог увидеть максимально реалистичный вид дивана мы создали специальный блок, где четко видно текстуру материала. Изменение текстуры происходит автоматически при выборе нового цвета.

Model Model

Order samples

Заказывай образец ткани, чтобы увидеть его вживую

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

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

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

Подробные характеристики товара

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

Кроме того, в блоке с характеристиками является детальное описание товара и 3D-схема внутренней части конструкции. Она наглядно показывает, из чего состоит диван и из каких материалов он изготовлен.

Model Model

Интеграция оплаты частями

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

Model Model

Бонусная система

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

Бонусы накапливаются в личном кабинете и доступны для использования во время дальнейших покупок. С помощью специальной кнопки можно уменьшить стоимость товара на сумму кэш беку. Какими бы ни были финансовые возможности клиента, 3% от стоимости дивана - очень приличная скидка.

Пример реализации системы бонусов:

Model Model

Мобильная версия сайта

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

Responsive

responsive
responsive
responsive
responsive
responsive
responsive
responsive
responsive
responsive

Фиксированные элементы страницы при скролл

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

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

Сервисы, которые мы используем, для аналитики, сбора информации, и продвижение данного интернет-магазина:

Google Annalytics

Google Annalytics

Google Tag Manager

Google Tag Manager

Google Search Sonsole

Google Search Sonsole

Google My Business

Google My Business

Full Story

Full Story

Facebook Pixel

Facebook Pixel

Google Ads

Google Ads

Ahrefs

Ahrefs

Serpstat

Serpstat

Screaming Frog

Screaming Frog

Google MerchantCenter

Google MerchantCenter

SMS Fly

SMS Fly

Сроки разработки

Проект AMERS удалось реализовать командой в течение 17 недель. В итоге мы потратили:

0 часов

Дизайн (настольный и мобильный отдельно)

0 часов

Front-end и back-end разработка

0 часов

Запуск и тестирование

Технологии и инструменты, которые мы использовали при разработке проекта.

  • Figma

  • Adobe Photoshop

  • Adobe Illustrator

  • Java Script

  • HTML

  • Cakephp

  • Sass

  • Autodesk 3ds MAX

  • GitHub

  • AWS

Руслан Сеньо Руслан Сеньо

Co-Founder, CEO

СВЯЖИТЕСЬ С НАМИ

Заполните форму, и мы свяжемся с Вами.

    ЗвонокTelegramViber

    Как удобно общаться?