Кейс продуктового дизайну
ERP і CRM для бізнесу, B2B/B2C, продуктовий дизайн
Оновлення, жовтень 2026: згодом я перетворив цю ERP на кодову дизайн-систему з документацією в Storybook.
Про ERP-систему
Вступ
ERP-система Tech Harbor створена для зручного керування великими компаніями, що займаються створенням продуктів і співпрацею з дистриб’юторами. Вона корисна для директорів, менеджерів, маркетологів, юристів і фінансистів організації. Система охоплює п’ять відділів компанії (керівництво, склади, фінанси, юристи, маркетологи) плюс окремий інтерфейс для дистриб’юторів — загалом шість модулів. Вона лишається зрозумілою як для технічно підкованих користувачів, так і для тих, хто менш знайомий із новими технологіями. У цьому кейсі розглянуто, як користувачі виконують щоденні завдання залежно від своїх ролей.
Моя роль
Дизайнер інтерфейсів і продукту.
Методологія включала емпатію до проблеми, її визначення, брейнштормінг рішень, дизайн, прототипування та тестування.
Мої обов’язки
Проведення інтерв’ю, паперові й цифрові вайрфрейми, low- та high-fidelity прототипування, юзабіліті-дослідження, урахування доступності та ітерації дизайну.
Інструменти
Design engineering: Storybook · React · TypeScript · Figma Variables · Figma MCP · Claude Code · GitHub · Vercel
Дослідження і гіпотеза
Формулювання проблеми
ERP-система Tech Harbor покликана спростити керування компанією, проте користувачі, переважно працюючі фахівці віком від 22 до 65 років, спершу мають труднощі з навігацією, хоч і вважають інтерфейс інтуїтивним. Ці користувачі цінують ефективність і інтелектуальний розвиток, і в них мало часу на складні чи незручні процеси. Як покращити онбординг і навігацію, щоб перехід на систему був плавним і заощаджував час?
Складники проблеми
Проблеми з масштабуванням
Початковій ERP-системі бракувало гнучкості для зростання бізнесу, через що вона була неефективною для підприємств із великими обсягами даних.
Складні процеси й крута крива навчання
Інтерфейс був функціональним, але вимагав часу на звикання, що сповільнювало роботу й знижувало ефективність.
Фрагментований користувацький досвід
Інформація була розкидана різними розділами, тож користувачам було важко орієнтуватися й отримувати корисні інсайти.
Застарілий інтерфейс із проблемами юзабіліті
Дизайн повторював традиційні структури ERP, що створювало проблеми юзабіліті й заважало плавній та інтуїтивній взаємодії.
Огляд ухвалених рішень
Після дослідження та визначення ключових проблем дизайн поступово розробляли для різних відділів ERP-системи.
Навігаційне меню для користувача «Менеджер».
Навігаційне меню для користувача «Фінансовий менеджер».
Користувачі ERP-системи
ERP-система обслуговує власників бізнесу, керівників, відділи продажів, юристів, керівників складів і бухгалтерів, забезпечуючи автоматизацію процесів і злагоджену співпрацю. Міжнародні дистриб’ютори також покладаються на неї для доступу до даних у реальному часі.
Девід, співвласник глобального бізнесу, шукає інтегровану систему для ефективного керування операціями. Він цінує швидке виконання завдань на різних пристроях, але стикається з труднощами: завеликі тексти інтерфейсу на мобільному та обмежене редагування даних дистриб’юторів, що показує потребу в постійних покращеннях.
CEO
«Я використовую ERP-систему, щоб стежити за фінансами та ключовими показниками бізнесу. Вона допомагає автоматизувати рутину й пришвидшує ухвалення рішень».
Міжнародний юрист
«ERP-система спрощує мою роботу з юридичними документами й договорами, забезпечуючи відповідність вимогам і ефективне керування документами».
Представник відділу продажів
«Я використовую ERP, щоб вести стосунки з клієнтами, відстежувати угоди й аналізувати продажі, — це значно спрощує мою роботу».
Керівник складу
«Система допомагає відстежувати запаси в реальному часі, зменшуючи помилки й запобігаючи дефіциту».
Бухгалтер
«ERP автоматизує фінансовий облік, роблячи відстеження витрат, виставлення рахунків і фінансове планування ефективнішими».
Дослідження користувачів: болі
Зручність
Інтерфейс побудовано на таблицях і картках, що забезпечує зрозумілий та інтуїтивний досвід.
Довіра
«Цей сервіс має бути безпечним для нашого бізнесу й наших дистриб’юторів». (Девід)
Навігація
Користувачі запропонували додати на екрани «хлібні крихти», щоб легше повертатися назад.
Доступність
Система підтримує нічну й денну теми, зміну розміру тексту та зчитувачі екрана.
Цифрові вайрфрейми
ERP-система складається з п’яти відділів плюс окремий інтерфейс дистриб’ютора (загалом шість модулів). Я створив вайрфрейми всіх екранів і змапив шляхи користувачів для кожного модуля.
Я також тісно працював із розробниками та менеджерами команди, щоб зрозуміти функціональність системи. Ми збиралися на СЕСІЇ БРЕЙНШТОРМІНГУ й аналізували дизайн і логіку всіх відділів.
Фінальна ітерація
Макети
Після другого юзабіліті-дослідження я з’ясував, що поля пошуку, фільтри й кнопки на мобільних пристроях мають бути більшими. Відступи між полями введення та кнопками також збільшили для точнішого натискання.
Я дотримувався принципів адаптивного дизайну й трохи зменшив розмір шрифту в деяких елементах. Додали темну тему, щоб зменшити навантаження на очі та підвищити комфорт для тих, хто її віддає перевагу.
Адаптивний дизайн
Що я вимірював би далі
Щоб перевірити дизайн після запуску, я використав би такі метрики й методи для вимірювання та покращення користувацького досвіду:
Відстеження поведінки користувачів
Використання Google Analytics, Hotjar або Mixpanel для аналізу взаємодій у ERP/CRM-системі, щоб знайти типові точки тертя й зони для покращення.
Метрики конверсії та залученості
Вимірювання того, наскільки ефективно користувачі переходять між функціями, виконують завдання (напр., додають клієнтів, формують звіти) і працюють з автоматизованими процесами.
⏱️
Виконання завдань і економія часу
Відстеження часу на ключові дії в системі, щоб скоротити час на повторювані процеси.
Теплові карти й записи сесій
Пошук проблем юзабіліті через візуалізацію кліків, глибини скролу й патернів взаємодії з такими функціями, як таблиця керування клієнтами.
A/B-тести для покращення UI
Тестування різних макетів, розташування кнопок і дизайну форм, щоб підвищити зручність і рівень прийняття.
Урахування доступності
01
Я також використав шрифт без засічок «Poppins», щоб тексти в застосунку легко читалися.
02
Я застосував кольори й контраст для полів введення та кнопок, щоб вони були зрозумілими для людей зі слабким зором. У кодовій бібліотеці документація компонентів містить стани, стилі фокусу й нотатки щодо ARIA; у Storybook увімкнено аддон a11y.
03
Я створив дизайн темної теми для зручного користування ERP-системою різними користувачами.
Дизайн-система
Під час проєкту я створив дизайн-систему для ERP: спільні стилі, компоненти й варіанти, що зростали разом із продуктом у міру додавання нових модулів і екранів.
Від Figma до Storybook
У наступному проєкті (жовтень 2026) я перетворив макети ERP на кодову бібліотеку компонентів: 60 компонентів на React і TypeScript (22 атоми, 38 молекул) і 242 дизайн-токени, згенеровані з одного tokens.json. Кожен компонент задокументовано в Storybook зі станами, граничними випадками, нотатками щодо доступності та відповідністю між Figma і кодом. Я налаштував процес за участі AI (Figma → Figma MCP → Claude Code → pull request у GitHub → превʼю у Vercel). Я вирішував, що будувати, переглядав кожну зміну та зливав кожен pull request.
Що я зробив би далі
Тестування й документація, орієнтовані на користувача
Провести юзабіліті-тести ключових сценаріїв на основі завдань і задокументувати кожну проблему разом із її виправленням у дизайн-системі.
Інтерв’ю для вдосконалення системи
Провести якісні інтерв’ю з кожною роллю, щоб знайти решту болів і розставити пріоритети покращень.
Інклюзивне дослідження доступності
Провести аудит доступності за WCAG і дослідницькі сесії з користувачами з інвалідністю.
Результат
Після першого місяця користування ERP-системою, яка допомагає автоматизувати більшість бізнес-процесів, користувачі відгукнулися позитивно. Ось одна цитата користувача:
Результати (продовження з дизайн-системою, жовтень 2026)
• 60 компонентів (22 атоми, 38 молекул)
• 242 дизайн-токени (кольори, типографіка, тіні, розміри, відступи, сітка, layout, радіуси)
• 137 SVG-іконок у двох розмірах
• ~480 історій у Storybook із документацією в MDX
• 9 pull request, 5 днів активної роботи (1–5 жовтня 2026)
Чого я навчився
Створюючи першу версію ERP-системи, я навчився використовувати емпатію й відкладати власні припущення. Юзабіліті-дослідження допомогли покращити функціональність і те, як люди працюють із системою. Згодом перенесення макетів у код навчило мене, що дизайн-системи масштабуються лише тоді, коли токени й документація живуть у коді, а не тільки у Figma.
Підсумок
Підвищення ефективності ERP-системи потребує цілісної стратегії: ґрунтовного тестування, покращень, орієнтованих на користувача, і відданості доступності. Ставлячи на перше місце відгуки користувачів та інклюзивність, ми не просто оптимізуємо систему — ми створюємо середовище, де враховано потреби кожного користувача.
Посилання на сайт компанії, для якої розроблено ERP-систему: rifbar.com.