CirclePass:與 AI 共創的共享帳號存取體驗

CirclePass:與 AI 共創的共享帳號存取體驗

CirclePass:與 AI 共創的共享帳號存取體驗

個人 UX 專案,探索生成式 AI(ChatGPT)如何支援研究、發想與設計迭代,打造更智慧的帳號共享體驗

個人 UX 專案,探索生成式 AI(ChatGPT)如何支援研究、發想與設計迭代,打造更智慧的帳號共享體驗

個人 UX 專案,探索生成式 AI(ChatGPT)如何支援研究、發想與設計迭代,打造更智慧的帳號共享體驗

Role

Role

Role

Solo Designer (Research + UI/UX)

Solo Designer (Research + UI/UX)

Solo Designer (Research + UI/UX)

Timeline

Timeline

Timeline

Oct 2024 – Dec 2025

Oct 2024 – Dec 2025

Oct 2024 – Dec 2025

Tools

Tools

Tools

ChatGPT, Figma

ChatGPT, Figma

ChatGPT, Figma

1. 專案背景

1. 專案背景

CirclePass 是我在 University of Maryland「Generative AI in UX」課程中的個人期末專案。與一般以完成度為目標的 UX case study 不同,本專案的主要目標是 探索生成式 AI 如何在 UX 設計流程的不同階段發揮作用,包含從 發想、研究到設計與迭代的過程。

CirclePass 是我在 University of Maryland「Generative AI in UX」課程中的個人期末專案。與一般以完成度為目標的 UX case study 不同,本專案的主要目標是 探索生成式 AI 如何在 UX 設計流程的不同階段發揮作用,包含從 發想、研究到設計與迭代的過程。

我選擇「共享帳號存取」作為主題,源自於我對 數位服務中權限管理與帳號共享體驗的興趣。在日常生活中,人們常常需要與家人、朋友或團隊共享同一個數位服務帳號,但相關的權限管理與存取體驗往往缺乏良好的設計。因此,我將這個議題作為一個實驗場域,嘗試探索像 ChatGPT 這樣的生成式 AI 工具,如何影響設計思考、激發創意,甚至在個人專案中模擬某種「協作式設計」的過程。

我選擇「共享帳號存取」作為主題,源自於我對 數位服務中權限管理與帳號共享體驗的興趣。在日常生活中,人們常常需要與家人、朋友或團隊共享同一個數位服務帳號,但相關的權限管理與存取體驗往往缺乏良好的設計。因此,我將這個議題作為一個實驗場域,嘗試探索像 ChatGPT 這樣的生成式 AI 工具,如何影響設計思考、激發創意,甚至在個人專案中模擬某種「協作式設計」的過程。

雖然 CirclePass 仍然以使用者中心思考為基礎,但本專案的核心重點是 反思 AI 在 UX 工作中的角色,不僅理解 AI 能如何協助設計,也探討它在實際應用中的限制與挑戰。以下章節將說明我在專案各個階段中,如何與 AI 工具協作完成設計流程。

雖然 CirclePass 仍然以使用者中心思考為基礎,但本專案的核心重點是 反思 AI 在 UX 工作中的角色,不僅理解 AI 能如何協助設計,也探討它在實際應用中的限制與挑戰。以下章節將說明我在專案各個階段中,如何與 AI 工具協作完成設計流程。

1. 專案背景

CirclePass 是我在 University of Maryland「Generative AI in UX」課程中的個人期末專案。與一般以完成度為目標的 UX case study 不同,本專案的主要目標是 探索生成式 AI 如何在 UX 設計流程的不同階段發揮作用,包含從 發想、研究到設計與迭代的過程。

我選擇「共享帳號存取」作為主題,源自於我對 數位服務中權限管理與帳號共享體驗的興趣。在日常生活中,人們常常需要與家人、朋友或團隊共享同一個數位服務帳號,但相關的權限管理與存取體驗往往缺乏良好的設計。因此,我將這個議題作為一個實驗場域,嘗試探索像 ChatGPT 這樣的生成式 AI 工具,如何影響設計思考、激發創意,甚至在個人專案中模擬某種「協作式設計」的過程。

雖然 CirclePass 仍然以使用者中心思考為基礎,但本專案的核心重點是 反思 AI 在 UX 工作中的角色,不僅理解 AI 能如何協助設計,也探討它在實際應用中的限制與挑戰。以下章節將說明我在專案各個階段中,如何與 AI 工具協作完成設計流程。

