Про клієнта

Приватна фірма "Анжіо" заснована у 1993 році. Основна спеціалізація - продаж будівельних матеріалів. Мережа складів-магазинів будівельних матеріалів ПФ "Анжио" на сьогоднішній день це 12 філій, розташованих по Києву та Київській області. Репутація компанії – це 30 років успішної роботи на ринку.

Проблема, з якою звернувся клієнт

1. Незручна мобільна версія — користувачам було складно орієнтуватися, що негативно впливало на конверсії.
2. Повільна робота фільтрів та пошуку товарів, що створювало додаткові бар’єри при замовленні.
3. Плутанина між двома розділами сайтами — один для роздрібної торгівлі, інший — для оптових замовлень.
4. Дві незалежні програми лояльності спричиняє незадоволення серед клієнтів: Офлайн-дисконт для “бригадирів” — діє лише у фізичних магазинах, Онлайн-знижки — окрема система, не пов’язана з офлайн-покупками.

Юзабіліті рев’ю діючого сайту

Окрім вказаних проблем клієнтом, було проведено евристичний аналіз за 10 принципами Нільсена та по законам UX для представлених мобільного інтерфейсу сайту та десктопної версії.

Що виявили під час аудиту

1. Немає корзини, де зазвичай в UX-патернах вона розміщена.
2. Пошук на головні сторінці повинен бути вищої контрастності.
3. Посилання без зображень основних категрорій в каталозі — втомлює зір.
4. У першому екрані каталогу взагалі не видно жодної картки товару — тільки заголовок та сусідні розділи. Це створює враження порожньої сторінки, збільшує когнітивне навантаження та знижує мотивацію до взаємодії. За принципом “above the fold” користувач повинен одразу бачити ключовий контент — у цьому випадку товари.
5. Колірна індикація ціни на картці товару (червоний - в наявності/синій - немає) використовувалася як єдиний спосіб відображення наявності товару. Створює зайве когнітивне навантаження — люди мають здогадуватись, що означає синій колір. Люди з порушеннями кольоросприйняття (до 8%) можуть взагалі не побачити різницю. Це нелогічно і психологічно невиправдано, оскільки, часті асоціації червоного кольору - це увага, небезпека, помилка, “відсутність”, знижка, але тут одна ціна, а значить немає знижки. Синій навпаки - надійність, стабільність, нейтральність, “в наявності”.
6. Немає кнопки «Купити» / «Додати в кошик». Користувач втрачає свободу вибору — він змушений переходити на сторінку товару, навіть якщо вже готовий зробити покупку. Це знижує зручність, сповільнює процес і тим самим порушує закон Якоба: користувач очікує побачити «Додати до кошика» прямо в каталозі — так це реалізовано в більшості e-commerce сайтів. Відсутність цієї кнопки створює когнітивний дисонанс.
7. Завеликі зображення на сторінці товару не дають змоги побачити головну інформацію в одному екрані. Це уповільнює вибір і порушує закон Фіттса — ціль є надто віддалена від користувача.
8. В оформленні замовлення порушено закон Міллера. Форма не поділена на логічні кроки та у полі з адресою доставки немає інтелектуального автозаповнення.
9. Вимагати заповнювати 7 полів при реєстрації на сайті, а це, можливо, перша взаємодії — це занадто: неефективно (порушення закону Хіка), непоблажливо (порушення законку Постеля), не мінімалістично (порушення принципа Нільсена).
10. Серйозна UX-проблема - повільне завантаження кожної сторінки, яка також порушує кілька критичних евристик Нільсена та UX-законів.
11. Технічний аналіз показав велику кількість неоптимізованих запитів до бази даних та загальну застарілість архітектури сайту. Завантаження сторінки товара - 9 сек, робота фільтра в каталозі - 12 сек.

Рішення

Було ухвалено рішення створити новий сайт з нуля, використовуючи сучасні підходи до UX/UI, продуктивну backend-архітектуру та мобільно-орієнтований дизайн. Це дозволило вирішити технічні обмеження старої версії та суттєво покращити продуктивність.

Дослідження

Замість того, щоб сліпо йти за класичним процесом Design Thinking з усіма етапами (Empathize → Define → Ideate → Prototype → Test), я вирішив зекономити клієнту час і ресурси, використавши підхід Lean UX у рамках Agile/Scrum-процесу.

