嶄新首頁。

以滿版圖片作為視覺中心，透過精心拍攝的形象訴說服裝的本質及搭配。每張圖都是一個主題，搭配簡短文字快速引導顧客探索多元內容。同時，在首頁的有限區域內，可以快速總覽不同功能，包含活動訊息、熱門品牌、推薦單品、社群上的穿搭日常，在行動裝置及社群軟體普及的時代，以快速閱讀的可能性進行思考，提出俐落的提案。

As a Designer &
Project Manager

身兼設計與專案管理的身份，成為深具挑戰的課題之一，不同面向的思維在內在產生衝突與矛盾，好的購物體驗要先定義出好的操作流程、前端想要呈現的資訊要先經手後端經年累月的資料庫架構、發現有更適合的設計要考量上線的開發時程、和不同部門溝通要能靈活轉換 Mindset 和語言，所有過程中的選擇，透過數據及經驗，整合出「最適切的方案」。

Process

透過不同部門的訪談，整合痛點、需求、期望，針對資訊架構進行整理及提案；進入設計階段後，探索整體風格並尋找適合的元素，進行數次提案討論後，邁向前後端開發工作及後續測試上線的準備，歷時三個月設計、三個月前端開發、三個月後端整合、半個月測試後於 2016 年 11 月上線運作至今，並持續優化。

#Designer

清晰的商品分類是購物時的最佳索引，透過具層次感的設計與動態效果，引導顧客在不同欄目中發現搭配樂趣。大尺寸裝置的設計中，具有較大空間，因此穿插商品、活動 Banner 以增加點擊。

#ProjectManerger

前端清晰的閱讀層次必須仰賴後端對應的資訊架構，本次改版中大幅度重整過去近八年不斷層疊的商品資料庫欄位與內容，結合 ERP 讓商品建檔延續至官網上架，整合出一套有系統並具擴充性的前後台架構。

#Designer

購物網站最重要的主角就是商品。商品的系列頁面設計中，盡可能讓圖片放到最大，並針對不同商品的拍攝提出尺寸建議；每週更新的新品頁面，搭配持續表現傑出的形象輪播，並在單一商品頁強化與活動的連結，而品牌頁也增加類型的索引，加速顧客找到想要的商品。

#ProjectManerger

商品資訊的內容既複雜又多，透過社內員工瀏覽習慣的調查，建立改版後的閱讀的層次，提供基本的設計邏輯：強化商品照的露出、最大化搭配照的空間、給予明確的選擇提示、突顯品名及價格、其餘商品資訊以最小化空間呈現、強化商品與活動的連結。

#Designer

這是設計上最費神的區塊，在滿足行銷操作需求時，要建立商品與活動連結，但又不能過度干擾顧客，因此將資訊適當分散於首頁、活動介紹頁、活動特設頁面、以及相關的商品頁中。

#ProjectManerger

行銷部門往往訴求最大化的呈現與露出，在考量過多資訊可能導致溝通無效的情況後，重新釐清各頁面、版位的內容與要達成的目標，建立有層次且適當份量的文案、Banner 與活動標籤。

#Designer

在進入購物車結帳前，如何讓顧客以最短時間跨越登入與註冊，是設計上的重要目標；最少化填寫的資料、精簡需要的步驟，是捍衛使用者立場的堅持。

#ProjectManerger

考量會員資料作為後續溝通及分析的需求，逐一檢視各欄位的必要與合法性，與國際趨勢接軌，溝通出最簡化的欄位與流程，並建議透過領取優惠的方式鼓勵註冊。

#Designer

透過版面分割，將右方固定呈現金額資訊，左方則依流程安排商品、金流、物流的欄位，隨著流程，可以清楚查看不同選擇對費用產生的影響。透過 UI 整合，在相同版位即可簡單修改訂購細節；行動裝置的版面則善用展開縮合元件，有效節省空間。

#ProjectManerger

結帳是購物的最後環節，簡易的流程有助於降低跳出。確認商品、選擇配送方式、指定支付管道，各個環節都有次序性的考量、及外部串接的繁瑣工程；以使用習慣為考量，定義出最合適的流程，並協助後端工程師釐清金物流選項的層次與其相斥性。

#Designer

考量整體設計成本，雖然個人帳戶並非官網門面，卻是顧客查詢個人資訊的集散地，清楚且符合新官網整體風格的呈現有其必要，因此以最低限度的介面完成相關設計。

#ProjectManerger

帳戶資料內容龐雜，但作為電商有義務要清楚揭露，專案重整了包含：顧客基本資料、常用地址功能、訂單的必要資訊、配送進度查詢、點數與優惠券的發放與使用。

#Designer

以設計師考量設計師的作業流程。官網設計完成，只是階段性任務，後續隨著營運與行銷活動展開，必須讓視覺設計清楚新官網的製圖規範，並明白圖片出現的場合，因此建立各頁面的「圖片標準尺寸與規範」手冊，以詳細的圖文解說，揭露圖片的顯示位置與用途。

#ProjectManerger

專案中進行多項前後端的重整，並且建立多項新功能，除了初期的溝通、執行中建立 PRD 外，並以簡易的圖文說明製作「後台操作手冊」，以利官網的營運與維護部門明瞭操作流程與前端顯示的狀態，並在上線前舉辦多次講習，透過實際操作讓相關人員提問並熟悉。

CREDITS

Executive Producer：Liu Wei-Chih
Project Manager：Hsieh Meng-Chen
Product Design：Hsieh Meng-Chen
Front-end Developer：FliPER Creative Inc.,  Hsieh Meng-Chen
Back-end Developer：Lin Jung-Tsuo, Lee Kuan-Yi
Client：plain-me Co., Ltd.
Year：2016

後續 ——— 活動頁面的建構

新官網上線後，除了功能與介面的例行優化外，開始著手建立活動頁的版型。透過預排的年度檔期，規劃出幾套版型，在思考頁面豐富性、商品屬性、行銷促購需求、搭配提案介紹……，開始著手設計及開發工作。