top of page
01.png

Pocket Pro 口袋經紀 產學合作專案

Pocket Pro 已透過網頁形式提供網紅一站式接案管理服務,

目前計劃推出 iOS APP 以擴大使用者族群。

目標為提升合約簽定率,幫助使用者清晰管理專案、高效溝通,快速促成合約簽署。

時間

2024.09 ~
2024.11(12週)

我的角色

UX Researcher
UI / UX Designer

我的任務

UX 執行與討論
UI 設計
輪流擔任小組長

使用工具

Figma、、Google Meet、
Notion、Maze、Canva

產品介紹

Pocket Pro 是為行銷型接案網紅打造的接案平台,其特色在於整合廠商溝通、簽訂合約帳務與稅務管理等多元功能的一站式平台。

專案目標

Pocket Pro 目前已經以網頁平台的形式投入網紅市場,並取得市場初步的成功,目前預備以iOS系統開發APP,企業期待這次APP的上線,能夠擴張使用者族群。

我們以提升合約簽定率為目標,藉由UX研究,了解使用者在需求溝通與簽約流程的不同階段的需求與痛點,優化產品整體的資訊架構,並以簡明的圖像化介面設計,讓使用者能夠清晰管理自身專案、快速與發案方溝通,並高效促成雙方合約簽署。

專案成果

達成目標與指標:發現第一代版本問題,調整後進行二次易用性測試

任務成功率提升  19%   錯誤點擊率下降  38%

利害關係人訪談

設計需求與高階目標

  • 升產品的易用性:減少操作障礙,讓用戶更快速達成目標

  • 加強使用者留存:改善使用者初次體驗,促進長期使用與忠誠度。

  • 強化功能:讓核心功能更直觀易用,避免多餘的學習成本。

解決方向

  • 簡化流程:將關鍵任務聚焦並減少不必要的操作步驟。

  • 提升指引:透過互動式教學與導引設計,降低學習曲線。

2-利害關係人訪談.png

競品分析

產品現況

  • 目前接案者只能使用 WEB 頁面

  • 用戶要透過 line 帳號登入

產品優勢

  • 合約管理、帳務處理和稅務助理一體化

  • 提前收到薪資,減少現金流壓力

3-競品分析.png

使用者研究

第一階段問卷

目標:確認用戶需求,建立第二次訪談的訪綱內容

共回收 40 份問卷

  • 了解用戶的接案工具偏好

  • 在接案過程中遇到的困難

  • 對於合作案特徵的偏好

  • 對於接案工具功能的期待

  • 過往學習經驗

第二階段訪談

目標:了解用戶接案過程中遇過的實際情況和想法

共訪談 5 位用戶

  • 用戶的接案產業與背景

  • 了解用戶如何獲得案源

  • 是否堅持與客戶簽訂合約

  • 在接案過程遇到的法務問題

  • 對於線上簽署合約的看法

  • 了解用戶在報稅的方式

對象:20萬粉絲的成熟網紅、千人粉絲的素人網紅、平面設計師、攝影師、行銷企劃

用戶痛點

4-2痛點.png
4-2解決.png
4-3痛點.png
4-3解決.png
4-4痛點.png
4-4解決.png

人物誌

15.人物誌.png

用戶旅程地圖

HMW 發想

我們何不

建立固定簽約流程

去幫助

用戶了解合約的重要性

我們何不

優化簽約流程

去幫助

用戶快速合約簽約

我們何不

設計高效的聊天室

去幫助

使用者管理多項專案

四象限表

簽約流程簡化

簡化簽約流程,讓接案者可以主動建立合約給廠商並完成簽約。

梳理資訊架構

整理架構,讓高頻使用的需求單、合約書移至首頁,並新增行事曆。

核心目標

透過視覺化的專案進度追蹤和即時提醒功能,讓使用者能隨時掌握專案狀態,確保工作順利進行。

提升專案管理效率

聊天室新功能,能邀請甲方參與即時溝通,增加用戶使用黏著度,並提升合作雙方的互動性。

增強用戶參與與互動

調整合約和任務的設計,使合約細節更易於閱讀和理解,幫助使用者更清楚的掌握簽約進度,提高合約簽訂率。

提高合約簽訂率

資訊架構

頁面分類

  • 重新整理頁面架構,以專案提醒、建立聊天室及需求單為出發點做延伸。

  • 將聊天室、財務、行事曆個別獨立頁面,簡化操作流程。

增加推力

  • 新增建立聊天室功能,用戶能邀請廠商使用 Pocket pro,優化整體的簽約流程。

  • 一週行事曆中同步接案進度功能,方便查看當週多任務進展。

用戶流程

由發案者主動發起需求單,
向接案者發案

新增由接案者主動建立聊天室+發起需求單,
向發案者完成簽約

介面設計 - 「化被動為主動」以「提升合約簽訂率」

專案管理更高效

首頁功能整合需求、合約與時程管理,保留橘色風格,增添色彩對比,讓使用者輕鬆掌控專案

🥲 Before

網頁版-首頁

😁 After

首頁-初始畫面

直覺性的管理需求

在首頁清楚查看待處理需求,隨時跟進任務

定位時間

顯示今天日期,並提醒當週的專案計劃

當週專案提醒

顯示活動時間、合約狀態及專案標題

建立聊天室

建立聊天室,讓專案討論更集中,同步管理需求與合約,效率加倍

首頁-專案開始

提高會員留存率

  • 發送需求單不受限甲方,專案黏著度提升

  • 優化聊天室常用 icon、新增乙方發出需求單功能,讓使用者更快完成簽約

🥲 Before

2-1網頁版-聊天室列表.png

網頁版-聊天室列表

😁 After

2-2聊天室列表-空值.png

聊天室列表-初始畫面

2-3創建聊天室成功.png

邀請甲方加入聊天室

新增聊天室後,複製連結供非 pocketpro 使用者的甲方加入

聊天室-邀請甲方

接案者建立需求單

接案者也能主動建立需求單,並發送給甲方

icon 重新設計

讓使用者能清楚知道功能,減少學習成本

提升資訊閱讀體驗

  • 現有僅甲方可發需求單,設計接案者也可主動發起需求單,提升合作的靈活性與效率。

  • 調整頁邊距並加上進度提醒,讓使用者清楚還有多少訊息要填寫,提升資訊清晰度與閱讀體驗,減少視覺壓力。

🥲 Before

資訊擁擠,易視覺疲勞
內容過多,使用者沒有耐心

3-1網頁版-需求單.png

目前設計:只有廠商可以發布需求單

網頁版-甲方傳來的需求單

😁 After

讓雙方都能發起需求

將需求單功能開放給雙方,不僅廠商可發布,讓合作更靈活高效,透過優化 UI 介面,提供更清爽、直觀的操作體驗

3-2需求單-步驟.png

統一視覺化步驟引導的位置

讓使用者能夠用同樣的視覺化語言,快速的學習並掌握合約簽屬流程

建立需求單

合約任務視覺化,提高合約簽訂率

視覺化簽約完成狀態及提醒,讓使用者更輕易理解目前所需完成步驟

4-1等待廠商簽約.png

icon 因應簽約流程變動

合約簽署流程,icon 自動換成合約書

狀態提醒

對話欄中設計提醒圖示以利完成簽約

簽約狀態視覺化

狀態條設計可讓甲乙雙方知道目前合約簽署的狀態

等待甲方簽合約

4-2等待廠商需求單後簽約.png

合約即時更新

可快速討論內容並即時掌握動態

合約完成

合約任務視覺化,提高合約簽訂率

  • 專案時間到會在對話提醒行程

  • 完成簽約後使用 Pocket pro 吉祥物動畫慶祝

5-1合約完成-小動畫.png

動態視覺

簽約成功出現動畫增加趣味性

簽約完成的動態

5-2合約完成.png

簽約成功提示

簽約狀態條設計可讓甲乙雙方知道目前合約簽署的狀態

行程開始前提醒

行程當日會於聊天室對話框中跳出提醒

行程當天的提醒

原型製作 Prototype

呈現核心接案流程,模擬實際操作場景,驗證設計可行性。
不僅方便開發團隊掌握流程,還能讓業主快速理解設計與畫面。

設計系統

  • 沿用 PockPro 本身的活潑橘色及可愛的吉祥物,進行延伸增加其他的漸層及色彩,保持一致性的同時,讓畫面更多層次,又不影響閱讀。

  • 讓企業再評估 Redesign 設計時,保有熟悉感,更能帶入情境。

易用性測試

使用Maze與受試者進行線上易用性測試。

達成目標與指標:發現第一代版本問題,調整後進行二次易用性測試

任務成功率提升  19%   錯誤點擊率下降  38%

任務內容

新手使用者能順利創建聊天室,並在聊天室中填寫需求單並與廠商完成簽署合約

測試目的

  • 新手使用者是否能順暢使用pocketpro完成簽約

  • 線上簽署合約的流程是否符合使用者習慣

SUS 易用性量表

SUS易用性平均分數 成長  11%

學習與反思

這次專案與過往 side project 最大的不同是能與企業合作,讓我從商業視角重新審視設計方向。
過程中,我學會聚焦特定使用者群體,優化新手體驗,並透過用戶測試發現設計痛點。
除了小組每週的固定討論,專案中也包含與導師的 power chat 和企業的 session,
幫助我釐清目標、分享進度以及進一步設計研究方向。
這次經驗不僅提升我的設計方法,也更理解商業與用戶需求的平衡。

反覆與業主溝通:聚焦使用者群體

反覆與業主聚焦使用者族群後,釐清業主主要想以現有資源為基礎,
持續鞏固網美及網紅族群,小組因此重新定義設計方向。

測試情境的重要性:為新手打造友好的產品初體驗

初版原型測試,以有產品使用經驗的使用者為模擬情境。而這樣的設計並不符合業主想要擴張新用戶的目標。
因此,我們將測試情境以新手使用者為基礎。
於是在初次使用APP的畫面,移除不必要的資訊,確保新手使用者能快入上手並建立對產品的信任感。

產品迭代思維:從原型測試中發現設計盲點

在初版原型測試,發現使用者容易產生困惑並發生操作斷點。
此狀況使我們重新檢視的設計盲點,也發現不同使用階段並沒有給出明確的任務提示。
設計迭代中,將產品流程拆分成更小的階段性任務,加入明確的文字引導,幫助用戶快速理解並完成每個階段的任務。

​也可以從這聯絡我喔​

linkedin.png
behance.png
instagram.png
communication.png
bottom of page