易讀書坊於新北市,與傳統書局不同,易讀書坊主要販售的書籍種類為升學參考書,販售通路以網路商店為主,8年前開始經營蝦皮賣場,目前已在該平台上累績超過6.2萬粉絲,高達20萬以上評價,是線上參考書通路中有口皆碑的優良店家。
![](https://miro.medium.com/v2/resize:fit:700/1*fwdHxH830kFBODR29-dndg.gif)
專案背景與顧客需求
易讀書坊從運營線上平台多難的經驗,整理出了許多心得,並希望依照這些心得,為自己的電商平台升級。例如,家長準備參考書時,會透過電商平台的聊聊功能,試圖在不看到參考書實體的情況下請小編推薦書籍,每位家長、同學需求雖然不同,但問題的方向一致,如果可以做成簡單的篩選器,就能更有效率的幫助消費者尋找適合的書籍。
消費者通常在購買參考書時也不會只買一本,學生更是從小學到高中都有每年兩次的參考書需求,許多消費者從過路客變常客,除了偶爾發發優惠券外,易讀書坊期望有更多方式可以回饋給消費者,然而,這類功能再電商平台與套版網站中幾乎很難達成。
壓垮駱駝的最後一根稻草,是線上商城運費時不時的漲價,商家販售物品所需繳交的手續費也水漲船高,才使易讀書坊決定為自己的品牌打造屬於自己的線上商城。
專案中的困難與解法-後台面
書局常見的應稅未稅發票電子化
零售業業者在執業時,很常接觸到應稅或未稅的不同需求,在現有的線上商城系統中,幾乎很難看到滿則此需求的功能,這也是易讀書坊決定開發網站的其中一個因素。
在此網站後台中,夏木樂將應稅未稅的設定分成兩大部分設定。第一,可以透過商品編輯頁面選擇當項商品的應稅未税狀態,第二,與市面上金流系統直接串接發票功能不同,夏木樂的後台可以讓網站主在訂單成立之後,「手動」選擇開立發票,人性化的發票開立方式,就像在實體店面的書店老闆。
會員累積點數的邏輯梳理
線上商家的折扣花招越來越多,例如第二件X折、加價購、加X元多一件、滿額免運等,但其實最暴力、最有感的方式還是「直接折價」。
易讀書坊選擇不將會員分級,而是根據不同的優惠模式,讓會員自由選擇兌換從過去消費中得到紅利。
網站主可以從後台的紅利記錄管理中看到每筆訂單的紅利使用情況,也可以過濾出特定期間、會員的紅利使用情況。
專案的呈現 — 前台面
圖片大小 vs 載入速度
網站圖片越大,載入就越花時間,圖片太小,卻又看不到細節,針對這種情況,夏木樂提供了三種做法:
一、圖片上傳自動壓縮
為了方便經營多平台的網站主,不需為了單一網站調整圖片大小,夏木樂以網站技術,在圖片上傳後,壓縮圖片至不影響載入速度也不影響閱讀的大小。
二、商品輪播數量限制
圖片大載入慢,圖片又大又多更慢!因此這次網站首頁的輪播商品功能,選擇以4組為限輪播,避免一次載入過多大圖而使網站變慢。
![](https://miro.medium.com/v2/resize:fit:700/1*7wirqqV8R5kp1fUrO9rHhw.gif)
三、分批載入
我們讓網站在被點擊後先載入一半資訊,往下滑時再載入另一半,以此加快網站速度。
但就經經營SEO角度而言,尚未被載入的區塊不會被搜尋引擎收錄的問題,我們的相應做法是額外開放針對單一商品的SEO設定,增加讓特定商品出現在搜尋結果頁的機會,以此提高網站造訪數。
符合顧客需求的篩選器
我們在客戶需求調查中,發現易讀書坊常常需要使用一部分的人力來回答客戶每天會問的問題,其中大多數問題都與參考書功能性有關,「這本參考書的題目會太多嗎?」、「可以推薦一本國中程度簡單一點的參考書給我孩子嗎?」等等。
想像一下現在你的網站可以擁有一個智慧選輸機器人,只需要簡單動動手指,就能幫助買家找到適合的書籍,不僅節省每天回答問題的人力與時間成本,更不用擔心無法即時回答而流失顧客,我們為易讀書坊做的篩選器就是這樣一個角色。
![](https://miro.medium.com/v2/resize:fit:700/1*15nrPyX8iqWn5hKoTdWdRw.gif)
網站整體視覺設計
既然是書坊,網頁設計時當然-不能少了書的元素,不只網站首頁,內頁有有滿滿設計,包括穿孔書頁、黑板等元素,因為主要商品為參考書,設計師也特別製作了一些類似老師改作業的筆畫。
網站畫面以易讀書房Logo的「米白色」貫穿,顏色走日系非飽和色調,不僅讓網站更有整體感,也讓眼睛比較不會累,留點眼力看參考書。
行動版網站優化
易讀書房從蝦皮起家,而蝦皮一開始的設計就是「行動優先」,因此,為了讓易讀書房的原用戶們快速適應新網站,這次我們也在行動版網站中下了功夫。
![](https://miro.medium.com/v2/resize:fit:700/1*ZnzpnA3yYnshwx9Xpc2EMw.gif)
除了一般的RWD,我們將Navi bar的資訊收合至左上角,留下更多空間給重要的資訊,網站中商品資訊卡是直式的,行動版的則是橫式,更符合閱讀直覺,最重要的是,夏木樂在行動版網站中,將會員相關功能按鍵移到螢幕最下排,這一個小改變,卻可以讓行動用戶的使用體驗得到巨大的提升。
![](https://miro.medium.com/v2/resize:fit:700/1*BfOSyNXgG1o_3ulwpSt9AQ.gif)
![](https://lyrasoft.s3.amazonaws.com/simular/images/2024/07/18/e4128413bd225ef2ee1ab2cd.jpg)
![](https://lyrasoft.s3.amazonaws.com/simular/images/2024/07/18/46ad5bd4c541e99e9e83c56e.jpg)