CatHelper開發手記_太乙之初，專案設計與發想

CatHelper是我開發的前端 SideProject，是貓咪募資收養的一站式平台。

為何我想開發這個專案?

本身我有再餵養流浪貓，平常也常看到 FB 上常有愛心媽媽發起醫治流浪貓的募資和送養文。然而FB 的貼文有個壞處，就是很容易被洗掉，不易後續追蹤。

所以我有了設計這個平台的想法，而去搜尋了網路上相關的平台。

我發現到大部分的平台都只聚焦在募資或收養的一個面向。我覺得募資與收養整合成個流程，讓愛心媽媽(救援者)可以在個平台上直接地完成募資與送養的動作。

從服務流程與參與者為起點構思

在上述的發想後，我先將這個平台的服務流程訂為:

1.救援者創建募資專案

2.其他的用戶捐款

3.救援者更新募資專案的金額

4.當募資成功後，專案的狀態會變成成功

5.專案成功後，救援者可以將募資專案轉成送養專案

6.救援者也可以直接創造送養專案

7.想收養的人可以收養送養專案

有了基本的流程後(WHAT)，再來就是思考參與其中的角色(Who)

1.救援者

2.訪客(可以瀏覽當前的專案，但是無法收養)

3.收養者

用How來釐清與定義流程

再有基本的流程( What)與角色(Who)後，我們就用How來思考角色在流程中該如何行動，我發現到了流程中的兩個問題

1.其他用戶要怎麼捐款?

2.收養者要收養就能收養了嗎?

其他用戶要怎麼捐款?

這部分我在考慮這份 sideProject 的目的是展示性的，如果真的要涉及金流，會增加展示的難度(總不可能要你們真的用藍新金流匯款給我吧)。

所以我對這個流程做了重定義，把過程定義成:

1.救援者創建募款專案(設定目標金額，當前金額為0)，並且留下個人的信箱、帳戶

2.其他用戶透過信箱、帳戶聯絡並捐款給救援者(匯款的部分不會再平台上進行)

3.救援者自己手動更新專案的捐款紀錄

4.金額隨者捐款紀錄的金額而累積，當當前金額達到目標金額，專案的狀態就會變成募款成功

收養者要收養就能收養了嗎?

通常愛媽都會審核一下收養者的身分資格，所以這裡我改成收養者發出收養申請，愛媽在進行審核

所以送養流程會變成:

1.救援者創建送養專案(或從成功的募款專案轉換)

2.收養者看到喜歡的專案，按鈕申請按鈕申請

3.申請的收養者會出現在專案底下

4.救援者看到申請中的收養者，選擇適合的人選，按下核准的按鈕

5.送養專案變成成功的狀態，並且變成收養者的寵物

我們可以整個流程畫成個圖表

用資料庫的方式來思考

在思考完流程，並且將其圖表化之後。我們用資料庫的方式來思考這個流程的故事與角色。

我們會有 用戶 與 專案(貓咪) 兩個資料表，為了滿足上面的流程活動，這兩個表會具備以下的欄位

用戶:

• 角色:救援者、收養者、訪客(無)
• 募款中的專案(救援者)
• 募款專案歷史(救援者)
• 送養中的專案(救援者)
• 送養的歷史(救援者)
• 申請中的專案(收養者)
• 已收養的寵物(收養中)

貓咪專案

• id
• 狀態: 我分成1~4
• • 1:募款中
  • 2.募款完成
  • 3:送養中
  • 4.送養完成

從頁面的角度來構思專案

在完成了以服務流程與資料的規畫後，身為前端工程師。我們最終成果是要做出能夠互動的介面。所以最後來讓我們用界面來思考吧

這個專案會需要

• 首頁
• 募資總覽頁
• 募資專案的細節頁
• 送養的總攬頁
• 送養專案的細節頁
• 救援者後台

1. 募款中的專案總攬
2. 募款完成的專案總覽(成就)
3. 送養中的專案總攬
4. 送養完成的專案總覽(成就)
5. 被申請中的送養專案

• 收養者後台

1. 申請中的收養專案
2. 已經收養的專案(收養紀錄)
   

後台頁面以連結的方式導向其不同的頁面。

最後整合

在上面的規劃後，我們的得到了

• 流程(該有的動作)
• 資料
• 頁面。

頁面中的核心是細節頁，在這裡會因當前用戶與該頁面的專案不同，而在頁面呈現上有所不同。

例如是否出現 編輯、新增捐款紀錄、申請送養、批准送養等按鈕。

以上的按鈕呈現也決定用戶可以怎麼推進專案的流程。