引導新手

優化 Autopass 註冊信

引導新手
優化 Autopass 註冊信

引導新手

優化 Autopass 註冊信

角色
角色
產品設計
插圖設計
產品設計
插圖設計
協作對象
協作對象
產品經理*1
軟體工程師*1(後端)
產品經理*1
軟體工程師*1(後端)
專案期間
專案期間
2024/2-2024/4
2024/2-2024/4
平台
平台
Email
Email

Background

Background

2023 年起,當 Autopass 推出新的「加油條碼付」服務後,公司旗下如「車麻吉 App」等用戶端產品的加油服務從過去的「免感應掃碼」模式,轉變為一鍵付款、報車牌、條碼付款等 3 種方式,依各加油站提供的方式而定。
多數加油站只提供其中一種,用戶到站後需要先辨認該站的付款方式,才知道怎麼付款。
當時,我發現舊的會員註冊引導信未反映最新的服務資訊,且存在其他可以優化用戶體驗的地方,因此著手發起本次專案。

Goal

Goal

優化新會員登陸體驗

優化新會員登陸體驗

透過優化現行的註冊引導信(Onboarding Email),確保內容與最新服務一致,提升新會員在註冊後對服務的理解。

Challenge

Challenge

跨信箱服務的相容性限制

跨信箱服務的相容性限制

Email 的 HTML/CSS 支援有限,不同信箱服務商對同一封信的顯示效果也可能不同,;加上信件篇幅有限,需要選擇適應性較強的排版,並取捨要放進信裡的服務資訊。

Process

Process

流程與痛點分析

流程與痛點分析

首先,針對原先的信件分析內容上的體驗痛點:

服務介紹未更新

服務介紹未更新

原始 Onboarding Email 中的加油付款服務介紹未更新,可能誤導新用戶。

原始 Onboarding Email 中的加油付款服務介紹未更新,可能誤導新用戶。

文字量過多

文字量過多

按鈕位置過低

按鈕位置過低

主要行動按鈕 (CTA) 位置過低,服務說明連結不夠突出,用戶難以快速發現與互動。

主要行動按鈕 (CTA) 位置過低,服務說明連結不夠突出,用戶難以快速發現與互動。

往下,我整理新會員註冊後的體驗流程圖,思考在註冊信送達的時間點,首要傳遞資訊是什麼。
當用戶輸入基本會員資料後,會收到註冊信;同時在 App 端用戶會接著遇到車牌與付款方式的設定,這兩項是後續順利產生訂單的關鍵,門檻也較高,在介面設計上用戶可以先跳過、日後再補。

因此,這封信扮演的是「二度觸及」,對象是沒有完成設定,或在 App 內沒注意到服務說明的用戶。
舊信強調據點數量,說明的是「值不值得用」,但剛註冊的用戶更想知道的,是「第一次該怎麼用」。
因此信件的重點,從展示據點規模變為完整說明服務,加速後續完整設定與使用服務的意願。

往下,我整理新會員註冊後的體驗流程圖,思考在註冊信送達的時間點,首要傳遞資訊是什麼。
當用戶輸入基本會員資料後,會收到註冊信;同時在 App 端用戶會接著遇到車牌與付款方式的設定,這兩項是後續順利產生訂單的關鍵,門檻也較高,在介面設計上用戶可以先跳過、日後再補。

因此,這封信扮演的是「二度觸及」,對象是沒有完成設定,或在 App 內沒注意到服務說明的用戶。
舊信強調據點數量,說明的是「值不值得用」,但剛註冊的用戶更想知道的,是「第一次該怎麼用」。
因此信件的重點,從展示據點規模變為完整說明服務,加速後續完整設定與使用服務的意願。

設計策略

設計策略

1

強化服務使用說明,確保用戶能夠快速理解

強化服務使用說明,確保用戶能夠快速理解

2

以優惠吸引用戶,提升行動機會

以優惠吸引用戶,提升行動機會

工具測試

工具測試

初期我們嘗試使用 EDM 工具進行排版,以期加速上線並減少工程師的工作量;同時,團隊也有評估將 EDM 模板輸出後交由工程師進行細部調整的做法。
最終,因為工具的排版限制,還是交由工程師刻版處理。

初期我們嘗試使用 EDM 工具進行排版,以期加速上線並減少工程師的工作量;同時,團隊也有評估將 EDM 模板輸出後交由工程師進行細部調整的做法。
最終,因為工具的排版限制,還是交由工程師刻版處理。

Final Design

Final Design

最終版本的註冊信保持單一信件設計,輕量介紹「停車」及「加油掃碼付」服務。
相比舊版信件,新版省略了「路邊停車自動繳」服務介紹,因為用戶在 App 註冊流程中已有開啟該服務的引導與說明。

舊信唯一的 CTA 是「開啟 App」,新版改為「如何使用」,連到 App 內既有的付款教學頁。
該頁會顯示用戶目前的設定狀態,尚未設定車牌或付款方式時會提醒,讓用戶從信件直接銜接到設定。

最後,我也統一視覺語言與 CTA 樣式,並透過情境插畫搭配文字,提升信件中的品牌一致性與易讀性。

最終版本的註冊信保持單一信件設計,輕量介紹「停車」及「加油掃碼付」服務。
相比舊版信件,新版省略了「路邊停車自動繳」服務介紹,因為用戶在 App 註冊流程中已有開啟該服務的引導與說明。

舊信唯一的 CTA 是「開啟 App」,新版改為「如何使用」,連到 App 內既有的付款教學頁。
該頁會顯示用戶目前的設定狀態,尚未設定車牌或付款方式時會提醒,讓用戶從信件直接銜接到設定。

最後,我也統一視覺語言與 CTA 樣式,並透過情境插畫搭配文字,提升信件中的品牌一致性與易讀性。

Outcome

Outcome

CTR

Increased 40%

舊信的唯一 CTA 是「開啟 App」,新版改為「如何使用」,導向會顯示設定狀態的付款教學頁;在新版信件上線後我們觀察信件點擊數/信件開啟數的比例,發現較改版前增加了 40%。

舊信的唯一 CTA 是「開啟 App」,新版改為「如何使用」,導向會顯示設定狀態的付款教學頁;在新版信件上線後我們觀察信件點擊數/信件開啟數的比例,發現較改版前增加了 40%。

Takeaways

Takeaways

在本次專案,我學到如何在探索過程中,平衡設計與開發量能:

  • 在工程限制明確的情況下,探索替代工具與規劃實作可行性。

  • 尤其是在設計電子郵件時,必須考慮到 HTML 語法支持的限制和各郵件服務商的顯示差異;這也讓我更重視密切與工程師討論、在開發時即時同步並修正的重要性。

在本次專案,我學到如何在探索過程中,平衡設計與開發量能:

  • 在工程限制明確的情況下,探索替代工具與規劃實作可行性。

  • 尤其是在設計電子郵件時,必須考慮到 HTML 語法支持的限制和各郵件服務商的顯示差異;這也讓我更重視密切與工程師討論、在開發時即時同步並修正的重要性。

© Yuan Chiu 2024 Copyright. All Rights Reserved.