Bryton Rider Series

消費性電子產品 | 使用者介面/體驗設計 | 建立設計系統

關於產品線 "Rider"系列

智慧自行車錶為Bryton的主要產品。2019年發表的"Rider 750" 是個為 Bryton 帶來重大轉捩點的一個產品，也是第一個開發週期完整的產品專案。具有競爭力的功能組合、成功的價格策略以及品牌首次全球共時推廣的行銷操作。這一系列舉措將公司在2021至2022年達到亮眼的營收，同時也為 Bryton 創造了在興櫃股市上市的機會。在Rider 750之後，Bryton再向上擴展市場，隔年以S系列為名發表兩款主打為高階訓練族群所設計的智慧型自行車錶 - Rider S500 & S800，主要以螢幕尺寸及顯示特性做為區隔。 後續至今年，推出了一款以騎遊市場為主的Rider 750 SE。

專案背景

在起初，Bryton 的產品開發方式和流程與一般業界成熟的開發流程有很大的差距。2019年推出Rider 750前，軟體的介面及功能流程都是由軟體工程部門直接處理。

品牌初期，主要產品為低階、功能少的按鍵機種自然還撐得過去，但當應用於功能複雜的高階觸控裝置時，問題便一一浮現。當時負責產品行銷的我對產品介面設計工作一直充滿著好奇心。
在Rider 860首次測試版本發佈後，當時負責撰寫、行銷賣點、編寫教學影片並包裝形象素材圖的我以行銷的角度繪製了示意圖並提出了一些建議。在一次的會議中，老闆向我提出「請我參與產品團隊開發並給予協助」的提議。這個契機讓我後續直接接下了新產品Rider 750的介面及流程規劃工作，進而踏上了轉職的旅程。

專案特點/挑戰

消費性電子產品與移動裝置應用軟件設計的最大不同處在於前者通常需考量產品特定的應用做選擇。舉例來說，如必須符合省電、耐用、在陽光下長時間曝曬等需求，通常在螢幕顯示能力就會面臨妥協。而這便是在介面設計時常面臨的挑戰，很多情況下因為限制而需有在用色、元件尺寸等地方有更多的考量。 

另一方面，大部分情況下在開發初期還沒有面板能夠搭配設計使用時，仰賴的是產品設計師過去專案實作經驗的累積做出第一版設計決策，以及思考如何建立架構應對可能的變因，在後續的工作流程中快速找到解決方式。

在硬體規格的限制，找到讓每一塊面板發揮最好顯示效果的密碼，是在Bryton這份產品設計工作中具挑戰且有趣的任務。

團隊, 專案配置, 角色及責任

■ 產品規劃團隊 - 產品主管1位、產品經理1位、產品設計師1位(Me)、工程測試1位
■ 工程開發團隊 - 工程師共10位，視專案需求狀況調度負責人員

在每一個專案中，我的工作流程為接收產品經理的規格及產品定位 -> 釐清用戶及組織內部等多方需求 -> 設計調研 -> 將規格視覺化並進行設計提案 -> 規劃功能流程 -> 設計交付工程開發 -> 測試 -> 上市 -> 搜集市場需求並進行迭代提案。

負責的產品
Rider 750
Bryton首台成功的彩色觸控機種。也是市場首台導入Google語音搜尋服務輔助導航功能旅程的產品
Rider S500 / S800
繼Rider750的成功後，Bryton推出新系列「S」主打進階訓練族群的機種。並從S800推出「Group Ride」團騎追蹤，結合原有的語音辨識主打市場第一且唯一能透過語音即時傳送訊息的機種。
Rider 750 SE
主打騎遊族群的Rider 750特別版，根據用戶研究調整資訊架構、導入嶄新騎乘操作流程(Quick Status)，在市場得到良好的用戶回饋。

What I've done

透過實作經驗搭配自我進修課程，我隨著專案的演進一同成長。我嘗試將所學帶進團隊及開發流程，日常除了釐清用戶需求外，也透過與協作工程師夥伴的討論學習以工程師的思維角度做出發多方思考撰寫規格文件，增加交付的易讀及一致性以提升文件品質，為Bryton開發團隊建立一套更完善架構的開發流程，提高效率並降低出錯。

Rider 750

