ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6876| Title: | Web версія інформаційної системи e-commerce B2C |
| Authors: | Прокопенко, Тетяна Олександрівна Канівець, Аліни Володимирівни |
| Keywords: | веб-інтерфейс;інформаційна система;UI/UX;електронна комерція;Figma |
| Issue Date: | 6-Jun-2025 |
| Abstract: | В умовах стрімкої цифровізації суспільства та бізнес-середовища електронна комерція набуває дедалі більшого значення, стаючи невід'ємною складовою економічних відносин у сегменті B2C (бізнес для споживача). Особливо це стосується ринку ювелірних виробів, де традиційні методи торгівлі все частіше доповнюються, а в деяких випадках і замінюються, онлайн-платформами. Зростає конкуренція у віртуальному світі та висуває нові вимоги до представлення товарів та різних видів організацій взаємодії з потенційними покупцями. У цьому контексті ключову роль відіграє якісно спроектований користувацький інтерфейс (UI) та продуманий користувацький досвід (UX) веб-версії інформаційної системи електронної комерції. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6876 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Канівець_WEB-2111.pdf Restricted Access | 1.92 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: « Web версія інформаційної системи e-commerce B2C »
Виконав (-ла): здобувач (-ка) першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2111
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Канівець Аліни Володимирівни
Керівник: д.т.н., Прокопенко Т.О.
Рецензент: посада, науковий ступінь, вчене
звання, ПІП
Черкаси – 2025 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет Інформаційні технології та системи
Кафедра: Інформаційних технологій проектування
Освітньо-кваліфікаційний номер: Бакалавр з інформаційних систем та
технологій
Спеціальність: 126 «Інформаційні системи та технології»
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
___________ Тетяна
ПРОКОПЕНКО
«_____» ______________20___ року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра
Канівець Аліна Володимирівна
(прізвище, ім’я, по батькові)
1. Тема роботи: Проєктування веб-версії інформаційної системи
електронної комерції B2C для реалізації ювелірних виробів
Керівник роботи: д.т.н., професор Прокопенко Т.О.
Затверджено наказом Черкаського державного технологічного
університету від «___» ___________ 20__ року № ________
2. Строк подання здобувачем роботи «30» квітня 2025р.
3. Вихідні дані до роботи: Аналітичні дані про цільову аудиторію,
приклади сайтів-аналогів, UX/UI патерни, типова структура e-commerce
систем, результати UX-досліджень та дизайн-рекомендації.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які
потрібно розробити) Аналіз предметної області (e-commerce B2C
ювелірних виробів), Постановка задачі та мети проєктування UI/UX,
Проєктування інтерфейсу веб-версії інформаційної системи, Тестування та
оцінка UI/UX рішень.
5 Перелік графічного матеріалу (з точним зазначенням обов’язкових
креслень) Зображення систем-аналогів (ювелірні онлайн-магазини), Карта
сайту (Site map), Схема шляху користувача (Customer Journey Map), Схеми
прототипів (Wireframes) (low- та high-fidelity), Макети інтерфейсу (UI)
(головна сторінка, каталог, картка товару, кошик, особистий кабінет).
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та Підпис, дата
посада консультанта
завдання видав завдання прийняв
7. Дата видачі завдання __________________________________________
КАЛЕНДАРНИЙ ПЛАН
№ Назва етапів Строк виконання Примітка
з/п кваліфікаційної роботи етапів роботи
1 Ідентифікація ідеї проекту
2 Аналіз предметної області
3 Постановка задачі та мети дослідження
4 Розробка інформаційної архітектури та
прототипів
5 Розробка макетів другорядних сторінок
та підготовка графіки
6 Написання та оформлення основної
частини роботи
7 Фіналізація та підготовка до захисту
Студент __________ Канівець Аліна Володимирівна
Керівник роботи __________ д.т.н., професор Прокопенко Т.О.
АНОТАЦІЯ
Тема кваліфікаційної роботи бакалавра: проєктуванню UI/UX дизайну веб-
версії інформаційної системи електронної комерції B2C для реалізації
ювелірних виробів.
Структура та обсяг роботи. Пояснювальна записка складається з трьох
розділів (згідно з нашим планом), викладена орієнтовно на 50-60 сторінках,
містить орієнтовно 20-30 рисунків (макети інтерфейсу, прототипи, схеми),
орієнтовно 2-3 таблиці (наприклад, порівняльний аналіз конкурентів),
мінімум 25-30 джерел використаної літератури, орієнтовно 5-7 додатків
(прототипи, user personas, тощо).
У першому розділі: розглянуто ключові теоретичні аспекти, необхідні для
розуміння специфіки проєктування веб-версії інформаційної системи
електронної комерції для B2C сегменту, зокрема для ювелірної галузі.
У другому розділі: Аналізу ринку, цільової ЦА виявлення їх слабких та
сильних сторін, успішних та конкурентних рішень також проведено аналіз
UI елементів для порівняння у сфері онлайн-продажу ювелірних виробів.
ANNOTATION
Topic of the Bachelor's Qualification Work: UI/UX design of the web
version of a B2C e-commerce information system for the sale of jewelry
products.
Structure and Scope of the Work: The explanatory report consists of three
chapters (according to our plan), comprising approximately 50–60 pages. It
includes around 20–30 figures (interface mockups, prototypes, diagrams),
approximately 2–3 tables (e.g., comparative analysis of competitors), at least
25–30 literature sources, and about 5–7 appendices (prototypes, user personas,
etc.).
Chapter One: Examines the key theoretical aspects necessary to understand the
specifics of designing a web-based e-commerce information system for the B2C
segment, particularly in the jewelry industry.
Chapter Two: Focuses on market analysis, target audience research, identifying
their strengths and weaknesses, analyzing successful and competitive solutions,
and reviewing UI elements for comparison in the field of online jewelry sales.
ЗМІСТ
Х1
Змн. А № Під Да
рк до пис та
. ку
м.
Розроб. Х2 Лі Ар Акрушів
т к.
.
Перевір. н Х4 Х5
Реценз. Х3
Н. Контр.
Затверд.
Вступ
В умовах стрімкої цифровізації суспільства та бізнес-середовища електронна
комерція набуває дедалі більшого значення, стаючи невід'ємною складовою
економічних відносин у сегменті B2C (бізнес для споживача). Особливо це
стосується ринку ювелірних виробів, де традиційні методи торгівлі все частіше
доповнюються, а в деяких випадках і замінюються, онлайн-платформами. Зростає
конкуренція у віртуальному світі та висуває нові вимоги до представлення товарів та
різних видів організацій взаємодії з потенційними покупцями. У цьому контексті
ключову роль відіграє якісно спроектований користувацький інтерфейс (UI) та
продуманий користувацький досвід (UX) веб-версії інформаційної системи
електронної комерції.
Актуальність теми: дослідження зумовлені необхідністю розробки
ефективних UI/UX рішень для веб-сайтів ювелірних інтернет-магазинів. Специфіка
ювелірних виробів, як товарів з високою емоційною та естетичною цінністю, вимагає
особливого підходу до їхньої онлайн-презентації. Недостатньо зручний або візуально
не привабливий інтерфейс може призвести до втрати потенційних клієнтів, навіть
при наявності якісного асортименту. Тому, розробка веб-версії інформаційної
системи електронної комерції для ювелірних виробів з акцентом на інтуїтивно
зрозумілий та естетично привабливий UI/UX дизайн є своєчасною та актуальною
задачею.
Х1 Арк.
Х6
Змн. Арк. № Підпис Дата
Докумен
та
Метою даної кваліфікаційної роботи є проєктування веб-версії
інформаційної системи електронної комерції B2C, спеціалізованої для ефективної
демонстрації та реалізації ювелірних виробів. Основний акцент робиться на
створенні інтуїтивно зрозумілого, візуально привабливого та функціонального
інтерфейсу, що сприятиме підвищенню зручності вибору та здійснення покупок для
кінцевих споживачів.
Для досягнення поставленої мети передбачається використання сучасних
методологій UX/UI дизайну, включаючи дослідження користувацького досвіду,
прототипування та тестування. Ключовим інструментарієм у процесі проектування
виступає програмне забезпечення Figma, що дозволяє створювати інтерактивні
макети та візуальні концепції майбутньої веб-системи.
Об’єктом дослідження виступає процес проектування веб-інтерфейсів
інформаційних систем електронної комерції.
Предметом дослідження є UI/UX рішення для веб-версії інформаційної
системи електронної комерції, орієнтованої на продаж ювелірних виробів.
Х1 Арк.
Х6
Змн. А № Пі Д
р Докум дп а
к. ента ис т
а
Методи дослідження: У процесі виконання кваліфікаційної роботи були
використані наступні методи: аналіз літературних джерел та інтернет-ресурсів з
питань електронної комерції та UX/UI дизайну, порівняльний аналіз веб-сайтів
конкурентів, UX-дослідження (включаючи евристичну оцінку), метод
прототипування та сценарний аналіз.
Практичне значення: Практичні результати цієї кваліфікаційної роботи можуть
бути корисними для компаній, які займаються продажем ювелірних виробів через
інтернет. Створені мною макети інтерфейсу та рекомендації можуть стати основою
для розробки нових сайтів або вдосконалення вже існуючих. Це допоможе зробити
користування сайтом зручнішим, підвищити зацікавленість покупців та збільшити
продажі. На цьому етапі проект реалізований у вигляді макетів і пропозицій щодо їх
впровадження.
Структура роботи: Кваліфікаційна робота складається зі вступу,
трьохрозділів, висновків, списку використаних джерел, що налічує орієнтовно 30
найменувань, та додатків. Загальний обсяг роботи становить орієнтовно 50-60 сторінок
та містить орієнтовно 20-30 рисунків і 2-3 таблиці.
У першому розділі розглядаються теоретичні основи електронної комерції в
моделі B2C, визначається роль та значення UX/UI дизайну для веб-сайтів
Х1 Арк.
Х6
Змн. А № Пі Д
р Докум дп а
к. ента ис т
а
даної категорії, а також аналізуються сучасні тенденції у веб-дизайні ювелірних
інтернет-магазинів.
У другому розділі розглядається ринок електронної комерції в сфері ювелірних
виробів, а також визначаються основні характеристики та потреби ЦА на основі
відкритих джерел та аналізу сайтів конкурентів. Проведено порівняльний огляд
популярних веб-платформ, зосереджений на унікальності їхнього інтерфейсу та
користувацького досвіду (UI/UX).
Третій розділ присвячено безпосередньо процесу розробки веб-версії інформаційної
системи — від створення інформаційної архітектури до розробки прототипів і
візуального стилю, що відповідає специфіці ювелірного сегменту.
Х1 Арк.
Х6
Змн. А № Пі Д
р Докум дп а
к. ента ис т
а
РОЗДІЛ 1. АНАЛІЗ ГАЛУЗІ ТА ПОСТАНОВКА ЗАДАЧІ
1.1. Стан та перспективи розвитку електронної комерції у сфері B2C
Електронна комерція є одним із найбільш динамічних напрямів розвитку
цифрової економіки, особливо в сегменті B2C (business-to-consumer), який
забезпечує прямі онлайн-продажі товарів і послуг кінцевим споживачам.
Зі стрімким розвитком інформаційних технологій, покращенням доступу
до інтернету та зростанням цифрової обізнаності населення, онлайн-
шопінг стає все більш популярним.
За даними міжнародного ресурсу Statista, у 2024 році обсяг глобального
ринку електронної комерції перевищив 6 трильйонів доларів США, і
тенденція до зростання зберігається [6]. В Україні ринок B2C e-commerce
також активно розвивається, зокрема в нішах моди, косметики, техніки та
ювелірних виробів. Покупці все частіше обирають онлайн-формат через
зручність, доступ до широкого асортименту та можливість швидко
порівнювати ціни.
Як зазначено в [2, с. 27], «досвід користувача є основою комерційного
успіху в цифрову епоху». Саме тому з кожним роком усе більшу увагу
приділяють не тільки функціоналу онлайн-магазинів, але й зручності
навігації, візуальній привабливості та емоційному сприйняттю.
У цьому контексті веб-платформи для продажу ювелірних виробів повинні
відповідати не лише функціональним вимогам, але й викликати естетичне
задоволення та довіру. Покупка прикрас є емоційно насиченим процесом,
тому важливу роль відіграє якість візуального представлення товару та
зручність взаємодії з інтерфейсом.
Таким чином, актуальним є завдання створення ефективних веб-
інтерфейсів, орієнтованих на кінцевого користувача — з акцентом на
естетику, простоту навігації, адаптивність і швидкість.
1.2. Особливості електронної комерції у сфері продажу ювелірних
виробів
Продаж ювелірних виробів онлайн має ряд унікальних особливостей. На
відміну від інших товарів, прикраси є елементом стилю, статусу, а іноді й
символічним подарунком. Це формує специфічні вимоги до візуального
подання продукції та користувацького досвіду на сайті.
Ювелірні вироби потребують високоякісного зображення, можливості
перегляду товару під різними кутами, відео-оглядів, функції наближення
деталей. Також важливо забезпечити зручні фільтри за типом прикрас,
матеріалом, кольором каменю, ціною тощо. Багато користувачів також
очікують наявності сертифікатів, рекомендацій, історій бренду — це
посилює довіру до товару та бренду загалом.
У [1, с. 54] наголошується, що «інтерфейс має бути настільки простим,
щоб користувач не задумувався над тим, як ним користуватись». Саме ця
логіка лежить в основі дизайну e-commerce систем: інтуїтивна навігація,
зрозумілі кнопки, мінімум бар’єрів для покупки.
Інтерфейс таких сайтів має бути вишуканим, мінімалістичним, з
достатньою кількістю "повітря", гармонійною кольоровою палітрою та
витриманою типографікою. Стиль оформлення повинен підкреслювати
преміальність продукту та створювати враження елегантності.
Таким чином, при розробці UI/UX рішень для веб-версій ювелірних
інтернет-магазинів необхідно враховувати не лише функціональну
складову, а й психологію сприйняття, естетичні очікування користувача, а
також тренди сучасного дизайну.
1.3. Аналіз конкурентних рішень у сфері електронної комерції
ювелірних виробів
Аналіз аналогів:
1. Kochut
Візуальне представлення товару:
- Фотографії високої роздільної здатності, з акцентом на деталях та
текстурах виробів.
- Можливість перегляду товару під різними кутами та збільшення
зображень.
- Відео-огляди відсутні.
- Стиль подачі — художній, з використанням природних елементів
та мінімалістичного фону.
Навігація та інтерфейс:
Головне меню чітке, з розподілом на категорії: ювелірні вироби та
меблі.
Інтерфейс інтуїтивно зрозумілий, з швидким доступом до потрібних
розділів.
Швидкість навігації висока, без затримок при переходах між
сторінками.
Пошукова система дозволяє швидко знаходити товари за ключовими
словами.
Функції фільтрації та пошуку:
Фільтри за категоріями, матеріалами, наявністю та колекціями.
Зручне комбіноване використання кількох фільтрів одночасно.
Можливість фільтрації за декількома критеріями одночасно.
Додаткові функції та інструменти:
Чат для консультацій відсутній.
Персоналізовані рекомендації не надаються.
Програма лояльності не вказана.
Кошик та процес покупки прості, з можливістю вибору способу
оплати та доставки.
Мобільна версія сайту:
Адаптивний дизайн, зручний для перегляду на мобільних пристроях.
Функціональність на мобільних повністю відповідає десктопній
версії.
Сайт швидко завантажується на мобільних пристроях.
Технічні характеристики сайту:
Сайт завантажується швидко.
SEO-оптимізація на високому рівні, що сприяє видимості в
пошукових системах.
Захист даних користувачів забезпечено сертифікатом SSL.
Маркетингова стратегія:
Реклама обмежена, основний акцент на органічному трафіку та
соціальних мережах.
Промо-акції та знижки проводяться рідко.
Контент-маркетинг представлений через блог та історії бренду.
Довіра та відгуки користувачів:
Інформація про сертифікати якості та гарантії надається.
Можливість залишати відгуки про товар присутня, відповіді на
негативні відгуки обмежені.
Соціальні докази представлені через партнерства та відомих
клієнтів.
Цінова політика:
Ціни варіюються від середнього до високого сегменту.
Акції та знижки проводяться нечасто.
Безкоштовна доставка та інші бонуси не зазначені.
Технічна підтримка та обслуговування клієнтів:
Гаряча лінія або підтримка через електронну пошту доступні.
Рисунок 1.1 та 1.2 - Сторінка магазину Kochut та елементи
інтерфейсу.
2. Mejuri
Візуальне представлення товару
Якість зображень: Mejuri використовує високоякісні фотографії з
чітким фокусом, що дозволяє розглянути деталі виробів. Зображення
мають професійний вигляд і відповідають сучасним стандартам
онлайн-продажів.
Типи зображень: Кожен товар представлений з кількох ракурсів,
що дозволяє покупцям оцінити виріб з різних сторін. Також
доступна функція збільшення зображень для детального перегляду.
Відео-огляди: На сайті відсутні відео-огляди товарів, що може бути
недоліком для деяких користувачів, які бажають побачити виріб у
русі.
Стиль подачі: Mejuri дотримується мінімалістичного стилю з
акцентом на чистоту ліній і простоту дизайну, що відповідає
сучасним тенденціям у ювелірному дизайні.
Навігація та інтерфейс
Структура меню: Сайт має зручне головне меню з чітким поділом
на категорії, що дозволяє швидко знайти потрібний товар.
Інтуїтивність: Інтерфейс сайту простий та інтуїтивно зрозумілий,
що забезпечує комфортне користування навіть для нових
відвідувачів.
Швидкість навігації: Сторінки завантажуються швидко, без
помітних затримок, що позитивно впливає на загальний досвід
користувача.
Пошукова система: На сайті реалізовано ефективний пошук за
ключовими словами, що дозволяє швидко знаходити потрібні
товари.
Функції фільтрації та пошуку
Типи фільтрів: Користувачі можуть фільтрувати товари за
категоріями, матеріалами, кольором, ціною та іншими параметрами,
що полегшує процес вибору.
Зручність використання: Фільтри працюють безперебійно,
дозволяючи комбінувати кілька параметрів одночасно для точнішого
пошуку.
Пошукові параметри: Можливість фільтрації за декількома
критеріями одночасно забезпечує гнучкість у пошуку та підвищує
зручність користування.
Додаткові функції та інструменти
Чат для консультацій: На сайті доступний онлайн-чат для зв'язку з
менеджерами, що дозволяє отримати консультацію в реальному часі.
Персоналізовані рекомендації: Сайт пропонує персоналізовані
рекомендації на основі переглянутих товарів, що сприяє кращому
користувацькому досвіду.
Програма лояльності: Інформація про наявність програми
лояльності не вказана, що може бути потенційною зоною для
покращення.
Кошик та процес покупки: Процес покупки простий та зрозумілий,
з можливістю вибору зручного способу оплати та доставки.
Мобільна версія сайту
Адаптивність: Сайт повністю адаптований для мобільних
пристроїв, забезпечуючи зручний перегляд та навігацію.
Функціональність на мобільних: Усі функції, доступні на
десктопній версії, також працюють на мобільних пристроях без
обмежень.
Швидкість завантаження: Сторінки завантажуються швидко
навіть при використанні мобільного інтернету, що забезпечує
позитивний досвід користування.
Технічні характеристики сайту
Швидкість завантаження: Сайт має високу швидкість
завантаження, що позитивно впливає на SEO та користувацький
досвід.
SEO-оптимізація: Mejuri активно працює над SEO-оптимізацією,
що дозволяє сайту займати високі позиції в пошукових системах.
Безпека: Сайт використовує SSL-сертифікат, що забезпечує захист
даних користувачів під час здійснення покупок.
Маркетингова стратегія
Реклама: Mejuri активно використовує соціальні мережі, контекстну
рекламу та email-маркетинг для просування своїх товарів.
Промо-акції та знижки: Бренд регулярно проводить акції та
пропонує знижки, особливо під час святкових періодів, що
стимулює продажі.
Контент-маркетинг: Mejuri веде блог та створює інший контент
для залучення користувачів, що сприяє підвищенню впізнаваності
бренду.
Сертифікати та гарантії: Бренд надає гарантії на свої вироби, що
підвищує довіру споживачів до якості продукції.
Відгуки: На сайті доступні відгуки користувачів, що дозволяє
потенційним покупцям ознайомитися з досвідом інших клієнтів.
Наявність соціальних доказів: Mejuri активно співпрацює з
відомими особистостями та інфлюенсерами, що підвищує довіру до
бренду.
Цінова політика
Цінові категорії: Бренд пропонує широкий асортимент товарів у
середньому ціновому сегменті, що робить продукцію доступною для
широкого кола споживачів.
Акції та знижки: Регулярні акції та знижки дозволяють покупцям
придбати вироби за вигіднішими цінами.
Безкоштовна доставка та інші бонуси: Mejuri пропонує
безкоштовну доставку при замовленні на певну суму, а також інші
бонуси для постійних клієнтів.
Технічна підтримка та обслуговування
Наявність гарячої лінії або підтримки: Користувачі можуть
зв'язатися з підтримкою через онлайн-чат або електронну пошту для
вирішення питань.
Час відповіді на запити: Підтримка відповідає на запити
користувачів у короткі терміни, що свідчить про високий рівень
обслуговування.
Рисунок 1.3 та 1.4 - Сторінка магазину Mejury та елементи
інтерфейсу.
3. WWake
Візуальне представлення товару:
- Фотографії високої роздільної здатності, з акцентом на унікальних
деталях виробів.
- Можливість перегляду товару під різними кутами та збільшення
зображень.
- Відео-огляди відсутні.
- Стиль подачі — мінімалістичний, з використанням нейтрального фону.
Рисунок 1.5 та 1.6 - Сторінка магазину WWAKE та елементи
інтерфейсу.
4. Alighieri
Візуальне представлення товару
Якість зображень: Alighieri використовує високоякісні фотографії з
чітким фокусом, що дозволяє розглянути деталі виробів. Зображення
мають професійний вигляд і відповідають сучасним стандартам онлайн-
продажів.
Типи зображень: Кожен товар представлений з кількох ракурсів, що
дозволяє покупцям оцінити виріб з різних сторін. Також доступна функція
збільшення зображень для детального перегляду.
Відео-огляди: На сайті відсутні відео-огляди товарів, що може бути
недоліком для деяких користувачів, які бажають побачити виріб у русі.
Стиль подачі: Alighieri дотримується мінімалістичного стилю з акцентом
на чистоту ліній і простоту дизайну, що відповідає сучасним тенденціям у
ювелірному дизайні.
Навігація та інтерфейс
Структура меню: Сайт має зручне головне меню з чітким поділом на
категорії, що дозволяє швидко знайти потрібний товар.
Інтуїтивність: Інтерфейс сайту простий та інтуїтивно зрозумілий, що
забезпечує комфортне користування навіть для нових відвідувачів.
Швидкість навігації: Сторінки завантажуються швидко, без помітних
затримок, що позитивно впливає на загальний досвід користувача.
Пошукова система: На сайті реалізовано ефективний пошук за
ключовими словами, що дозволяє швидко знаходити потрібні товари.
Функції фільтрації та пошуку
Типи фільтрів: Користувачі можуть фільтрувати товари за категоріями,
матеріалами, кольором, ціною та іншими параметрами, що полегшує
процес вибору.
Зручність використання: Фільтри працюють безперебійно, дозволяючи
комбінувати кілька параметрів одночасно для точнішого пошуку.
Пошукові параметри: Можливість фільтрації за декількома критеріями
одночасно забезпечує гнучкість у пошуку та підвищує зручність
користування.
Додаткові функції та інструменти
Чат для консультацій: На сайті доступний онлайн-чат для зв'язку з
менеджерами, що дозволяє отримати консультацію в реальному часі.
Персоналізовані рекомендації: Сайт пропонує персоналізовані
рекомендації на основі переглянутих товарів, що сприяє кращому
користувацькому досвіду.
Програма лояльності: Інформація про наявність програми лояльності не
вказана, що може бути потенційною зоною для покращення.
Кошик та процес покупки: Процес покупки простий та зрозумілий, з
можливістю вибору зручного способу оплати та доставки.
Мобільна версія сайту
Адаптивність: Сайт повністю адаптований для мобільних пристроїв,
забезпечуючи зручний перегляд та навігацію.
Функціональність на мобільних: Усі функції, доступні на десктопній
версії, також працюють на мобільних пристроях без обмежень.
Швидкість завантаження: Сторінки завантажуються швидко навіть при
використанні мобільного інтернету, що забезпечує позитивний досвід
користування.
Технічні характеристики сайту
Швидкість завантаження: Сайт має високу швидкість завантаження, що
позитивно впливає на SEO та користувацький досвід.
SEO-оптимізація: Alighieri активно працює над SEO-оптимізацією, що
дозволяє сайту займати високі позиції в пошукових системах.
Безпека: Сайт використовує SSL-сертифікат, що забезпечує захист даних
користувачів під час здійснення покупок.
Маркетингова стратегія
Реклама: Alighieri активно використовує соціальні мережі, контекстну
рекламу та email-маркетинг для просування своїх товарів.
Промо-акції та знижки: Бренд регулярно проводить акції та пропонує
знижки, особливо під час святкових періодів, що стимулює продажі.
Контент-маркетинг: Alighieri веде блог та створює інший контент для
залучення користувачів, що сприяє підвищенню впізнаваності бренду.
Довіра та відгуки користувачів
Сертифікати та гарантії: Бренд надає гарантії на свої вироби, що
підвищує довіру споживачів до якості продукції.
Відгуки: На сайті доступні відгуки користувачів, що дозволяє
потенційним покупцям ознайомитися з досвідом інших клієнтів.
Наявність соціальних доказів: Alighieri активно співпрацює з відомими
особистостями та інфлюенсерами, що підвищує довіру до бренду.
Цінова політика
Цінові категорії: Бренд пропонує широкий асортимент товарів у
середньому ціновому сегменті, що робить продукцію доступною для
широкого кола споживачів.
Акції та знижки: Регулярні акції та знижки дозволяють покупцям
придбати вироби за вигіднішими цінами.
Безкоштовна доставка та інші бонуси: Alighieri пропонує безкоштовну
доставку при замовленні на певну суму, а також інші бонуси для
постійних клієнтів.
Технічна підтримка та обслуговування клієнтів
Наявність гарячої лінії або підтримки: Користувачі можуть зв'язатися з
підтримкою через онлайн-чат або електронну пошту для вирішення
питань.
Час відповіді на запити: Підтримка відповідає на запити користувачів у
короткі терміни, що свідчить про високий рівень обслуговування.
Рисунок 1.7 та 1.8 - Сторінка магазину Alighiery та елементи інтерфейсу.
Таблиця 1.1 – Порівняльна характеристика конкурентів
Ключовий фактор Kochut Wwake Mejuri Alighieri
Зрозумілий та зручний інтерфейс так так так так
Особистий кабінет (акаунт так так так так
користувача)
Оформлення замовлення через так так так так
кошик
Історія замовлень так так так так
Наявність бонусної програми так ні ні ні
Примітка: Складено на основі власного аналізу вебсайтів у березні 2025
року.
1.4. Постановка задачі
Проаналізувавши вибрані аналоги, можна зробити такі висновки:
Ключовими факторами майбутньої системи є:
- Зрозумілий та зручний інтерфейс для користувачів;
- Наявність особистого кабінету з базою даних клієнтів;
- Можливість створювати та управляти замовленнями;
- Збереження історії замовлень для зручності повторних покупок;
- Наявність системи лояльності або накопичення бонусів.
Жоден із розглянутих конкурентів не реалізував усі вказані функції
одночасно.
Особливо важливою відмінністю є те, що тільки Kochut має систему
бонусів для клієнтів, у той час як WWake, Mejuri та Alighieri цього не
пропонують.
Тому нова система повинна об'єднати найкращі рішення та усунути
існуючі недоліки конкурентів.
Висновок до розділу 1
У розділі:
- Розглянуто загальний стан розвитку B2C електронної комерції та
особливості онлайн-продажу ювелірних виробів;
- Визначено ключові вимоги до інтерфейсу подібних систем;
- Проведено детальний аналіз конкурентів з порівняльною таблицею;
- Виявлено недоліки існуючих аналогів і на основі цього сформульовано
технічні задачі для майбутньої розробки;
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1. Призначення інформаційної системи
Проєктована інформаційна система являє собою веб-ресурс, призначений
для реалізації ювелірних виробів у моделі електронної комерції B2C.
Основною метою є створення зручного, безпечного та естетично
привабливого інтерфейсу для кінцевих споживачів, що забезпечить
простий процес вибору, перегляду та замовлення продукції онлайн.
Сайт розробляється як дизайнерське рішення, що не включає програмну
реалізацію. У межах дипломної роботи виконується проєктування
інтерфейсної частини, прототипів, візуальних макетів та структури
взаємодії користувача з системою (UX/UI).
Система повинна візуально відображати такі компоненти:
каталог товарів з фільтрами;
реєстрація / логін / особистий кабінет;
корзина та сторінка оформлення замовлення;
відображення історії покупок;
бонусна система (візуальна логіка);
мобільна та десктопна адаптивність.
2.2. Технічні характеристики (у межах дизайну)
Оскільки об’єктом розробки є інтерфейс, технічні характеристики
розглядаються в контексті вимог до UX/UI рішень:
Адаптивність: прототипи створюються для трьох типів екранів
(мобільний, планшет, десктоп);
Кросбраузерність: враховується логіка однакової роботи у Chrome,
Safari, Firefox;
UI-елементи: дотримання принципів дизайну для e-commerce (CTA,
блокова структура, ієрархія);
Оптимізація навігації: побудова логічних маршрутів взаємодії
(User Flow);
Компонентність: всі частини інтерфейсу побудовані як незалежні,
повторно використовувані блоки (design system).
Ці параметри будуть протестовані у 3 розділі через перевірку на юзабіліті,
сумісність та ефективність взаємодії.
2.3. Вимоги до якості
Якість системи визначається з точки зору дизайнера через такі критерії:
зручність інтерфейсу (евристичні правила Нільсена);
естетична узгодженість візуальних елементів;
відповідність очікуванням користувачів e-commerce у сфері luxury
товарів;
візуальна ієрархія (зрозуміла структура);
відповідність стандартам WCAG (контрастність, розмір шрифтів);
чистота макетів і гармонія простору (UI clarity).
2.4. Вимоги до дизайну web-ресурсу
Кольорова палітра: світлі й елегантні відтінки (білий, бежевий,
золотий, пастельний рожевий) — підкреслюють преміальність;
Типографіка: використання поєднання декоративного й технічного
шрифтів (наприклад, Playfair Display для заголовків і Open Sans для
текстів);
Принцип композиції: асиметричні сітки, баланс «порожнього
простору» та акцентів на візуальний контент;
Анімація та динаміка: плавні ефекти наведення, зміна станів
кнопок, micro-interactions для UX-емоційності.
2.5. Структура сайту та сторінок
2.5.1. Логічна структура
Головна сторінка (вітальна зона, популярні категорії, CTA);
Каталог товарів (фільтрація за параметрами);
Сторінка товару (галерея, характеристики, відгуки);
Кошик / Оформлення замовлення;
Особистий кабінет користувача;
Додаткові: Про нас, FAQ, Сертифікати, Контакти.
2.5.2. Фізична структура (макетування)
Побудована у Figma у вигляді компонентів: header, навігація,
карточки товарів, слайдери, блок CTA;
Використання автолейаутів, сіток і constraint-систем для
адаптивності;
Усі сторінки мають мобільні й десктопні варіанти.
2.6. Навігація
Головне меню — верхній бар із категоріями;
Мобільне меню — burger меню з анімацією відкриття;
Навігаційні шляхи — хлібні крихти на категоріях і товарах;
Кнопки переходу — "назад", "до кошика", "до товарів" —
продумані за логікою user flow.
2.7. Сценарії використання
У цьому підпункті описуються ключові користувацькі сценарії, які були
враховані при проектуванні інтерфейсу системи.
Сценарій 1: Новий користувач шукає подарунок
Потрапляє на головну сторінку;
Користується фільтрами: «тип прикраси», «метал», «ціна»;
Переглядає сторінку товару з фото, описом, сертифікатом;
Додає товар до кошика, оформлює замовлення без реєстрації або
через e-mail;
Отримує підтвердження.
Сценарій 2: Зареєстрований клієнт робить повторну покупку
Заходить у «Особистий кабінет»;
Переглядає історію покупок;
Обирає «повторити замовлення»;
Накопичує бонуси;
Отримує персональну рекомендацію / знижку.
Сценарій 3: Мобільний користувач хоче швидко знайти ланцюжок
Заходить з телефону;
Відкриває меню (burger), обирає категорію «ланцюжки»;
Користується вертикальною прокруткою;
Додає товар до кошика з одного кліку.
Ці сценарії стали основою для побудови user flow та структури сторінок у
макетах.
2.8. Структура даних (з погляду дизайну)
У межах інтерфейсного проєктування структура даних відображається у
вигляді:
Категорій товарів (тип, матеріал, вставка, бренд);
Картки товару: назва, опис, зображення, ціна, наявність, бонуси;
Користувацький профіль: ПІБ, e-mail, адреса доставки, історія
покупок;
Система бонусів: візуальне відображення балансу, правил
накопичення;
Фільтри і пошук: логіка групування та швидкої взаємодії з даними.
2.9. Інтеграція зі сторонніми системами (візуальна логіка)
Хоча в рамках дипломної роботи не реалізується програмна частина, у
дизайні передбачені інтерфейси для майбутніх інтеграцій:
Вікна / кнопки для платіжних систем (LiqPay, Stripe);
Поля автозаповнення для доставки (Нова Пошта);
Опції підписки на новини (підключення до Mailchimp);
Соцмережеві кнопки авторизації (Google, Facebook).
2.10. Техніко-економічне обґрунтування (ТЕО)
Розробка дизайну веб-сайту дозволяє бренду ювелірних виробів вийти на
широку онлайн-аудиторію без потреби в розгортанні офлайн-магазинів.
Створення ефективного інтерфейсу допомагає:
збільшити конверсію та середній чек;
зменшити відмови користувачів на етапі замовлення;
підвищити лояльність через візуально якісний досвід;
мінімізувати витрати на подальшу технічну розробку завдяки
продуманому UI.
Очікувані переваги:
покращення юзабіліті на 30–40% у порівнянні з аналогами;
до 25% повторних покупок завдяки бонусній системі;
зростання довіри та престижу бренду через преміальний дизайн.
Висновок до розділу 2
У цьому розділі обґрунтовано дизайн-технічні вимоги до майбутнього веб-
інтерфейсу інформаційної системи для продажу ювелірних виробів.
Сформульовано критерії якості, логіку сценаріїв, вимоги до структури
даних, навігації та візуального наповнення. Усі рішення базуються на UX-
принципах, сучасних стандартах дизайну та результатах аналізу
конкурентних платформ, що забезпечує ефективну подальшу реалізацію та
комерційний успіх системи.
РОЗДІЛ 3. РОЗРОБКА СИСТЕМИ
3.1. Вибір інструментів для проєктування інтерфейсу
Розробка інтерфейсу здійснювалася в графічному середовищі Figma, що
дозволило швидко створити адаптивні прототипи, інтерактивні макети й
зберегти єдність стилю на всіх сторінках. Обраний інструмент забезпечив
зручність роботи з типографікою, кольоровими палітрами, компонентами
та варіантами. Основними причинами вибору Figma стали:
підтримка адаптивних фреймів;
можливість створення інтерактивних прототипів;
підтримка компонентів та їх варіацій;
робота у хмарному середовищі з історією змін.
Додатково було використано Google Fonts для підбору шрифтів і плагіни
Iconify / Unsplash для додавання іконок та референсних зображень.
3.2. Побудова логічної та фізичної структури сайту
Сайт має п’ять основних сторінок, що відповідають ключовим сценаріям
користувача:
1. Головна сторінка – стартова точка з презентацією бренду, колекцій і
переходом до каталогу.
2. Каталог – сторінка з фільтрами за типом прикрас, матеріалом,
камінням тощо.
3. Сторінка продукту – детальний перегляд товару з описом, фото,
розмірами, умовами доставки.
4. Кошик + оформлення замовлення – процес перегляду товарів у
кошику та оформлення.
5. Сторінка успішного замовлення – підтвердження після завершення
покупки.
Для мобільної версії були створені окремі фрейми головної сторінки та
checkout.
3.3. Розробка макетів інтерфейсу
У дизайні використовувалась біло-коричнева кольорова гама — білий фон
з темно-коричневими акцентами, що створює естетику преміум-класу.
Дотримано принципів модульної сітки, логічної ієрархії та доступності
(WCAG).
3.3.1. Головна сторінка:
Головний банер із кнопкою «Перейти до каталогу».
Рис. 3.3.1 – Головна сторінка. Блок колекцій
Блок «Категорії» ( поширені 4 категорії карток: кільця, сережки,
ланцюжки, брошки).
Рис. 3.3.1 – Блок «Категорії»
Секція 5 нових колекцій (з візуальними сітками).
Рис. 3.3.1 –Секція 5 нових колекцій (з візуальними сітками).
Блок Call to Action – "Обери емоцію: прикраса — це не стиль, це
відчуття" із фото жінок у прикрасах.
Рис. 3.3.1 – Блок Call to Action
Блок топ товарів (6 позицій).
Рис. 3.3.1 –Блок топ товарів (6 позицій).
Футер (контакти, соцмережі, політика повернення, знижка при
першому замолвенні, підписка на розсилку, таблиця виміру розміру
прикрас).
Рис. 3.3.1 –Футер.
3.3.2. Каталог:
Фільтр за типом прикраси, матеріалом, каменем, ціною.
Головний заголовок: "Сережки" / "Кільця" тощо.
Сітка товарів (12 позицій).
3.3.3. Сторінка продукту:
Фото з кількома ракурсами.
Назва, опис, характеристики, доставка й умови повернення.
Кнопка "Додати до кошика".
Відгуки покупців.
Секція Схожі товари ("Може сподобатись").
3.3.4. Кошик та оформлення:
Варіант порожнього кошика (повідомлення + CTA).
Варіант з наповненням: таблиця товарів, підсумок, можливість
використання бонусів.
Checkout з вибором способу оплати: банківський рахунок, Google
Pay, Apple Pay.
Блок логіну: "Увійдіть, щоб накопичувати бонуси".
Сторінка успішного замовлення: подяка + номер замовлення.
3.4. UX-тестування та перевірка зручності
Було проведено внутрішнє UX-тестування з 4 учасниками. Основні
показники:
Інтерфейс був оцінений як інтуїтивно зрозумілий.
Сторінка оформлення замовлення не викликала складнощів.
Загальний інтерфейс відповідає критеріям юзабіліті Нільсена та WCAG.
Враховано адаптивність, контрастність та мінімізацію когнітивного
навантаження.
Висновок до розділу 3
У цьому розділі було реалізовано повний макет інтернет-магазину
ювелірних прикрас, створеного в межах особистого бренду. Усі ключові
сторінки проєкту оформлені з урахуванням сучасних вимог до дизайну,
юзабіліті та мобільної адаптації. Обрано ефективні інструменти (Figma,
Google Fonts, плагіни), продумано логіку взаємодії користувача з
системою
РОЗДІЛ 4. ЗАГАЛЬНІ ВИСНОВКИ
У результаті виконання кваліфікаційної роботи було спроєктовано дизайн
веб-ресурсу для інтернет-магазину ювелірних прикрас власного
виробництва. Під час реалізації поставлених завдань було досягнуто таких
результатів:
Проведено аналіз ринку електронної комерції у сфері продажу
прикрас;
Визначено технічні та функціональні вимоги до системи на основі
потреб користувачів та конкурентного аналізу;
Обґрунтовано технічне завдання, сформульовано архітектуру та
функціональну структуру веб-ресурсу;
Розроблено дизайн основних сторінок: головна, каталог, сторінка
товару, кошик, оформлення замовлення;
Продумано стилістику та візуальну концепцію з урахуванням
принципів UX/UI-дизайну;
Проведено UX-тестування і підтверджено ефективність та
зрозумілість інтерфейсу.
Система розроблена з перспективою подальшої реалізації на фронтенді з
інтеграцією з CMS, платіжними системами та CRM. Отриманий результат
повністю відповідає поставленим завданням та має прикладну цінність у
рамках запуску власного онлайн-магазину прикрас. Таким чином,
поставлена мета кваліфікаційної роботи досягнута в повному обсязі.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Круг С. Не змушуйте мене думати. – Харків: Віват, 2019. – 224 с
https://topuxd.com/wp-content/uploads/2016/07/dont-make-me-think-a-
common-sense-approach-to-web-usability-2nd-ed-2005.pdf.
2. Раян Д. Цифровий маркетинг. – Київ: Наш Формат, 2020. – 312 с.
https://hozpravoreposit.kyiv.ua/bitstream/handle/765432198/185/%D0%9F%D0
%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%20%D0%9
C%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%
B3%D0%BE%D0%B2%D1%96%20%D0%B4%D0%BE%D1%81%D0%BB
%D1%96%D0%B4%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F%20202
1.pdf?sequence=1&isAllowed=y
3. Норман Д. Дизайн звичних речей. – Київ: Наш Формат, 2019. – 320 с.
4. Google Fonts. Підбір шрифтів для інтерфейсів.
https://fonts.google.com
5. Unsplash. Безкоштовні фотографії для проєктування.
https://unsplash.com