關於 Web:Bit

Web:Bit 是一款程式教育 low-code 平台,主要是面向國中小學生資訊科技課程,以視覺化程式積木的方式編輯程式。老師能夠透過 Web:Bit 程式積木平台教學生程式邏輯,將程式部署至 Web:Bit 開發板中,做出燈控、溫度感測等等專題應用。致力於讓學生以低門檻的方式學習物聯網。

專案背景

Web:Bit 產品包含 low-code 程式編輯平台、Web:Bit 開發板。第一次使用前,必須透過平台對開發板進行初始化設定 ( 韌體更新、Wi-Fi 設定 ),讓裝置具備連網及部署功能。

而團隊發現到使用者在這段流程中失敗率高,導致線上行銷轉換效率差等等問題,因此便主動提案,著手進行迭代。

團隊

我的職責

Product Designer

  • 主導 2 場使用者訪談

  • 制定產品策略

  • 重新規劃使用流程,經過 3 次版本迭代

  • UI UX 設計

  • 2 次易用性測試與修正

成員

  • Product Designer ( Me )

  • Developer x 3

  • PM x 1

  • Visual Designer x 1

  • BD x 4

主要成果

問題

  1. 使用者操作初始化設定失敗率高、花費時間長,即便查看教學手冊也無法順利完成,導致放棄轉而使用其它競品。

  2. 仰賴業務、客服、經銷商直接教學,導致使用者地理位置集中線上行銷轉換效率差

  3. 使用者 ( 學生 ) 對設定過程感到乏味,進而對產品使用失去興趣。

挑戰 & 限制

01 產品狀態 & 說服團隊

Web:bit 正處在產品生命週期的成熟期,作為產品設計師必須說服團隊,投入相當的資源與開發時間,解決產品問題的同時也能做出提升品牌強度,為公司帶來更大的商業價值。

02 設計債

Web:Bit 含有龐大設計債,包含設計樣式不統一、元件混用、風格不適合受眾等等問題。為了節省後續開發時間,必須同步調整設計系統。

03 技術限制

Web:Bit Onboarding 為透過軟體操控硬體設定,受限於韌體底層邏輯限制。設計使用流程時,需同時思考多項方案,避開技術限制。

研究

01 現場觀察 & 訪談

我評估團隊對於問題的資訊不夠充足,因此參加 2 場教師研習,進行現場觀察與訪談。

  1. 游擊訪談、問卷

  2. 統整問題

  3. 歸納問題數量、等級

  4. 分析問題

02 使用者分析

User - 老師

希望學生能夠順暢地完成設定,快速進入課程。

  • 完成率:學生是否容易誤觸?能不能全班都完成?

  • 時間:會不會佔用到課程時間?

  • 教學:如何跟學生解釋操作

User - 學生

  • 對初始化流程過於枯燥乏味,學習興趣低。

  • 場景多在電腦教室,含有許多外在干擾因素,影響對產品的專注度,進而降低興趣。

Team - 業務 / 客服 / 經銷商

  • 希望客戶發生問題時,能夠自行解決。

  • 客戶詢問時,能夠很好的引導。

03 定義目標

產品商業策略:品牌差異化

分析了產品現狀,由於 Web:Bit 已經達到生命週期的「成熟期」,不能只單純解決使用者的問題,更重要的是要做出「品牌差異化」,以提升產品競爭力及保持市場占比。

不只是初始化設定,而是設計一段吸引人的 Onboarding 流程,引發學生學習興趣

功能需求 & 成功指標

針對前期研究、現狀分析、產品目標,我訂出了功能需求以及成果指標,供後續設計依循方向。

設計探索

根據產品 Onboarding 流程中的資訊功能種類、使用頻率、易讀性,規劃 UI 資訊架構,並透過初版 Wireframe 與團隊溝通。

資訊架構規劃

問題

過程中發現介面中的規格資訊對於使用者來說難以理解,如:

  • 使用者很容易會誤會,當下操作的 Wi-Fi 設定,是電腦還是開發板?

  • 雖然已用不同顏色按鈕區隔,但使用者思考時間仍過久,找不到目標。

設計策略

  1. 擬物化圖像:引導使用者對應軟硬體。

  2. 使用教學:當使用者不知如何操作時,可點擊快速查看。

  3. 設計元件層級:將元件拆分為資訊功能,採用不同的樣式區隔,引導使用者做出選擇。

User-Flow

問題