整合組織內部意見，以品牌旗艦機為目標打造Rider產品線中第一個彩色觸控產品。從資訊架構設計著手，縮短用戶旅程階層，在操作流程中運用上滑手勢指令，讓隨時回到首頁快速進行任務旅程，有效減少操作步驟，帶來更加安全的騎乘體驗。
從用戶訪談內容中發現問題，我們以假設為起頭進行設計，提供輕點騎乘資訊錶面顯示快捷資訊狀態頁功能。

Rider S500/S800

根據專案螢幕特殊顯示特性進行設計並建立設計系統
為Rider系列產品打造一致的設計系統，用一致的元件提升開發效率以及設計品質，也降低開發協作溝通成本。
優化Quick Status快捷資訊狀態頁顯示體驗
開發Group Ride語音訊息功能，透過易用性測試，再次優化語音導航及訊息傳遞的用戶體驗

Rider 750 SE

已騎遊市場為主打的Rider 750 Special Edition，我們產品團隊也決定在這個新定位族群的機種嘗試導入新操作流程，取得觀察使用者回饋。

根據產品定位，與特定目標用戶訪談，重組資訊架構，帶來更符合目標騎遊族群使用習慣的操作體驗。
根據產品做規格升級的需求及市場反應進行迭代設計，與競品做出區隔推出嶄新的Quick Status快捷資訊狀態頁功能。
根據新增市場需求新增提醒功能

調查分析&問題定義

Rider系列的功能迭代規劃，除了透過海外各區代理商回饋、客服問題及網路評論外，我們也根據各類型賽事搭配行銷活動發送問卷調查，收集不同單車族群的想法。也針對特定對象做1 on 1訪談，透過信件或視訊電話與各國配合的測試員、評測員做聯繫，進一步釐清文字背後的意義，對症下藥進行設計發想以解決使用者痛點。

從行銷設計正式跨到產品設計後，我與產品經理也持續的會參與行銷活動讓我們能貼近使用者做互動。

除了問卷外能透過現場活動任務、輕鬆的對談方式直接觀察並瞭解使用者對於新功能/特定流程的想法。事後對於進行產品規劃或是功能細節設計的工作，這些對我們來說都是很寶貴的資料。

流程 & 設計細節規格撰寫

與產品團隊共同剖析問題後，我負責進行功能流程設計並做統整資訊，撰寫設計細部規格的定義文件。在這個工作流程裡，我以團隊熟悉的Google表單的來做整理。並隨著產品開發的推進、持續的階段性會議決策維護更新，保持我們產品團隊與各協作/關係單位來回溝通的結論的正確性。

撰寫規格文件是我很看重的一項工作程序。規格文件擁有良好脈絡設計及瀏覽體驗，能夠協助工程團隊有效率的進行開發並縮短溝通成本。透過持續與合作工程師的討論，我們一同為產品開發流程留下了軌跡，幫助公司完整保留的脈絡討論協助團隊延續產品系統進行研發。

為實際顯示把關

在硬體規格的限制，找到讓每一塊面板發揮最好顯示效果的密碼，是在Bryton這份產品設計工作中具挑戰且有趣的任務。在個專案間，我常需要針對各機種不同顯示特性的面板做顯色測試，對照競品做顏色校調。

在S系列開發時期，S800及S500分別使用了兩款不同的螢幕特性S500依舊採用TFT螢幕。S800為了在顯示上做出區隔而使用了不同的螢幕顯示技術。S800使用3.4吋MIP(Memory-In-Pixel)半穿透式螢幕，注重低功耗來達到更高的電池續航目標，而這片面板的顯示特性也帶給了我一項挑戰。Memory-In-Pixel螢幕通常都有色彩深度限制，這是因為MIP螢幕設計的目標之一就是降低功耗，而較低的色彩深度可以幫助目標的實現。

初期目標
使用3位元的色彩深度來進行設計，相較6位元能夠有效降低功耗及提升螢幕刷新率。

開始著手設計前，我與硬體工程師的合作先進行了基本的顯示測試，了解面板的實際顯示狀況，包括背光的開啟後的顯示狀況，我們放置了不同細節的圖片上螢幕做測試也針對色溫進行調整。

我如何開始設計

在確認使用6位元進行設計後，表示每個顏色通道可以有64種不同的取值。我使用RGB顏色代碼透過幾個步驟來選擇適合MIP螢幕的64種顏色：

