top of page
198.png
AIDEA

AI協作網站-AIDEA

生成式AI網站 X chat gpt-3.5 X 網站開發

專案分工
視覺設計|梁宇琦
使用者研究|Dana Duda、梁宇琦
前端程式|鄭淳方、葉芸汝
後端程式|李明軒、Le Gia Bao

專 案 介 紹

近年生成式AI網站的崛起帶給人們新的工作型態,市面上也有許多主打不同功能的AI網站,然而再進行調查後發現,目前市面上缺乏一個能夠整合各種需求的平台,使用者需要在不同的網站當中跳轉,在與AI溝通時,使用者也必須進行大量的描述情境,才能得到一個滿意的回覆。
基於以上主要兩點,我們希望提供一個即時、個性化和多元化服務以滿足使用者,於是開發「AIDEA」讓使用者可以選擇自己所需的對話情境,減少使用者所需耗費的情境描述時間。

01.jpg

在本專案中,我的主要工作是在產品開發前期的準備工作,過程當中包含使用者調查、原型製作與視覺設計。首先,藉由團隊討論和設計問卷調查,收集使用者的需求和反饋,整理出用戶行為作為設計決策的依據。
再來是使用Figma進行原型製作,製作了多個高保真原型,展示網站的功能和頁面交互,並進行多次反饋和修改,確保最終產品符合團隊目標和使用者期待。
最後,創建視覺元素,包括色彩、字體、圖標等,並將它們應用於網站的各個部分,確保產品的使用者體驗和視覺呈現達到最佳水平。

Frame 3.png

※以上為計畫、任務管理工具,
以及前端所使用程式語言與開發軟體,到最終佈署平台所使用工具。

研 究 過 程

本專案旨在通過一次完整的網站開發與佈署過程,完成最低可行性產品為目標,來了解習如何使用open AI的API應用與開發,並實踐相關技術與流程。

Frame 1.png

在開發之前,我們先在團隊內部進行調查,了解成員對於開發走向的想法,以及核心價值與網站基礎功能的腦力激盪,建立初步的產品架構,再進行外部問卷調查,了解一般使用者在操作AI網站時的習慣與問題。最後,我們先將客群整理分為六類工作人群類別,勾勒出最低可行產品的初期樣貌。

問題目標

1.缺乏一個整合各種需求(如技術諮詢、翻譯、創意靈感、信用卡資訊、行銷策略、留學資訊等)的平台。
2.需要在提問前先進行問題的描述情境。

​3.問題的結果答非所問。

產品目標市場

1.低程式碼開發者
2.旅行者、翻譯工作者或留學生
3.內容創作者
4.藝術家或需要靈感的人
5.尋求賺取和儲存積分獎勵的用戶
6.內容營銷人員

產品價值主張

1.提供一個整合各種需求的平台,讓使用者能夠在同一個地方找到所需的資訊,提高效率。
2.提供即時、個人化和多元化的服務,滿足使用者需求,增強使用者滿意度和忠誠度。

後續彙整外部發放的問卷資料,我們觀察到使用者在操作AI網站時最常遇到的痛點是在「問題的準確性」以及需要建立「大量的的問題描述情境」,因此,我們將產品需要解決的痛點聚焦在這兩點,並依照制定好的客群分類,將對話情景制定出來,建立出七大功能模組。

使用者目標

1.快速生成文案
2.翻譯文章
3.寫程式參考
4.快速整理資訊
5.快速了解某個領域的知識
6.生成圖片

功能的重要性排序

1=AI聊天室
2=用戶登入
3=問題回饋
4=網站搜索指引
5=功能模組
6=安全性說明
7=網站教學指南

使用者痛點

1.無法很準確的回答問題
2.需要反覆測試指令讓AI正確回答
3.出現過多重複內容
4.AI會自行更改原先輸入的指令條件(如:角色變成異性)
5.產出答案不符期待

期望具備的功能

no1.多語言支援
no2.圖片生成、歷史紀錄
no3.程式庫生成與查詢
no4.AI回復情境模組功能選擇、個性化設定
no5.AI網站社群討論區
no6.語音輸入

專案成果
style03-語音分析.png
Group 3467005.png

語言解析:

能夠讀取聲音檔案內容中的對話,整理為文字。
可支援以下聲音檔:mp3, mp3, mp4, mpeg, mpga, m4a, ogg, wav

style03-語言翻譯.png
Group 3466969.png

語言翻譯:

負責文字翻譯功能,可翻譯17種語言。

style03-生成照片.png
Group 3467004.png

生成照片:

可輸入文字指令讓AI生成圖片。

style03-尋找靈感.png
Group 3467000.png

尋找靈感:

探索和挖掘創意,從AI生成的建議中汲取靈感。
​*網站預設模組。

style03-文案行銷.png
Group 3467002.png

文案行銷:

快速生成行銷文案,提供更多創意與行銷計畫。

style03-資料整理.png
Group 3467001.png

資料整理:

協助整理和分析大量數據,強化資料分析與彙整。

style03-程式開發.png
Group 3467003.png

程式開發:

協助開發過程,提供程式碼建議。

視 覺 設 計
資產 15.png
資產 16.png

※Logo草稿與設計樣式

視覺設計.png

※web style guide

原型展示

​雙側收放、響應式畫面設計

​資訊頁面設計

中英文切換

​反 思 與 結 論

在這為期五個月的開發當中,除了設計技能上的磨練之外,在使用者調查與後續開發完的回饋當中,也獲得了一些啟發。

1.問卷結果與團隊核心構想
在回收而來的問卷發現,受訪者最常提到的問題是「問題情境導致答案不符期待」,這與團隊在專案初期時所提出的問題點類似,這也是我們決定用製作不同功能的模組類型,來去解決問題指令精準性、以及要先設定大量問題情境的痛點。

2.內部測試
在回收而來的問卷當中,發現其實使用者對於模組功能這項功能來說,優先性並沒有團隊在初期發想時的預期的高,這點也顯示在後續使用者實際操作時觀察到,表明了模組功能在使用者心目中的地位可能與團隊在初期設想時有所不同。

3.後續發展
因實習時間有限,無法在網站佈署後進續進行更深入的使用者調查,但在內部測試後檢討,造成這種差異可能是因為模組功能的定義與實際使用者操作時的期望有所偏差,若專案能夠繼續延續,我覺得我們可以訪談使用者在操作本網站後的感想,透過訪談與易用性調查來去調整功能模組的情境。

整體結論
在這次的專案中,除了在進行UIUX的工作之外,我也學習到有關專案追蹤、交付設計以及與前後端工程師溝通技能。
使得我的工作流程可以更加有條理、有組織性,確保設計任務能夠準時交付,同時間,我也學會如何使用專案追蹤工具的協作功能,與團隊成員溝通、收集反饋並且快速的做出調整。在例會當中,與前後端工程師討論,在設計與開發當中即時溝通和解決,讓這五個月全線上的開發當中,不會因為實地距離影響到工作時程,這些經驗將成為我在未來工作當中的重要資產,使我更加有效的應對各種挑戰。

bottom of page