Jcard Business 顧問服務網站｜藉由改版，讓客戶更認識我們
Product Design (UI/UX)．B2B．Responsive Web Design (RWD)
Overview
Jcard Business 為 Jcard 提供企業進行數位轉型的顧問服務（B2B）。本專案迭代原本 Jcard 網站中的服務洽談頁面，運用競品分析和前期調研提出設計策略，屏除舊有介面的問題以提升屏效。統合產品與品牌定位，網站內容和視覺調性與行銷業務部門對外的顧問服務簡報維持一致性，精準呈現 Jcard Business 的服務亮點。
Time / Team / Company
Time: Dec 2022 - Feb 2023（設計團隊於4週內交付技術團隊進行開發）
Team: 1x Design Lead, 2x UI/UX Designers (My role👽), 1x Project Manager, 1x Web Developer, 1x Marketing Manager
Company: Jcard
What I did
・團隊合作：多次和行銷部、技術部針對專案進行討論以達成共識及內容分工，和資深設計師在前期調研中一同釐清產品問題，並找出合適的設計解法。
・從設計到交付：基於前期調研、利害關係人之間的共識執行設計，於公司內部進行網站 UI 視覺提案並獲得採納。主要負責網站介面的規格化、動態參考效果以利交付給技術開發，優化與統合顧問服務對外簡報的視覺，並和資深設計師一同拍攝網站素材。
Current Product
現行產品問題：
・2B、2C 服務切分不明：B2B 服務與 B2C 服務切分不清， Jcard 網站定位不明確。
・缺乏引導的介面設計：各個服務項目以卡片形式成列，讓商家誤以為能點擊進入了解更多，流失抓住客戶目光的機會。
・客戶觸及服務有斷點：專業服務區塊少了合作表單連結，造成體驗上的斷點；對企業而言，則流失能更早接觸到客戶的機會。
*根據 Hotjar 分析，多數點擊以「發行 NFT」、「商業顧問」「區塊鏈諮詢」為主。
The Goal
・我們該如何在原本的 2C 網站，開拓出一條 2B 產品線？
・我們該如何讓目標客群快速認識我們的服務？
・我們該如何改善原本的介面，讓 UI 引導使用者留意我們想強調之處？
Solution
經過前期調研，我們根據所得到的論點來優化我們的 B2B 服務頁面：
・獨立出 2B 服務：因應產品目標與調性，將 Jcard 的親民形象與 Jcard Business 顧問服務的專業感做區分，切分 2C 和 2B 區塊，在現行網站中獨立出 2B 服務，針對目標族群，確立定位。
・專業形象感的一頁式網站：以 MVP 開發低試錯成本的一頁式網站，並加入服務案例、合作夥伴區塊建立 Jcard Business 的專業感及信賴感。
・服務表單填寫功能： 新增 CTA 按鈕，強調、提升服務表單的能見度，增強與潛在客戶雙方的觸點。表單選擇上，以最小可行性產品（MVP）為依歸，為降低技術維護成本，在網站推行的初步階段，以易於調整和蒐集內容的 Google 表單作為選擇。
・設計輔佐 SEO：透過翻卡 UI 了解觸及，得知客戶對服務主題的興趣程度。
Competitor Analysis
有鑑於 Jcard Business 顧問服務的核心為提供企業 Web3 數位轉型服務，我們在設計前期挑選了台灣業界關於 Web3 或數位轉型的顧問服務競品，運用使用者經驗五要素進行以下分析：
Persona
根據 Jcard 產品現有的研究資料和 Jcard Business B2B 服務的目標客群，我們建立兩個原始人物誌 (Proto personas) 如下：
Customer Journey Map
以人物誌為基準出發，探索客戶從產生需求到接洽並執行顧問服務的完整經驗。
Finding
以競品分析、人物誌、顧客旅程圖進行前期調研，我們歸納出四點調研結果並作為設計策略的基礎：
・除了切分出 2B 的服務內容，要能讓人產生專業感和信賴感。
・不只是銷售自己，讓想進一步了解的客戶填寫表單很重要。
・善用過去累積的曝光度，並透過設計，輔佐點閱率優化。
・目標族群：需要數位轉型、追趨勢、運用 Web3 商機的公司。
Functional Map
根據上述設計研究，我們梳理出網站的功能地圖架構如下：
Design System
以延展 Jcard 主站的風格調性為基礎，將 Jcard Business 的設計元件規格化，並和前端工程師溝通技術可行性，建立利於持續優化的設計系統並提升開發效率。
設計系統包含：
・色彩應用 (Color Palette)、桌機／手機文字系統 (Typography)、網站視覺元素規格 (Asset)。
・響應式網格系統 (Responsive Layout Grid)：和前端工程師討論後，參考 Vuetify 的框架定義出我們的網格規範。
・元件 (Components)：卡片 (Card)、按鈕 (Button)，標註和示意各元件的 UI state、視覺元素、動態效果（附含程式碼的參考資料）及不同裝置的應用方式。
Final Design
我們基於前期調研作為設計執行的依歸，網站內容與架構涵蓋 Jcard Business 所提供的各式顧問服務項目，在資訊層級上做適當的視覺安排及動態效果，並且是一個適應於不同裝置螢幕大小的網頁 (RWD)。
Learning & Takeaway
・獲得甲方產品公司的 UI/UX 設計經驗：經由這件專案，讓我完整體驗有迭代需求的產品，從提案到交付各階段的流程及所需考量的面向。相較於過去在乙方團隊主要為一位設計師負責整件專案的設計需求，這件專案也讓我有了和其他設計師共同負責專案的經驗。
・豐富與更多利害關係人共同執行專案的經驗：相較於過去在乙方團隊會接觸到的利害關係人較為單純，在甲方公司與不同部門、職位的人共事，讓我學習並更了解其他利害關係人對於專案所關注的焦點為何，對於專案執行所需顧及的不同面向也有所成長。
・將 UX 設計落地於實際專案中：在資深設計師的帶領下，藉著這件專案參與並了解更多 UX 落地於實際專案中的方法，是過去在乙方團隊受限於專案時間成本所沒有的經驗！
☺︎
・第一線夥伴情報：如果有機會持續優化該專案：我想和負責拓展這項服務的業務、行銷等第一線接觸客戶的相關人員個別進行訪談，了解該網站是否如預期幫助到與客戶間的溝通、客戶對於該網站有如何的反饋等，評估能有助於平衡商業考量和使用者體驗的優化方向。