由於初始化設定為透過軟體操控硬體,受到大量韌體底層技術限制,無法實現理想的使用流程。

  • 韌體更新後開發板自動重新開機,USB 連線中斷。

  • 開發板晶片型號不同,無法採用一致的操作流程。

設計策略

  1. 將使用者依情境分群

  2. 分析發生頻率、路徑、觀感

  3. 取捨出感受度最佳的流程設計

關於 Web:Bit

Web:Bit 是一款程式教育 low-code 平台,主要是面向國中小學生資訊科技課程,以視覺化程式積木的方式編輯程式。老師能夠透過 Web:Bit 程式積木平台教學生程式邏輯,將程式部署至 Web:Bit 開發板中,做出燈控、溫度感測等等專題應用。致力於讓學生以低門檻的方式學習物聯網。

專案背景

Web:Bit 產品包含 low-code 程式編輯平台、Web:Bit 開發板。第一次使用前,必須透過平台對開發板進行初始化設定 ( 韌體更新、Wi-Fi 設定 ),讓裝置具備連網及部署功能。

而團隊發現到使用者在這段流程中失敗率高,導致線上行銷轉換效率差等等問題,因此便主動提案,著手進行迭代。

團隊

我的職責

Product Designer

  • 主導 2 場使用者訪談

  • 制定產品策略

  • 重新規劃使用流程,經過 3 次版本迭代

  • UI UX 設計

  • 2 次易用性測試與修正

成員

  • Product Designer ( Me )

  • Developer x 3

  • PM x 1

  • Visual Designer x 1

  • BD x 4

主要成果

問題

  1. 使用者操作初始化設定失敗率高、花費時間長,即便查看教學手冊也無法順利完成,導致放棄轉而使用其它競品。

  2. 仰賴業務、客服、經銷商直接教學,導致使用者地理位置集中線上行銷轉換效率差

  3. 使用者 ( 學生 ) 對設定過程感到乏味,進而對產品使用失去興趣。

挑戰 & 限制

01 產品狀態 & 說服團隊

Web:bit 正處在產品生命週期的成熟期,作為產品設計師必須說服團隊,投入相當的資源與開發時間,解決產品問題的同時也能做出提升品牌強度,為公司帶來更大的商業價值。

02 設計債

Web:Bit 含有龐大設計債,包含設計樣式不統一、元件混用、風格不適合受眾等等問題。為了節省後續開發時間,必須同步調整設計系統。

03 技術限制

Web:Bit Onboarding 為透過軟體操控硬體設定,受限於韌體底層邏輯限制。設計使用流程時,需同時思考多項方案,避開技術限制。

研究

01 現場觀察 & 訪談

我評估團隊對於問題的資訊不夠充足,因此參加 2 場教師研習,進行現場觀察與訪談。

  1. 游擊訪談、問卷

  2. 統整問題

  3. 歸納問題數量、等級

  4. 分析問題

02 使用者分析

User - 老師

希望學生能夠順暢地完成設定,快速進入課程。

  • 完成率:學生是否容易誤觸?能不能全班都完成?

  • 時間:會不會佔用到課程時間?

  • 教學:如何跟學生解釋操作

User - 學生

  • 對初始化流程過於枯燥乏味,學習興趣低。

  • 場景多在電腦教室,含有許多外在干擾因素,影響對產品的專注度,進而降低興趣。

Team - 業務 / 客服 / 經銷商

  • 希望客戶發生問題時,能夠自行解決。

  • 客戶詢問時,能夠很好的引導。

03 定義目標

產品商業策略:品牌差異化

分析了產品現狀,由於 Web:Bit 已經達到生命週期的「成熟期」,不能只單純解決使用者的問題,更重要的是要做出「品牌差異化」,以提升產品競爭力及保持市場占比。

不只是初始化設定,而是設計一段吸引人的 Onboarding 流程,引發學生學習興趣

功能需求 & 成功指標

針對前期研究、現狀分析、產品目標,我訂出了功能需求以及成果指標,供後續設計依循方向。

設計探索

根據產品 Onboarding 流程中的資訊功能種類、使用頻率、易讀性,規劃 UI 資訊架構,並透過初版 Wireframe 與團隊溝通。

資訊架構規劃

問題

過程中發現介面中的規格資訊對於使用者來說難以理解,如:

  • 使用者很容易會誤會,當下操作的 Wi-Fi 設定,是電腦還是開發板?

  • 雖然已用不同顏色按鈕區隔,但使用者思考時間仍過久,找不到目標。

