#UI/UX #RWD網頁 #程式設計

#UI/UX #RWD網頁 #程式設計

Plant Discovery

Plant Discovery

為學生設計的一個互動學習平台

過濾冗餘資訊

專注於關鍵內容以認識瀕危植物

為學生設計的一個互動學習平台

過濾冗餘資訊

專注於關鍵內容以認識瀕危植物

專案概覽

專案概覽

「Plant Discovery」是一個互動式學習網站,透過視覺化的設計,結合昆士蘭政府長期閒置的數據,

幫助用戶探索澳大利亞瀕危植物的相關資訊,提升學習的興趣與動機。

「Plant Discovery」是一個互動式學習網站,

透過視覺化的設計,結合昆士蘭政府長期閒置的數據,

幫助用戶探索澳大利亞瀕危植物的相關資訊,提升學習的興趣與動機。

免責聲明:本項目為概念專案,為探索公共數據集的應用潛力,對所使用的任何數據不主張所有權。

免責聲明:

本項目為概念性探索,旨在挖掘公共數據集的應用潛力,對所使用的任何數據不主張所有權。

負責項目

負責項目

使用者研究、視覺設計、互動設計、程式開發

使用者研究、視覺設計、

互動設計、程式開發

專案期間

專案期間

3 個月 (2023)

3 個月 (2023)

使用工具

使用工具

Figma, Procreate, Visual Studio Code

Figma, Procreate,

Visual Studio Code

專案背景

專案背景

澳大利亞獨特的地理位置孕育了豐富多樣的植物物種,但其中許多目前正處於瀕危狀態。

我們經過調查後了解發現,雖然現有的資料能提供人們查詢相關知識,但是大多數用戶對其應用並無太多興趣也不熟悉。傳統資訊來源往往依賴冗長的文字,容易讓用戶感到負擔,影響學習時的使用體驗。

因此,本項目選擇通過視覺化的學習體驗,以互動式的資訊提升人們對這些植物的認識與關注。

澳大利亞獨特的地理位置孕育了豐富多樣的植物物種,但其中許多目前正處於瀕危狀態。

我們經過調查後了解發現,雖然現有的資料能提供人們查詢相關知識,但是大多數用戶對其應用並無太多興趣也不熟悉。傳統資訊來源往往依賴冗長的文字,容易讓用戶感到負擔,影響學習時的使用體驗。

因此,本項目選擇通過視覺化的學習體驗,以互動式的資訊提升人們對這些植物的認識與關注。

關鍵績效指標 (KPI) 跟蹤

關鍵績效指標 (KPI) 跟蹤

在規劃專案時,我們設定了三項指標來確認項目的進展,也在三個月後的研究中得到了以下結果。

在規劃專案時,我們設定了三項指標來確認項目的進展,也在三個月後的研究中得到了以下結果。

學習性

學習性

80%的使用者能理解5種不同植物的描述

80%的使用者能理解5種不同植物的描述

易用性

易用性

85%的使用者能辨識出3種特定植物

85%的使用者能辨識出3種特定植物

留存率

留存率

70%的老用戶在有需求時會回到網站

70%的老用戶在有需求時會回到網站

了解問題

了解問題

在項目初期,我們進行了次級研究和訪談,以識別潛在的設計機會。

在項目初期,我們進行了次級研究和訪談,以識別潛在的設計機會。

我們的發現是什麼?

我們的發現是什麼?

  • 圖像是網站中至關重要的視覺輔助工具

  • 傳統資訊來源過度依賴文字,缺乏與使用者的互動

  • 受訪者偏好通過視覺化的方式來學習植物知識

  • 圖像是網站中至關重要的視覺輔助工具

  • 傳統資訊來源過度依賴文字,缺乏與使用者的互動

  • 受訪者偏好通過視覺化的方式來學習植物知識

人物誌

人物誌

目標用戶:年齡介於18至24歲之間的大學生,渴望深入了解澳大利亞瀕危植物的相關知識。

目標用戶:年齡介於18至24歲之間的大學生,渴望深入了解澳大利亞瀕危植物的相關知識。

傳統任務流程

傳統任務流程

傳統資訊平台雖然為使用者提供了資訊獲取的簡單途徑,但相對不具互動性。

我們在分析傳統任務流程後,能更加理解用戶和發想可能的設計方案。

傳統資訊平台雖然為使用者提供了資訊獲取的簡單途徑,但相對不具互動性。我們在分析傳統任務流程後,能更加理解用戶和發想可能的設計方案。

傳統資訊平台雖然為使用者提供了資訊獲取的簡單途徑,但相對不具互動性。

