Fast-Sign
專案概覽
快點簽是一個線上簽署工具。為六角學院舉辦的The F2E 第四屆 前端& UI 修煉精神時光屋第二周主題。
活動採用 UI、前端接力合作，每周有不同的題目，前端工程師可採用 UI 設計師的設計稿，一同產出完整作品。
設計理念
用簡約、不過多的裝飾設計，目標是讓使用者可以專注在完成簽署的任務。搭配適當的插畫來表達情境，增加「快點簽」這個產品的情緒與情感的傳達，增進使用者與產品的連結。
產品目標
- 一進到首頁，訪客使用者免註冊即可完成簽署任務。
- 可以邀請共同簽署人。
- 除了排列共同簽署人順序，也可以設定簽署期限。
- 會員登入後可以使用檔案總管，更方便管理所有簽署檔案。
- 提供使用者編輯檔案的基本功能。有刪除、複製、重新命名、移動至資料夾。
1/4
使用者故事&情境模擬
使用者A：高階主管
我必須在 10 分鐘內簽一個線上合約，否則就會違約！
問題痛點
我人在車上，手邊只有合約紙本，計程車也來不及親送到合作廠商。
解決方案
我拿起手機將合約紙本掃描成 IMG 檔，打開 Web Canvas 簽名工具，上傳 IMG 文件並即時簽名，並下載簽名後的 PDF 檔案，即時回簽給合作廠商。
使用者B：公司職員
合作廠商透過 Email 提供 PDF 文件，請我簽名回傳。
問題痛點
因為列印機壞掉，所以沒辦法列印紙本出來簽名並掃描回傳。
解決方案
我用公司的筆電，打開 Web Canvas 簽名工具，上傳 PDF 文件並即時簽名，並下載簽名後的 PDF 檔案，即時回簽給合作廠商。
2/4
功能架構&規劃
在這次活動中，規劃了不同階段的功能切分，讓工程師可以依照自己想練習的技術來開發！
3/4
介面設計
訪客可使用
免註冊，拖拉檔案即可使用簽署工具。解決急需簽署的使用者的問題。
簽署設定
簽署控制板，簽名檔為必要功能。
使用者可以使用on/off開關，視需求來切換邀請簽署人，與設定簽署期限。
檔案庫
查找資料以及編輯檔案是所有檔案庫裡面最常使用的功能。因此讓使用者快速找到所需功能為主要設計目標。
設計系統
包含設計原則規範、可重複使用的 UI 物件，以及可模組化的開發元件等等。
4/4
反思與行動
在這次主題中，在和工程師溝通過程中遇到幾個問題。記錄下來提醒自己，未來也能夠加以調整和進步！
- 字型缺字問題。
在使用輸入簽名檔的時候，我設計了三種字型供使用者參考。其中一款手寫字型被工程師點出缺字問題嚴重，因此補上另一款手寫字型供工程師使用。
- 釐清格式的意義。
題目中敘述的IMG檔，因不清楚檔案的屬性為何，誤認為是一種掃描圖檔的新技術。後來經過工程師補充，才了解IMG檔是一種統稱，泛指JPG、PNG……等。
- 用字上的準確度。
經過以上的反饋後，我重新將題目看過一遍，發現我在上傳檔案格式的提示文字中，把MB打成Mb。也在網路上多方搜尋求證後，確認MB與Mb是不一樣的單位。
感謝工程師採用我的設計稿來開發，辛苦你們了！
還有很多可以進步，謝謝你們讓我看到不足的地方！
感謝你滑到這裡！
希望我的設計以及解決方案能和你產生共鳴😊