About

Resume

About

Resume

專案名稱

Flygo 飛果出勤打卡 0-1

擔任角色

UI/UX 設計師

專案時程

2019/04 - 2019/08 ( 4 個月)

負責項目

介面流程規劃、易用性測試、使用者訪談、設計準則

專案概覽

專案目標

完成基本打卡及出勤功能為主，規劃流程包含打卡、假單、簽核、會員個人設定。

合作與產出

我與 UI 設計師、UX 設計師、PM、2 位後端及 iOS & Android 2 位工程師合作。產出為介面流程圖、Prototype、設計準則、App Logo 。

專案挑戰

於時限內規劃完產品 0-1 介面流程，每週需產出設計提案與開發部門凝聚共識，上線前需不斷執行測試並調整流程。

成果及影響

上線 1 年後，共 5000 家企業使用，收益部分也逐年提升。

設計流程

擬定商業策略

產品背景

公司建立以來缺乏一個完善的打卡系統。有一天，我們其中一位產品經理提出了建立打卡產品來解決這個需求。隨後，該產品經理認為這個點子具有商業可行性，於是我們和高層進行了商業模式的討論，最終決定將它打造成我們公司專屬的自有產品。

開發打卡產品的原因

公司擁有

完整的開發團隊

新創團隊

無完善的打卡制度

接案公司

希望有自家產品

商業模式

我們想把目標用戶鎖定在與我們相同的新創公司或中小企業，且人數為 50人以下的公司，考量這些企業規模與成本預算有限的情況下，首步階段我們採取 App 免費機制並以廣告投放為首要主打策略，先以提升企業及會員轉換率為主要目標，未來才會規劃收益方案。

中華民國統計資訊網：中小企業目前為 70000 家，每家估 20人，預計使用人數 140萬/人

需求探索

競品分析

規劃產品時，我先去操作競品的流程，重複觀看並思考背後的設計原因，對數位打卡有一定的理解後再開始著手介面的規劃，分析競品後，我們決定先列出三個最常使用的功能：打卡、請假、主管簽核。

競品功能表

除了 APP 版的勤務系統，同時也參照網頁版的相關範例

定義功能

在核心功能確定之後，我們進一步細化需求資訊的結構。這包括表單，如請假、出差、補打卡和加班，同時也需要列出個人資料中包含的詳細功能。

介面設計

打卡功能

Step 1

執行與發想脈絡

最早提案我著重在「上下班」的文字呈現，但後來與團隊討論的結論是：用戶比較關心的是自己是否在打卡範圍和時間內，因此我們朝這個方向去規劃，精簡文字並將複雜的介面調整為較清晰的閱讀空間，最終定案以兩顆按鈕，左「紀錄GPS」及右「卡打」按鈕為主，以此版本執行易用性測試。　

考量外勤打卡需求，最初提出的打卡版本都以兩顆按鈕為為主

打卡提案過程

Step 2

易用性測試

打卡流程於後續訪談中，大多數的回饋為良好的，一顆按鈕除了相當容易操作外，用戶其實對於「首次打卡」與「末次打卡」的也大多數能理解，因為使用者在連續點擊時就會發現，數位打卡鐘真正的用途在於可彈性「紀錄公司位置與時間」，不會被侷限在「上班和下班」的文字定義上。

經過測試後，發現用戶對於紀錄 GPS 的按鈕易造成很大的困惑，也間接影響「打卡操作時間」，因此測試我們決定移除二顆按鈕的設計，改為一顆按鈕的打卡形式先上架做測試。

Step 3

一鍵按鈕打卡

定義打卡行為後，後續思考的情境就是詳細列出打卡錯誤狀態，像是遲到、忘記打卡、提早打卡等等，同時也要去規劃打卡時間所產生的發生情。

Wireframe 打卡流程

表單申請

整合所有與請假相關的功能，包含請假單、出差申請、加班單、補打卡申請，操作上只要簡易的輸入起迄時間後，便可快速送出審核假單，送出後即可在當日紀錄上看到申請狀態。

