Yocale：建立輕鬆促成潛在客戶開發的設計增長系統

角色:
  • GTM 設計
  • Landing Page設計
  • Technical SEO
  • 網頁開發
工具:
  • Figma
  • Webflow
  • Claude
  • Ahrefs
時間:
  • 2025 – 2026
01

成效

5.15%

點擊率

4

功能發佈次數

40% ↓

跳出率

02

總覽

Yocale

Yocale 是一個雲端平台,協助美容院、醫美中心等服務型企業,在單一平台上管理預約、付款及客戶關係。

我們的標語是Business Made Simple(業務化繁為簡)。我們相信小型企業是經濟的支柱,我們的工作是為他們提供輕鬆營運所需的工具。

Yocale 主頁動畫導覽,展示預約管理平台
03

挑戰

品牌形象缺失

Yocale 在各個市場推廣渠道 —— 電郵、社交媒體及網站 —— 之間缺乏統一的視覺形象。此外,網站的設計及內容已經過時,需要優化以提升用戶體驗。

Yocale 舊版網站主頁截圖,展示「Why Yocale」及「Our Promise」版塊,附有預約日曆的平板電腦模型
04

方法

建立系統

建立可重複使用的視覺資源庫 —— 色彩、字體、元件 —— 讓品牌形象在各個市場推廣渠道保持一致,並加快交付速度。

為成效而設計

為產品 GTM 發佈及 SEO 優化設計並開發網頁。

05

視覺形象

Yocale 品牌色彩系統:珊瑚色 #F37063、海軍藍 #034796、珊瑚至藍色漸變,以及淺粉至藍色漸變,各附色碼 Yocale 字體系統:General Sans 字型,標題使用常規字重,「abc123」示例使用粗體 Yocale 珊瑚色文字標誌及圖標標誌,附有星芒點綴
06

功能發佈

Yocale 發票介面,展示列明服務項目、小計、稅款及總額的收據,旁為職員手持條碼掃瞄器及產品
01

發票管理

Yocale 整合付款着陸頁面,展示「Integrated Payments & Point of Sale Made Simple」訊息、採用率數據及支援的付款裝置
02

整合付款

Yocale「先買後付」宣傳橫幅,展示手機顯示 Affirm、Klarna 及 Afterpay 付款選項
03

先買後付

Yocale 禮品卡管理介面,展示預設面值及數碼禮品卡餘額,背景為髮型師為顧客剪髮
04

禮品卡

Yocale「先買後付」網誌文章預覽,標題為「Let Clients Book Bigger Services. You Get Paid In Full, Upfront」,數據卡展示「2-3x higher average tickets」及「0 chasing and risk」,並展示 Affirm、Afterpay 及 Klarna 標誌
手部使用條碼掃瞄器掃描產品盒的照片,疊加 Yocale 介面卡,展示「Hand cream」、數量 88、價格 $45.00 及品牌「Necessaire」
Yocale「多謝」禮品卡設計,深梅子色,附 Yocale 標誌及圓環圖案點綴 Yocale「恭喜」禮品卡設計,深鏽紅色,附 Yocale 標誌及圓環圖案點綴 Yocale「送給你」禮品卡設計,深海軍藍色,附 Yocale 標誌及圓環圖案點綴
Yocale「無故送禮」禮品卡設計,深慄紅色,附 Yocale 標誌及圓環圖案點綴 Yocale「愛的禮物」禮品卡設計,深靛藍色,附 Yocale 標誌及圓環圖案點綴 Yocale「生日快樂」禮品卡設計,森林綠色,附 Yocale 標誌及圓環圖案點綴
Yocale 網站導航列,展開「Features」選單,展示功能分類巨型選單,包括線上日曆、線上預約、市場推廣、視像會議、客戶管理、銷售點系統、通知、Reserve with Google、客戶入口網站、業務管理、表格與註解、整合付款、發票管理、Yocale Pay 及 Yocale Marketing,背景為兩人合照的主視覺照片
Yocale 發票儀表板,展示列有日期、客戶及狀態欄位的發票列表,並展開狀態篩選下拉選單,選項包括草稿、未付款、部分付款、已付款及已作廢 Yocale 付款整合面板,展示透過 Stripe 支援的 Affirm、Klarna 及 Afterpay 卡片,各附啟用開關及編輯按鈕
Yocale 手機畫面,展示手部在零售貨架旁使用手機進行整合付款,標題為「Integrated Payments & Point of Sale Made Simple」 Yocale 手機畫面,標題為「Let Clients Book Bigger Services. You Get Paid In Full, Upfront」,數據卡展示「2-3x higher average tickets」及「0 chasing and risk」,並展示 Affirm、Afterpay 及 Klarna 標誌 Yocale 手機畫面,展示發票建立介面,設有項目明細及簽名面板,標題為「Create Invoices In Seconds. Get Paid Fast.」
Yocale 手機結賬畫面,展示發票「Amount due $450.00」、Affirm 及 Klarna 先買後付選項、已選取 Affirm 的付款方式選擇,以及「Confirm payment」按鈕
女士查看手機的照片,疊加「Blowdry Commission」卡片,展示由 $70.00 折至 $49.00 的優惠價及職員「Natan Jein」
07

