軟體服務真的可以改善社會嗎?
本文為 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 以及各種四散各處的管道⋯⋯這些改變也是大家一開始沒想過的。
而能夠認識議題、不同興趣的人,更是參與專案、學習技術等等以外,最珍貴的事了。
心動了想加入嗎?
- Disfactory 跳坑指南:https://g0v.hackmd.io/@yukaii/Disfactor
- GitHub Repo:https://github.com/Disfactory