Інтернет-магазин
“Народний дім Україна”

En Uk Ru

Технології

Designer

Project manager

Frontend

Backend

Період

Червень 2024 — Вересень 2024

Про компанію

У самісінькому серці столиці є атмосферне місце, де зібрано роботи найкращих майстрів і виробників зі всіх куточків нашої країни – Народний дім «Україна». Позиціонуючи себе як перший магазин суто українських подарунків, ми прагнемо до збереження, розвитку та поширення нашої культурної спадщини, а також підтримки українських майстрів, сучасних дизайнерів, художників і ремісників.

20.7К

Підписників в Інстаграм

Задача

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

Етапи роботи

Проєктування

На початку ми розробили чітку стратегію того, яким буде майбутній сайт. На Intro call ми обговорили цілі бізнесу та який саме буде потрібний функціонал. Розробили технічну документацію, де зафіксували всі вимоги до проєкту, після чого погодили кошторис проєкту та терміни реалізації кожного з етапів розробки.

Концепція дизайну

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

Ми розробили два відточених макета в Figma, з адаптивними версіями та UI Kit, і клієнт обрав один з них. Готовий дизайн став ніби полотном, на якому розгорнулися яскраві деталі, і в перші дні запуску ми отримали гарні відгуки від клієнтів “Narodniy Dim Ukraina”.

Розробка

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

Інтеграції

На цьому етапі ми підключили зовнішні API служб доставлення та оплати. Ми також під’єднали маркетингові сервіси, щоб бренд міг налагодити свої точки дотику до аудиторії: SMS повідомлення, персональні емейл розсилки та окремі спеціальні сервіси.

Також ми інтегрували автоматичні фіди для рекламних кампаній на Facebook Ads Manager, Google Merchant і Google Ads. Фіди автоматично оновлюються при будь-яких змінах в інтернет-магазині: цін, назв чи позицій. Це зручне управління рекламними кампаніями без ручного втручання, що значно економить час.

Додатково підключили schema.org. Google Tag Manager, Google Analytics, Google e-commerce, Facebook Pixel, Google's reCAPTCHA.

SEO-оптимізація

Ми оптимізували інтернет-магазин для SEO на рівні коду: оптимізували зображення через технології WebP, запобігли дублюванню сторінок завдяки тегу Canonical, впровадили мікророзмітку Schema.org для кращої індексації сайту, сформували файли robots.txt і sitemap.xm та інше.

Тестування

Наші QA менеджери ретельно перевірили весь функціонал сайту на відповідність того, що було прописано в технічному завданні, а також наскільки коректно інтернет-магазин відображається на різних пристроях. Також ми провели нагрузочне тестування для перевірки стійкості сайту при великій кількості користувачів, і перевірили, що всі сезонні та пікові розпродажі буде витримано.

Передача проєкту

Передача проєкту охоплює навчання представників замовника користуванню панеллю адміністрування, передачу всіх вихідних файлів, розміщення проєкту на сервері та інше.

Дизайн

FFFFFF

F1EDEC

FBF9F3

9B9191

000000

Montserrat Regular

Text styles

Ag h1 32/auto

Ag h1 mobile 24/auto

Ag h2 mobile 20/auto

Ag BTNs 16/140

Ag paragraph 16/188

Ag small 12/auto

Інтернет-магазин “Народний дім Україна” - Зображення №5

Інтернет-магазин “Народний дім Україна” - Зображення №6

Технічні деталі

Верстку було виконано з використанням препроцесорів Pug (для HTML розмітки) та Sass (для файлів стилів), що дозволило краще структурувати код та зробити його якіснішим. Були виконані всі вимоги сервісів Google, щоб сайт займав високі SEO-позиції.

Сам інтернет-магазин ми розробили на основі Laravel, потужного PHP-фреймворку, з використанням шаблонізатора Blade. JavaScript додав функціональності, а для збірки та оптимізації ми використали Gulp та Webpack. Ці інструменти допомагають адаптувати код також для старих браузерів, дещо зменшити його об’єм та оптимізувати зображення без втрати якості, покращуючи швидкодію сайту. Завдяки кешуванню за допомогою Redis та Memcached ми значно зменшили навантаження на базу даних, що теж добре позначилось на продуктивності інтернет-магазину.

Особливу увагу ми приділили безпеці. Laravel надає вбудовані механізми захисту, як захист від CSRF-атак та SQL-ін'єкцій. Для зберігання паролів використали Bcrypt, що робить їх стійкими до зломів, а також правильно налаштовували рівні авторизації та автентифікації користувачів.

Інтернет-магазин “Народний дім Україна” - Зображення №7

Фінальний функціонал:

Картка товару з різними кольорами та розмірами;

Простий пошук товарів та SEO фільтр;

Список улюблених товарів;

Зручний механізм обробки замовлень;

Інтеграція з зовнішніми платіжними системами та службами доставлянь;

Керування контентом та SEO-просуванням;

Підтримка декількох мов та валют;

Автоматичні фіди для рекламних кампаній;

Розширена аналітика (Google Analytics, Facebook Pixel);

Автоматизовані маркетингові інструменти (SMS, email-розсилки);

Система управління обліковими записами користувачів.

Переваги інтернет-магазину, розробленого Asabix

Не задачі, а продукт

Ми підготовили інтернет-магазин для успішного запуску і коректної роботи з самого початку, зробивши навіть більше, ніж у нас замовили. Ми додали сторінки 404, “дякую за покупку” та інші, впровадили процес логування, додали правильну реалізацію URL і багато чого іншого.

Код від розробника до розробника

Ми дотримуємося найкращих стандартів розробки та принципу “код від розробника до розробника”, тому готовий проєкт можна буде легко супроводити чи допрацьовувати будь-якою командою з часом.

Ідеальний UX

Готовий сайт інтернет-магазину в перші місяці після запуску значно збільшив кількість замовлень та залучив нову аудиторію з різних куточків світу.Компанія “Narodniy Dim Ukraina” отримала сучасну, потужну вебплатформу, на якій можна розміщувати якісний фотоконтент без втрати швидкості роботи та реалізовувати нові ідеї без жодних технічних обмежень.

Інтернет-магазин “Народний дім Україна” - Зображення №8

Години

Ефективність в числах

50 год

Дизайн

340 год

Фронтенд

320 год

Бекенд

80 год

Менеджмент та QA

Результати

Для розробки ми використали сучасний потужний PHP-фреймворк Laravel, який забезпечив інтернет-магазин високим рівнем безпеки, можливостями для масштабування та високим рівнем продуктивності.

Інтуїтивно зрозумілий інтерфейс для покупців;

Стильний та адаптивний дизайн;

Зрозуміла адмінпанель для керування контентом та товарами;

Високі SEO-позиції завдяки оптимізації та інтеграції мікророзмітки;

Якісний код та архітектура, які стануть основою для майбутнього масштабування.