以原型開發方式實現的大規模 SNS 營運管理系統「TOYOTA Social Hub」
「TOYOTA Social Hub」是一套網頁應用程式,可集中管理多個部門、營運事務局與審核人員共同參與的豐田官方 SNS、PR 及電子報營運作業,涵蓋案件登錄、素材上傳、測試發佈、審核、發佈後檢查及成效分析。
小型開發團隊在確認實際業務流程的同時反覆進行原型開發,目標是打造一套介面,讓超過 200 位相關人員(截至 2026年08月21日)無需猶豫即可順利使用,同時兼顧複雜的審核流程與各媒體的限制。
專案概要
本專案由豐田 Conic Pro 股份有限公司擔任專案負責人,Liberogic 負責 UI/UX 設計與系統開發。
本系統可在單一平台上管理與發佈相關的複雜工作流程,包括案件登錄、發佈排程調整、素材上傳、測試發佈、多階段審核、發佈後檢查,以及成效分析與報告。
背景與課題
過去的營運方式中,SNS、PR 及電子報各自透過 Excel、電子郵件或口頭等方式進行發佈請求、確認與審核。
由於多位負責人、事務局與審核人員之間的電子郵件往來容易混亂,案件的進度也難以掌握,且修改與確認來回次數增多,因此成為一大課題。
此外,各 SNS 媒體在貼文格式、字數、圖片、影片及發佈時間等規範上皆有不同,因此除了單純登錄資訊外,還需要能正確掌握各媒體條件與審核狀態的機制。為此,我們比較並評估了多種實現方案,包括活用現有 SaaS,以及與業務管理系統進行 API 整合。
現代化的技術架構
前端採用 Next.js 與 Cloudflare Workers,後端、資料庫與身分驗證則使用 Supabase。
透過結合代管服務與無伺服器技術,我們在不過度擴大開發與營運團隊的前提下,打造出便於日後新增功能與調整營運方式的架構。
由小型團隊進行的原型導向開發
像 TSH 這類業務系統,若在開發前就將所有需求一次固定,可能會產生不符合實際營運的畫面與操作。
因此,我們選擇在整理業務流程的同時,於早期階段將畫面原型化,並透過相關人員的反覆確認與調整來推進開發。
我們並未組成大型開發團隊,而是由小型團隊橫跨設計、UI 與實作負責,讓決策與改善的循環保持短而快速。
我們並非單純地將既有業務原樣搬到畫面上,而是
- 目前自己應處理哪些案件
- 接下來應該進行哪些工作
- 等待誰的核准
- 哪個媒體的作業已完成
我們的目標是打造一目了然的架構,讓使用者能立即掌握上述資訊。
於單一 UI 中管理多重角色與媒體
TSH 由不同角色的使用者共用同一套系統,包括投稿委託人、外部事務局、營運事務局與總編輯等。
由於各角色所需的資訊與操作權限不同,我們設計為依角色切換顯示內容與可操作的範圍。
此外,系統可跨越 X、Facebook、Instagram、TikTok、LINE、PR 及電子報等多個媒體進行管理,同時支援各媒體專屬的輸入欄位與限制。
各案件皆可
素材提交 → 測試上架 → 事務局核准 → 投稿委託人核准 → 總編輯核准 → 雙重檢查 → 發佈 → 發佈後檢查 → 匯入報告
的進度流程,並可依媒體為單位確認作業的完成與未完成狀態。
符合現場運作的彈性審核與素材替換功能
TSH 的特色之一,是可使用暫用素材的審核流程。
即使正式素材尚未完成,也可以先使用暫用素材進行確認與審核。正式素材完成後再進行替換,原有的審核狀態也會保留,因此製作與審核可以同步進行。
一般的工作流程系統中,審核通過後若進行素材替換,可能需要重新提出申請。TSH 則以實際 SNS 運營中會發生的變更與替換為前提,設計出能保留紀錄並彈性更新的架構。
進度視覺化與警示通知
在儀表板與專案詳細畫面中,會依媒體分別顯示各專案的進度狀態。
將素材提交、測試上稿、審核、雙重檢查、發佈後檢查、報告提交等各階段視覺化,讓使用者一眼就能掌握目前進行到哪一步。
若輸入內容超出媒體規範,或有遺漏的處理項目,系統會透過畫面提示或電子郵件通知。
藉此,
- 負責專案的狀態確認
- 防止投稿素材與審核流程中的疏漏
- 減少確認與退回修改所造成的返工
- 降低相關人員之間的認知落差
提供支援。
從發布後的成效評估到整合管理
發布後,可在 TSH 上確認 SNS、PR 與電子報各自的投遞成效。
可在列表與詳細畫面中查看各 SNS 媒體的觸及、曝光與互動等數據,並可依專案名稱、發布時間、負責人、分類等條件篩選,也支援 CSV 匯出。
在報告詳細畫面中,可同時確認發布預覽與實際成效,有助於將策略成果運用於下一次的企劃與發布判斷。
成果
邁向供 200 名以上使用者運作的業務基礎平台
上線後,已有 200 名以上(截至 2026年08月21日)來自多個部門及營運事務局等相關人員使用本系統。
不同角色與負責業務的使用者,透過同一套系統共享案件的進度,將原本分散的資訊與溝通整合至單一業務系統中。
貼合實際營運流程的畫面架構,以及易於掌握負責作業的 UI 設計,也獲得營運負責人員的好評。
感謝 Toyota Konic Pro 股份有限公司的負責人員全程主導專案,並積極分享現場意見與營運經驗,我們得以將這些意見反映於開發過程中,順利推進專案。
此外,對方也以積極態度面對前瞻性的嘗試與新技術、新開發方法,為開發團隊營造了能夠靈活挑戰的環境。正是這些緊密的合作與反覆的摸索累積,才促成了目前易於使用的系統與順暢的營運,我們對此深感認同。