2. 我如何在 CirclePass 中使用 AI

2. 我如何在 CirclePass 中使用 AI

2. 我如何在 CirclePass 中使用 AI

為了更深入理解 生成式 AI 是否能成為設計過程中的合作夥伴,在這個專案中,我不只記錄最終產出的設計成果,也記錄了 自己如何與 AI 協作完成整個流程

為了更深入理解 生成式 AI 是否能成為設計過程中的合作夥伴,在這個專案中,我不只記錄最終產出的設計成果,也記錄了 自己如何與 AI 協作完成整個流程

為了更深入理解 生成式 AI 是否能成為設計過程中的合作夥伴,在這個專案中,我不只記錄最終產出的設計成果,也記錄了 自己如何與 AI 協作完成整個流程

以下兩個部分說明我與 ChatGPT 的合作方式:從整體的貢獻模式(AI 與設計師的分工),到在實際設計過程中逐漸形成的 prompt 策略

以下兩個部分說明我與 ChatGPT 的合作方式:從整體的貢獻模式(AI 與設計師的分工),到在實際設計過程中逐漸形成的 prompt 策略

以下兩個部分說明我與 ChatGPT 的合作方式:從整體的貢獻模式(AI 與設計師的分工),到在實際設計過程中逐漸形成的 prompt 策略

01 貢獻分布:AI 啟發研究構想,我主導設計,共同推進迭代

01 貢獻分布:AI 啟發研究構想,我主導設計,共同推進迭代

01 貢獻分布:AI 啟發研究構想,我主導設計,共同推進迭代

為了觀察生成式 AI 在 UX 工作不同階段的角色,我在專案過程中記錄了 ChatGPT 與我各自的參與程度

為了觀察生成式 AI 在 UX 工作不同階段的角色,我在專案過程中記錄了 ChatGPT 與我各自的參與程度

為了觀察生成式 AI 在 UX 工作不同階段的角色,我在專案過程中記錄了 ChatGPT 與我各自的參與程度

如圖所示,AI 在前期研究與後期迭代階段提供了較大的幫助,而在 設計執行與體驗決策上則主要由我主導。這也顯示,雖然 AI 能協助發想與優化設計方向,但 在創造力、同理心,以及情境判斷等關鍵層面,設計師仍然是不可取代的角色

如圖所示,AI 在前期研究與後期迭代階段提供了較大的幫助,而在 設計執行與體驗決策上則主要由我主導。這也顯示,雖然 AI 能協助發想與優化設計方向,但 在創造力、同理心,以及情境判斷等關鍵層面,設計師仍然是不可取代的角色

如圖所示,AI 在前期研究與後期迭代階段提供了較大的幫助,而在 設計執行與體驗決策上則主要由我主導。這也顯示,雖然 AI 能協助發想與優化設計方向,但 在創造力、同理心,以及情境判斷等關鍵層面,設計師仍然是不可取代的角色

02 與 AI 協作的策略

02 與 AI 協作的策略

02 與 AI 協作的策略

在專案過程中,我逐漸發展出一些 讓 ChatGPT 更有效參與設計流程的方法。我不把 AI 當成一個「黑箱」,而是把它視為一個 需要提供背景與回饋的協作夥伴

在專案過程中,我逐漸發展出一些 讓 ChatGPT 更有效參與設計流程的方法。我不把 AI 當成一個「黑箱」,而是把它視為一個 需要提供背景與回饋的協作夥伴

在專案過程中,我逐漸發展出一些 讓 ChatGPT 更有效參與設計流程的方法。我不把 AI 當成一個「黑箱」,而是把它視為一個 需要提供背景與回饋的協作夥伴

1

1

1

提供完整且清楚的情境

提供完整且清楚的情境

提供完整且清楚的情境

我學會在 prompt 中提供完整背景,例如:專案目標、目標使用者、設計限制。這能幫助 AI 產出更具相關性與可行性的建議。

我學會在 prompt 中提供完整背景,例如:專案目標、目標使用者、設計限制。這能幫助 AI 產出更具相關性與可行性的建議。

我學會在 prompt 中提供完整背景,例如:專案目標、目標使用者、設計限制。這能幫助 AI 產出更具相關性與可行性的建議。

2

2

2

請 AI 提供 3–5 個,而不是大量選項

請 AI 提供 3–5 個,而不是大量選項

請 AI 提供 3–5 個,而不是大量選項