分配顏色

為了生成64種不同的顏色，我從三個顏色通道由十進制0-255都分成四段，找到一種均勻的色彩分佈。

紅色通道(R)：0, 85, 170, 255
綠色通道(G)：0, 85, 170, 255
藍色通道(B)：0, 85, 170, 255

創建色彩定義表

將色彩通道等分得到四段數值後，我將他們排列組合，並將這些組合後的色碼儲存於設計軟體中的顏色庫中，以便後續應用在頁面設計中。

測試和校正

由於根據過往以TFT螢幕設計的經驗，通常螢幕實際顯示還是會與電腦顯示有落差。而尤其MIP螢幕色彩深度又更加有限，我將定義好的色表存成圖片實際在MIP螢幕上測試顏色顯示，確保它們看起來如預期，或嘗試找到差異規則，以幫助我後續設計對於顏色使用能有更高的掌握度。

紅色通道(R)：0, 110, 180, 255
綠色通道(G)：0, 110, 180, 255
藍色通道(B)：0, 110, 180, 255

透過實際測試，發現深色的色彩似乎階層較短，顯示的變化不如預期。於是我將原先等分的值做微調，將第二段色從85調整至110，第三段色從170調整至180來達到最佳的階段顯示成果。

應用顏色

我將色碼進行微調，它們應用對照到目前的Rider設計系統定義，並著手將顏色應用到我的設計中。

透過後續測試發現，設計中需不斷的考量MIP螢幕的特性及穩定性，選擇具有足夠對比度和可讀性的顏色非常重要，以確保設計在MIP螢幕上有效的顯示。

設計系統

身為Bryton第一個UX/產品設計師，我為主產品線Rider系列彩色機種定義了一組設計系統。除了讓產品系統有一致性並帶給用戶良好的體驗，建立系統有效地減少了我與工程團隊間的溝通成本，讓團隊間能更有效率的進行溝通也減少出錯。

我透過團隊熟悉使用的Google表單來做為資料索引，將上傳到Zeplin的元件樣式做命名，並使用連結串連兩邊的交付。

整理裝置支援數據功能，並標示出數據值顯示格式及於各尺寸宮格的顯示狀況。幫助工程師清楚了解架構。

多語字串管理

在確保卓越的用戶體驗中，良好的UX文字扮演了不可或缺的角色。Bryton的銷售持續於國際市場成長，然而多語字串的有效管理和呈現一直都是我們開發團隊的主要挑戰。從字串的最初生成，到確保各國翻譯貼合語境、字數合適，並完美呈現在產品介面上，這是一個複雜而持久的工作流程，需要多個部門的緊密合作。當我接手產品設計的責任時，我深入了解了多語字串流程，從源頭開始思考如何改進，積極與相關團隊成員合作，致力於問題解決和流程優化，以確保後續工作流程更加順暢，同時大幅降低錯誤率。

透過表單分頁做階層式分類並從StringID建立命名邏輯、提供索引幫助協作夥伴及代理商能快速的找到對應頁面以了解辨識字串使用位置。於表單中設有檢查機制以快速檢查內容是否符合限制。

成果與學習

Rider系列產品是伴隨著我成長，從菜鳥UI設計師在過程中不停跌倒又站起，一步步邁向能具成熟思維的UX/產品設計師的重要旅程，而我也從一個個的任務中更加確認了自己對產品設計這份工作的熱情。

真正的設計不僅只是好看而已，是能幫助用戶流暢的達成一系列的任務

培養模塊設計思維，從需求中搭建一套UX架構，並深度考量各種情境下的衍生樣式，打造體驗策略。

換位思考的技巧，用正確的語言與利益關係人進行溝通

隨著與跨部門合作培養出更綜觀的眼界，從起初認為視覺呈現勝過一切的思考模式，專注於解決用戶問題，了解「好用」的重要性 ; 從面對問題時專注於解決單一問題的思考模式，到能具有模組化思維，做出更周全、能被延續使用的設計決策。我也學到如何在時間、資源、各項限制跟目標間取得最佳平衡點以有效的進行「產品設計」，排列任務優先級的重要性以及如何與協作團隊保持良好的溝通狀態，讓專案順利的運行。