設計平台
Web
專案時長
約5週
專案成員
團隊共6人
負責工作
Wireframe、Ui、Prototype
競品分析、問卷調查、易用性測試
根據國際咖啡組織統計，台灣人2021年共消費72.5萬包咖啡，且其中有41%的人習慣在家自己「手沖咖啡」，甚至大於超商或咖啡店購買現煮咖啡的比例。但我們發現相較於國外，台灣多為零散分散的獨立販售咖啡店，量販或超市的咖啡豆選項也不多，較少有專業統整的平台供消費者做比較選擇，因次台灣人在選購咖啡豆時，要自行上不同網站比較各種咖啡豆的差異、或是至連鎖/獨立品牌的咖啡店購買，不但耗時也耗費心力。
從國際咖啡組織提供的資訊可看出咖啡豆在台灣是擁有龐大市場的，因此我們希望針對「有在購買咖啡豆的人」設計出一個「咖啡豆訂閱制」的平台，讓消費者自由根據喜好與需求做選擇，平台將會根據所選頻率配送到府，以確保最新鮮的咖啡豆、免去消費者到處尋找咖啡豆的成本、以及可能因為忙碌而忘記補貨的困擾。
本專案為2023年參加AAPD所舉辦之「UI設計實戰營」的畢業專案作品，由於時程關係共分為兩個階段：
・第一階段為2023.07 – 2023.08，約2週
・第二階段為實戰營結束後我與其中一位組員繼續進行產品迭代，於2023.11月完成，約3週
24/7咖啡訂閱服務平台，整合來自不同國家、獨立品牌的咖啡豆，包含咖啡廳自家烘培、當地小農栽種的咖啡豆等，推廣在地咖啡特色，提供多種風味的選擇，透過訂閱服務，提高金流及客源的穩定性，也讓有購買咖啡豆習慣的使用者，可以節省在不同平台或實體店面尋找咖啡豆的時間。
由於實戰營時程非常緊湊，製作畢業專案的時間甚至不到2週，因此計畫先將最小可行性產品製作出來，我們定義了使用者從到訪網站到完成一個訂單之間必經的happy path，以完成must have部分為優先，本階段我主要負責logo繪製、wireframe提案、Ui設計(商品資訊頁)及prototype的串接。
24/7意指一天24小時，一星期7天的縮寫，即全天候營業、提供服務且全年無休。因此我們將產品取名為24/7 coffee，並以明亮溫暖的橘黃色定為我們的主色系，希望帶給人們熱情友善的感覺，「我們的服務24小時不打烊，全天候在線等你來體驗！」
・用戶友好性：多以圖像代替繁雜的文字解說，避免造成使用者的認知負荷，輕鬆了解網站功能並完成操作
・簡約舒適：視覺配色簡單乾淨，元件間距適當
・直觀設計：透過明確的視覺引導有效向使用者傳達訊息，讓使用者可以聚焦在當下任務
在確認所有人對於產品頁面有共同共識後，我們各自搜集競品參考，每個人都針對核心頁面畫出自己的想法，並在開會時各自說明設計理念，藉此聆聽每位成員對於產品的不同想法，最後定案如下：
在短短一週的時間內，我們分工一人負責一個畫面，並在 design review後進行了許多邏輯、流程與元件的調整，最後產品畫面如下：
實戰營結束後為了希望讓專案更完整，我邀請了其中一位組員進行第二次迭代
我們針對講師們給予的建議回饋做修正、重新審視整個專案需要調整的地方，此外為了更加了解使用者與驗證想法，我們設計問券進行調查，並在中後階段進行易用性測試
此階段我主要負責競品分析、ui畫面調整（首頁/網路商店/商品資訊頁/結帳流程）以及調整完的使用者易用性測試
除了分析競品在「訂閱制」上所提供的服務，我們也截圖競品的每個流程頁面在旁邊做筆記，一起討論認為做得很棒可以參考的地方、以及不太直觀的地方作為借鏡與練習，同時也重新審視第一版本的內容＆流程，逐一列出希望修改的地方。除了咖啡豆競品外，我們也參考了各式各樣有「訂閱制」服務的網站，例如Sakemaru（專賣日本酒的網站）
・了解我們的痛點與假設是否真的存在於大眾身上、我們的設計是否真的被需要
・投放4天，總共蒐集到72份有效問券（投放群組包含：設計師群、咖啡師交流群、手沖咖啡討論版、咖啡知識討論等群組）結果如下：
問卷調查的結果非常讓我們驚訝，原先我們所做的happy path為主推「訂閱制」服務，但實際調查發現會因為「訂閱制」而購買的使用者並沒有想像的多，約33％的使用者會願意提高使用意願，但將近20%的使用者都選擇了3(中間值)；反而是超過半數的使用者在咖啡豆的偏好上，是屬於「固定口味但願意嚐鮮」、42％的使用者甚至「喜歡嚐鮮/變換口味；而在「驚喜包」服務上，則有51％表示會增加購買意願。
因此我們更是確定要將另一條路線「好豆配對小測驗」做出來，並且設計為產品首頁的主打亮點，此外，有在喝咖啡＆自己購買咖啡豆的使用者比例、及使用者對於咖啡豆的購買要求（價錢、豆子新鮮度、時間）這幾項都驗證了我們的設計是符合使用者需求的。
透過問券調查，我們發現使用者對於嚐鮮意願偏高，因此我們將「好豆配對」設計為主打服務，透過5個簡單的問題了解使用者對於咖啡的喜好後，由系統推薦專屬咖啡豆。
此服務為定期配送，且會針對該顧客所填寫的喜好每期配送不同的推薦豆子，不過用戶若不滿意也可到設定的地方調整，或是隨時取消。
我們希望透過這個更新，能夠強化用戶參與度，同時也增加新鮮感與互動感，配對結果出現後導向訂閱選項，促進用戶下單率。
左圖為修改前，右圖為修改後
左圖為修改前，右圖為修改後
原本的設計為：使用者若想選擇訂閱方案，需點擊該區塊，會向下展開「繳費方案」＆「配送包數」提供選擇，且+1的按鈕會讓人產生困惑不知道是一次來2包、還是訂閱到2個方案，因此重新設計簡化該欄位，除了可以一目瞭然之外，也可以減少困惑感
左圖為修改前，右圖為修改後
第二版本修改完成後，我們邀請了4位有在固定購買咖啡豆的客群進行操作測試，針對「功能流程面」以及「UI介面設計」得到以下建議與心得反饋：
紅字部分為重複被不同使用者提到的問題，我們將之列為優先修改的項目，其他意見則回扣專案目標去定義為本次或下次迭代範圍，例如Zoe提到的「咖啡專欄」為第三階段的範疇，因此將暫時不列入修改範圍
經過討論後修改如下：
調整內容：
1. 於進入的第一個頁面新增簡介說明，讓使用者更清楚目前狀態與將會體驗的路徑
2. 更改「其他推薦咖啡」呈現方式，並調整間距讓它可以在同一個畫面中出現
3. 更改結果的風味描述呈現方式，不要像是可點擊的按鈕
4. 「方案」與「頻率」融合到同一個頁面，且「方案」的選取狀態修改為跟其他題目同樣，增加一致性
5. 方案結帳前，新增每月付款與下次扣款日等相關提醒文字
調整內容：
首頁 – 由於有2位受測者都於進入首頁後的第一個動作就跳入網頁其他內容，我們發現最主打的的「什麼是好豆配對」並未被其注意，因此調整間距剛好符合一個畫面的大小，調整後使用者能夠立刻注意到該區塊，並且我們也將CTA按鈕移至該區塊，在用戶閱讀完「什麼是好豆配對」若產生興趣便可直接點擊進入
商品資訊頁 – 商品資訊頁也發生同樣的問題，由於切割的太剛好，導致受測者不知道下方還有資訊，因次調整間距，並將tag標籤移至圖片上，讓這一頁與上一層「網路商店」呈現方式相同，增添一致性
調整內容：
多位受測者反應加購購物車回饋感不夠強烈，以為沒成功加入