為了避免資訊過載,我通常會請 ChatGPT 提供 少量但清晰的選項(例如 3 個 use case 或 3 個 wireframe 構想),而不是一次產生大量想法。

為了避免資訊過載,我通常會請 ChatGPT 提供 少量但清晰的選項(例如 3 個 use case 或 3 個 wireframe 構想),而不是一次產生大量想法。

為了避免資訊過載,我通常會請 ChatGPT 提供 少量但清晰的選項(例如 3 個 use case 或 3 個 wireframe 構想),而不是一次產生大量想法。

3

3

3

請 AI 使用視覺化符號

請 AI 使用視覺化符號

請 AI 使用視覺化符號

在進行 優先順序排序或分類任務時,我會請 AI 使用像是:🟢 🟡 🔴 的符號或表格形式,而不是純文字段落。這讓我能 更快速理解複雜資訊並做出判斷

在進行 優先順序排序或分類任務時,我會請 AI 使用像是:🟢 🟡 🔴 的符號或表格形式,而不是純文字段落。這讓我能 更快速理解複雜資訊並做出判斷

在進行 優先順序排序或分類任務時,我會請 AI 使用像是:🟢 🟡 🔴 的符號或表格形式,而不是純文字段落。這讓我能 更快速理解複雜資訊並做出判斷

4

4

4

透過回饋持續迭代

透過回饋持續迭代

透過回饋持續迭代

我不會直接接受 AI 的第一個答案,而是透過 prompt 持續調整,例如:「讓這個版面更簡潔」、「若使用者數位能力較低,會發生什麼問題?」這樣的互動讓 AI 成為 設計迭代中的一個輔助工具

我不會直接接受 AI 的第一個答案,而是透過 prompt 持續調整,例如:「讓這個版面更簡潔」、「若使用者數位能力較低,會發生什麼問題?」這樣的互動讓 AI 成為 設計迭代中的一個輔助工具

我不會直接接受 AI 的第一個答案,而是透過 prompt 持續調整,例如:「讓這個版面更簡潔」、「若使用者數位能力較低,會發生什麼問題?」這樣的互動讓 AI 成為 設計迭代中的一個輔助工具

透過這些方法,我能在保持 設計主導權的同時,讓 AI 協助完成想法生成、觀點重構,以及某些小型共創

透過這些方法,我能在保持 設計主導權的同時,讓 AI 協助完成想法生成、觀點重構,以及某些小型共創

透過這些方法,我能在保持 設計主導權的同時,讓 AI 協助完成想法生成、觀點重構,以及某些小型共創

3. 專案細節

3. 專案細節

CirclePass:為真實帳號共享情境設計的無密碼存取體驗

CirclePass:為真實帳號共享情境設計的無密碼存取體驗

許多人都曾經與他人共享串流平台帳號,例如 Netflix。但在現實情境中,共享對象往往不只是家人,也可能是朋友或熟人,這時帳號管理往往變得混亂。

許多人都曾經與他人共享串流平台帳號,例如 Netflix。但在現實情境中,共享對象往往不只是家人,也可能是朋友或熟人,這時帳號管理往往變得混亂。

CirclePass 嘗試解決這個問題,透過 無需分享密碼的方式,讓帳號共享變得更簡單、安全。

CirclePass 嘗試解決這個問題,透過 無需分享密碼的方式,讓帳號共享變得更簡單、安全。

問題

問題

在共享 Netflix 等服務帳號時,常見的問題包括:

在共享 Netflix 等服務帳號時,常見的問題包括:

😣

😣

帳號擁有者 為了安全性定期更換密碼,但難以及時通知所有使用者

帳號擁有者 為了安全性定期更換密碼,但難以及時通知所有使用者

😣

😣

參與共享的成員 因密碼更新而被鎖定登入

參與共享的成員 因密碼更新而被鎖定登入

😣

😣

臨時使用者(Guests)缺乏安全且方便的短期存取方式

臨時使用者(Guests)缺乏安全且方便的短期存取方式

解方

解方

CirclePass 透過以下方式,讓帳號共享更簡單且更安全:

CirclePass 透過以下方式,讓帳號共享更簡單且更安全:

🤩

🤩

透過 QR Code 存取機制,避免直接分享密碼

透過 QR Code 存取機制,避免直接分享密碼

🤩

🤩

提供 Participants 與 Guests 的權限管理,方便管理不同角色

