如果你對自己經營電商有興趣,或是企業轉型、想跨足網路購物平台,那你一定會聽過 91APP 的名號。若近期有造訪 91APP 的網站,一定會在其他網頁、FB、IG 中,都看過他們「年中慶」的廣告,也會發現 91APP 網站近期有大改版。沒錯,CTK Pro 很榮幸身為 91APP 的合作夥伴,在短短一個多月的時間內,協助 91APP 進行了網站大幅調整。
經過多輪融資,91APP 已經發展為 500 人以上的大公司,決策所需時間已不像是幾十人的中小型企業一般容易。在執行 91APP 網站改版的另一大挑戰,就是時程上壓縮地相當緊迫,要能在時限內完成設計稿、修改,到系統、WordPress 開發,許多決策和任務的執行,是靠著雙方積極配合才能達成任務。
91APP 在此次網頁設計的要求,也以「國際化」、「大器」、「簡約」為出發點,仍要融合其主打的特色如「OMO 融合」、「新零售」、「銷售業績成長」等訊息重點;操作使用上,也不能違背 91APP 一直提倡的「行動優先」的使用情境,就讓 CTK Pro 詳述我們是如何克服此次挑戰!
91APP 作為一電商平台,網站最主要的目的還是引導使用者,並且創造點擊,提昇按鈕或連結的 CTR(點擊率,Click Though Rate)。在 91APP 改版初期提供 wireframe 的階段,就明確希望網站有一套 UI Kits 的規範可以參照,未來在擴充/修改文章時,除了按鈕樣式搶眼,仍可維持相同的瀏覽體驗。
有了按鈕參考的準則,CTK 考量了 91APP 想要傳達給目標受眾的訊息,設計一系列不同的圖文排列組合,除了能強調功能特色,滿足實際需要了解的受眾,也適時加入客戶實際體驗的分享,加強資訊描述的面向。
整體風格則是透過精心調整的段落樣式、字距、行距、字重等參數,再搭配滿版/漸層的圖片,一次展現 91APP 跨平台卻又互相融合的理念。有了這些基礎,後續因應 91APP 之特色、焦點數據,也分別製作了 Icon、動態數字做視覺的強調,於部分頁面,調整字體形成反差,快速吸住訪客的焦點。
最早接獲 91APP 網站改版的資訊時,比較訝異的是極短的完成期限。包含頁面調整、上稿以及圖片的佈署規劃,都需在短短一個月修改至可公開上線的狀態。
好在不管專案大小,CTK Pro 都貫徹敏捷開發管理的使命,相信在這麼短的時間內,能準時交付的網頁設計公司不是那麼容易找到的。
確認開始執行網頁設計後,CTK 從創意發想到 mockup 的設計呈現,交給資歷五年以上的專業設計師來主導。風格幾經修改後,雙方對於網頁改版的設計風格達到共識,為了加快整體開發製作,部分頁面也憑著 CTK 的經驗與 91APP 的信任,跳過設計稿確認階段,直接使用 WordPress 開發製作。
▲ 全站精心調整的 CSS,檔案大小約只有 91APP 競業的 1/10
全站的 CSS 經過 Tech Lead 的審核下,CTK 得以同時開發數個頁面。透過長年累積的敏捷開發經驗,我們每天也只需要花早上五分鐘的站立會議時間確認任務細節,工程師製作若有問題則即時反饋於 PM;對於已提供給客戶審閱的頁面,也會在收到修改確認後,即時修正任務內容,以縮短製作時程。
91APP 的網站本來就是使用 WordPress 建置,其使用的 Avada 這款 Theme 搭上 Fusion Builder 編輯器,讓一般使用者製作屬於自己的網頁時,也有相當多工具、樣板可以使用。為了讓 91APP 行銷人員可以更熟悉、簡易的上稿,CTK 就 Fusion Builder 為底,達成整個網頁的功能開發。
由於 Fusion Builder 還內建了全域元素的資料庫,也讓 CTK 放心的將版面樣式存入資料庫,一來於上稿時可省下大把時間,二來也讓 91APP 網站維護人員,也可以達成像是「左圖右文、右圖左文皆於行動版中上圖下文」之較為複雜之排版。
強調行動裝置瀏覽的 91APP,自身的網站自然也要作為模範樣板,給使用者良好的行動裝置體驗。對此 CTK 開發出數個不同針對桌機/行動裝置的功能:
♞ 手機版下拉式選單
♞ 頁面滑動時 Anchor 焦點顯示
♞ 表格收合功能
♞ 巨大表格,針對手機版特別調整與切換效果
♞ 手機版下拉式選單
方便使用者更快速找到需要的功能
♞ 頁面滑動時 Anchor 焦點顯示
更清楚現在瀏覽之功能,便於使用者記憶
♞ 表格收合功能
再長的表格也不用怕瀏覽體驗不佳
♞ 手機版的巨大表格
表格 RWD,針對手機版特別調整的顯示方式與切換效果
此案件頁面數不少,交付期限又相當短,但 91APP 在網站製作初期就給了明確的目標,也提供了相當完整的 Wireframe 參考。在文案、圖片都有配合到,CTK Pro 卯足了全力協助,最終還是趕上了 91APP 的週年慶!
☞ 91APP 官網
(本文圖片出自 91APP 官網、fusion builder 網站)