SplitMart: редизайн SaaS продукту у коді, після UX-аудиту
Зробив редизайн продукт від аудиту до продакш реді коду, який використали розробники клієнта
SplitMart це двосторонній фітнес-маркетплейс: клієнти бронюють тренування з оплатою за сесію, тренери публікують послуги і отримують оплату.
Це UX-аудит, який знайшов, де течуть бронювання, повний редизайн системи екранів, брендовий лендинг, задокументована дизайн-система і сама продакшн-збірка на React та нативному iOS. Усе спроєктовано у справжньому браузері, на справжніх брейкпоінтах.
React 19 Tailwind Ant Design iOS Claude Code
Пройшов продукт як клієнт і як тренер, знайшов 37 проблем. Три з них напряму зливали бронювання — виправив їх першими.
Перебудував бронювання: ціну й вільні слоти видно ще до реєстрації, а не після. Менше причин піти зі сторінки.
Довів від аудиту до живого продукту — React-збірка і нативний iOS, обидва задеплоєні й публічні.
UX-аудит
Аудит продукту дав 37 знахідок, і три з них напряму впливали на те, що клієнти відвалювалися під час бронювання.
Я пройшов усі флоу end-to-end як клієнт і як тренер, на десктопі й мобільному, а потім зробив евристичний прохід і зібрав пріоритезований звіт із severity та effort.
Прохід охопив навігацію, ієрархію, тертя, порожні й помилкові стани, форми та доступність. Три критичні знахідки:
- Передчасна стіна авторизації. «Book Now» кидав користувача на Sign In до того, як він обрав слот чи побачив ціну.
- Мобільна сторінка сесії ховала назву і ціну. Екран із найвищим наміром показував відео і кнопку, але ні назви сесії, ні суми у видимій зоні.
- Зламана мобільна навігація. Головні точки входу зникали на мобільному брейкпоінті без жодного меню.
Помилки які виявив аудит
Де саме
Редизайн
Перебудував booking-флоу так, щоб ціна і вільні слоти йшли до реєстрації, а не після неї.
Близько 303 екранів відрендерив у справжньому браузері через role-aware оболонку: бронювання, пошук, лістинги, сторінка сесії, налаштування, чат, майстер лістингу, заробітки та обидва кабінети.
Дизайн-система має власні запобіжники: анти-слоп-сет із 37 заборонених патернів плюс канонічні патерни, типографічна система і плейбук мобільної адаптації, тому «добре» стало вимірюваним, а не суб'єктивним.
Продакшн-збірка
Задеплоїв обидві збірки публічно: React на ~103 роути і нативний iOS-застосунок.
Це збірки продакшн-якості з демо-даними, не продукт із живою аудиторією, і кожен екран у них справжній.
React 19, Vite, Tailwind v4 та Ant Design 6, з дизайн-токенами замість хардкоду. iOS зібраний лише з власних iOS-компонентів і токенів: web та iOS ділять флоу користувача, а не код, тому застосунок відчувається нативним, а не загорнутим веб-в'ю. Обсяг тренерського MVP скоротився з шести фіч до трьох після живого аудиту того, що продукт уже вмів.
- splitmart-react.vercel.app — продакшн React-збірка
- splitmart-ios.vercel.app — нативний iOS-застосунок
- redesign-scope.vercel.app — веб-прототип
- github.com/denysosadchyi/splitmart-react — код
