72 小時內,Facebook 將實習生駭客松作品變成大家瘋傳的頭像濾鏡「Celebrate Pride」

評論
評論

美國最高法院在 6 月 27 日裁定同性婚姻在全美國都是一項合法權益。1 這當然引發許多慶祝活動,就連白宮也透過燈光將整棟建築物染上彩虹色。其中,在網路上能見度最高的慶祝活動之一,應該就是成千上萬出現在 Facebook、套上六色彩虹濾鏡的頭像了吧?不少名人,例如 Mark Zuckerberg 也響應了這樣的活動,每個人的頭像更新都會伴隨一行預設的字:「Created with facebook.com/celebratepride」。

Created with facebook.com/celebratepride

Posted by Mark Zuckerberg on Friday, June 26, 2015

Facebook 的團隊最近發表了一篇文章 2,跟大家分享他們是如何將這個原本誕生自內部駭客松、由兩名實習生做出來的小工具,在 72 小時內變成真正在 Facebook 上線的產品,讓使用者可以用來展現自己對 LGBTQ 社群的支持。這個小產品在週末吸引了全球 2,600 萬名使用者更新了自己的大頭貼,這些照片一共引發了五億次的互動。

72 小時

The Pride Bridge is back at HQ to celebrate Pride Month!#prideconnectsus (Photo: @nonogogomomo)

Facebook(@facebook)張貼的相片 於 張貼

其實,這全都是起始於兩位實習生 Austin Freel 和 Scott Buckfelder 在一場內部駭客松發想出來的濾鏡工具,設計靈感來自於 Facebook 位於 Menlo Park 園區內的大型彩虹旗,並且運用公司既有的程式碼做出疊加在照片之上的彩虹旗濾鏡,結果這個小工具相當受到員工的歡迎,而且大家很有興趣把它發展成真正的產品,分享給全球使用者。這樣一來,團隊會需要更多成員,例如設計師和產品經理的加入。

這項專案在一開始就被設定只要花很短的時間做出來,因為當一小群人在週二早上聚在一起討論時發現,如果要趕在週末各種 Pride 活動之前完成,甚至在週五就做出來(他們也預料到裁決應該在週末之前就會宣布),那麼剩下來的時間其實很少,大約只有三天。

簡單,不簡單

首先,要讓大家很容易就可以透過這個工具秀出他們對 LGBTQ 社群的支持,介面必須非常簡單,還要能夠及時體驗他的效果。

螢幕快照 2015-07-07 下午6.34.08

於是 Celebrate Pride 成了一個網頁,畫面中央,在彩虹濾鏡底下,載入的就是使用者目前在 Facebook 的頭像照片,讓大家知道完成後的樣子。底下有一個文字框讓大家輸入想說的話,上頭的預設值是:「Created with facebook.com/celebratepride」,最後按下那個藍色的按鈕,就大功告成啦。

當然,那張頭像並不是「真正」的完成品。為了使用者體驗,必須很快地載入頁面,於是團隊先用 CSS 做出最後的效果,並不是照片真的套上濾鏡,真的套上濾鏡的步驟要等到使用者按下更新頭像後才會開始,這樣一來整個預覽過程花費的資源會少很多。

團隊移除了所有多餘的伺服器 processing 和 UI 潤飾,就是為了要讓使用者更換大頭照的整個過程可以很簡單、迅速。

同時,考量到流量來源的大宗會是行動使用者,團隊利用 Facebook 既有的 web stack 將桌面和行動上的內容最佳化。他們先開發桌面版的,再將程式碼用用到 iOS/Android app,以及行動版網頁。整個過程大概只花了幾個小時。產品上線後果然證明了團隊的假設正確:大部份使用者都是用行動裝置來為自己的頭像加上彩虹濾鏡。

拂曉上線

Facebook 的員工解釋,通常團隊都是在下午才釋出更動後的產品,但為了要在週五一大早就上線,他們決定用當天凌晨兩點的 code push。這套產品上線的流程是六月初倫敦和特拉維夫的工程團隊做的,事實證明,沒有他們先前的貢獻,「Celebrate Pride」根本無法上線。

囧,濾鏡套用的失敗率有點高

產品上線之後還沒結束,團隊持續監控產品的表現,然而很快地團隊就發現了一個問題:使用者大頭照套用濾鏡的失敗率很高!下圖藍色線圖代表有多少人按下「更新頭像」按鈕,紅色線圖代表的是「成功更新」,我們可以看出藍色和紅色的線圖有明顯的差距,而且逐漸擴大。

11414408_496760890479254_448168329_n

團隊深入調查後發現,原來是因為大圖(最大可到 2048X2048)被一個時間複雜度是 O(n^2) 的函式處理時會出問題,這樣的大圖會用到高達 400 萬次的迴圈去處理每一個像素,使得有些使用者會遭遇「逾時(time out)」的狀況。

經過一番修正之後,團隊於週五下午再做了一次 code push,我們從線圖可以看到,修正版推出之後,紅線很快地就接近藍線了。

在同一次 code push,團隊也修正了「Celebrate Pride」在 News Feed 上的顯示方式,首先他們加入了 Open Graph headers:

11414452_324460564344307_375010125_n

其次是調整 facebook.com/celebratepride 的位子,讓這段文字可以跟人們自己寫的排在同一行,讓大家比較會注意到要去哪裡使用這個濾鏡。根據團隊的描述,這兩項改變大大地加速了產品的成長。

11404908_812282118886004_26687816_n

Overall, this project was a great success that touched many lives. We are proud that with the support of a small team, two interns were able to turn a hackathon project into a product used by millions of people within 72 hours.

整體而言,這個專案非常成功,感動了許多生命。我們對於一個這麼小的團隊和兩位實習生便能將一個誕生自駭客松的專案變成一個在 72 小時內讓全球數千萬人使用的產品,感到非常驕傲。

快、快、快

從 Celebrate Pride 這個產品,我們可以看出來 Facebook 這樣充滿駭客文化的模式其實一直都沒變,利用短時間、強調速度的做法一直是這家公司的精神, 過去更曾出現在 12 天內做出一款向 Snapchat「致敬」的 app「Poke」––當時他們必須趕在 App Store 停止接受 app 送審前做出來,因為聖誕節快到了,而且就連 Mark Zuckerberg 也跳下來寫程式。

至於 Austin Freel 和 Scott Buckfelder,他們的點子因為 Facebook 的緣故,在短短的時間內接觸到全球數千萬人,想必會成為難忘的經驗吧?

歡迎加入"Inside" Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

精選熱門好工作

市調平台會員行銷 PM(RIG)

台灣樂天市場
臺北市.台灣

獎勵 NT$20,000

(Backend)Senior Software Engineer

ShopBack 回饋網股份有限公司
臺北市.台灣

獎勵 NT$20,000

前端開發者 / Frontend Developer

奔騰網路科技有限公司
臺北市.台灣

獎勵 NT$4,000

評論