提供 Participants 與 Guests 的權限管理,方便管理不同角色

🤩

🤩

自動化通知與重新驗證機制,減少因密碼更新造成的登入問題

自動化通知與重新驗證機制,減少因密碼更新造成的登入問題

01 Persona

01 Persona

我將使用者分為三種角色:Account Owner(帳號擁有者)、Participant(共享成員)與 Guest(臨時訪客),以釐清在帳號共享情境中不同角色所面臨的需求與痛點。

我將使用者分為三種角色:Account Owner(帳號擁有者)、Participant(共享成員)與 Guest(臨時訪客),以釐清在帳號共享情境中不同角色所面臨的需求與痛點。

在研究過程中我發現,Participant 與 Guest 通常會遇到 存取權限或資訊不清楚的問題;而 Account Owner 則需要承擔管理與保護帳號安全的負擔

在研究過程中我發現,Participant 與 Guest 通常會遇到 存取權限或資訊不清楚的問題;而 Account Owner 則需要承擔管理與保護帳號安全的負擔

因此,在設計過程中,我將 Account Owner 作為主要設計對象,優先設計能協助他們管理帳號與共享權限的工具。透過改善 Owner 的管理體驗,也能 間接提升整個共享圈中所有使用者的體驗

因此,在設計過程中,我將 Account Owner 作為主要設計對象,優先設計能協助他們管理帳號與共享權限的工具。透過改善 Owner 的管理體驗,也能 間接提升整個共享圈中所有使用者的體驗

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Define

Define

Expand

Expand

ChatGPT 協助我將原本模糊的使用者困擾,整理並發展成 更具層次的 Persona 描述。在此基礎上,我再進一步調整與精煉,使其更符合產品的設計目標與使用情境。

ChatGPT 協助我將原本模糊的使用者困擾,整理並發展成 更具層次的 Persona 描述。在此基礎上,我再進一步調整與精煉,使其更符合產品的設計目標與使用情境。

02 競品分析

02 競品分析

目前市場上的工具多半聚焦於個人密碼管理工具(例如 1Password)。然而,在現實生活中,人們常常需要與 朋友、伴侶或室友共享帳號,而這類情境往往缺乏合適的產品設計。

目前市場上的工具多半聚焦於個人密碼管理工具(例如 1Password)。然而,在現實生活中,人們常常需要與 朋友、伴侶或室友共享帳號,而這類情境往往缺乏合適的產品設計。

CirclePass 正是針對這個空缺而提出的解決方案。透過在系統中內建 角色(roles)與存取權限邏輯(access logic),CirclePass 能避免頻繁分享密碼帶來的困擾與尷尬情境,讓帳號共享變得 更順暢、更安全,也更尊重不同使用者的存取需求。

CirclePass 正是針對這個空缺而提出的解決方案。透過在系統中內建 角色(roles)與存取權限邏輯(access logic),CirclePass 能避免頻繁分享密碼帶來的困擾與尷尬情境,讓帳號共享變得 更順暢、更安全,也更尊重不同使用者的存取需求。

下方表格根據 四個關鍵評估指標,比較 CirclePass 與現有工具之間的差異。

下方表格根據 四個關鍵評估指標,比較 CirclePass 與現有工具之間的差異。

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Define

Define

Organize

Organize

ChatGPT 協助我 辨識相關競品並整理比較框架,依據我設定的評估標準建立結構化分析,讓整體競品分析 更清晰且更具焦點

ChatGPT 協助我 辨識相關競品並整理比較框架,依據我設定的評估標準建立結構化分析,讓整體競品分析 更清晰且更具焦點

01 MVP 功能

01 MVP 功能

CirclePass 的產品設計圍繞 四個核心功能,這些功能是在前期探索階段中,綜合 技術可行性與使用者價值後所優先選定的 MVP。

CirclePass 的產品設計圍繞 四個核心功能,這些功能是在前期探索階段中,綜合 技術可行性與使用者價值後所優先選定的 MVP。

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Brainstorm

Brainstorm

Validate

Validate

ChatGPT 協助我發想多種可能的 Use Cases,並從 可行性與重要性兩個面向進行分析,幫助我篩選並確立最重要的 四個 MVP 核心功能

ChatGPT 協助我發想多種可能的 Use Cases,並從 可行性與重要性兩個面向進行分析,幫助我篩選並確立最重要的 四個 MVP 核心功能

無密碼帳號共享

