top of page

眼鏡電商購物車

​新功能
Tool used
skill-icons_figma-light.png
KV.png

​關於

眼鏡購物商城 Eyemall 是公司旗下的眼鏡部門的電商平台,整合線上、線下服務之連鎖眼鏡商城,醫學驗光、科學配鏡。
我的職責是根據電商部門提出的新的需求功能,研究並設計合適的方向。
在今年購物車區域添加兩個新功能:

 

團隊

部門經理 X1
UIUX 設計師 X1
前端工程師 X1
後端工程師 X1

 

​01  優惠碼

2023.3月上線

新增前,電商營運部門提出活動受侷限,希望能增設優惠碼以供更多樣化的活動,吸引消費者買單。
遇到的挑戰
優惠碼字數過多
起初營運部門提出的代碼過長且包含中文,發現會影響UI上的呈現或是使用者不易使用。
專案為期2週
使用軟體: Figma
01.png
解決方案
後來告知再輸入代碼上要特意去切換中英文對於使用者不易使用,也考量到電腦/電腦-手機版/APP會同時上線,因此希望以視覺統一的情況下,需要考量輸入框與文字限制。

02 失效商品區

2023.8月上線

隨著優惠碼上線後,活動類型變廣泛許多,
電商部門曾接到客訴表示:

客人在活動後誤將曾經在活動期間放購物車的商品沒注意下一起下單,因此提出已結束活動或販售完的商品,購物車能移至失效商品區域。
遇到的挑戰
沒有能明確提示消費者活動的狀態
消費者角度產生不同文字敘述有疑慮
專案為期2週
使用軟體: Figma
02.png
初版討論時,
先分析了蝦皮的購物車形式,並提出4項細節與需求部門討論與確認方向:
  • 失效商品品項顯示數量
認為蝦皮是多賣場經營,有時多為比價心態,可能不會特別注意失效商品品項
  • 區域位置至於下方
優先使用優惠碼的同時可確認想購買的商品狀況
  • 標注討論
原先設定所有名詞為已下架,然而發現在技術判別上和原先規範是不同狀態,因此避免造成誤解,將無庫存商品改為暫時缺貨,商品下架保留原本的名詞。
  • 價格探討
失效商品區不顯示,避免價格有調升。
然而,
需求單位也提出想要讓消費者還是有價格參考依據,但此價格目是失效的。

由於計算金額與原先架構會有衝突,
因此先詢問工程是否可行,並在最後也達成共識提出,在 a. 購物車和 b.失效商品區有不同的提示。
04.png
解決方案 a.
在後台更新價格後,會根據上一筆金額做比對,小於原價格顯示為已降價。
05.png
解決方案 b.
失效商品的價格將為劃掉,表示價格不準確但仍能保持參考依據。
最終畫面
06.png
學習啟發
對於協作溝通,學習到參考競品的同時,還是須以考量需定義好自家產品的方向。
當時在與電商營運部門溝通時,常會接收到使用競品來當作案例而要求增加新功能,但進一步討論發現有些其實是不適用於我們的產品,也會與程式上原本的架構有衝突,像是:
 
  1. 優惠碼和點數的折扣方式可能影響到需求部門的業績,但對於工程的架構需大幅調整。
  2. 購物車的失效商品區從因「已售完、已下架」有疑慮。

因此我的解決方式會是,每當有新需求時,先與工程團隊討論以不大幅更動技術的優先,但同時也會思考功能的優勢,我們可以新增的技術可行性與需求部門溝通。
icn_smile.png

Thank You For Reading

more.png
contact.png
  • icon
  • LinkedIn
  • Behance
bottom of page