
Onboarding Emails
本プロジェクトでは、サインアップ後の重要なオンボーディング接点として、ウェルカムメールをリデザインした。新規ユーザーがプロダクトを理解し、歓迎されていると感じ、次のアクションへ進みやすくすることを目的とした。
メールの構成、情報の優先順位、CTAの配置、ブランド表現の一貫性を見直し、内容を読み取りやすく、行動につながりやすい形へ改善。
コミュニケーションデザインとビジュアルデザインを中心としたプロジェクトでありながら、サインアップからプロダクト利用までの流れをスムーズにすることで、より広いユーザー体験の改善にもつなげた。
COMPANY
CoPilot AIは、LinkedInを活用したアウトバウンド営業を支援するAIツール。見込み顧客の分析や、一人ひとりに合わせたメッセージ作成をサポートし、返信率や商談獲得率の向上につなげる。
MY ROLE
UI/UX Designer
TEAM
Communication Designer (me)
Product Marketer
SCOPE
Email Design
Visual communication
Onboarding experience
Brand consistency
TIMELINE
5 days: Aug 2024
TOOLS
Figma
Hubspot
CHALLENGE
サインアップ後の最初の体験を改善
ウェルカムメールは、サインアップ後にユーザーが最初に受け取る重要な接点のひとつだったが、既存のメールでは次に取るべき行動が十分に伝わっていなかった。そこで、プロダクトの価値を短時間で理解でき、安心して次のアクションへ進めるよう、内容の分かりやすさ、視覚的な魅力、プロダクト体験との一貫性を高めることを課題とした。
SOLUTION
より分かりやすいオンボーディングメールを設計
情報の優先順位を明確にし、メッセージを簡潔に整理するとともに、CTAの役割と配置を見直した。ユーザーが最初に知るべき情報を中心に構成することで、内容を素早く読み取り、次の行動へ移りやすいメール体験を設計。サインアップ後からプロダクトの利用開始まで、よりスムーズに進めるようにした。
DESIGN PROCESS
1
理解する
リサーチ
他社のウェルカムメールやマーケティングメールを調査し、効果的な要素を以下のように整理:
メール上部のヘッダー
件名だけでなく、メール本文の上部にも内容を示すヘッダーを配置し、メールの目的をひと目で理解できるようにする。
ユーザーアクションのステップを視覚化
元のウェルカムメールでは、すべての手順がテキストのみで並んでおり、流れを把握しづらい状態だった。そこで、色や図形を取り入れ、各ステップを視覚的に強調した。
テキスト中心の印象を避けるため、ビジュアル要素を追加
プロダクトUI、イラスト、アイコンなど、ブランドに合ったビジュアル要素を追加。メールが長くなっても、内容を読み進めやすく、視覚的にも魅力のある構成にした。
長いメールでは、セクション間に区切り線を追加
情報量の多いメールでは、セクションごとに区切り線を設け、内容を視覚的に整理。各情報を読み分けやすくした。
2
デザイン
1通目のオンボーディングメール
ヘッダーと区切り線を追加
ステップを視覚化し、すぐに行うアクションと今後行うタスクを色で区別
各ステップにかかるおおよその時間を記載し、ユーザーが行動に移しやすい構成に
BEFORE (Previous Design)
AFTER (The First fraft of redesign)


2通目のオンボーディングメール
ヘッダーと区切り線を追加
追加情報を探しているユーザーが内容を理解しやすいよう、単純なリンク一覧をアイコンと補足説明を含む形式へ変更。
BEFORE (Previous Design)
AFTER (The First fraft of redesign)


3通目のオンボーディングメール
ヘッダー、区切り線、ビジュアル要素を追加
さらに詳しい情報を求めるユーザーが読み進めやすいよう、アイコンと補足情報を取り入れて可読性を向上。
BEFORE (Previous Design)
AFTER (The First fraft of redesign)


3
実装
HubSpotでのメールテンプレート作成
デザインを実際に利用可能なメールテンプレートとして実装するため、HubSpot上でHTML/CSSを用いてコーディング。
OUTCOME
洗練された、他の用途でも展開しやすいメール体験を構築
ウェルカムメールのリデザインにより、オンボーディング体験の品質と一貫性を向上。サインアップ後の第一印象を強化し、プロダクトの価値をより明確に伝えるとともに、今後のユーザー向けメールにも展開できる、再利用可能なビジュアルの方向性を構築した。
Other Projects:
Available for full-time opportunities or freelance projects.
Please email me or message me on LinkedIn to get in touch.
annaoshiro32@gmail.com
Email Copied!
Copy
Copy component
Copied