無密碼帳號共享

透過 QR Code 分享帳號存取權限,避免直接分享密碼

角色權限管理

角色權限管理

為 Owner、Participant 與 Guest 設定不同的存取權限與使用範圍

訪客臨時存取

訪客臨時存取

允許 Guest 以 臨時權限加入共享帳號,並設定明確的到期時間

自動化通知

自動化通知

當帳號存取權限或密碼變更時,系統會 自動發送提醒與通知

02 設計系統

02 設計系統

為了建立一致且可信任的介面體驗,我建立了一套設計系統,核心原則聚焦於:清晰性、安全感、角色彈性。這套設計系統確保不同角色(Owner、Participant、Guest)在各種使用情境下,都能維持 一致且易理解的操作體驗。

為了建立一致且可信任的介面體驗,我建立了一套設計系統,核心原則聚焦於:清晰性、安全感、角色彈性。這套設計系統確保不同角色(Owner、Participant、Guest)在各種使用情境下,都能維持 一致且易理解的操作體驗。

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Brainstorm

Brainstorm

ChatGPT 協助我在早期探索階段 發想設計原則與介面模式,並整理不同設計方向的可能性。我再依據產品情境與使用者需求,進一步篩選與調整,使設計系統更符合 CirclePass 的產品定位。

ChatGPT 協助我在早期探索階段 發想設計原則與介面模式,並整理不同設計方向的可能性。我再依據產品情境與使用者需求,進一步篩選與調整,使設計系統更符合 CirclePass 的產品定位。

03 Hi-Fi 原型介面

03 Hi-Fi 原型介面

為了貼近真實的使用情境,我設計了 四個核心 Use Cases(1) 新增共享成員(Participant)(2) 新增臨時訪客(Guest)(3) 成員管理(4) 密碼更新與重新驗證。這些情境共同形塑了不同角色之間的 流程設計與介面邏輯

為了貼近真實的使用情境,我設計了 四個核心 Use Cases(1) 新增共享成員(Participant)(2) 新增臨時訪客(Guest)(3) 成員管理(4) 密碼更新與重新驗證。這些情境共同形塑了不同角色之間的 流程設計與介面邏輯

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Define

Define

ChatGPT 協助我將使用情境轉化為 更具體的流程與頁面結構,並提供初步的 wireframe 構想,作為後續介面設計的參考方向。

ChatGPT 協助我將使用情境轉化為 更具體的流程與頁面結構,並提供初步的 wireframe 構想,作為後續介面設計的參考方向。

Use Case 1

Use Case 1

Owner 新增共享成員

Owner 新增共享成員

帳號擁有者可以透過 QR Code 或邀請連結新增長期共享成員(Participants)。受邀者會看到清楚的 逐步引導介面,完成邀請接受流程後即可存取帳號。

帳號擁有者可以透過 QR Code 或邀請連結新增長期共享成員(Participants)。受邀者會看到清楚的 逐步引導介面,完成邀請接受流程後即可存取帳號。

Account Owner

Acc Owner

Participant

Participant

Account Owner

Acc Owner

Guest

Guest

Use Case 2

Use Case 2

Owner 新增臨時訪客

Owner 新增臨時訪客

Owner 可以設定 到期時間(expiration date)並分享安全的 QR Code,讓訪客取得臨時存取權限。Guest 可透過 網頁連結直接加入帳號,無需下載 App。

Owner 可以設定 到期時間(expiration date)並分享安全的 QR Code,讓訪客取得臨時存取權限。Guest 可透過 網頁連結直接加入帳號,無需下載 App。

Use Case 3

Use Case 3

成員管理

成員管理

Owner 可以在管理介面中查看並管理所有成員,例如:編輯成員資訊、檢視驗證狀態、移除存取權限。介面提供清楚的 成員狀態標示(如 Verified、Pending、Expired),並支援快速操作,例如重新發送驗證提醒。

Owner 可以在管理介面中查看並管理所有成員,例如:編輯成員資訊、檢視驗證狀態、移除存取權限。介面提供清楚的 成員狀態標示(如 Verified、Pending、Expired),並支援快速操作,例如重新發送驗證提醒。

Account Owner

Account Owner

Account Owner

Acc Owner

Participant

Participant

Use Case 4

Use Case 4

密碼更新與重新驗證

密碼更新與重新驗證