我們在分析傳統任務流程後,能更加理解用戶和發想可能的設計方案。

假設與構思

假設與構思

在構思階段,團隊進行了設計衝刺,使用優先矩陣來確定需納入的關鍵功能和存在的限制,讓每位團隊成員腦海中對於設計方案有一致的想像,以確保產品的成功。

在構思階段,團隊進行了設計衝刺,使用優先矩陣來確定需納入的關鍵功能和存在的限制,讓每位團隊成員腦海中對於設計方案有一致的想像,以確保產品的成功。

低保真原型

低保真原型

專案挑戰

圖片創建

在最初的概念中,這個專案的主要特色在於展示植物的生命週期,使其與現有網站有明顯區別。然而,現有的數據庫並不存在合適的圖片來完整呈現這一構想。由於網站專注於澳大利亞的瀕危植物,線上資源僅包含少量這些特有物種的資料片段。為此,團隊決定保留這一關鍵功能,並改用插圖來代表每一種植物。

數據缺失

在搭建網站的過程中,我們發現所選數據集存在資料不完整的問題,且所含內容有限,完全依賴此數據集會造成資訊缺失。為解決這一問題,團隊重新審視了三個數據集,篩選資料以構建植物特徵。此外,我們擴充資料並編寫了更詳盡且完整的介紹,以補足數據集中未包含的內容,為每種植物創建一個簡明的檔案,並結合原始數據集。

互動性不足

在完成最小可行產品的初始階段並進行測試後,團隊發現由於某些功能的刪減,導致互動性不足。為解決這一問題,我們決定向目標用戶訪談並徵集建議。通過對潛在用戶進行簡短訪談,我們加入了「教學卡片」概念,以增強整體的互動學習體驗。

測試與迭代

三項測試任務

  • 在植物圖庫頁面定位植物「Goebelobryum grossitextum」

  • 找到植物 「Baileyoxylon」 並閱讀其描述

  • 通過互動方式觀察「Baileyoxylon」 的生長過程

發現

發現

  • 所有參與者都喜愛網站直觀且美觀的設計,並認為互動式的學習方式有助於了解瀕危植物。

  • 當用戶能與植物的具體資訊進行互動時,相較於被動閱讀內容時,他們展現出更高的參與度。

  • 部分參與者認為專業的植物學名稱難以發音,並會主動尋求協助。

  • 所有參與者都喜愛網站直觀且美觀的設計,並認為互動式的學習方式有助於了解瀕危植物。

  • 當用戶能與植物的具體資訊進行互動時,相較於被動閱讀內容時,他們展現出更高的參與度。

  • 部分參與者認為專業的植物學名稱難以發音,並會主動尋求協助。

迭代

迭代

  • 增加互動式的填空回應功能

  • 添加語音發音選項,幫助使用者正確發音植物名稱

視覺設計

色彩搭配

透過次級研究,團隊檢視了能符合項目主題以及目標用戶的顏色取向的色彩。我最終提取了三個主要的顏色來建立網頁的設計以保證設計的一致性。

#DCECBB

#DCECBB

#FFF5E9

#FFF5E9

#363636

#363636

項目成果

最終測試結果顯示了項目的積極成果,92%的參與者能輕鬆瀏覽網站並完全理解每個功能的用途。項目的UI設計也在展示會上獲得了熱烈的反應!多數使用者都表示其強化了網站的易用性。在後續訪談中,使用者也提及拖放功能有助於他們的學習過程,完成最初項目設定的提升使用者學習體驗的目標。

我在學習的同時也像在玩遊戲!

測試者A

當我嘗試完成資訊時,

感覺自己在過程中不斷學習。

當我嘗試完成資訊時,感覺自己在過程中不斷學習。

測試者B

反思與學習

在項目開始時,我期待能夠透過建立這個項目的過程,深化我在產品設計上的知識,並搭建一個用戶可以易於使用的平台。儘管我認為在時間壓力下,我們達成了不錯的成果,但是團隊合作中,我認知到讓每一個人都能有清晰的了解項目目標與計畫的困難性。雖然我們在項目過程中持續溝通以填補信息差距,但並非所有成員都能即時充分掌握進展,導致團隊開發可能不如預期的進展。不過,我相信這個問題讓我們有了更多機會練習團隊合作中的平衡與如何解決項目的限制,讓我們在未來中,能在不同團隊中有更順暢的發展。

Lumos Check App

Lumos Check App

結合手機與實體裝置的視覺提示,優化青年合宿生活的家事分配體驗

結合手機與實體裝置的視覺提示

優化青年合宿生活的家事分配體驗

結合手機與實體裝置的視覺提示

優化青年合宿生活的家事分配體驗