З самого початку стало зрозуміло, що клієнт добре знає свій продукт і аудиторію: компанія Анжіо працює на ринку з 1993 року і має глибоке розуміння потреб своїх клієнтів. Тому замість глибинних інтерв’ю з користувачами я провів структуровані сесії з клієнтом, у ході яких отримав відповіді на ключові запитання, що стосуються цільової аудиторії, її болів, очікувань і типових сценаріїв поведінки.

Конкурентний аналіз. Дослідив кількох ключових конкурентів — як локальних, так і національних. Зібрав дані щодо їхньої UX-структури, мобільної адаптації, доступності фільтрів, логіки каталогу та процесу оформлення замовлення.

Benchmarking. За допомогою таблиці порівняв ключові UX/UI характеристики, щоб зрозуміти сильні та слабкі сторони конкурентів. Це допомогло визначити, де ми можемо виграти.

Pain points. Виділив типові проблеми в подібних e-commerce рішеннях — від перевантажених форм до відсутності чітких CTA та незрозумілої логіки навігації.

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

Jobs to Be Done. Замість побудови класичного Customer Journey Map, я фокусувався на завданнях, які користувач хоче вирішити, коли взаємодіє з сайтом. Це дало змогу зосередитись на оптимізації UX саме під ці ключові задачі, а не на вигаданих сценаріях.

Конкурентний аналіз

Щоб отримати об'єктивне уявлення про конкурентне середовище, я вирішив не обмежуватися загальновідомими брендами, а провести аналіз конкурентів через призму пошукової поведінки реальних користувачів.

Я зібрав перелік найпопулярніших комерційних запитів у Google, релевантних до товарів “Анжіо” — наприклад, "цемент купити Київ", "шпаклівка ціна", "будматеріали зі складу", "гіпсокартон оптом" тощо. Перевірив видачу за кожним із них і сформував список топових сайтів, які користувач бачить у результатах пошуку — саме вони є реальними конкурентами в очах покупця.

Після цього я провів benchmarking 10+ сайтів за ключовими UX-критеріями:

• простий та інтуїтивно зрозумілий каталог
• юзабіліті фільтрів та пошуку
• швидкість доступу до покупки
• зручність мобільної версії
• способи комунікації та довіри (UI-патерни)
• зручність оформлення замовлення

Рішення

Я зміг чітко окреслити, у чому діючий сайт Анжіо програє іншим гравцям, а в — чому має потенціал для переваги, щоб зберегти це в новому сайті.

1. Додати іконки та зображення для кращого сприйняття та швидкого пошуку. Виділити пункт меню акцентним кольором. Відкриття/закриття каталогу зробити за кліком, а не при наведенні.
2. Для зручності та економії місця – об'єднати кілька пунктів в одну кнопку (як у Епіка та Дніпро-М)
3. В результаті пошуку – виводити не лише товари, а й категорії. На сторінці каталогу вже зробити популярні фільтри (приклад Епіка) Винести популярні категорії до пунктів меню.
4. Додати чат з менеджером.
5. Реєстрація це просто - номер телефону і смс або ФБ/Гугл.
6. Додати модуль Нової Пошти. Додати Онлайн-оплату. Можливість покупки в кредит.
7. Під дисконт виділити окреме посилання, щоб було помітно. У реєстрації написати, у чому переваги реєстрації.

Прото-персони

У процесі дослідження було сформовано ключові сценарії поведінки трьох основних типів користувачів. Під кожен сценарій сформульовано JTBD (Job To Be Done) та UX-гіпотези, які вплинули на архітектуру інтерфейсу, функціональні блоки та UI-рішення.

Бригадир будівельної бригади, Віталій (38 років)

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

Цілі

• Швидко знаходити потрібні матеріали
• Економити за рахунок оптових цін
• Оформлювати замовлення без дзвінків і з мінімумом кроків
• Повторювати закупівлі з попередніх замовлень

Болі

• Часто немає часу на довгі пошуки
• Бісить, коли немає кнопки "Купити" прямо в каталозі
• Дратує, коли сайт повільно вантажиться або фільтри "висять"

Поведінка

• Замовляє з телефону прямо з об'єкта
• Часто купує однотипні товари великими обсягами
• Використовує пошук або фільтри, але хоче, щоб усе працювало швидко

Мотивація