當 Owner 更新帳號密碼時,所有成員會 自動收到重新驗證通知
系統提供多種安全驗證方式,例如:Face ID, Email, SMS。確保 Participants 能在安全且流暢的流程中重新取得存取權限。

當 Owner 更新帳號密碼時,所有成員會 自動收到重新驗證通知。系統提供多種安全驗證方式,例如:Face ID, Email, SMS。確保 Participants 能在安全且流暢的流程中重新取得存取權限。

優化 Guest 存取期限設定的理解度

優化 Guest 存取期限設定的理解度

在模擬易用性測試後,我發現部分使用者,特別是較不熟悉科技產品的使用者,在理解「設定存取期限(Set Access Expiration)」的互動設計時出現困惑。因此,我針對這個互動流程進行了一次設計迭代,以提升資訊的清晰度與理解度。

在模擬易用性測試後,我發現部分使用者,特別是較不熟悉科技產品的使用者,在理解「設定存取期限(Set Access Expiration)」的互動設計時出現困惑。因此,我針對這個互動流程進行了一次設計迭代,以提升資訊的清晰度與理解度。

💡 我如何與生成式 AI 協作?

💡 我如何與生成式 AI 協作?

Simulate

Simulate

ChatGPT 協助我:撰寫易用性測試計畫、模擬測試情境、提供優先排序後的設計改善建議

ChatGPT 協助我:撰寫易用性測試計畫、模擬測試情境、提供優先排序後的設計改善建議

存取期限選項難以理解

存取期限選項難以理解

部分使用者,尤其是數位熟悉度較低的使用者,難以理解「設定存取期限」選項的用途與差異

部分使用者,尤其是數位熟悉度較低的使用者,難以理解「設定存取期限」選項的用途與差異

解決方案

解決方案

在 下拉選單旁加入資訊提示(i icon),點擊後會顯示 tooltip 說明各選項的意義與使用情境,幫助使用者更清楚理解不同存取期限設定。

在 下拉選單旁加入資訊提示(i icon),點擊後會顯示 tooltip 說明各選項的意義與使用情境,幫助使用者更清楚理解不同存取期限設定。

3. 專案細節

CirclePass:為真實帳號共享情境設計的無密碼存取體驗

許多人都曾經與他人共享串流平台帳號,例如 Netflix。但在現實情境中,共享對象往往不只是家人,也可能是朋友或熟人,這時帳號管理往往變得混亂。

CirclePass 嘗試解決這個問題,透過 無需分享密碼的方式,讓帳號共享變得更簡單、安全。

問題

在共享 Netflix 等服務帳號時,常見的問題包括:

😣

帳號擁有者 為了安全性定期更換密碼,但難以及時通知所有使用者

😣

參與共享的成員 因密碼更新而被鎖定登入

😣

臨時使用者(Guests)缺乏安全且方便的短期存取方式

解方

CirclePass 透過以下方式,讓帳號共享更簡單且更安全:

🤩

透過 QR Code 存取機制,避免直接分享密碼

🤩

提供 Participants 與 Guests 的權限管理,方便管理不同角色

🤩

自動化通知與重新驗證機制,減少因密碼更新造成的登入問題

01 Persona

我將使用者分為三種角色:Account Owner(帳號擁有者)、Participant(共享成員)與 Guest(臨時訪客),以釐清在帳號共享情境中不同角色所面臨的需求與痛點。

在研究過程中我發現,Participant 與 Guest 通常會遇到 存取權限或資訊不清楚的問題;而 Account Owner 則需要承擔管理與保護帳號安全的負擔

因此,在設計過程中,我將 Account Owner 作為主要設計對象,優先設計能協助他們管理帳號與共享權限的工具。透過改善 Owner 的管理體驗,也能 間接提升整個共享圈中所有使用者的體驗

💡 我如何與生成式 AI 協作?

Define

Expand

ChatGPT 協助我將原本模糊的使用者困擾,整理並發展成 更具層次的 Persona 描述。在此基礎上,我再進一步調整與精煉,使其更符合產品的設計目標與使用情境。

02 競品分析

目前市場上的工具多半聚焦於個人密碼管理工具(例如 1Password)。然而,在現實生活中,人們常常需要與 朋友、伴侶或室友共享帳號,而這類情境往往缺乏合適的產品設計。

CirclePass 正是針對這個空缺而提出的解決方案。透過在系統中內建 角色(roles)與存取權限邏輯(access logic),CirclePass 能避免頻繁分享密碼帶來的困擾與尷尬情境,讓帳號共享變得 更順暢、更安全,也更尊重不同使用者的存取需求。

