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 моделювання та рендеринг дозволили нам отримати чіткі та реалістичні зображення. Ми розробили точні 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

Фіксовані елементи сторінки при скролі

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

Коли вона закінчується, сторінка продовжує скролитися до наступних секції з детальними характеристиками товару.

Переглядайте сайт проекту

За посиланням тут

Технології та інструменти, які ми використовували під час розробки проекту.

  • Adobe Illustrator

    Adobe Illustrator

  • Adobe Photoshop

    Adobe Photoshop

  • Figma

    Figma

  • HTML

    HTML

  • Sass

    Sass

  • JS

    JS

  • Cake PHP

    Cake PHP

  • GitHub

    GitHub

  • AWS

    AWS

  • Autodesk 3ds MAX

    Autodesk 3ds MAX

Зв'яжіться з нами

Заповніть форму, і ми зв'яжемося з Вами.

    ДзвінокTelegramViber

    Як зручно спілкуватись?