着陸頁面

Yocale 着陸頁面設計動畫導覽

轉換漏斗

高轉換率的着陸頁面遵循一套經驗證的公式。每個版塊都讓訪客更接近成為潛在客戶一步:

  1. 引子 —— 以認知度及核心價值主張作開端
  2. 核心價值 —— 展示產品如何解決他們的具體問題
  3. 社會認證 —— 透過可信度消除疑慮,建立購買意欲
  4. 行動呼籲 —— 推動轉換
Yocale 着陸頁面版面,展示全寬容器結構及版塊層級
Yocale 主視覺標題設計,展示標題、副標題、CTA 按鈕及手機模型,背景簡潔
Yocale 西班牙文着陸頁面版塊,展示 Preet 及 Elena 兩位客戶的評價,附照片及引言
Yocale 西班牙文「Beneficios de Yocale」版塊,展示手提電腦模型及四項數據:缺席率下降 86%、客戶預約增加 34%、回頭預約增加 30%,以及新預約增加 64%

本地化

拉丁美洲既是主要服務地區,亦是核心目標受眾。為接觸講西班牙文的用戶,我們建立了一個完全本地化的着陸頁面,讓拉丁美洲銷售團隊可以直接分享。

Yocale Pay 全版着陸頁面,展示主視覺標題、功能亮點及行動呼籲版塊
Yocale 分析追蹤儀表板,展示流量數據、轉換指標及用戶行為洞見
08

網頁開發

2024 年重新設計的 Yocale 網誌版面截圖,展示有條理的分類及改善後的導航
2023 年 Yocale 舊版網誌版面截圖,展示所有文章置於單一頁面,沒有分類結構
之前 之後

重新設計以解決 SEO 問題

網站的網誌版塊存在孤立頁面問題 —— 原有版面將最新 100 篇文章全放在單一頁面,但存檔中的文章數量遠超於此。我重新整理了網誌的分類結構,確保每篇文章都能被索引及發現。

螢幕錄影展示 Figma 與 Webflow MCP Bridge App 根據設計自動生成網頁元件,並展示工具呼叫記錄及元素建構執行過程

AI 正在取代我們的工作

Figma 及 Webflow 各自擁有 MCP,可自動生成部分網頁元件(具備適當的自動版面配置),但目前的限制是它們尚未能自動生成動畫效果。

螢幕錄影展示為定價卡建構並設定可編輯屬性的 Webflow 元件,示範可重複使用網頁元件的建立過程

Webflow 元件

建立可重複使用的網頁元件可縮短開發時間,確保更快交付。畢竟在 SaaS 世界裏,時間就是金錢。

螢幕錄影展示 Notion to Figma Sync 外掛程式將 Notion 資料庫內容同步至 Figma 設計圖層,示範跨語言內容轉換

Notion 轉 Figma

與內容撰稿人合作時,我們需要一套系統來測試內容如何配合設計運作。我發現了一個可將 Notion 資料庫與 Figma 同步的外掛程式(圖層需相應命名)。只需一鍵,即可跨不同內容及語言進行設計本地化。

Yocale 客戶星級評分及評價,展示平台整體客戶滿意度
繼續閱讀

更多個案研究

Crowd Ease 手機應用程式介面,顯示活動追蹤及實時人流資料畫面

手機應用程式 · 2023

Crowd Ease

活動追蹤及實時人流監察應用程式
Delta Intelligent Building Technologies 資源平台介面

網頁平台 · 2025

Delta Controls

為工業合作夥伴而設的資源內聯網
ANT Equipment Group 設備租賃網站介面

網頁設計 · 2024

Ant Equipment Group

設備租賃及銷售平台