Brightstream Logo
case studyCustom systems

網球愛客 Tenniac — 數據化網球教學 / 媒合 PWA 平台

「用數據打磨每一球」——把每一次練球、每一場比賽都數據化。4 角色 PWA(球友/教練/學院/管理員)+ AI 推薦 + 7 軸技術雷達 + 滑卡媒合 + 季賽積分 + PAYUNi 訂閱 + Web Push 推播——個人生涯大滿貫的完整敘事。

🐻
Johnny Yang
Led this engagement · founder, Brightstream Technology
網球愛客 Tenniac — 數據化網球教學 / 媒合 PWA 平台

客戶的真實需求

網球愛客是台灣網球教學 / 揪團媒合的新興品牌(tenniac.brightstream.com.tw)。客戶看了市面上的網球 App(國內外)後,下了一個結論:

「他們都在做『約球』,沒人做『生涯』。我要做的是讓網球玩家從新手到自己心中的大滿貫——這整段旅程的數據敘事。」

這是個產品定位判斷,不是功能規格。他們找川輝是要一個能把這個定位實作出來的合作對象。

行銷首頁 /welcome:用數據打磨每一球 + 4 大功能介紹(AI 推薦 / 7 軸雷達 / 媒合滑卡 / 個人生涯大滿貫)
行銷首頁 /welcome:用數據打磨每一球 + 4 大功能介紹(AI 推薦 / 7 軸雷達 / 媒合滑卡 / 個人生涯大滿貫)

我們為什麼接這案

網球的競爭格局:

  • 國外:Playtomic(場地預約)、SwingVision(AI 球路分析)、PlayYourCourt(教練配對)
  • 國內:少數約球 / 找教練 App,多半套版、缺長期成長元素

網球愛客的判斷是對的:沒人把「玩家成長旅程」當作產品骨架在設計。多數 App 把媒合當動作,動作完了就沒下文——但網球玩家在意的是「我半年後 NTRP 從 2.5 拉到 3.0」「我這季季賽排名第幾」「我累積了哪些徽章」。

我們接這案是因為:這條 vertical 的 know-how 對我們是長期資產(網球+其他運動 vertical 可橫向 transfer),同時這套「PWA + Web Push + 訂閱 + 多 storage bucket」的 stack 在其他 community-driven 產品也成立。

教練詳情頁:教練資歷 / 評分 / 課程列表 / 評論——球友可從這頁直接預約
教練詳情頁:教練資歷 / 評分 / 課程列表 / 評論——球友可從這頁直接預約

我們交的東西

1. 平台定位實作:「個人生涯大滿貫」敘事

Slogan「用數據打磨每一球」貫穿全站。

首頁是「目標」Tab——AI 今日 3 件事 + 目標進度環 + 生涯大滿貫進度條 + 本週數據。不是「最近活動 feed」這種約球 App 標準配,而是「你今天該做什麼來推進你的目標」。

5 個底部 Tab 全部對齊「玩家旅程」框架:

  • 目標(AI 推薦首頁)
  • 訓練(練球 / 比賽紀錄 + 連擊計數 + 媒體上傳)
  • 媒合(滑卡找教練與揪團)
  • 紀錄(季積分排行 + Podium + 成就徽章)
  • 我的(個人 + 教練後台 + 學院後台 + 管理後台 切換)

2. 4 種角色,一個帳號

網球教練本人仍可以用球友身份去揪球、評論其他教練——這是真實使用情境。我們把 4 種角色(球友 / 教練 / 學院 / 管理員)做成同一個 auth session 內的角色切換,不是 4 個獨立 App。

  • 球友:核心 5 Tab
  • 教練:教練後台(從「我的」進入)— 課程管理、學員管理、課後紀錄
  • 學院:學院後台— 旗下教練團隊、學院公開頁
  • 管理員:平台治理 + 審核 + 檢舉處理 + 數據監看

3. 5 步驟新手導引(即時 AI 推薦)

第 5 步不是「填完表單」,是即時拉出真實的推薦教練與揪團——基於前 4 步填的目標(NTRP 3.0 / 一年聯賽)+ 地區,AI 解釋「為什麼推這個教練給你」並用對話氣泡呈現。

這比「歡迎詞 + 探索頁」高 10 倍轉化。

4. PWA + Web Push 完整實作

  • PWA:玩家裝到 iOS / Android 首頁變類原生 App,不用上 App Store 審核
  • Web Push 推播:完整的服務端 + 客戶端推播鏈路(玩家收到推播 1 秒內跳對應頁面)
  • 快取策略:保證 RLS 跨用戶資料不污染、版本更新即時生效

這套 PWA 上 iOS / Android 首頁可加為類原生 App,不用上架 store 就能做完整推播。

5. 3 種 Storage Bucket + 自動清孤兒檔

Bucket隱私寫入者讀取者
practice-media私有球友 owner球友 owner
lesson-media私有教練 / 學員該堂課的教練 + 學員
review-photos公開評論者任何人

