案例研究:能夠提高轉化率的郵件設計系統—Naukri設計項目

語言: CN / TW / HK

UI & UX

Article:2022/06/30

歡迎來到 「NEW案例三分鐘」 欄目~ 「NEW案例三分鐘」 是由美國交互設計資訊連載的關於交互設計的案例分享欄目,每週為大家更新不同類型的UI&UX設計案例,希望大家在閲讀案例的研究過程有所收穫~

今天分享的案例來自 產品設計師Sheya Basak ,是此項目中 唯一 設計工作貫穿始終的設計師 。此項目 為印度最大的求職招 聘網站 Naukri.com創建郵件設計系統:

為什麼我們需要郵件

·  在所有社交媒體營銷工具中,電子郵件是 最受歡迎的、預算友好且投資回報率最高 的工具

·  Naukri India上的 大量流量來自郵件 發送者

·  它可以是一個再次將“死用户” 轉換 為“活躍用户”的很好的工具

為什麼我們需要郵件設計系統

1. 與任何其他設計系統一樣,郵件設計系統為任何業務 增加了靈活性和可擴展性

2. 通過編寫常見的電子郵件組件、提高電子郵件的一致性以及指導團隊如何創建適當的電子郵件來 節省時間和金錢

3. 一些電子郵件營銷計劃將其電子郵件的製作分散開來。這意味着 多個團隊可能會處理一封電子郵件 。這創造了一個 電子郵件可能如此的 環境

·  因為沒有共享的電子郵件設計記錄,而導致 設計的不一致和非品牌性

·  因為需要花費大量時間重新創建相同的組件,而導致 製作 成本高昂

·  因為沒有人專門處理電子郵件,信息經 常是 破碎 的,人們 不確定自己是否“做得對”

為什麼需要一個新的郵件設計系統

到目前為止,Naukri有一個基於組件的設計系統,該系統在產品改造之前運行良好。為什麼需要一個新的呢?

由於與 Naukri.com 相關的 最新設計系統和品牌標識 ,我們必須 重新審視 舊的郵件設計系統,並 引入 對新的設計系統的 需求

基於Naukri以前的郵件設計系統的郵件

Naukri 的新郵件設計系統是 Naukri 新品牌標識的 延伸 ,這是一個從一開始就 重新審視一切 的好機會!組件、內容結構、整個理念都可以 重新設計 !聽起來是不是很刺激?讓我們開始吧!

1 初步研究

· 首先了解現有郵件的概念、其中的內容、發送時間以及結構,以 瞭解差距

· 查看其他各種公司的郵件,知道他們正在做些什麼來使他們的郵件更具 互動性 。列出了這些元素並進行了編譯。

· 閲讀了大量郵件的 最佳實踐 ,並列出與此項目相關的內容。

· 在整個過程中,充分 參考 了像realgoodemails和goodmailcopy這樣的網站,以獲得很好的參考和想法。

以下是5大亮點:

1.針對移動設備進行優化: 67% 的電子郵件都是在移動設備上打開的。理想的主題行長度、按鈕大小和 CTA 位置對於創建在移動設備上呈現良好的電子郵件至關重要。

當CTA在郵件的第一部分位於頂部時,通常在第一個滾動的主標題之後,點擊率會高得多

2.為每封電子郵件設定目標: 創建清晰、引人注目的 CTA

3.讓用户感覺良好並展示您的關心: 郵件是一個可以為每一點添加個性化的很好的空間,根據用户體驗定製您的消息可以激發他們的興趣,並建立對您的產品的信任。

4.不要讓您的訂閲者不堪重負: 沒有人有時間閲讀宂長的電子郵件

5.保持簡單: 並非每封電子郵件都需要用驚喜來包裝。在處理交易電子郵件時,最好保持透明。

2 組件構建

從之前的分析中可以清楚地瞭解到需要哪些組件。使用新的Naukri設計系統構建組件。

當在設計實際郵件發送程序時發現 新的需求 時,組件庫就會 擴展

組件庫概覽

3 建立風格指南

從設計師個人的經驗來看,這是一個 不斷髮展 的步驟。你可以在一開始就像我一樣有一個關於如何去做的 初步想法 。從Naukri的設計系統中,我知道要使用什麼顏色和排版。

但是,為了真正制定使用顏色和排版的指南,我們必須 開始設計 郵件,看看它是如何結合在一起的。這樣做後,就為郵件設計系統制定了以下 指導原則

版式指南示例

4 佈局和間距