下方表格根據 四個關鍵評估指標,比較 CirclePass 與現有工具之間的差異。

💡 我如何與生成式 AI 協作?

Define

Organize

ChatGPT 協助我 辨識相關競品並整理比較框架,依據我設定的評估標準建立結構化分析,讓整體競品分析 更清晰且更具焦點

01 MVP 功能

CirclePass 的產品設計圍繞 四個核心功能,這些功能是在前期探索階段中,綜合 技術可行性與使用者價值後所優先選定的 MVP。

💡 我如何與生成式 AI 協作?

Brainstorm

Validate

ChatGPT 協助我發想多種可能的 Use Cases,並從 可行性與重要性兩個面向進行分析,幫助我篩選並確立最重要的 四個 MVP 核心功能

無密碼帳號共享

透過 QR Code 分享帳號存取權限,避免直接分享密碼

角色權限管理

為 Owner、Participant 與 Guest 設定不同的存取權限與使用範圍

訪客臨時存取

允許 Guest 以 臨時權限加入共享帳號,並設定明確的到期時間

自動化通知

當帳號存取權限或密碼變更時,系統會 自動發送提醒與通知

02 設計系統

為了建立一致且可信任的介面體驗,我建立了一套設計系統,核心原則聚焦於:清晰性、安全感、角色彈性。這套設計系統確保不同角色(Owner、Participant、Guest)在各種使用情境下,都能維持 一致且易理解的操作體驗。

💡 我如何與生成式 AI 協作?

Brainstorm

ChatGPT 協助我在早期探索階段 發想設計原則與介面模式,並整理不同設計方向的可能性。我再依據產品情境與使用者需求,進一步篩選與調整,使設計系統更符合 CirclePass 的產品定位。

03 Hi-Fi 原型介面

為了貼近真實的使用情境,我設計了 四個核心 Use Cases(1) 新增共享成員(Participant)(2) 新增臨時訪客(Guest)(3) 成員管理(4) 密碼更新與重新驗證。這些情境共同形塑了不同角色之間的 流程設計與介面邏輯

💡 我如何與生成式 AI 協作?

Define

ChatGPT 協助我將使用情境轉化為 更具體的流程與頁面結構,並提供初步的 wireframe 構想,作為後續介面設計的參考方向。

Use Case 1

Owner 新增共享成員

帳號擁有者可以透過 QR Code 或邀請連結新增長期共享成員(Participants)。受邀者會看到清楚的 逐步引導介面,完成邀請接受流程後即可存取帳號。

Account Owner

Participant

Account Owner

Guest

Use Case 2

Owner 新增臨時訪客

Owner 可以設定 到期時間(expiration date)並分享安全的 QR Code,讓訪客取得臨時存取權限。Guest 可透過 網頁連結直接加入帳號,無需下載 App。

Use Case 3

成員管理

Owner 可以在管理介面中查看並管理所有成員,例如:編輯成員資訊、檢視驗證狀態、移除存取權限。介面提供清楚的 成員狀態標示(如 Verified、Pending、Expired),並支援快速操作,例如重新發送驗證提醒。

Account Owner

Account Owner

Participant

Use Case 4

密碼更新與重新驗證

當 Owner 更新帳號密碼時,所有成員會 自動收到重新驗證通知
系統提供多種安全驗證方式,例如:Face ID, Email, SMS。確保 Participants 能在安全且流暢的流程中重新取得存取權限。

優化 Guest 存取期限設定的理解度

在模擬易用性測試後,我發現部分使用者,特別是較不熟悉科技產品的使用者,在理解「設定存取期限(Set Access Expiration)」的互動設計時出現困惑。因此,我針對這個互動流程進行了一次設計迭代,以提升資訊的清晰度與理解度。

💡 我如何與生成式 AI 協作?

Simulate

ChatGPT 協助我:撰寫易用性測試計畫、模擬測試情境、提供優先排序後的設計改善建議

存取期限選項難以理解

部分使用者,尤其是數位熟悉度較低的使用者,難以理解「設定存取期限」選項的用途與差異

解決方案

在 下拉選單旁加入資訊提示(i icon),點擊後會顯示 tooltip 說明各選項的意義與使用情境,幫助使用者更清楚理解不同存取期限設定。

4. Reflection

4. Reflection

4. Reflection