配合每日自動清理孤兒檔與資料庫觸發器同步——長期下來不會留垃圾檔吃 storage cost。

6. PAYUNi 訂閱(約定授權 / 幕後扣款)

會員訂閱跑 PAYUNi:

  • payuni-create-subscription 建立訂閱(前端跳轉到 PAYUNi)
  • payuni-cancel-subscription 用戶取消
  • payuni-notify server-to-server webhook(verify_jwt = false,因為 PAYUNi 不會帶 Supabase JWT)

所有加密邏輯走 _shared/payuni.ts 共用模組。

練球 / 比賽紀錄:連擊計數、媒體上傳、7 軸技術雷達自動更新
練球 / 比賽紀錄:連擊計數、媒體上傳、7 軸技術雷達自動更新

我們做事的方式

網球愛客是「新創品牌 + 大野心 + 中型預算」的客戶——這種客戶最怕「需求又改一次」這種無底洞。

我們的方式:

  1. 產品定位先收斂:第一版 DESIGN_BRIEF 詳列了「保留 / 加入 / 不做」三類設計元素,先把「網球元素如何抽象化」「Logo 用縫線曲線而非實物球」這種審美決策定案,避免後續一遍遍改視覺
  2. 5 步驟 onboarding 是後加的:上線後發現「用戶進來但不知道要做什麼」,我們提案把 5 步驟導引(含 AI 推薦)做進 v2,效果顯著
  3. DESIGN_BRIEF v2(Phase 2):拿到 v1 上線後的真實數據,做 brief 更新——這跟「等客戶提需求」相反,是我們主動提改進方向
季積分排行榜:Podium、季賽追蹤、成就徽章——個人生涯大滿貫敘事的視覺化
季積分排行榜:Podium、季賽追蹤、成就徽章——個人生涯大滿貫敘事的視覺化

為什麼這案值得寫

網球愛客證明的不是「我們會做 PWA」——是「我們會把客戶模糊的願景翻譯成可實作的產品骨架」。

「玩家從新手到生涯大滿貫」這句話沒辦法 IF/ELSE。我們做的是:

  • 把這句話拆成 5 個 Tab、4 個角色、5 步驟導引、7 軸雷達、季賽積分、成就徽章
  • 把它做成 PWA(玩家裝在手機上像 App,不用 store 審核)
  • 把它接上訂閱(生意模型可成立)
  • 把它做出 Web Push(推播是 community-driven 產品的命脈)

這套思維可 transfer 到其他「新興品牌+數據敘事+社群驅動」的客戶。

認識熊董 →

In the Client's Words· In the client's words

網球這個 vertical 全球有 Tennis Hub、Playtomic 這類玩家——但他們做的都是「揪球 + 訂場」這件事。我要的是「玩家從新手到個人生涯大滿貫整段旅程」的數據敘事,那就沒人做。川輝懂這個區別,所以從第一天就把『個人生涯大滿貫』『7 軸技術雷達』『季賽積分排行』『成就徽章』這些長期成長元素設計進產品骨架——不是把現有 App 抄一遍。

網球愛客 Tenniac
Bear's note

The judgement behind this one.

Behind every project there is a call I made — usually the trade-off between "this road is worth taking" and "this one is not". This case study describes the outcome, but the judgement behind it is worth more than the outcome.

If you are thinking "what would I do if this were my company" — that is exactly what the free 30-minute diagnostic is for. I take the key judgement from this case, apply it to your business, and give you a route map of your own.

🐻
Johnny Yang
Founder, Brightstream Technology · led this engagement
System screenshots

What it looks like.

行銷首頁 /welcome:用數據打磨每一球 + 4 大功能介紹(AI 推薦 / 7 軸雷達 / 媒合滑卡 / 個人生涯大滿貫)

行銷首頁 /welcome:用數據打磨每一球 + 4 大功能介紹(AI 推薦 / 7 軸雷達 / 媒合滑卡 / 個人生涯大滿貫)

教練詳情頁:教練資歷 / 評分 / 課程列表 / 評論——球友可從這頁直接預約

教練詳情頁:教練資歷 / 評分 / 課程列表 / 評論——球友可從這頁直接預約

練球 / 比賽紀錄:連擊計數、媒體上傳、7 軸技術雷達自動更新

練球 / 比賽紀錄:連擊計數、媒體上傳、7 軸技術雷達自動更新

季積分排行榜:Podium、季賽追蹤、成就徽章——個人生涯大滿貫敘事的視覺化

季積分排行榜:Podium、季賽追蹤、成就徽章——個人生涯大滿貫敘事的視覺化

Mobile 畫面:PWA 可加首頁變類原生 App,5 個底部 Tab + Web Push 推播

Mobile 畫面:PWA 可加首頁變類原生 App,5 個底部 Tab + Web Push 推播

Your Case Could Be Next· Next case study

Want to be on this list?
It starts with a free diagnostic.