Shopify 網站設計流程與時間規劃

此篇分享我如何建立 Shopfiy 電商網站的時間規劃表,從需求確認、網站內容規劃、網頁視覺設計、Shopify 版型和 Shopify App 設定等,拆解每個階段的任務與細節

「實戰經驗分享,非只是網路資料整理」(更新時間: 2021.05.18)

嗨!我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計接案的經驗,近年則專注 Shopify 電商網站設計與建置。對於這類假站平台的限制與可塑性有一定的了解,例如 Squarespace、Wix 後台真的限制超多,大部分的情況只能按照其版型去做編排,要做其他設定會相當困難而痛苦;WordPress 則是彈性度超高,可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。

我一直在根據手上數個專案進行調整,找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃,並能有效應用在線上協同的文件或檔案中。我打造了幾個模板文件與所使用的軟體,如下:

  1. Google Sheet:Shopify 電商網站設計流程與時間規劃
  2. Figma:Shopify 網站規劃與設計
  3. Google Doc:Shopify 整理中

Shopify 網站排程表

我一直在根據手上數個專案進行調整,找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃。下圖為基本的步驟與流程,但有些階段是可以同時並行的,例如 Shopify 基本設定在購買版型後就可以開始進行,金流設定的確認越早開始越好,根據實際需求彈性調整,根據實際需求彈性調整。

Shopify 網站排程表 (Google Sheet 模板)

Shopify 網站規劃與設計

Shopify 網站規劃與設計 (Figma 模板)
  1. Brand Guideline:包含基本的元素如 Logo、字型設定、顏色等
  2. Resource (Materials):包含網頁中所有會使用到的素材、圖片等
  3. Requirement (List):客戶的需求要用最簡潔有力的「清單模式」列表出來,若需求都沒整理清楚,後面會寸步難行這是最最最最最重要的,因為太重要了,永遠不用擔心「過度溝通」
  4. Wireframe:我的用法是分成兩個階段,第一個根據現有的資料快速排版內容,並且與客戶討論需求時邊更新。第二個才是所有的討論結果最終確認版,能的話最好能將「完整的文案」排版進去。
  5. Web Design:會分成提案階 (Proposal) 段和完稿 (Final) 檔案。
  6. Shopify Theme:所選擇版型要先測試能使用的功能限制,全部開出來攤在陽光下,讓彼此都知道強項與限制在哪。根據限制和需求再見去找解決需求的 Shopify App。
  7. Shopify App:將測試與實際執行步驟的 Shopify App 紀錄下來,不僅可以幫助自己記憶,也可作為團隊協作與交接的重要檔案,不用怕說花太多時間,我們用 Figma 紀錄過程其實很有效率!
  8. SEO meta:基本的 SEO meta 設定與文案構思也是相當重要的,例如網頁標題、網頁敘述、網頁預覽等都可以根據關鍵字策略分析進行初步的設定。這是影響眾多 SEO Ranking 因素之一,例如在關鍵字在 SERP 的點擊率、在社群預覽時的品牌形象等,我發現很多人都會忽略或輕忽這個的重要性,應該要花心思投入。
  9. Web Analytics:網站分析工具設定,必備安裝的有 Google Analytics、Google Search Console,額外的可以有 Google Tag Manager,視需要可以使用付費的 Hotjar、CrazyEgg、Mixpanel 等。而也聽過有想測試網頁的 A/B Testing,Shopify App Store 也是有提供相關功能的可以訂閱使用,同樣視情況投資與否。
  10. Feedback (Test):網站完成後需要測試回饋、網站上線正式曝光後也要測試回饋,確認消費者的瀏覽體驗、購物體驗是良好的。

網站專案執行

經過數年來為各種產業的客戶打造數十個網站,從彼此磨合、錯誤經驗的學習,淬煉出一套網站專案執行的工作流程,而且不斷優化與更新,讓剛接觸網站設計這個領域的人,無論是設計師、工程師或客戶等,初步了解每個可執行的步驟,降低溝通成本,提高工作效率。

無論是使用哪種平台,網站設計流程的規劃大同小異,唯一的差別就是使用不同的平台架站會有執行上的差異。下圖是 Shopify 電商網站設計的時間排程,每個階段規劃依實際需求和情況彈性調整,時程的長短可以當作一個參考值即可。我們有了「執行所需時間」與「工作事項」的概念,讓團隊、客戶或專案經理在初步規劃時不會毫無頭緒!

