CoPack 共享打包清單 APP
時間｜2023.Aug. - Sep.
我要成為塞趴王 第一航程 Side Project
專案背景
專案執行時間約四周（08/14 - 09/10），主題是從 0 到 1 做出一個生產力工具，每組模擬為產品團隊，專案期間必須完成前期研究、設計、原型、測試等階段，試著解決 1-2 個痛點，由痛點產出產品功能，並把產品的原型做一個展示，最後會有相關經驗的設計師或工程師針對成品給予建議回饋。
設計過程
雖然這次的專案在期限內上傳專案成品，在建立 Wireframe 期間也有進行 Lofi-Prototype 測試與調整，但由於我們這組想延續進行易用性測試，以及對於接收到設計師、工程師的回饋想繼續迭代、雕琢專案，因此在 Side Project 活動結束後，我們組自行額外延長專案兩周，到目前已完成階段性目標，後續也尋找機會與工程師進行開發作業。
‧ CoPack 製作專案時程
發想主題
題目的核心是生產力，但還是需要提出相關的工具主題來進行製作，於是我們開始分享闡述各自的 Ideas Brainstorming 並進行投票，組員對於建立打包清單這項主題有高度的共識，專案主題就此定案，接續搭配黃金圈理論將發想功能做初步的討論，藉以對齊想法、確保組員彼此間所設定的方向明確。
使用者研究：質性訪談
對於打包清單，組員們想法是搭配旅行出遊所使用的行李打包工具 APP，再來就開始提列訪談問題，避免出現封閉式、引導、預設立場、否定式的問句出現，盡可能在訪談中蒐集到使用者對此工具的使用習慣、想法等資料做進一步分析，我們採用親合圖的方式研究觀察結果，在大量資料中做歸納分類，也創建 Persona 來幫助我們更瞭解用戶需求。
‧ 線上開會進行親合圖方式來整理訪談資料
‧ 從訪談的問卷資料，到歸納分類的過程
‧ 根據訪談問卷創建 Persona，幫助我們對焦用戶的需求與距離
觀察競品
在做訪談的同時，也開始研究直接與間接產品的特點，組員們透過下載使用產品，觀察操作功能的各流程，進一步分析使用者的潛在痛點與問題。
‧ 線上開會討論直接與間接產品在操作功能的流程
問題、策略與專案目標
蒐集訪談資料與觀察競品後，我們從中整理、發現主要 3 個問題點：活動前期準備物品的不安感、現有清單分享功能不完善，以及建立清單前耗費大量找資料的時間。針對這些問題，我們也提出相對應的解法，並確立專案目標，產品 CoPack 正式誕生。
視覺原則
1. 簡潔的色彩：
為減少視覺干擾，我們使用中性的灰階色為基底，在重點資訊中才使用品牌色，讓使用者專注於清單任務中。
2. 易瀏覽的介面：
為提高清單使用效率，我們著重於簡化界面、明確規劃資訊內容，確保使用者能夠輕鬆管理清單中的任務。
3. IOS 用戶習慣的操作：
將部分介面設計和 ios 系統相似，讓已經很習慣 ios 介面的使用者降低學習成本，能夠快速理解操作此工具。
Design System & Component
‧ 由色票、字體、icon、Button 等各設計元件堆集組成 Design System & Component 版面
易用性測試
專案經歷過 Wireframe 版本的 Lofi-Prototype 測試與調整後，我們針對 Mockup 版本也模擬任務腳本進行易用性測試，主要檢視使用者能否順利操作產品核心功能：
1. 與朋友共享清單
2. 新增清單項目與調整數量
3. 編輯項目詳細內容與設定負責人
測試完成後也請受測試者填寫 SUS 量表，最後結算出的分數有 80 分，測試結果僅作為輔助工具使用。經過這次的觀察與紀錄，自己也更瞭解到數據指標會因為使用情境、設計介面的理解、使用者的操作習慣而產生變化，需要與使用者的需求一起評估考量，輔助工具會根據投入的參數、條件與框架，產生對應的結果提供給設計師一個方向做參考。
‧ 模擬任務腳本進行易用性測試，與 SUS 量表數據分析
迭代
受測者提出回饋，再加上最後有相關經驗的設計師、工程師給予的建議，我們條列綜整問題，並開始迭代介面與功能：
1. 首頁清單卡片：調整部分的圖示與切、排版
共享編輯權限：擁有者與共有者的層級調整
舊版原設定清單擁有者為最高管理層級，邀請好友區分「可編輯」、 「可瀏覽」權限，但經過重新檢視、考量清單功能與價值， 認為減少層級劃分、簡易進行資訊分享更具產品核心特性，因此決定消除管理與權限的設定，將表單「管理共享成員」的「管理」移除，以及「邀請好友」選項改為「分享清單」，讓加入清單編輯的好友之間沒有權限區分，另一方面，僅單純想參考清單項目的使用者，則適用分享清單的功能做內容瀏覽。
活動分類說明：加入活動分類的使用方式註解
自訂活動分類：部分按鈕不直觀，調整排版與操作介面
點擊自訂活動後，舊版的操作介面中，活動名稱、分類標題、新增項目的區隔與顏色等配置讓使用者較不易理解，更新版調整自訂活動的名稱標題為第一操作流程，再進入該活動內容中繼續下一階層的編輯作業。
清單內容介面：更新部分的圖示與切、排版
增加與新增：調改「+」元件按鈕
清單頁面中，「+」元件所製作的按鈕重複用於物品數量增加、新增項目、新增分類等功能，舊版的「+」按鈕元件在視覺上不易區分各別用途、容易產生混淆。
針對這項問題，在更新版本裡，數量增加的元件維持原狀，並在新增項目功能「+」按鈕直接加入文字。
另外，舊版新增物品種類設定在清單項目的最下方，思考到如果清單內容項目量多（資料很長），在新增各分類與物品項目會不好操作（新增分類需要滑到資料內容最下方，新增物品則要滑動找尋該分類名稱），因此調改以黑色「+」按鈕，將這兩項功能收納在其中，並隨滑動皆固定於裝置畫面底部，讓使用者更便利操作。
探索頁面的精選清單：顯示具體儲存狀態的提示文字
Prototype
最後，很感謝發起 Side Project 的同學以及我的組員們，這次共同執行一個月的專案經驗對目前的我而言紮實完整，也在這次的協作活動中認識到很多厲害的設計師，自己除了更熟悉 Figma 功能以外，同時也訓練問題訪談、意見溝通、指標輔助工具與設計思維等多項技能，透過做中學，是最有效率、最具深刻磨練的方式，不斷調整視角，以及將作品進行雕琢的過程帶給我成就與成長，經歷這次的收穫，更確立自己熱衷於優化產品、探索設計作法來提升使用者體驗，之後也會持續汲取相關的知識化作養分來投入實作。
‧ 在專案結束後自由參加的線下見面會，組員們預留時間一同聚會交流
© 2024 Ching Lin. All rights reserved.
Crafted with 50% Passion, 30% Focus, and 20% Innocence.