一個所有人都能用的 Gong cha 官網。

研究由四個目標框定：理解使用者來做什麼、評估既有體驗、讓網站對齊 WCAG 2.0、提升搜尋排名。五場一對一訪談（領域專家、視障使用者、加盟主與奶茶消費者）與 39 份問卷，收斂成五種使用者角色 —— 每一項發現都以 NVDA 螢幕報讀器實際測試、用 SEMrush 持續追蹤。

視障使用者希望用鍵盤與螢幕報讀器獨立瀏覽、下單。他們遇到的四個阻礙，形塑了整個改版：

• 輪播 banner 在報讀器唸完之前就切換，鍵盤也無法切到下一張或最後一張。
• 門市地圖的下拉篩選器完全無法用鍵盤操作。
• 點餐會無預警跳轉到第三方外送網站 —— 沒有提示、也回不來。
• 色彩對比不足，色盲使用者難以辨識。

茶飲愛好者想查營業時間、季節新品、集點與營養／過敏原資訊 —— 但過去一杯飲料只有名字和照片。潛在加盟主要的是透明的成本與流程；隱藏費用與單薄的支援是他們最深的顧慮。活動／婚禮策劃人需要比較外燴方案，卻看不出每個方案包含什麼。求職者想找附近門市的職缺與清楚的應徵流程。

研究的整理直接變成了架構。光是加盟專區，從加盟主與專家訪談萃取出的九個決策因素（品牌知名度、財務門檻、教育訓練等），就透過親和圖對映成九個頁面 —— 從產業介紹到申請表單。放大到全站，同樣的方法把六種訪客目標 —— 品牌、菜單、門市、加盟、活動、職涯 —— 組織成 50+ 頁的網站地圖。

首頁 —— 輪播 banner 在報讀器唸完前就切換、把鍵盤使用者困住，而 85% 的造訪來自行動裝置。解法：行動優先 —— 移除輪播、把資訊放進向下捲動的版面，並全面落實色彩對比、可縮放字級、替代文字、有清楚錯誤訊息的表單，以及有字幕的影音。

品牌頁 —— Gong cha 在美國市場的品牌共鳴不足，識別中的亞洲文化元素加深了文化隔閡。解法：以完整的品牌頁介紹品牌故事、歷史、全球布局、識別系統與承諾，並附上聯絡表單。

菜單 —— 圖片上的文字螢幕報讀器讀不到；初次接觸手搖飲的顧客也不知道怎麼點。解法：banner 改用可被報讀的網頁文字與描述性 metatext；補上熱量、成分與過敏原資訊；把店內點餐流程視覺化成一步一步的「How to Order」指南。

門市 —— 「Gong cha near me」是最熱門的搜尋字之一，而同一頁要服務四種人：查營業時間與外送的茶飲客、用地圖評估店距的加盟主、詢問外燴的策劃人、找職缺的求職者。資訊密度的代價，是地圖的下拉選單與篩選器讓螢幕報讀器寸步難行。解法：為每家店建立含照片與完整資訊的獨立頁面，並精簡或移除部分篩選器。

加盟 —— 九頁的架構直接來自上方的親和圖；內容深度則來自田野：與 Gong cha 活動經理的專家訪談，讓我們理解婚禮、學校與募款活動實際怎麼訂外燴，因此設計了外燴預約表單，讓門市人員提早掌握活動需求、提升成單率。

九個決策因素中，財務門檻最受重視 —— 所以加盟成本改用透明的逐項表格呈現，而不是一份 PDF 手冊。

無障礙的表單只完成了一半 —— 每一次送出，都要有清楚的確認回饋。

改版上線了 50+ 個 SEO 優化的無障礙頁面。根據 Google Analytics 與 SEMrush：工作階段成長 251.69%、新使用者成長 280.51%、跳出率下降 87.64%、頁面瀏覽量提升 44.69%；點擊率從 1.28% 升至 2.80%（+119%）；搜尋能見度由 19.62% 躍升至 44.40%；光是行動響應式體驗就帶來 34% 的流量成長。

無障礙從口號變成數字：SEMrush 分數從 56% 提升到 88%，過程中修正超過 150 個違規項目 —— 遠高於 75% 的門檻（在愛爾蘭等市場，低於此線的網站有法律風險）。

這一頁自己也遵守同樣的規則 —— 語意化標題、每張圖都有替代文字，以及可用鍵盤操作的圖片檢視器。