Перейти до змісту
Stonepath

ERP / CRM · B2B

ERP і CRM для B2B-компанії-виробника

ERP, спроєктована з нуля для компанії, яка виробляє товари й продає через дистриб’юторів: шість модулів, п’ять відділів та інтерфейс дистриб’ютора.

Клієнт
Rifbar Inc.
Період
бер. 2023 – квіт. 2025
Моя роль
Продуктовий дизайнер, згодом design engineer
Фокус
Продуктовий дизайн, ERP, Дизайн-система
Екрани ERP: інтернет-магазин, чат і аналітика доставки на ноутбуці, планшеті й телефоні

Контекст

Клієнт виробляє товари й працює з дистриб’юторами. ERP охоплює п’ять відділів (менеджмент, склади, фінанси, юристи, маркетологи) та інтерфейс дистриб’ютора: разом шість модулів.

Проблема

  • Користувачі віком від 22 до 65 років вважали систему інтуїтивною, але мали труднощі з першою навігацією й онбордингом.
  • Старі інструменти мали обмеження масштабування, складні процеси з крутою кривою навчання, розрізнену інформацію та застарілий інтерфейс ERP.
  • Питання: як зробити онбординг і навігацію достатньо швидкими, щоб люди переходили на систему без втрати часу.

Що я зробив

  • Провів брейнсторми зі стейкхолдерами, розробниками й керівниками команд, потім інтерв’ю та персони для кожного відділу.
  • Намалював вайрфрейми для кожного екрана, потім прототипи низької та високої деталізації.
  • Провів два раунди юзабіліті-досліджень. Висновки: таблиці й картки читаються чітко, користувачі хочуть хлібні крихти, важливі довіра та безпека, а також просили теми, зміну розміру тексту й підтримку скрінрідерів.
  • Додав адаптивні макети й темну тему та написав функціональні специфікації для стейкхолдерів, розробників і QA.

Результати роботи

  • Вайрфрейми й макети для шести модулів
  • Адаптивні мобільні екрани
  • Темна тема
  • Дизайн-система
  • Функціональні специфікації

Підсумок

Продукт покращив управління компанією та збільшив продажі.

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

Продовження проєкту

Продовження: від макетів до дизайн-системи в коді

У жовтні 2026 року я перетворив макети ERP на Rifbar Design System: бібліотеку на React і TypeScript із документацією в Storybook. Я керував конвеєром із підтримкою ШІ (Figma, Figma MCP, Claude Code, GitHub pull request, Vercel preview), обирав, що будувати, а також перевіряв і зливав кожен pull request.

60
компонентів (22 атоми, 38 молекул)
242
дизайн-токени з одного tokens.json
137
SVG-іконок
~480
історій Storybook

Вибрані екрани

Дашборд ERP у темній темі
Темна тема
Екран аналітики доставки в ERP
Аналітика доставки
Екран чату всередині ERP
Вбудований чат
Екрани ERP, розкладені у Figma
Структура файлу Figma
Огляд дизайн-системи для ERP
Дизайн-система
Вайрфрейм низької деталізації екрана аналітики
Вайрфрейм low-fi