InterPages
InterPages
透過拆分測試產品頁面及價錢，幫助商家使用數據決策創造更高的銷售額
透過拆分測試產品頁面及價錢，幫助商家使用數據決策創造更高的銷售額
執行時間
2019.12 - 2020.07
2019.12 - 2020.07
產品使用平台
Shopify Web, iOS, Android
Shopify Web, iOS, Android
使用工具
Sketch, Whimsical, inVision
Sketch, Whimsical, inVision
服務公司
Deep Codify
Deep Codify
專案成果
專案成果
Interpages 是一款在 Shopify 上的應用程式，商家能夠透過單一網址拆分測試商品頁面價格、折扣以及元件，即時的數據讓商家能夠快速運用數據決策，選擇最佳化的商品呈現方式增加營業額，也能夠減少廣告成本，達到最大化的商品利潤。
Interpages 是一款在 Shopify 上的應用程式，商家能夠透過單一網址拆分測試商品頁面價格、折扣以及元件，即時的數據讓商家能夠快速運用數據決策，選擇最佳化的商品呈現方式增加營業額，也能夠減少廣告成本，達到最大化的商品利潤。
角色產出
角色產出
我參與了從頭到尾的產品開發流程，負責從前期競品分析，定義產品架構至介面設計以及原型製作，與需求方以及前、後端工程師合作開發，並且參與測試產品，直到成功上架至 Shopify App 商店。
我參與了從頭到尾的產品開發流程，負責從前期競品分析，定義產品架構至介面設計以及原型製作，與需求方以及前、後端工程師合作開發，並且參與測試產品，直到成功上架至 Shopify App 商店。
產品的誕生是從這邊開始的👂🏻
產品的誕生是從這邊開始的👂🏻
發現需求👀
發現需求👀
商家需投入大量行銷成本
商家需投入大量行銷成本
從用戶的訪談中的我們了解到使用廣告投放的商家都會非常重視數據的回饋，透過數據能夠讓他們找到最佳的銷售方式，有效的提升營業額，但若是想要找到一個最佳的銷售方式會需要透過多次的投放測試，需要花費大量的時間、廣告費用，所以我們希望讓用戶在一次的廣告投放中能夠同時進行多個銷售頁面的測試。
從用戶的訪談中的我們了解到使用廣告投放的商家都會非常重視數據的回饋，透過數據能夠讓他們找到最佳的銷售方式，有效的提升營業額，但若是想要找到一個最佳的銷售方式會需要透過多次的投放測試，需要花費大量的時間、廣告費用，所以我們希望讓用戶在一次的廣告投放中能夠同時進行多個銷售頁面的測試。
競品分析📑
競品分析📑
從不同面向分析將產品看得更加透徹
從不同面向分析將產品看得更加透徹
Shopify 是全球最大的開店平台，賣家能夠在平台上開設自己的商店，也開放讓開發者能夠開發相關 App 幫助商家銷售及管理，截至目前為止 App store 中已經有約 6000 多個 App，我們從銷售面向以及客製化產品頁面兩個方向分開進行競品分析。
Shopify 是全球最大的開店平台，賣家能夠在平台上開設自己的商店，也開放讓開發者能夠開發相關 App 幫助商家銷售及管理，截至目前為止 App store 中已經有約 6000 多個 App，我們從銷售面向以及客製化產品頁面兩個方向分開進行競品分析。
針對銷售測試
針對銷售測試
銷售面向我們從 App store 中「Split Testing」搜尋結果中下載次數、評價較高以及功能較完整的 3 個 App 以及專門做銷售漏斗的 Click Funnel 作為競品分析的對象
銷售面向我們從 App store 中「Split Testing」搜尋結果中下載次數、評價較高以及功能較完整的 3 個 App 以及專門做銷售漏斗的 Click Funnel 作為競品分析的對象
客製化頁面
客製化頁面
客製化產品頁面則就有較多元的競品能夠作為分析對象，所以除了 App store 中的 App 以外，我們還參考了網頁建置平台、文章平台、履歷表建置平台等等作為競品分析的對象
客製化產品頁面則就有較多元的競品能夠作為分析對象，所以除了 App store 中的 App 以外，我們還參考了網頁建置平台、文章平台、履歷表建置平台等等作為競品分析的對象
定義產品架構🛠
定義產品架構🛠
透過分析訂定 MVP
透過分析訂定 MVP
產品架構是藉由競品分析的結果以及產品主要核心功能來定義，我將大於 2/3 競品都有的功能作為基礎功能，並將洞察到缺少的、能夠優化的部分以及我們產品主要的核心功能作為重點功能。
產品架構是藉由競品分析的結果以及產品主要核心功能來定義，我將大於 2/3 競品都有的功能作為基礎功能，並將洞察到缺少的、能夠優化的部分以及我們產品主要的核心功能作為重點功能。
Sitemap
當產品目標明確後👊🏼
當產品目標明確後👊🏼
介面設計原則
介面設計原則
脫穎而出
脫穎而出
Shopify 應用程式商店中有 6,000 多個應用程式，如果針對拆分測試搜尋則有 200 多個結果，而我們該如何在這麼多同性質的應用程式中做出差異，讓別人覺得我們的產品比別人有用、好用並在試用期過後還想要繼續訂閱我們的產品。
Shopify 應用程式商店中有 6,000 多個應用程式，如果針對拆分測試搜尋則有 200 多個結果，而我們該如何在這麼多同性質的應用程式中做出差異，讓別人覺得我們的產品比別人有用、好用並在試用期過後還想要繼續訂閱我們的產品。
像沒離開過的流暢感
像沒離開過的流暢感
產品入口是在 Shopify 後台，我們希望能夠讓使用者像是一直在使用 Shopify 的功能，而不是進到另一個產品的感覺，所以使用 Shopify 設計的 Polaris 設計系統，除了要熟悉使用方法外，當沒有相對應元件時，需要考量到設計一致性來做出合適的元件。
產品入口是在 Shopify 後台，我們希望能夠讓使用者像是一直在使用 Shopify 的功能，而不是進到另一個產品的感覺，所以使用 Shopify 設計的 Polaris 設計系統，除了要熟悉使用方法外，當沒有相對應元件時，需要考量到設計一致性來做出合適的元件。
化繁為簡
化繁為簡
產品是透過產品頁面、價格拆分測試的數據結果，幫助商家能夠以數據決策帶來更多的銷售額，我們希望能夠過清楚簡單的數據，讓不管是新手小白商家或者是經驗老道的商家都能夠輕鬆快速的應用、觀察數據，獲得更好的銷售成果。
產品是透過產品頁面、價格拆分測試的數據結果，幫助商家能夠以數據決策帶來更多的銷售額，我們希望能夠過清楚簡單的數據，讓不管是新手小白商家或者是經驗老道的商家都能夠輕鬆快速的應用、觀察數據，獲得更好的銷售成果。
UI Design📐
UI Design📐
On Boarding
On Boarding
與 PM 合作使用 Ｗhimsical 快速將基礎功能的草稿產出，讓產品樣貌大致定調以及確認基礎使用流程，也利於後續 Design System 建置
與 PM 合作使用 Ｗhimsical 快速將基礎功能的草稿產出，讓產品樣貌大致定調以及確認基礎使用流程，也利於後續 Design System 建置
UI Design📐
UI Design📐
建立商品頁面
建立商品頁面
直接使用 Shopify 商品資料，可以客製化價錢、折扣以及加入評價，讓商家能夠快速建立促銷商品
直接使用 Shopify 商品資料，可以客製化價錢、折扣以及加入評價，讓商家能夠快速建立促銷商品
UI Design📐
UI Design📐
建立活動頁面
建立活動頁面
活動頁面將有獨立的 URL，並且可以將自行建立的產品頁面加入後做拆分測試，有效減少行銷預算
活動頁面將有獨立的 URL，並且可以將自行建立的產品頁面加入後做拆分測試，有效減少行銷預算
UI Design📐
UI Design📐
客製化頁面
客製化頁面
每個產品頁面都能夠獨立客製化文字、顏色，讓商家也能透過頁面設計來測試行銷文案
每個產品頁面都能夠獨立客製化文字、顏色，讓商家也能透過頁面設計來測試行銷文案
UI Design📐
UI Design📐
即時數據
即時數據
透過數據商家能夠看到銷售最亮眼的產品頁面，可以針對頁面投入更多廣告預算，提高營業額
透過數據商家能夠看到銷售最亮眼的產品頁面，可以針對頁面投入更多廣告預算，提高營業額
UI Design📐
UI Design📐
前台商品頁面
前台商品頁面
透過後台客製化設定，商家可以自由呈現理想的商品頁面
反思與學習
反思與學習
理解設計系統
理解設計系統
為了讓使用者有一致的使用體驗，我們選擇使用 Shopify 的設計系統，這個設計系統其實已經開發的非常完整，在每個元件都有明確的使用規範，所以設計時要非常清楚該如何應用，但是設計時總有一些我們需要的元件、操作，但是 Shopify 的設計系統裡面沒有，這時就必須要想是否要另外做屬於我們產品的元件，或者是洞察出元件意外的使用方式，是一個非常有趣的過程。
為了讓使用者有一致的使用體驗，我們選擇使用 Shopify 的設計系統，這個設計系統其實已經開發的非常完整，在每個元件都有明確的使用規範，所以設計時要非常清楚該如何應用，但是設計時總有一些我們需要的元件、操作，但是 Shopify 的設計系統裡面沒有，這時就必須要想是否要另外做屬於我們產品的元件，或者是洞察出元件意外的使用方式，是一個非常有趣的過程。
保留功能彈性
保留功能彈性
當初在聽到需求時原本覺得應該是一個很間單的產品，但當深入瞭解後發現產品的能夠做的範疇非常大，所以我們決定分階段性開發，但每個階段的功能都有一定的相依性，所以在設計時必須想得更遠並且保持高度的彈性，讓我學習到設計時不能只看眼前的需求，而是要考慮到產品未來發展性是一件很重要的事情。
當初在聽到需求時原本覺得應該是一個很間單的產品，但當深入瞭解後發現產品的能夠做的範疇非常大，所以我們決定分階段性開發，但每個階段的功能都有一定的相依性，所以在設計時必須想得更遠並且保持高度的彈性，讓我學習到設計時不能只看眼前的需求，而是要考慮到產品未來發展性是一件很重要的事情。
學習不一樣的開發方式
學習不一樣的開發方式
過去常見的設計流程通常會在初期做大量的使用者研究，而我們在這個專案則嘗試使用 Lean UX 的開發方式，我們透過快速的產出 MVP 並且得到使用者回饋來進行迭代，透過這個流程我們可以快速的了解使用者要的是什麼樣的服務，而不是在前期做了非常多的假設，但是結果可能跟使用者的想法完全不同，除了透過 MVP 可以馬上得到使用者回饋外，有時候設計與最後開發完的產品也可能有落差，這時候就能夠馬上知道下一版該如何迭代會更好，而不是等花了大半年設計後才發現有問題，這時候要付出的修改成本相對也更高，所以我認為這是一個很棒的開發方式！
過去常見的設計流程通常會在初期做大量的使用者研究，而我們在這個專案則嘗試使用 Lean UX 的開發方式，我們透過快速的產出 MVP 並且得到使用者回饋來進行迭代，透過這個流程我們可以快速的了解使用者要的是什麼樣的服務，而不是在前期做了非常多的假設，但是結果可能跟使用者的想法完全不同，除了透過 MVP 可以馬上得到使用者回饋外，有時候設計與最後開發完的產品也可能有落差，這時候就能夠馬上知道下一版該如何迭代會更好，而不是等花了大半年設計後才發現有問題，這時候要付出的修改成本相對也更高，所以我認為這是一個很棒的開發方式！