這個專案不只是一次介面設計的探索,也是我第一次從專案開始到結束,刻意與生成式 AI 並肩合作完成整個設計流程。在這個過程中,我不只學到關於設計本身的經驗,也逐漸理解如何與這種新的「協作夥伴」有效合作

這個專案不只是一次介面設計的探索,也是我第一次從專案開始到結束,刻意與生成式 AI 並肩合作完成整個設計流程。在這個過程中,我不只學到關於設計本身的經驗,也逐漸理解如何與這種新的「協作夥伴」有效合作

這個專案不只是一次介面設計的探索,也是我第一次從專案開始到結束,刻意與生成式 AI 並肩合作完成整個設計流程。在這個過程中,我不只學到關於設計本身的經驗,也逐漸理解如何與這種新的「協作夥伴」有效合作

1

1

1

更清楚理解我與 ChatGPT 各自的優勢

更清楚理解我與 ChatGPT 各自的優勢

更清楚理解我與 ChatGPT 各自的優勢

透過這個專案,我更清楚地理解 哪些工作應該由設計師主導,哪些部分可以由 AI 協助完成

ChatGPT 非常擅長快速產生 use cases、流程與結構性想法,能幫助我在設計初期迅速展開思考。但最終仍需要由我來判斷流程是否合理、介面是否清楚,以及如何依據使用者需求與產品語氣調整細節。這讓我更確定,AI 可以強化設計過程,但設計判斷與情境理解仍然是設計師的核心價值

透過這個專案,我更清楚地理解 哪些工作應該由設計師主導,哪些部分可以由 AI 協助完成。ChatGPT 非常擅長快速產生 use cases、流程與結構性想法,能幫助我在設計初期迅速展開思考。但最終仍需要由我來判斷流程是否合理、介面是否清楚,以及如何依據使用者需求與產品語氣調整細節。這讓我更確定,AI 可以強化設計過程,但設計判斷與情境理解仍然是設計師的核心價值

透過這個專案,我更清楚地理解 哪些工作應該由設計師主導,哪些部分可以由 AI 協助完成

ChatGPT 非常擅長快速產生 use cases、流程與結構性想法,能幫助我在設計初期迅速展開思考。但最終仍需要由我來判斷流程是否合理、介面是否清楚,以及如何依據使用者需求與產品語氣調整細節。這讓我更確定,AI 可以強化設計過程,但設計判斷與情境理解仍然是設計師的核心價值

2

2

2

在不同設計階段採取不同的 AI 協作方式

在不同設計階段採取不同的 AI 協作方式

在不同設計階段採取不同的 AI 協作方式

從前期的 use case 拆解與發想,到中期的 wireframe 與元件結構建議,再到後期的模擬測試與設計迭代規劃,這個專案讓我學會在不同階段以不同方式與 AI 合作。在這個過程中,ChatGPT 不再只是單純的搜尋工具,而逐漸成為設計流程中的一個協作角色

從前期的 use case 拆解與發想,到中期的 wireframe 與元件結構建議,再到後期的模擬測試與設計迭代規劃,這個專案讓我學會在不同階段以不同方式與 AI 合作。在這個過程中,ChatGPT 不再只是單純的搜尋工具,而逐漸成為設計流程中的一個協作角色

從前期的 use case 拆解與發想,到中期的 wireframe 與元件結構建議,再到後期的模擬測試與設計迭代規劃,這個專案讓我學會在不同階段以不同方式與 AI 合作。在這個過程中,ChatGPT 不再只是單純的搜尋工具,而逐漸成為設計流程中的一個協作角色

雖然整體設計方向仍由我主導,但有 ChatGPT 的協助,整個設計過程 變得更順暢且更有效率

雖然整體設計方向仍由我主導,但有 ChatGPT 的協助,整個設計過程 變得更順暢且更有效率

雖然整體設計方向仍由我主導,但有 ChatGPT 的協助,整個設計過程 變得更順暢且更有效率

其他專案

其他專案

其他專案

Let's connect

hanshin.shing.917@gmail.com

www.linkedin.com/in/hanshin-shing-bba992249

© Hannah Shing 2026

Let's connect

hanshin.shing.917@gmail.com

www.linkedin.com/in/hanshin-shing-bba992249

© Hannah Shing 2026

Let's connect

hanshin.shing.917@gmail.com

www.linkedin.com/in/hanshin-shing-bba992249

© Hannah Shing 2026