如果你對自己經營電商有興趣，或是企業轉型、想跨足網路購物平台，那你一定會聽過 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 網站）
數位行銷工具應用者。從企劃、網站規劃、文案、社群、網路行銷工具無所不包。 大腦如果和網路資料庫連結，多少可以緩解資訊焦慮症狀。