佈局和網格在開始郵件程序之 確定的,但間距是在完成一些郵件程序 才確定的,這有助於我們確定某些組件和用例之間的正確間距。

任何事先做出的決定要麼來自最佳實踐,要麼來自我們之前的經驗教訓

5 定義郵件結構

這是最有趣的部分。對於流程中的這一步,設計師使用了多個來源來找出表現良好的郵件程序的 模式 。對於 Naukri 的郵件程序,我們遵循包含 三個部分 的基本郵件程序結構。

第一部分

第一部分太重要了。它可以 幫助用户決定是否要繼續閲讀完整的郵件

1.郵件的主標題(H1)
郵件標題應給出郵件的 完整描述 ,然後是基於該標題引導的特定操作的CTA。

2.開場插圖
是否具有插圖取決於郵件的性質。使用相關插圖是為了 喚起各種用户情緒 ,如滿足感、錯失恐懼,並吸引用户的注意力。

3. 主要 CTA

開頭部分具有最明確的行為號召,它指定了用户所需的主要操作。理想情況下,文案應具有 可操作性和精確性 。建議CTA文案儘量精簡。

第二部分

這部分詳細説明了郵件的 主要用途 。具體而言,目的是 説服 用户充分執行上述操作。

第三部分

基本上,本部分包含了所有有用的信息。第三部分也可以是專業提示或你知道嗎。 根據郵件 的性質和要傳達的信息,這 也可以省略

郵件標題

不要低估一個好標題的力量! 標題是 第一印象 (也可能是最後一個)。在許多方面,電子郵件 標題 比電子郵件正文更重要。

當每天我們都會收到 大量 電子郵件時,標題中的幾個 關鍵詞 可以幫助我們確定電子郵件 是否值得打開

編寫標題時要記住的3點建議

1.保持 簡短重點突出 ,並在 開頭包含最重要的關鍵詞

2.參考成功的電子郵件標題 示例

3.對標題進行 A/B測試 。這種方法總是很有效,並能準確地告訴您什麼適合您的用户。

技巧

找出正確的標題是一項具有挑戰性的任務! 所以設計師分享了一個“ 標題選擇器 ”技巧,每次對其都有幫助!

設計師選擇正確標題的訣竅

·  列出 了能想到的所有有趣的標題,並從中 選出 前5或前6個。

· 把這些標題放在手機屏幕上,看看有多少內容 被截斷 了。

· 寫下那些被截斷的標題,並提及從這些字符中引發的 情感

· 用 顏色 對這些情緒進行分級,最強烈的是深紅色,強度較低的是淺紅色。

這使設計師更容易做出決定,並將這些選項呈現給其他設計師。

讓我們來看看成果! 郵件是使用新的郵件設計系統制作的:

Naukri 的歡迎郵件示例

改造後產生了什麼影響

· 第一部分的頂部CTA上有了 84%的點擊率

· 總體而言, 點擊率提高退訂率下降了8-10%

最後我們一起來看看設計師的回顧吧~

定義整個郵件設計系統從一開始就是一個 有良好影響的旅程 。在這個過程中,我們 能學到很多東西 ,例如:

1.瞭解了 郵件設計系統本身的重要性 ,以及 創建適當的設計指南的重要性

2.學到了一個 好的標題的重要性 ,以及 如何僅用幾個字符幫助用户決定是否要點擊打開郵件

3.瞭解了 郵件的很多約束條件 ,例如:

· 漸變、陰影不會在所有客户端中呈現

·  圖片/插圖需要花費大量時間來渲染,我們可使用替代文本來使圖片/圖標易於理解

·  並非所有客户端都支持GIF,因此如果沒有重要信息,則應謹慎使用

對於初級設計師來説,積累知識與個人實踐項目是現階段最重要的。除了自己結合系統與碎片的學習之外,更需要實戰來產出作品~ 美國交互設計資訊在7月-9月為設計師們推出了 交互設計1.0實戰營 ,一起來搞創作!

(部分圖文來自網絡,若有侵權,請聯繫刪除。)

加入 UI&UX交流社羣 ~

設計資源/書籍資源/知識互動

還有更多神祕福利!

一起創作更好的設計~

往期推薦 | Read More

不止於設計!U Design Week!2022 U設計周今日開票,大會全攻略出爐!

心動!「拿捏」交互設計1.0實戰營重磅來襲!4周入門交互設計!6周搞定實戰項目!

寫給交互設計初學者?來看看12個設計創作方向和10個Ui基本元素!

文字丨Jelly

編輯丨Jelly

如果覺得我們做的還不錯點個贊和在看吧!

「其他文章」