DMD CRM System

Розробка повної CRM-системи для авторозбірки під ключ. Завдання — прибрати рутину з обліку деталей, прискорити пошук на склад і дати оператору один екран з усім, що йому треба для прийому замовлення і відвантаження.

DMD CRM System
Бренд

DMD Auto Parts

Клієнт

NDA

Локація

Україна

Бюджет

>15 000$

Оцінка
5/5

Про проєкт

Розробка повної CRM-системи для авторозбірки під ключ. Завдання — прибрати рутину з обліку деталей, прискорити пошук на склад і дати оператору один екран з усім, що йому треба для прийому замовлення і відвантаження.

Виклики

Авторозбірка DMD оперує сотнями тисяч SKU, кожен проходить через довгий ланцюг: підбір авто під розбірку → зняття деталі з авто → мийка → ремонт при потребі → фотографування → публікація оголошення на маркетплейсах → прийом замовлень → відправка → бухгалтерський облік. На старті проєкту кожен етап жив у власному інструменті: Excel-файли для каталогу, блокноти на складі, окремий бухгалтерський софт, ручне завантаження фото на OLX і Prom. Інформація постійно губилася на стиках, оператори дублювали роботу одне за одним, час прийому одного замовлення доходив до 12 хвилин. Складна частина — змоделювати весь цикл в одній системі так, щоб новий оператор почав працювати за день і щоб критичний пошук деталі за 10-15 секунд працював навіть на 200K+ позиціях.

Рішення

Я зробив для клієнта повний цикл операційного управління — від моменту закупівлі авто до післяпродажної комунікації. Шість етапів, кожен з власними sub-операціями і власним dashboard у системі. Перехід між етапами автоматичний — деталь рухається конвеєром без ручного перенесення.

Етап 1 — Закупівля та логістика авто. Пошук авто на аукціонах і у приватних власників, оцінка стану і прибутковості розбірки, викуп, організація доставки, митне оформлення для імпортних авто, приймання на склад з фіксацією VIN і автогенерацією карти вузлів.

Етап 2 — Розбірка та первинна обробка. Планування розбірки за моделлю авто, демонтаж деталей з фіксацією у системі, сортування за категоріями (двигун, кузов, салон, електроніка), первинна дефектовка зі станом «робоче / під ремонт / лом».

Етап 3 — Підготовка деталей. Мийка та очищення, детальна перевірка функціоналу, ремонт при потребі, класифікація фінального стану (А — як нова, B — робоча зі слідами використання, C — потребує ремонту покупцем).

Етап 4 — Контент і публікація. Фотофіксація з шаблоном ракурсів і фіксованим освітленням, написання опису з характеристиками з бази, автоматична публікація оголошення на OLX, Prom, AutoRia і власному сайті — одним кліком, без ручного дублювання.

Етап 5 — Облік і систематизація. Маркування деталі унікальним SKU, пакування з відповідним рівнем захисту, розміщення на складі за логікою «гарячий / теплий / холодний» доступ — найходовіше ближче до зони відвантаження.

Етап 6 — Продажі та комунікація. Обробка запитів з 4 каналів (телефон, сайт, маркетплейси, месенджери), допродажі (cross-sell деталей до зробленого замовлення), відправка з автоматичним TTN, післяпродажне обслуговування і збір зворотного зв'язку для рейтингу.

Дизайн

Дизайн-система побудована довкола високої щільності інформації без перевантаження. Кожен екран має чітку візуальну ієрархію: critical actions — праворуч-зверху, secondary — зліва, статус — внизу. Світла тема як default, темна — опційно (оператор перемикає одним кліком).

Архітектура екрану. Лівий sidebar з модулями (Vehicle intake, Dismantling, Refurbishment, Listing, Orders, Accounting), основна робоча зона по центру, контекстна панель праворуч — підсумки і швидкі дії саме до виділеного об'єкта. Sidebar колапсується до іконок для досвідчених операторів — економить 180 px ширини під робочий стіл.

Каталог. Virtual scroll витримує 200K+ позицій без лагів. Кожен рядок — компактна картка зі станом (color-coded: зелений/жовтий/червоний), фото-міні (24×24 px), ключовими атрибутами і ціною. Inline editing — клік на ціну, набираєш нову, Enter; без модалок і forms-routine.

Пошук. Cmd/Ctrl+K відкриває global pallete з autocomplete за VIN, маркою, моделлю, артикулом. Дебаунс 120 ms, результат за 80–150 ms на 200K SKU. Recent searches кешуються — оператор у 70% випадків шукає те саме що 5 хвилин тому.

Bulk-операції. Shift+Click для діапазону, Cmd+Click для toggling — стандартний macOS-pattern, тому навіть новачки розуміють інтуїтивно. Виділив 50 деталей → одна дія: змінити статус, перемістити на склад, опублікувати на маркетплейс.

Реал-тайм. WebSocket update без перезавантаження сторінки — нова деталь з'являється у списку з м'якою анімацією, змінений статус підсвічується на 1.5 с. Toast-нотифікації внизу-праворуч, не відволікають від робочої зони.

Empty + loading states. Кожен порожній список має ілюстрацію + одну CTA-кнопку («Прийняти перше авто», «Додати першу деталь»). Skeleton-loading на 100% екранів — користувач бачить форму до того як завантажились дані, відчуття «миттєво».

Keyboard-first. Усі основні дії доступні без миші: J/K для навігації по списку, E для редагування, Space для preview, Esc для виходу. На реальному виробництві оператори можуть вести облік однією рукою, тримаючи деталь у іншій.

Accessibility. Контраст AA+ на всіх станах, focus rings на всіх інтерактивних елементах, ARIA-labels для screen reader, reduced-motion respect для toast анімацій.

Технології

FigmaReactNode.jsPostgreSQL

Розробка

Frontend — React з власною дизайн-системою на базі Radix + Tailwind, типобезпечно з TypeScript. Backend — Node.js з PostgreSQL і повнотекстовим пошуком на pg_trgm + ts_vector. Real-time оновлення складу через WebSocket. Інтеграції — телефонія (Asterisk), 1С, Нова Пошта, маркетплейси (OLX, Prom, AutoRia).

Результат

Час прийому одного замовлення скоротився з 8-12 хвилин до 2-3 (-70%). Помилки відвантаження впали з 4% до 0.3%. Клієнт відмовився від трьох позицій менеджерів, бо одна людина тепер обробляє роботу трьох. ROI на проєкт окупився за 4 місяці експлуатації.