設計策略

  1. 擬物化圖像:引導使用者對應軟硬體。

  2. 使用教學:當使用者不知如何操作時,可點擊快速查看。

  3. 設計元件層級:將元件拆分為資訊功能,採用不同的樣式區隔,引導使用者做出選擇。

User-Flow

問題

由於初始化設定為透過軟體操控硬體,受到大量韌體底層技術限制,無法實現理想的使用流程。

  • 韌體更新後開發板自動重新開機,USB 連線中斷。

  • 開發板晶片型號不同,無法採用一致的操作流程。

設計策略

  1. 將使用者依情境分群

  2. 分析發生頻率、路徑、觀感

  3. 取捨出感受度最佳的流程設計

關於 Web:Bit

Web:Bit 是一款程式教育 low-code 平台,主要是面向國中小學生資訊科技課程,以視覺化程式積木的方式編輯程式。老師能夠透過 Web:Bit 程式積木平台教學生程式邏輯,將程式部署至 Web:Bit 開發板中,做出燈控、溫度感測等等專題應用。致力於讓學生以低門檻的方式學習物聯網。

專案背景

Web:Bit 產品包含 low-code 程式編輯平台、Web:Bit 開發板。第一次使用前,必須透過平台對開發板進行初始化設定 ( 韌體更新、Wi-Fi 設定 ),讓裝置具備連網及部署功能。

而團隊發現到使用者在這段流程中失敗率高,導致線上行銷轉換效率差等等問題,因此便主動提案,著手進行迭代。

團隊

我的職責

Product Designer

  • 主導 2 場使用者訪談

  • 制定產品策略

  • 重新規劃使用流程,經過 3 次版本迭代

  • UI UX 設計

  • 2 次易用性測試與修正

成員

  • Product Designer ( Me )

  • Developer x 3

  • PM x 1

  • Visual Designer x 1

  • BD x 4

主要成果

問題

  1. 使用者操作初始化設定失敗率高、花費時間長,即便查看教學手冊也無法順利完成,導致放棄轉而使用其它競品。

  2. 仰賴業務、客服、經銷商直接教學,導致使用者地理位置集中線上行銷轉換效率差

  3. 使用者 ( 學生 ) 對設定過程感到乏味,進而對產品使用失去興趣。

挑戰 & 限制

01 產品狀態 & 說服團隊

Web:bit 正處在產品生命週期的成熟期,作為產品設計師必須說服團隊,投入相當的資源與開發時間,解決產品問題的同時也能做出提升品牌強度,為公司帶來更大的商業價值。

02 設計債

Web:Bit 含有龐大設計債,包含設計樣式不統一、元件混用、風格不適合受眾等等問題。為了節省後續開發時間,必須同步調整設計系統。

03 技術限制

Web:Bit Onboarding 為透過軟體操控硬體設定,受限於韌體底層邏輯限制。設計使用流程時,需同時思考多項方案,避開技術限制。

研究

01 現場觀察 & 訪談

我評估團隊對於問題的資訊不夠充足,因此參加 2 場教師研習,進行現場觀察與訪談。

  1. 游擊訪談、問卷

  2. 統整問題

  3. 歸納問題數量、等級

  4. 分析問題

02 使用者分析

User - 老師

希望學生能夠順暢地完成設定,快速進入課程。

  • 完成率:學生是否容易誤觸?能不能全班都完成?

  • 時間:會不會佔用到課程時間?

  • 教學:如何跟學生解釋操作

User - 學生

  • 對初始化流程過於枯燥乏味,學習興趣低。

  • 場景多在電腦教室,含有許多外在干擾因素,影響對產品的專注度,進而降低興趣。

Team - 業務 / 客服 / 經銷商

  • 希望客戶發生問題時,能夠自行解決。

  • 客戶詢問時,能夠很好的引導。

03 定義目標

產品商業策略:品牌差異化

分析了產品現狀,由於 Web:Bit 已經達到生命週期的「成熟期」,不能只單純解決使用者的問題,更重要的是要做出「品牌差異化」,以提升產品競爭力及保持市場占比。

不只是初始化設定,而是設計一段吸引人的 Onboarding 流程,引發學生學習興趣

功能需求 & 成功指標

針對前期研究、現狀分析、產品目標,我訂出了功能需求以及成果指標,供後續設計依循方向。

設計探索

