Shopify 台灣物流與電子發票 APP – 介紹頁設計
Shopify Taiwan Logistics & E-Invoice APP
專案背景 Project
本專案設計「Shopify 台灣物流與電子發票 APP Landing Page」，協助想使用 Shopify 商家快速理解物流、電子發票串接方案，提升客戶理解方案效率。
瀏覽網站
產品項目
SaaS
電商
物流
電子發票
系統整合
負責內容
資訊架構設計
跨功能整合規劃
UI/UX設計
使用工具
在與商家訪談與產品理解過程中，發現使用者在導入「物流」與「電子發票」系統時，對於功能與方案理解不清楚，導致決策困難與使用門檻提高。
學習成本高
多數商家不熟 Shopify 生態，金流、物流與發票需分別設定，流程分散
串接流程複雜
不清楚串接流程，容易卡關，設定錯誤可能影響出貨與營運
缺乏引導機制
沒有清楚的導覽與說明頁
三種主要 Shopify 商家類型，涵蓋不同規模與串接需求。
新手商家
剛開始使用Shopify
研究階段
操作簡單
快速上線
成長型品牌
訂單量持續擴大
效率優化
自動化
品牌商
多通路、高客制需求
開立發票
客製化需求
How might we
我們如何幫助商家快速了解並選擇最適合的物流和發票解決方案？
降低客戶的理解門檻 → 幫助客戶找到符合需求方案 → 提升整體導入效率
目標
改善網頁瀏覽體驗與資訊易讀性
使網頁視覺與產品功能感受一致
提升協助商家導入產品效率
挑戰
這是首次與RD設計上的合作，當時對於交付上並不是很熟悉。
解決方案
主視覺區為強化產品價值傳達
在與客戶溝通時，發現他們對於產品的疑惑點，以及研究其他開店平台網頁時，發現第一個開場畫面跟CTA按鈕為重要設計之ㄧ。
功能說明區
將物流 / 發票 / 運費規則用最簡單的文字與插圖方式說明。
決策區
針對不同類型的商家提供兩種方案，自行免費安裝操作或與顧問預約聯繫。
使用者流程 User Flow
此流程圖為不同商家規模與需求差異在導入 Shopify 物流與發票系統時，從 App 安裝、方案選擇到實際操作的流程。
設計規範 Design System
1
主視覺 Hero Section
難以看出產品功能與使用情境。
After
標題 + 主視覺圖快速傳達產品
增加 CTA 按鈕明確引流
2
功能說明 Feature Section
功能複雜，物流/發票/運費規則混雜呈現
After
依客戶需求分類呈現：物流、發票、運費分段說明
圖示家精簡文字，降低理解成本
3
決策 Decision Section
CTA 按鈕過於隱蔽，缺乏引導點擊。
After
針對商家客群全職/兼職設計不同CTA。
視覺突出推薦方式，引導決策降低猶豫。
在此專案中，我理解到 SaaS 產品的核心不只是功能呈現，而是如何協助使用者理解與做出決策。未來若能結合數據分析與 A/B testing，將能進一步優化轉換效果。