UI/UX 設計
設計元件庫
網頁設計
讓使用者能夠更直觀地輸入資料,並透過視覺化方式快速分析數據。
01|專案目標
打造一款 no-code 的 SaaS 工具,透過簡化數據輸入、管理流程,幫助使用者更直觀地整理與視覺化資料,並進一步進行分析。
在團隊中負責產品 UI 與 UX 的設計產出,並參與需求分析與討論,與工程師協作完成產品。
產品介面與操作上與大部分使用者熟悉的傳統試算表工具略有不同,需要確保使用體驗直覺且可以快速上手。
04|專案成果
產出設計元件庫提高團隊協作效率,最終上線 Beta 版,以利後續從使用者身上蒐集更多有幫助的回饋。
Ottava 是一款專為數據管理與分析設計的 SaaS 軟體,結合傳統 Excel 試算表的工作流程,同時簡化圖表製作與數據分析,讓使用者能更有效率的管理數據並視覺化資訊。
與大多數試算表工具需要先將表格格式轉換後才能進行深入分析不同,Ottava 讓使用者在輸入數據後即可直接探索並從中獲取洞見,減少繁瑣的步驟,簡化分析流程,帶來更順暢、高效的使用體驗。
在進行數據處理與分析時,「樞紐分析(Pivoting)」與「反樞紐分析(Un-pivoting)」是將原始數據轉化為有價值洞見的關鍵操作。這些轉換能將資料以不同面向呈現,方便使用者對其進行分析與解讀。
其中,樞紐分析能夠幫助使用者從大量數據中提取關鍵資訊,同時存在以下特點:
能夠快速將大量數據根據不同維度進行匯總。
能夠加強數據的易讀性,幫助使用者發現潛在的趨勢或模式。
使用者可以根據需求調整,產生不同圖表,進行比較或深入探索。
然而,我們發現目前的試算表工具雖然功能強大,但在處理這些轉換時,普遍存在以下問題:
複雜的配置與設定
在轉換過程中,使用者往往需要設定字段、調整篩選條件,甚至寫額外的函式,才能產出需要的圖表。
缺乏動態調整能力
完成轉換後的 Pivot 表格通常是靜態的,如果要進一步調整數據,需要回到原始表單進行修改,然後再重新轉換,導致流程變多更容易出錯。
在此前提下,我們開始思考是否有方法讓使用者可以更直覺的完成這些操作,同時降低數據輸入時的錯誤率。
考量到樞紐分析表(Pivot Table)在數據分析中的價值,我們決定以此為核心,打造一款 讓使用者可以直接在已轉換的表格上輸入資料 的工具。幫助使用者更直覺地管理與分析數據,減少不必要的轉換步驟。
我在專案進行到一半時加入,負責優化產品的操作介面。加入後,我的首要任務是調整介面設計,使畫面區塊分佈更清晰,並確保不同頁面的設計風格一致,使整體產品具有統一的視覺基調。
在初期版本的內部測試中,我們發現了一個問題:部分使用者對樞紐分析的概念不夠熟悉,導致他們習慣以 Excel 的操作方式來使用 Ottava,進而對介面感到困惑,甚至忽略了一些關鍵功能。
基於這幾點,我們又找了幾位不同背景的夥伴協助測試,包括有無 Excel 使用經驗,過去操作時的使用程度,以及是否有操作過 Pivot Table 功能等等,希望透過更多研究蒐集使用者對於產品的看法以及對操作的理解程度。
最終根據測試結果,我們決定:
保留接近傳統表單的操作介面,並精簡不必要的 UI 元素,讓使用者更容易上手。
針對特定編輯情境提供更直覺的解決方案,未來會根據更多數據進行迭代優化。
加入簡易的 Onboarding Guide,提供使用範本與引導,幫助使用者更快理解產品概念與操作方式。
我也為團隊建立了一套設計規範以及元件庫,以確保產品維持統一的風格,並提升後續版本更新時的效率。
最終產品上線 Beta 版本,蒐集使用者回饋同時持續迭代,以下是關於它的一些介紹。
Ottava 讓使用者從數據輸入階段便能直接處理樞紐數據,無需繁瑣轉換,即可快速獲取有價值的發現。
Ottava 能夠呈現即時圖表變化,使用者也可以透過簡單的操作查看每筆資料間的關係。
依據選取資料的不同,也會生成不同的圖表。
使用者可獨立存取並調整生成的圖表,以獲得更深入的分析。
我們針對新加入的使用者提供參考範本和簡易的教學,幫助加速理解操作以及整體概念。
Ottava 支援多位使用者共同編輯,並允許不同使用者獨立儲存個人專屬的圖表,提升數據管理的靈活性與效率。
Ottava 這項專案在時程與內容上對我來說都是一大挑戰。我學到了如何在有限的資源下,最大化價值回饋並有效反映到產品上,但這同時也是我認為仍可精進的部分。此外,在設計過程中,我更加意識到思考方式的重要性:需要更深入考量產品決策背後的脈絡,確保設計不僅僅停留在問題的表層,而是真正能夠解決使用者的問題。