根據產品 Onboarding 流程中的資訊功能種類、使用頻率、易讀性,規劃 UI 資訊架構,並透過初版 Wireframe 與團隊溝通。

資訊架構規劃

問題

過程中發現介面中的規格資訊對於使用者來說難以理解,如:

  • 使用者很容易會誤會,當下操作的 Wi-Fi 設定,是電腦還是開發板?

  • 雖然已用不同顏色按鈕區隔,但使用者思考時間仍過久,找不到目標。

設計策略

  1. 擬物化圖像:引導使用者對應軟硬體。

  2. 使用教學:當使用者不知如何操作時,可點擊快速查看。

  3. 設計元件層級:將元件拆分為資訊功能,採用不同的樣式區隔,引導使用者做出選擇。

User-Flow

問題

由於初始化設定為透過軟體操控硬體,受到大量韌體底層技術限制,無法實現理想的使用流程。

  • 韌體更新後開發板自動重新開機,USB 連線中斷。

  • 開發板晶片型號不同,無法採用一致的操作流程。

設計策略

  1. 將使用者依情境分群

  2. 分析發生頻率、路徑、觀感

  3. 取捨出感受度最佳的流程設計

最終設計 & 迭代

無負擔的 Wi-Fi 設定過程

考量使用者年齡層、學習力較低,採用步驟化線性流程,減少單一畫面任務,降低使用者當下操作的認知負荷。並搭配過度動畫,提升介面互動。

更生動的韌體更新過程

學生難以忍受 3 分鐘的更新等待時間,因此將更新 loading 設計為吉祥物角色賽跑、到達終點歡呼等情感化設計,增加與使用者互動性。

更直覺的選擇 USB 序列埠

問題

選擇 USB 序列埠時,若電腦同時連接多個 USB,使用者會無法做出決定。

設計策略

  1. 系統背景處理,省去操作步驟 → ❌

  2. 過濾不必要選項 → ❌

  3. 更改選項名稱 → ❌

  4. 提示引導視窗 → 🟢

受限於 Chrome 原生系統技術限制,1. 2. 3. 項設計方法無法實作,經過和工程師多次來回後,採用方法 4.,成功引導使用者。

設計關鍵字 & 設計系統

執行設計系統,訂出設計關鍵字:活潑的 / 互動的 / 能引發學習興趣的,並和視覺設計師、PM 合作,做了一系列吉祥物情境圖示,同時符合介面易用性、一致性及品牌意象。

UX Writing Guideline

Edge Cases

經過測試與正式上線後的使用者回饋,發現些許 edge case 導致使用錯誤。

我和前後端、韌體工程師合力盤點所有錯誤情境,包含系統錯誤、人為操作錯誤、介面引導錯誤,總計 11 個錯誤觸發點。再根據操作情境及工程邏輯,歸納為 6 種提示畫面。

成果 & 影響

這次的改動獲得了不錯的成果,包含減少操作時間 20 分鐘、使用者滿意度 80 分。

而商業價值的部分,因為產品性質無法將所有銷量提升歸功於這次的改動,因次我們更側重於質性的指標,包含使用者回饋、教學心得、購買意願等等訪談結果。

不僅解決使用上的問題,也減少了客服人員每月處理 3 件客服問題的成本。
我認為這是產品設計時的重點,不只要考慮使用者的使用問題,也要同時思考如何降低團隊內部的成本,帶來最大效益。

心得 & 反思

為了更提升商業成果,這項產品還有許多層面需要改善,包含「得知訊息 - 產生興趣」以及「初始化 - 願意持續使用」,這兩階段在使用者旅程中仍有斷點,未來需要調整。

而這次的專案雖然不是我主要負責的產品,但是由我發覺痛點並主動提案,帶來不錯的成果,對團隊有不錯的營運及商業價值。

我帶給團隊的...

  1. 將商業問題,轉換為設計方案,解決使用者問題。

  1. 與成員合作,透過反覆測試,找到最適合使用者的設計。

  1. 根據產品現狀,做出適合的產品決策,並讓團隊往相同目標前進。

幕後花絮

在開發過程中發現,工程師們對於 Figma 的使用以及設計系統的營運方式不太了解,因此做了一份給團隊工程師看的簡報,讓團隊協作更順利。

感謝觀看,希望你會喜歡這次的分享 👋

感謝觀看,
希望你會喜歡這次的分享 👋

09-77503340

asps135794@gmail.com

09-77503340

asps135794@gmail.com

09-77503340

asps135794@gmail.com