細節與優化反思

假單是我認為在規劃上最簡單的流程，但是當看到其他競品做的更好時，我會去反思如何將一個看似簡單的功能再做更深入的優化。

1.CTA 按鈕放置於最底部，因操作流程由上到下最後填完送出比較直觀且符合用戶操作邏輯。

2.鍵盤上新增標籤功能，整理出請假的常見標籤，讓用戶直接點擊貼上，省去打字的麻煩，將大幅度提升填寫假單的效率。

假單是我認為在規劃上最簡單的流程，但是當看到其他競品做的更好時，我會去反思如何將一個看似簡單的功能再做更深入的優化。

1.CTA 按鈕放置於最底部，因操作流程由上到下最後填完送出比較直觀且符合用戶操作邏輯。

2.鍵盤上新增標籤功能，整理出請假的常見標籤，讓用戶直接點擊貼上，省去打字的麻煩，將大幅度提升填寫假單的效率。

主管簽核

一開始以為簽核就是待審核列表，然後不斷去思考資訊架構如何更加精簡或是哪些資訊是主管最想看的，但是當我們回歸到現實情境後，考慮到主管可能一天就需要審核多張假單會相當耗費時間，因此運用滑動卡片及快速點選的互動行為，讓主管可在短時間內處理大量的簽核表單。

此設計靈感來自於交友軟體常見卡片設計的略過行為，後續聯想到的是審核假單也等於一項個快速且簡略的操作行為

其他設計

飛果 Logo 設計

設計概念｜Concept

打卡是一項每天都要執行的過程，在出勤的發想上運用羽毛的簡潔概念，象徵在緊湊繁忙的上下班當中，能如同翱翔羽毛般那擁有愉快的上班心情。

打卡是一項每天都要執行的過程，在出勤的概念上運用羽毛帶出方便與簡潔的概念，同時也象徵每個人出勤上下班時，在緊湊繁忙的過程中，能如同翱翔羽毛般勤快並擁有愉快的上班心情。

色彩計畫｜Color

飛果代表著嶄新的氛圍，而羽毛在盤旋更意味著展翅高飛，所以在顏色上採用具有溫暖調性與陽光張力的橘黃色。

統整設計準則

因時程關係，先前是由另一位設計師先快速執行 UI Mockup，而上線後設計準則才繼續迭代完成的，我後續也負責把該產品的設計內容再梳理一次。從色彩、文字、元件到介面都重新統整，讓工程師後續再迭代畫面時可參照較完整的設計準則。

上線與迭代

後續主要以提升企業使用數、留存率、廣告收益為目標，因此除了不斷優化舊有功能與增加曝光率外，在產品上架後也開發了許多新功能，像是啟程(提供上班族課程)、增加廣告收益(吉祥物3天免廣告)、體溫及工作回報(因應疫情)，未來也有籌畫付費方案的功能(薪資計算、彈性排班等等…)。

專案反饋與結論

這案子讓我印象蠻深刻的，而這件事情也影響了我往後設計表達的方式，當初我和 PM 因為打卡要用一顆按鈕還是兩個按鈕而起了一些爭執，然後我並沒有提出很有說服力的重點，所以最終抉擇為使用一顆按鈕，如果換作是現在的做法，我可能會想辦法提出更具有說服力的原因和具體的設計脈絡來去表達我的設計概念，這也是讓我學到設計不只是呈現想法和設計結果，也要詳盡闡述背後思考的原因。

這是我第一個主導自有產品 0-1 的設計，也是我 UIUX 職涯中經驗最豐富的一項專案，因為商業策略到實際上線我都全程參與，而且整個開發過程我也不斷練習如何把 UX 給做好，除了不斷規劃介面流程之外，直到上線後我們還持續執行使用者訪談，後續也統整設計準則，所以我非常感謝當初的 PM 願意給那時新手的我很多嘗試的機會，而這一項專案帶給我更多的收穫是與工程團隊部門的配合，我也從這之間學會到如何更有效率的與工程師團隊溝通。