• Бонуси, програма лояльності
• Можливість оплати після доставки
• Особистий кабінет з історією замовлень

JTBD

1. Коли Віталій купує будматеріали регулярно та побачить, що зареєстровані користувачі отримують знижку, він хоче швидко зареєструватися без зайвих форм, щоб одразу скористатись знижкою та заощадити на великому замовленні.
2. Коли я купую на велику суму, я хочу бачити, яку знижку отримаю наступного разу, щоб мотивуватись повертатися.
3. Коли я купую матеріали, я хочу швидко знайти потрібний товар серед великого асортименту.

Гіпотеза

1. Якщо показати незареєстрованому Віталію інформацію про персональну знижку (від 5%) та дати можливість авторизуватись лише за номером телефону, тоді Віталій зареєструється, бо це просто, швидко і одразу дає вигоду.
2. Якщо в кабінеті Віталія буде графік накопичення знижки, це підвищить лояльність до сайту.
3. Якщо Віталій зможе користуватися зручним фільтром і пошуком, він не витрачатиме час на дзвінки менеджеру.

Сам собі майстер (Андрій, 29 років)

Працює в ІТ, купив квартиру в новобудові й вирішив самостійно зробити ремонт. Він не фахівець у будматеріалах, але хоче контролювати процес і не переплачувати.

Цілі

• Зрозуміти, які матеріали краще обрати
• Легко орієнтуватися в категоріях
• Побачити фото, опис, характеристики, ціни
• Замовити все в одному місці

Болі

• Плутається в професійних термінах
• Не розуміє, чим відрізняються схожі товари
• Дратується, коли важко знайти те, що потрібно

Поведінка

• Займається покупками вечорами або на вихідних
• Часто використовує мобільну версію сайту
• Порівнює товари, читає відгуки, шукає логіку в навігації

Мотивація

• Простий, чистий інтерфейс
• Можливість зберегти товари "на потім"
• Блок "часто купують разом" або рекомендації

JTBD

1. Коли я купую дорогий інструмент, я хочу оплатити його частинами через ПриватБанк, щоб не витрачати весь бюджет одразу.
2. Коли я бачу акцію на потрібні мені матеріали, я хочу швидко оформити замовлення, без зайвих кроків.
3. Коли я вагаюся, який саме інструмент купити, я хочу прочитати відгуки інших покупців, щоб не зробити помилку.

Гіпотеза

1. Якщо показати “Оплату Частинами” прямо на сторінці товару, Андрій буде готовий купити дорожчий інструмент.
2. Якщо Андрій зможе авторизуватись через СМС або соцмережу, він частіше завершуватиме покупки.
3. Якщо Андрій бачить реальні відгуки під товарами, він буде впевненіше приймати рішення і частіше завершуватиме покупку.

Закупівельниця в ТОВ (Світлана, 42 роки)

Відповідальна за закупівлі в невеликій будівельній фірмі. Працює з 8:00 до 17:00, закуповує матеріали на десятки тисяч гривень. Їй важливо, щоб усе було чітко, без помилок і з офіційними документами.

Цілі

• Здійснювати замовлення з ПДВ
• Оформлювати документи (рахунки, видаткові, договори)
• Отримувати знижки за великі замовлення
• Мати прямий контакт із менеджером

Болі

• Немає зручного формування рахунку онлайн
• Не працює пошук по артикулу
• Зайво багато зайвих кліків, немає "швидкого кошика"

Поведінка

• Працює з десктопу, в робочий час
• Має список товарів за артикулами
• Часто спілкується з менеджером через Viber або пошту

Мотивація

• Надійність постачальника
• Оперативність
• Можливість сформувати замовлення в 2–3 кліки

JTBD

1. Коли я шукаю матеріали для закупівлі, я хочу одразу бачити оптову ціну, щоб не витрачати час на дзвінки.
2. Коли я часто купую одні й ті самі товари, я хочу зберігати їх в особистому кабінеті, щоб швидко переоформити.
3. Коли я оформлюю замовлення від компанії, я хочу обрати оплату безготівковим розрахунком і доставку транспортом постачальника, щоб все було офіційно і зручно.

Гіпотеза

1. Якщо оптові ціни будуть видимі під основною і позначені умовами (від скількох одиниць), Світлана не звертатиметься до менеджера.
2. Якщо дати можливість переглядати історію замовлень і в кабінеті буде функція "повторити замовлення", це полегшить роботу Світлані.
3. Якщо на сайті є можливість обрати безготівковий платіж і доставку авто Анжіо, Світлана частіше буде завершувати замовлення

