InterShop
InterShop
透過優化結帳流程幫助商家提高客單價，提升整體營業額
透過優化結帳流程幫助商家提高客單價，提升整體營業額
執行時間
2020.09 - 2023.09
2020.09 - 2023.09
產品使用平台
Shopify Web, iOS, Android
Shopify Web, iOS, Android
使用工具
Figma, Whimsical
Figma, Whimsical
服務公司
Deep Codify
Deep Codify
專案背景
專案背景
專案背景
過去公司專注於製作 Shopify App 幫助商家在結帳後追加銷售提升客單價，但因為商業策略考量以及使用者需求，我們決定從 0 開始打造新的電商開店平台，解決使用者在 Shopify 無法滿足的使用問題，幫助商家更有效率的銷售
過去公司專注於製作 Shopify App 幫助商家在結帳後追加銷售提升客單價，但因為商業策略考量以及使用者需求，我們決定從 0 開始打造新的電商開店平台，解決使用者在 Shopify 無法滿足的使用問題，幫助商家更有效率的銷售
過去公司專注於製作 Shopify App 幫助商家在結帳後追加銷售提升客單價，但因為商業策略考量以及使用者需求，我們決定從 0 開始打造新的電商開店平台，解決使用者在 Shopify 無法滿足的使用問題，幫助商家更有效率的銷售
* 因產品尚未上線，部分內容將無法完整公開呈現
* 因產品尚未上線，部分內容將無法完整公開呈現
* 因產品尚未上線，部分內容將無法完整公開呈現
專案挑戰
專案挑戰
專案挑戰
電商開店平台是很大的並且複雜的產品，包含顧客前台及商家後台，但因為時程、現有使用者轉移以及技術層面等限制考量，我們要能夠讓現有使用者快速且無痛轉移持續進行產品銷售
電商開店平台是很大的並且複雜的產品，包含顧客前台及商家後台，但因為時程、現有使用者轉移以及技術層面等限制考量，我們要能夠讓現有使用者快速且無痛轉移持續進行產品銷售
電商開店平台是很大的並且複雜的產品，包含顧客前台及商家後台，但因為時程、現有使用者轉移以及技術層面等限制考量，我們要能夠讓現有使用者快速且無痛轉移持續進行產品銷售
角色產出
角色產出
角色產出
與兩位 Product Owner、一位 Product Design、一位 QA 以及五位工程師密切合作。我負責從定義問題、設計產品架構至最終交付設計、QA 測試，參與全部產品工作流程
與兩位 Product Owner、一位 Product Design、一位 QA 以及五位工程師密切合作。我負責從定義問題、設計產品架構至最終交付設計、QA 測試，參與全部產品工作流程
與兩位 Product Owner、一位 Product Design、一位 QA 以及五位工程師密切合作。我負責從定義問題、設計產品架構至最終交付設計、QA 測試，參與全部產品工作流程
Step 1.
發現需求
Step 2.
定義問題
Step 3.
設計策略
Step 4.
設計原則
Step 5.
設計產出
產品的誕生是從這邊開始的👂🏻
產品的誕生是從這邊開始的👂🏻
產品的誕生是從這邊開始的👂🏻
發現需求👀
發現需求👀
因為商業現實層面與來自使用者的回饋所開始的產品
因為商業現實層面與來自使用者的回饋所開始的產品
Shopify 不再合適我們繼續經營
Shopify 不再合適我們繼續經營
Shopify 不再合適我們繼續經營
隨著 Shopify 的商業策略改變也漸漸地影響我們的產品能提供給使用者的服務範圍，所以我們需要一個新的平台來提供更好的服務給使用者。
隨著 Shopify 的商業策略改變也漸漸地影響我們的產品能提供給使用者的服務範圍，所以我們需要一個新的平台來提供更好的服務給使用者。
公司內部高層
公司內部高層
Shopify 的商業限制，導致我們的 Intercart App 無法繼續在 Shopify 上運作，我們需要想辦法能夠繼續營運！
Shopify 的商業限制，導致我們的 Intercart App 無法繼續在 Shopify 上運作，我們需要想辦法能夠繼續營運！
需要滿足目前使用者在 Shopify 使用上的不足
需要滿足目前使用者在 Shopify 使用上的不足
需要滿足目前使用者在 Shopify 使用上的不足
過去我們是在 Shopify 上營運，因為技術限制的關係我們無法全方位的幫助使用者銷售
過去我們是在 Shopify 上營運，因為技術限制的關係我們無法全方位的幫助使用者銷售
商家
商家
透過後台數據發現顧客在結帳環節的跳出率偏高，希望能降低
透過後台數據發現顧客在結帳環節的跳出率偏高，希望能降低
商家
商家
我們通常需要透過多個 App 混用來達到全面性的銷售組合，但有時 App 間會互相影響，導致無法正常使用
我們通常需要透過多個 App 混用來達到全面性的銷售組合，但有時 App 間會互相影響，導致無法正常使用
使用者研究👀
使用者研究👀
藉由過去在 Shopify 的使用回饋來洞察需求
藉由過去在 Shopify 的使用回饋來洞察需求
在專案的前期，透過與內部使用者及專家進行訪談，我們更了解目前使用者在 Shopify 加上 Intercart App 使用上的感受及回饋，以下是我們從訪談中了解到的結果
在專案的前期，透過與內部使用者及專家進行訪談，我們更了解目前使用者在 Shopify 加上 Intercart App 使用上的感受及回饋，以下是我們從訪談中了解到的結果
Shopify 結帳頁面需跳轉多次，且表單內容繁雜
Shopify 結帳頁面需跳轉多次，且表單內容繁雜
Shopify 結帳頁面需跳轉多次，且表單內容繁雜
Shopify 的結帳為三步驟，在每次跳轉過程中都有可能因為表單內容繁雜、跳轉等候時間過久或者網路訊號不良等原因而流失掉顧客
Shopify 的結帳為三步驟，在每次跳轉過程中都有可能因為表單內容繁雜、跳轉等候時間過久或者網路訊號不良等原因而流失掉顧客
主要銷售產品單價低，透過不同的 App 才能達到最好的銷售組合
主要銷售產品單價低，透過不同的 App 才能達到最好的銷售組合
主要銷售產品單價低，透過不同的 App 才能達到最好的銷售組合
目前我們的 App 使用者多為販售低價產品為主，他們會透過各種銷售組合來進行促銷，也因此會需要使用多個 App 來達到最好的效果，但是有時 App 間會互相影響，造成無法正常使用的情形
目前我們的 App 使用者多為販售低價產品為主，他們會透過各種銷售組合來進行促銷，也因此會需要使用多個 App 來達到最好的效果，但是有時 App 間會互相影響，造成無法正常使用的情形
無法彈性客製化結帳頁面設計
無法彈性客製化結帳頁面設計
無法彈性客製化結帳頁面設計
因為產品價格低，顧客通常不會需要太多考慮就會加入購物車，所以若是能增加產品銷售機會點就能有效提升單筆客單價
因為產品價格低，顧客通常不會需要太多考慮就會加入購物車，所以若是能增加產品銷售機會點就能有效提升單筆客單價
設計策略🛠
設計策略🛠
從不同層面提升結帳流程的銷售體驗
從不同層面提升結帳流程的銷售體驗
透過研究分析結果我們決定專注於結帳流程，並且從不同層面提升顧客、商家的使用體驗，達到更好的使用體驗
透過研究分析結果我們決定專注於結帳流程，並且從不同層面提升顧客、商家的使用體驗，達到更好的使用體驗
介面層
商家無法彈性客製化結帳頁面設計
提供客製化結帳頁面、售後追加產品頁面設定模板
結構層
Shopify 結帳環節步驟多、表單內容繁雜
提供一頁式結帳設計及優化表單內容設計
策略層
商家需要使用多個 App 來達到最佳銷售組合
增加銷售小組件，增加產品曝光度
介面層
結構層
策略層
痛點
商家無法彈性客製化結帳頁面設計
Shopify 結帳環節步驟多、表單內容繁雜
商家需要使用多個 App 來達到最佳銷售組合
策略
提供客製化結帳頁面、售後追加產品頁面設定模板
提供一頁式結帳設計及優化表單內容設計
增加銷售小組件，增加產品曝光度
介面層
結構層
策略層
痛點
商家無法彈性客製化結帳頁面設計
Shopify 結帳環節步驟多、表單內容繁雜
商家需要使用多個 App 來達到最佳銷售組合
策略
提供客製化結帳頁面、售後追加產品頁面設定模板
提供一頁式結帳設計及優化表單內容設計
增加銷售小組件，增加產品曝光度
當產品目標明確後❤️🔥
當產品目標明確後❤️🔥
Wireframe✏️
Wireframe✏️
從草稿開始快速將功能範圍定義
從草稿開始快速將功能範圍定義
與 PM 合作使用 Ｗhimsical 快速將基礎功能的草稿產出，讓產品樣貌大致定調以及確認基礎使用流程
與 PM 合作使用 Ｗhimsical 快速將基礎功能的草稿產出，讓產品樣貌大致定調以及確認基礎使用流程
使用 Whimsical 設計草稿
Design System🎨
Design System🎨
建置設計系統
建置設計系統
為了加快整體速度，在技術層面以 Uber 的設計系統 Base Web 為基礎，再依照我們我們的需求去做調整，以最小調整化為出發點，縮短開發時程
為了加快整體速度，在技術層面以 Uber 的設計系統 Base Web 為基礎，再依照我們我們的需求去做調整，以最小調整化為出發點，縮短開發時程
Step 1.
Step 1.
定義品牌顏色
定義品牌顏色
顏色是一個設計系統的基礎要素，但在這個前期的階段需求者其實對於這方面也非常模糊，所以我試著用 Mood Board 聚焦他們的想法
Shopify 應用程式商店中有 6,000 多個應用程式，如果針對拆分測試搜尋則有 200 多個結果，而我們該如何在這麼多同性質的應用程式中做出差異，讓別人覺得我們的產品比別人有用、好用並在試用期過後還想要繼續訂閱我們的產品。
Shopify 應用程式商店中有 6,000 多個應用程式，如果針對拆分測試搜尋則有 200 多個結果，而我們該如何在這麼多同性質的應用程式中做出差異，讓別人覺得我們的產品比別人有用、好用並在試用期過後還想要繼續訂閱我們的產品。
Step 2.
Step 2.
將抽象的想法具象化
將抽象的想法具象化
我將聚焦後選出的顏色實際套用在我們草稿的畫面上，將抽象的想法具象化，使需求者能夠直接看到最終成果，而不是想像而已
產品入口是在 Shopify 後台，我們希望能夠讓使用者像是一直在使用 Shopify 的功能，而不是進到另一個產品的感覺，所以使用 Shopify 設計的 Polaris 設計系統，除了要熟悉使用方法外，當沒有相對應元件時，需要考量到設計一致性來做出合適的元件。
產品入口是在 Shopify 後台，我們希望能夠讓使用者像是一直在使用 Shopify 的功能，而不是進到另一個產品的感覺，所以使用 Shopify 設計的 Polaris 設計系統，除了要熟悉使用方法外，當沒有相對應元件時，需要考量到設計一致性來做出合適的元件。
Step 3.
Step 3.
將結果套用至元件
將結果套用至元件
當顏色權重、功能確認後，因為我們是以 Base Web 為基礎所以可以快速的依照他們的使用方法套用至各元件
當顏色權重、功能確認後，因為我們是以 Base Web 為基礎所以可以快速的依照他們的使用方法套用至各元件
Step 4.
Step 4.
隨著產品迭代擴大
隨著產品迭代擴大
沒有一步到位的設計，所以我們一開始將基礎元件建置完成後再隨著功能設計時的需求迭代擴大，以最小調整化打造符合我們需求的設計系統
沒有一步到位的設計，所以我們一開始將基礎元件建置完成後再隨著功能設計時的需求迭代擴大，以最小調整化打造符合我們需求的設計系統
設計原則🛠
設計原則🛠
打造如流水般絲滑的使用體驗
打造如流水般絲滑的使用體驗
不用額外的學習成本即可馬上使用
不用額外的學習成本即可馬上使用
不用額外的學習成本即可馬上使用
初期階段主要使用者為目前既有客戶，為了減少用戶的學習成本，我們以 Shopify 為主要參考對象，同時也針對不同功能設計時參考不同的直接、間接競品，保留好的部分，優化目前使用不流暢的地方
初期階段主要使用者為目前既有客戶，為了減少用戶的學習成本，我們以 Shopify 為主要參考對象，同時也針對不同功能設計時參考不同的直接、間接競品，保留好的部分，優化目前使用不流暢的地方
初期階段主要使用者為目前既有客戶，為了減少用戶的學習成本，我們以 Shopify 為主要參考對象，同時也針對不同功能設計時參考不同的直接、間接競品，保留好的部分，優化目前使用不流暢的地方
無干擾式的促銷商品
無干擾式的促銷商品
無干擾式的促銷商品
在結帳環節我們希望能夠在不影響顧客操作的情況下讓商家能夠最大化的把握最後機會進行銷售，提供多種組件模板、位置令商家能夠自由搭配，打造屬於自己最佳的促銷組合
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
設計產出📐
設計產出📐
前台透過優化結帳表單、增加銷售機會，有效提升營業額
前台透過優化結帳表單、增加銷售機會，有效提升營業額
簡化結帳流程，減少跳轉時間、跳出率
簡化結帳流程，減少跳轉時間、跳出率
簡化結帳流程，減少跳轉時間、跳出率
提供一頁式結帳選擇，改善原 Shopify 三步驟結帳耗時的跳轉時間，顧客也可以一目瞭然所有結帳資訊
提供一頁式結帳選擇，改善原 Shopify 三步驟結帳耗時的跳轉時間，顧客也可以一目瞭然所有結帳資訊
Before
After
收斂表單內容，減少點擊及顧客困惑
收斂表單內容，減少點擊及顧客困惑
收斂表單內容，減少點擊及顧客困惑
合併表單內容及隱藏非必填內容，有效減少點擊也能避免過多資訊使顧客眼花撩亂
合併表單內容及隱藏非必填內容，有效減少點擊也能避免過多資訊使顧客眼花撩亂
Before
After
增加最後銷售機會，增加每筆客單價
增加最後銷售機會，增加每筆客單價
增加最後銷售機會，增加每筆客單價
商家可以依照行銷需求自由調整結帳頁面的產品模組，以找出最符合需求的銷售模式
商家可以依照行銷需求自由調整結帳頁面的產品模組，以找出最符合需求的銷售模式
設計產出📐
設計產出📐
後台設定提供多樣化折扣設定、版位，幫助商家有效促銷
後台設定提供多樣化折扣設定、版位，幫助商家有效促銷
多樣化的銷售設定，讓使用者不錯過任何一個銷售機會
多樣化的銷售設定，讓使用者不錯過任何一個銷售機會
多樣化的銷售設定，讓使用者不錯過任何一個銷售機會
簡單步驟讓商家快速設定，能夠同時設定多組方案且同時進行，快速找到最有效的促銷組合
簡單步驟讓商家快速設定，能夠同時設定多組方案且同時進行，快速找到最有效的促銷組合
最直接有力的促銷方式：針對指定商品做指定促銷
最直接有力的促銷方式：針對指定商品做指定促銷
最直接有力的促銷方式：針對指定商品做指定促銷
商家能夠設定特定商品去啟動指定促銷，並且可以將促銷商品做顯示排序、排除已在購物車商品，做最直接有力的促銷
商家能夠設定特定商品去啟動指定促銷，並且可以將促銷商品做顯示排序、排除已在購物車商品，做最直接有力的促銷
提供多種產品模組，商家可依需求彈性調整
提供多種產品模組，商家可依需求彈性調整
提供多種產品模組，商家可依需求彈性調整
透過後台編輯器商家可以自由設定促銷模組樣式、文案，創建符合需求的促銷方式
透過後台編輯器商家可以自由設定促銷模組樣式、文案，創建符合需求的促銷方式
反思與學習
反思與學習
學習用商業思維做專案
學習用商業思維做專案
在做這個專案時中間經歷過各種大大小小的問題讓我們的商業策略一直變化，過去的我可能會認為這是一件很不好的事情，但現在的我認為若我們一直堅持著最初想法不變，不願意保有彈性面對市場才是最壞的選擇，雖然最終還是尚未見證產品誕生的那一刻，但我想公司能夠繼續營運才是最重要的！
在做這個專案時中間經歷過各種大大小小的問題讓我們的商業策略一直變化，過去的我可能會認為這是一件很不好的事情，但現在的我認為若我們一直堅持著最初想法不變，不願意保有彈性面對市場才是最壞的選擇，雖然最終還是尚未見證產品誕生的那一刻，但我想公司能夠繼續營運才是最重要的！
學習保有彈性思維成為最好的團隊夥伴
學習保有彈性思維成為最好的團隊夥伴
專案過程不僅是商業策略變化的問題，也經歷了團隊組織變動、職位轉變、疫情影響，我的角色、職位內容一直在做轉換，但我很享受在這個過程中，我學習了更多不同面向的知識，從設計團隊管理、專案管理、優化跨國團隊溝通等等，我能夠快速的轉換狀態保有彈性的去符合各個時期的需求成為最好的團隊夥伴。
專案過程不僅是商業策略變化的問題，也經歷了團隊組織變動、職位轉變、疫情影響，我的角色、職位內容一直在做轉換，但我很享受在這個過程中，我學習了更多不同面向的知識，從設計團隊管理、專案管理、優化跨國團隊溝通等等，我能夠快速的轉換狀態保有彈性的去符合各個時期的需求成為最好的團隊夥伴。