Wellcam.fit
| Галузь: | FitTech / Велнес |
|---|---|
| Локація: | Італія |
Використані послуги
Інформація про клієнта
Платформа Wellcam.fit мала забезпечити все, що потрібно для справжніх відносин тренер-клієнт: пошук профілів, каталог занять, бронювання через календар, планування повторюваних сесій, управління гаманцем та доступ до живих сесій — усе в межах єдиного адаптивного додатку, що однаково добре працює на десктопі, мобільних пристроях та планшетах.
Виклик
- Два паралельні продуктові досвіди: клієнти та персональні тренери взаємодіють з однією платформою принципово різними способами. Тренеру потрібні інструменти для планування, управління заняттями та відстеження фінансів. Клієнту потрібні інструменти для пошуку, бронювання, цифровий гаманець та список побажань. Обидва досвіди мали бути спроєктовані, реалізовані та протестовані одночасно, не заважаючи один одному.
- Складна логіка бронювання: окрім простого бронювання зустрічей, платформа вимагала підтримки групових занять зі змінною частотою, повторюваних сесій, що автоматично генеруються до 12 місяців наперед відповідно до доступності тренерів, пакетів цін зі знижками та потоку оплати на основі цифрового гаманця з блокуванням та розблокуванням коштів після завершення заняття.
- Інтеграція API з наявним бекендом: Бекенд було побудовано на фреймворку електронної комерції Bagisto — системі на базі Laravel, яка не була спочатку розроблена для бронювання фітнес-занять. Відображення фітнес-специфічних концепцій (часові слоти, доступність інструкторів, повторювані бронювання) на API електронної комерції вимагало інтерпретації, кастомної логіки та тісної координації між командами фронтенду та бекенду протягом усього проєкту.
- Адаптивний дизайн на трьох пристроях: Кожен екран — від дашборду інструктора до потоку бронювання та каталогу занять — мав коректно працювати на десктопі, мобільних пристроях та планшетах, з дизайном, який не був повністю визначений для всіх трьох пристроїв на початку розробки.
Зустрінемося та обговоримо.
Рішення
WWG структурувала проєкт у чотири фази: налаштування середовища та огляд API, розробка основного модуля, контроль якості та впровадження, з двотижневими Scrum-спринтами для забезпечення передбачуваних термінів та високої видимості для клієнта протягом усього процесу.
Архітектура платформи з подвійною роллюДодаток було побудовано навколо двох окремих автентифікованих досвідів, що використовують спільну кодову базу. Облікові записи тренерів мають доступ до створення та управління заняттями, перегляду тижневого розкладу, обробки запитів клієнтів та відстеження доходів через інтерфейс гаманця. Облікові записи клієнтів мають доступ до пошуку тренерів, каталогу курсів з функціями фільтрації та списку бажань, потоку бронювання та історії персональних сесій. Маршрутизація та дозволи на основі ролей забезпечують розділення як на рівні інтерфейсу, так і на рівні API.
Система бронювання була одним з найскладніших технічно модулів проєкту. Клієнти можуть бронювати індивідуальні заняття або повторювані групові сесії, обираючи частоту та тривалість. Бекенд автоматично генерує екземпляри повторюваних занять до 12 місяців наперед, перевіряючи доступність викладача для кожного часового слоту перед створенням. Оплата здійснюється через механізм блокування гаманця: кошти резервуються під час бронювання та вивільняються на користь викладача після завершення сесії, при цьому Stripe обробляє поповнення, а Zustand керує станом кошика та гаманця на фронтенді.
UX-покращення після демоПісля внутрішнього демо продукту WWG виявила та запропонувала серію UX-покращень, які були інтегровані до фінальної поставки. Серед покращень: відображення точних дат бронювання в календарі замість абстрактного вибору дня тижня, відображення доступних часових слотів тренерів безпосередньо в інтерфейсі бронювання, відображення поточного балансу гаманця в кошику, додавання розділу з історією занять до перегляду гаманця та розширення розкладу з навігацією тиждень за тижнем.
Підтвердження бронювань та нагадування про сесії надсилаються через AWS Pinpoint (SMS) та електронну пошту з використанням шаблонів, керованих бекендом. Логіка сповіщень перевіряє обмеження пісочниці та ліміти використання, з системою журналювання помилок для виявлення проблем з доставкою під час контролю якості.
Технологічний стек
Фронтенд-фреймворк з серверним рендерингом для продуктивності та SEO на всіх сторінках каталогу та профілю тренера.
TypeScript
Наскрізна типобезпека між компонентами, викликами API та управлінням станом, що зменшує помилки інтеграції в кодовій базі з подвійною роллю.
Tailwind CSS
Утилітарний підхід до стилізації, що забезпечує швидку та послідовну розробку UI на всіх трьох адаптивних поверхнях: десктоп, планшет та мобільний.
Zustand
Легке управління станом з персистентністю для кошика, гаманця та стану сесії, що запобігає втраті даних при перезавантаженні сторінки.
API Bagisto
Бекенд електронної комерції на базі Laravel, адаптований для обробки фітнес-специфічних сутностей: слотів для занять, розкладів тренерів, повторюваних бронювань та пакетів підписки.
Управління контентом для описів курсів, таксономії категорій та текстів платформи, відокремлене від основної логіки бронювання.
Stripe
Обробка платежів для поповнення гаманця та покупки підписок, з блокуванням та розблокуванням коштів, пов'язаним із завершенням занять.
AWS S3 + Pinpoint
S3 для зберігання медіаконтенту (фото викладачів, ресурси курсів); Pinpoint для підтверджень бронювання через SMS та нагадувань про сесії.
Vercel
Платформа розгортання фронтенду, що забезпечує CI/CD, edge-кешування та управління середовищами staging та production.
Основні технічні виклики
Бекенд Bagisto було створено як універсальний фреймворк електронної комерції. Такі концепції, як вікна доступності інструкторів, генерація повторюваних занять, виявлення конфліктів на рівні слотів та цикли блокування-розблокування гаманця, не присутні нативно в моделі кошика покупок. Подолання цього розриву вимагало тісної співпраці між командами фронтенду та бекенду, значної роботи з відображення API та кастомної логіки з обох сторін, включаючи створення генератора повторюваних занять, який створює екземпляри до 12 місяців наперед, дотримуючись існуючих бронювань.
Замість стягнення оплати під час бронювання, Wellcam.fit використовує модель блокування коштів: коли клієнт бронює сесію, вартість блокується з балансу його гаманця та утримується до проведення заняття. Лише тоді кошти вивільняються на користь тренера. Це вимагало реалізації життєвого циклу транзакції з кількома станами — блокування, утримання, вивільнення та переказ — з обробкою поповнень через Stripe та перевіркою достатності балансу бекендом перед підтвердженням будь-якого бронювання.
Специфікації дизайну для всіх трьох поверхонь платформи не були повністю визначені на початку розробки. Команда працювала з наявною інформацією, систематично повідомляла про прогалини через структурований процес запитань та відповідей з клієнтом та приймала прагматичні рішення — обираючи простіший з двох неоднозначних варіантів дизайну та позначаючи рішення для перевірки клієнтом — для дотримання термінів та уникнення накопичення переробок.
Результати
- Повноцінний маркетплейс, реалізований за 10 тижнів Від налаштування середовища до розгортання на Vercel — повністю функціональна фітнес-платформа з двома ролями, що включає управління тренерами, бронювання клієнтів, платежі через гаманець, повторюване планування та кросбраузерний QA.
- Повна обробка складності бронювань Індивідуальні сесії, групові заняття та повторювані бронювання з автоматичною генерацією на 12 місяців — усе інтегровано в єдиний послідовний потік оформлення замовлення та гаманця, включаючи знижки на пакети.
- UX-покращення впроваджені до запуску Дев'ять UX-покращень, виявлених через внутрішній огляд та зворотний зв'язок після демо, були визначені, спроєктовані та випущені — включаючи бронювання з явними датами, відображення доступних слотів та навігацію розкладу тренерів.
- Адаптивність на всіх пристроях Повна кросбраузерна та кросплатформна сумісність, підтверджена структурованим QA — платформа працює послідовно на десктопі, планшеті та мобільному у всіх основних браузерах.