此檔案是建立 Figma 中,可以縮放瀏覽,我已設定公開,若你也有使用,歡迎蒐藏與分享,並且留言和拍手讓我知道這對你的工作很有幫助噢!因為我會不定時去更新檔案內容與流程編排,所以隨時可以回來閱讀文章囉!

各階段工作內容概要

  1. 需求探索:確認需求(相當重要的階段,了解需求與目標,幫助客戶釐清與整理思緒)
  2. 概念發想:團隊內部腦力激盪(可以與客戶一同探索與討論,必要時進行 Workshop)
  3. 內容規劃:建立網站地圖(Sitemap),根據企劃需求規劃頁面內容概要,此階段的 Wireframe 是討論需求使用
  4. 圖片素材:通常是攝影圖、插圖、產品圖或情境圖,必要時需提出攝影計畫外包攝影工作室拍攝
  5. 文案內容:提供網頁文案、網站內容建議如標題和內文根據設計排版的設定最佳的字數等
  6. 網站原型:最終版頁面需選定 Shopify 版型(Theme),然後先試用了解版型基本設定,搭配可能使用的 Shopify App 建構出框線圖 Wireframe,並實際搭配文字
  7. 網頁視覺:順序是先進行主視覺設計提案,確認後再打造首頁設計,最後是進行網站其他頁面的設計
  8. Shopify 架站:主要階段有排版(使用版型設定與頁面編輯器 App 和 CSS 客製化)、設定網站功能 App、內容上架、RWD(mobile web)、物流和金流的串接、ERP 串接、基本 SEO 設定
  9. 網站測試:至少要讓內部團隊、客戶進行實機測試瀏覽網頁,給予回饋與修正,例如表單填寫、電子報訂閱、發票收據開立、使用者的購買流程、金流物流狀況等
  10. 網站分析:必要設定追蹤碼如 Search Console、Google Analytics,視需求而定的 Google Tag Manager、Facebook Pixels 等
  11. 網站上線:理想時間是選在週二或週三,意思是只要上線後隔天不是假日較佳,這樣網站若一出問題時確定有人在崗位上可以進行修正
  12. 持續優化:UI/UX、文案、SEO、網站速度

優質數位工具蒐集研究中

  • ActiveCampaign:Email 行銷、電子報系統(MailChimp 的最佳替代方案)
  • Canva:線上平面設計工具,若團隊沒有設計師,那 Canva 真的是神助攻!解決行銷、社群、平面設計、簡報等需求,版型一應俱全。
  • Envato Elements:無限下載的付費資源素材:包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等,這個也是我常常在用的素材平台。
  • GetResponse:All-in-one 行銷平台,包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能,可以先註冊帳號使用免費版,覺得需要未來再升級!這軟體類似 Hubspot。
  • PickFu:PickFu 是美國消費者在線調研工具,可進行在線的測試、優化和即時消費者調研問卷,取代猜測。透過 PickFu,你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧,幫助你做出更好的商業決策。
  • SurveySparrow:全通路顧客滿意度調查管理平台 Omnichannel Experience Management Platform
  • Opinion Stage:建立免費的測驗、投票、表單等工具,視覺質感和功能運作不錯!也有提供付費方案,提高每個月的回應數。
  • Typeform:質感優雅的線上表單
  • UXPressia:快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map,還有各種模板可以直接套用。
  • Surfer:SEO 工具,主要可用做 SEO 內容編輯者使用, AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能,介面設計滿新穎的,賞心悅目!
  • CopyAI:行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
  • AppSumo:限時優惠的一次性付費數位軟體販售平台(大幅降低成本)
  • Tidio:設計優質的線上交談工具 Online Chat
  • Help Scout:線上客服(Zendesk 的替代方案)
  • HeySummit:舉辦線上虛擬研討會
  • SimplyBook:線上預約排程系統 及 App 預約軟體
  • Liinks:一頁式多連結網頁,整合多個社群、官網的一頁式網站
  • LearnWorlds:創建與銷售線上課程網站平台
  • Teachable:創建與銷售線上課程網站平台


有任何想問的問題,歡迎留言或寄信給我 irving@irvinglab.comFB 粉絲團,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:前往瀏覽

Post a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *