設計師的公民參與：用遊戲拆工廠 🚧

Jun 29, 2022

軟體服務真的可以改善社會嗎？

本文為 2020.12–2022.06 參與專案的心得，業餘的時間有限，並沒有參與整個專案的所有細節，就針對我知道的寫。

2020 12 月與家人一同出遊來到台東都蘭，住的是晚上能夠清楚聽到海浪聲的木造小屋，在大廳閒聊時搭訕一個獨自旅行的可愛女生，一聊才發現我們根本有共同好友？！她拿出手機給我看她正在參與的專案，原本度假鬆鬆的腦袋運轉了起來，「我們現在剛好缺設計喔！」小班說。

於是休假結束回到台北後，參加 disfactory 每週三晚上在地球公民基金會（以下簡稱地公）的小聚，聽了議題介紹後覺得很值得投入，就一直跟到現在。

disfactory 是做什麼的？

簡單說，disfactory 是個回報系統，給家旁邊有違章工廠、但不想惹事的人，用手機定位、拍照上傳的方式，有了照片，就可以讓地公的成員去向政府出公文檢舉，進而讓工廠被稽核、甚至斷水斷電。

在沒有這樣的流程之前，因為利益關係（背後還有很多原因在此不贅述），地方政府不想管違章工廠，而在地公這幾年的努力下，現況改善很多，地方政府甚至開始在這塊編列人力預算。disfactory 回報系統在給政府、違章工廠施壓這塊，確實有用。

disfactory 除了回報系統網頁，還有後台管理系統、批次產出公文的功能等等，是個龐大的軟體服務，參與貢獻的人來來去去，靠強大的 PM 小班（可以讀她的分享文）還有地公的人們定時定量的把大家聚合起來，這點是我覺得這個專案最了不起的地方。

disfactory 官網設計

官網：https://about.disfactory.tw/

進到地公後才知道，議題的深度與廣度都很重要，所以靠媒體報導、民眾間的傳播、教育等等，都是議題推廣重要的一環。網站的上線時程與政府政策的時間點有很大的關聯（為了記者會能有東西看）。

行銷的切入點：食安

在製作官網的內容之前，花最多的時間是討論行銷的切入點，也就是首頁 banner 要擺什麼？過程雖然我不是主要發想者，但是在跟著大家來回提出想法、辯駁的過程中，學到蠻多的。

本次定調議題需要與民眾溝通，期望的是要能勾起人民的不滿（與人民的生活產生連結），進而要求政府改善，因此將「農地違章工廠」與「食安」做連結，又因為當時正好要過農曆年，發想出的「我肚子裡的年菜有被工廠加料嗎？」的構想，並且能讓來的人填寫自己的家鄉，來查看該區域有多少違章工廠。

設計發想與製作

有了構想之後，花一週的時間把其他地公想要呈現的資訊圖表，畫出 wireframe，接著討論修改，再花一週的時間畫 UI、研究圖表呈現套件，因為時程非常趕，速速開會討論的過程中，另一位設計 SL 就把一桌年菜的插圖生出來了。在 disfactory 做事，常常會有種感覺是 —— 正忙的時候就會有人出手把剩下的事完成。

接著就是一邊修改 UI、文案潤飾、補上手機版本，一邊前端開發、調整 SEO、製作行銷圖片，混亂的就在農曆年前生出官網了。

農曆年過後成果檢討，雖然沒有如預期的製造出一波年前分享大熱潮，但是官網整體的資訊與圖是穩穩的有新的使用者成長，大部分來自於記者會、新聞報導、自然搜尋流量。

參與的學習

團隊合作的過程就是每週三晚上定時的聚會，可以選線上參與，或是到實體辦公室一起討論。對我自己來說，參與 side project 的好處就是脫離工作的舒適圈，跟不同的團隊人員合作、激盪不同的火花。特別是行銷討論的腦力激盪，雖然燒腦，但是很有趣。

因為是使用 Figma 製作頁面，與大家的協作都方便許多，PM、地公的人可以在上面留言，其他設計可以協作修改，前端可以自行出圖。

在與其他的設計師協作的方面，個人也是獲益良多，因為本身一直都是公司的一人設計團隊，關於如何交接、如何帶新人、如何分配工作⋯⋯都是很好的練習。

最後我在前端製作前有大概出了一份 style guide，版切出來後跟圖長得一模一樣🥰 身為設計覺得非常感動。

What’s Next?

利用衛星空拍圖來判斷是否為違章？

遊戲連結

一次小聚 PM 提出：利用比對衛星空拍圖的方式，是否能更快找到違章工廠？由此開啟了這個將近一年的專案。

✨ 成果：在 2022.05.01 上線後，我們資料庫需要被辨識的點位瞬間就被廣大的群眾辨識完了⋯⋯ 目前收到了 42,501 筆來自民眾辨識的回答，成功送出回答的使用者數量： 6,040（持續累加中）

算是有達到我們當初設定的目標：用不同的方式接觸人群、讓人參與。

產品雛型

一開始討論產品定位，決定這個遊戲是擴大議題推廣的手段，辨識點位是其次（因為也可以請工讀生來辨識就好），以不同的形式讓「違章工廠」這個議題接觸到更多的人，所以用「鍵盤參與」跟「實際回報違章工廠」的系統作區別。

決定好產品定位後，產品開發那邊就開始找地圖的來源、可疑點位的來源、辨識圖資的顧問（神奇的有很多這方面有經驗的人的幫助）、擬定辨識規則、找前端後端人員。

行銷、設計開始想要怎麼把無聊的點位辨識包裝成遊戲。

產品設計

設計上花最多時間的有兩點：

教學流程：讓使用者理解辨識的規則（是沒有正確答案的、並不是遊戲），並順利完成辨識。
模擬簡易的 8-bit 風格，讓辨識有趣吸引人。

這過程中 wireframe、文案大概改了八百個版本，雖然都有做 prototype，但一直到前端把畫面刻出來，實際找人做使用者測試後，才將文案與流程調整成大致上好懂的模樣。

而會選擇 8-bit 風格是因為「遊戲」直覺的聯想，以及看到地公之前也有用 8-bit 做網站頁面，效果很不錯，這種風格明顯的設計就是一種「站在前人肩膀上」的設計，可以比從頭發想視覺，要快速的讓使用者進入「遊戲感」的狀態。所以就花了一些時間學習怎麼畫 8-bit 風格的圖。

我這邊最後花了一些時間把圖片做成可以動的 gif，將首頁、ending 的動畫調順（盲看我還看得懂 vue.js 😭）並且在上線前埋了流程的 GA event，終於在開啟專案的一年後完成上線。

另外官網的入口設計、不同管道的分享的行銷圖片，也在大家的速速討論 idea、協力下完成了。這個專案最大的苦主應該就是前端了，遊戲感的 style 原本就不好切，原本是切版生手的他做完就變切版王了 👏

檢視成果時，設計 SL 建立了 datastudio 查看 GA 數據，真的比 GA 原本的爆表要好懂很多：

小結

回到文章一開始的叩問：軟體服務真的能改善社會嗎？在這個專案一年多，確實有看到地方政府動起來，議題也有不同的媒體報導、接觸到不同的人，另外聽到地公也因為與我們（善用科技的人）協作，間接讓基金會朝數位轉型方向邁進——例如：以前他們是都不寫文件的（竟然？）、溝通是用 Line 以及各種四散各處的管道⋯⋯這些改變也是大家一開始沒想過的。

而能夠認識議題、不同興趣的人，更是參與專案、學習技術等等以外，最珍貴的事了。