Виділив ключові функціональні блоки, які напряму випливають із JTBD і гіпотез

Каталог / Сторінка товару

Швидкопрацюючі фільтри та пошук

• Розумний пошук “на льоту”, який під час введення відображає як відповідні товари, так і релевантні категорії.
• Інтуїтивні фільтри, які працюють без перезавантаження сторінки, дозволяють швидко звузити вибір за параметрами (категорія, бренд, ціна, наявність тощо).

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

• На сторінці товару під основною ціною виводиться оптова ціна з чітко зазначеним порогом кількості (наприклад, “від 10 шт — 120 грн/шт”)
• На сторінці товару під основною ціною виводиться ціна для зареєстрованного користувача, з урахуванням його дисконтної знижки.

Відгуки користувачів

• Блок із відгуками під товаром: з оцінками, текстовими коментарями.
• Можливість залишити відгук.

Бейдж і блок “Оплата частинами”

• У картці товару та на сторінці товару — помітний бейдж із можливістю перегляду умов “Оплати частинами від ПриватБанк”.

Особистий кабінет

Повторне замовлення

• Кнопка “Повторити замовлення” біля кожного попереднього замовлення в історії.
• Можливість швидко додати всі товари в кошик.

Індивідуальний графік знижки

• Візуальний індикатор накопичувальної системи лояльності (наприклад, “ще 2 000 грн — і знижка зросте до 7%”).
• Поточна знижка показується в кабінеті та в кошику.

Оформлення замовлення

Спрощена авторизація

• Можливість авторизації без пароля: через СМС або облікові записи соцмереж (Google, Facebook).

Вибір форми оплати

• Готівка, картка, “Оплата Частинами” (відображається для сум і товарів, які підпадають).
• Оплата за безготівковим розрахунком для юр. осіб із можливістю завантажити рахунок.

Вибір доставки

• Стандартна доставка (Нова Пошта), самовивіз із магазину, доставка транспортом Анжіо.
• Вибір магазину для самовивозу зі збереженням різної ціни по магазинах.

Додаткові поля та опції

• Призначення іншого отримувача, коментар до замовлення.

User flow по різним сценаріям

Для валідації рішень провів неформальне тестування lo-fi прототипу з реальними співробітниками компанії "Анжіо", які відповідають типажам основних персонажів:
 

• майстри та бригадири (аналог Віталія),
• молодші спеціалісти, що самостійно закуповують інструменти (аналог Андрія),
• працівники відділу закупівель (аналог Світлани).

Їхній зворотний зв’язок допоміг уточнити логіку флоу та доопрацювати окремі UX-рішення до передачі у UI.

Віталій реєструється, щоб отримати знижку

Віталій — досвідчений майстер, який купує багато і часто. Він помічає, що зареєстровані користувачі отримують знижку -5%. Його мотивує вигода, але він ненавидить довгі реєстрації.

1. Сторінка товару
2. Бачить бейдж. “Зареєструйтесь і отримайте 5% знижки” і одразу показує нижчу ціну для зареєстрованих покупців
3. Натискання “Увійти / Зареєструватися”
4. Введення номеру телефону
5. Отримання SMS → підтвердження коду
6. Додає товар до кошика
7. Ціна зі знижкою (-5%)
8. Оформлення замовлення

UX-рішення:

• Ціна нижча і зелена — біля неї фраза “ціна для зареєстрованих покупців”.
• При натисканні — легкий вхід по телефону, без пароля чи email.
• Після підтвердження — корзина не скидається, товар і сума знижки вже оновлені.

Результат

Цей флоу підтвердив реальний працівник “Анжіо”, який часто оформлює замовлення від імені постійних клієнтів. Функція швидкої авторизації та візуальна ціна зі знижкою одразу спонукала до реєстрації.

Андрій купує дорогий інструмент в розстрочку

Андрій — майстер-самоучка, який не хоче витрачати одразу великі суми. Його цікавить Оплата Частинами від ПриватБанку.

1. Каталог інструментів
2. Картка товару
3. Бейдж “Оплата частинами”
4. Відкриття блоку → Вибір кількості частин
5. Додавання до кошика
6. Оформлення замовлення

UX-рішення:

• Бейдж “Оплата частинами” одразу видно в каталозі та на картці.
• Є блок з умовами (кількість платежів, мінімальна сума, перевірка доступності у клієнта “ОЧ”).
• На етапі оплати — інтеграція з ПриватБанк API.

Результат

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

Світлана повторює замовлення

Світлана — закупівельниця в компанії, яка часто купує одні й ті самі матеріали для різних об'єктів. Вона хоче швидко оформити замовлення без зайвого пошуку.

1. Вхід у кабінет
2. Історія замовлення
3. Обрано замовлення
4. Кнопка “Повторити”
5. Кошик із заповненими позиціями
6. Оформлення замовлення

UX-рішення:

• В історії замовлень додано кнопку "Повторити" — вона одразу заповнює кошик потрібними товарами.
• Можна редагувати позиції перед підтвердженням.

Результат

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

UI design

На основі UX-фреймів створив повноцінний інтерфейс у Figma, враховуючи потреби цільової аудиторії (Віталій, Андрій, Світлана).
 

• Розробив дизайн-систему: кольори, типографіка, кнопки, бейджі, іконки
• Зібрав UI Kit для швидкої роботи над інтерфейсом
• Опрацював усі ключові сторінки: головна, каталог, товар, корзина, кабінет
• Передбачив усі стани елементів (hover, error, success)
• Створив адаптиви для мобільних пристроїв
• Зробив інтерактивний прототип із клікабельними елементами для перевірки flow
• Підготував макети до передачі в розробку: підписав компоненти, відступи, пояснив логіку в Dev Mode

Результати

Покращення для користувачів

• Швидка реєстрація — лише за номером телефону, без пароля. Мінімум зусиль — максимум вигоди.
• Персональні ціни — зареєстровані користувачі бачать знижку одразу в кошику.
• Оплата частинами — зробила дорогі покупки доступнішими для майстрів і малого бізнесу.
• Миттєві фільтри — значно пришвидшили вибір товарів у великому каталозі.
• Пошук на льоту — полегшив навігацію сайтом і економить час.
• Повторне замовлення — зручна функція в кабінеті для лояльних покупців.
• Адаптивний інтерфейс — мобільна версія стала повноцінним інструментом для закупівель.
• Бонусна система — підвищили залученість постійних клієнтів.
• Відгуки та консультації — спростили прийняття рішень для нових покупців.

Покращення для менеджерів

• Оновлена адмінка — зручна CRM для обробки замовлень з фільтрами, статусами, історією покупок та знижками.
• Аналітика — графіки продажів та кількості замовлень за період.
• Функціонал для дропшипінгу — інтеграція через XML/YML-фіди та облік продажів партнерів.
• Гнучке SEO-налаштування — по фільтрах, категоріях, товарах — усе в одному місці.
• Нове редагування товарів — можливість гнучкого керування атрибутами, зображеннями, характеристиками.

Покращення для бізнесу

• Збільшення конверсії завдяки UX-оптимізаціям та новим сценаріям взаємодії
• Оптимізовані внутрішні процеси — менше часу на ручну обробку замовлень.
• Зростання лояльності — за рахунок знижок, персонального кабінету та швидкого сервісу.

Кількісні

• Реєстрацій стало більше на 62%
• Швидкість завантаження сайту зросла на 130%
• Навантаження на сервер зменшено на 74%
• Фільтри працюють швидше на 98%

Якісні

• Покращений досвід користувачів на мобільних пристроях
• Позитивний фідбек від менеджерів щодо нової адмінки
• Спрощено роботу SEO-команди завдяки розширеним налаштуванням
• Партнери по дропшипінгу можуть працювати автономно

Реакція клієнта

Ми отримали не просто новий сайт, а сучасний цифровий інструмент, який реально вплинув на наші продажі. Команда чітко розуміла наші бізнес-потреби, оперативно реагувала на фідбек і знайшла рішення навіть там, де ми самі ще не бачили проблем. Особливо вразила якість UX-рішень та швидкість роботи нового сайту. Платформа зручна як для клієнтів, так і для нашої внутрішньої команди. Співпраця була і є ефективною, гнучкою та приємною. Продовжуємо нашу співпрацю!

Сергій Олександрович Бобко, заступник директора з маркетингу та розвитку ПФ "Анжіо"