BASEでデザイナーをしている河越です。
今年2月から、ネットショップ作成サービス「BASE（ベイス）」の購入完了時のメールが、テキストメールからHTMLメールに変わっています。
リリースの詳細はこちら。
HTMLメールになったことで、購入した商品やショップについての情報が伝わりやすくなったことはもちろん、ショップで販売される他商品のレコメンドエリアも追加されました！
メールのHTML化は「長年課題には感じているけど、いつ、どこから着手するか決まっていない」状態にありました。今回のタイミングでデザインチーム主導で施策の具体化から、リリーステストまで一貫しておこなって、リリースまで完了したので、個人的にも強い思い入れのあるプロジェクトです☺️
そこで、今回はデザインチーム主導で行ったメールのHTML化プロジェクトについて、プロセスや他職種とのコミュニケーションを中心にまとめてみたいと思います。
・デザイナー発でプロジェクトを進めるとき
・他の職種も巻き込んでプロジェクトを推進・リリースさせるとき
などの参考になれば嬉しいです。
2020年はコロナ禍で、実店舗を持つ方々を中心に、新たなチャレンジとしてネットショップを始める方が増えたタイミングでした。
今までになかった急激な加盟店数の増加の中で、プロダクトそのものの品質はもちろんのこと、「BASE」がどのように世の中に認識されているかを現す「知覚品質」を向上させることの優先度も高まっていきました。
一方で、プロダクトを見ると改修できていないページやパーツも多くあり、「BASE」を通した購入体験の中で、十分な体験を提供できていない (知覚品質が十分でない) 部分もありました。
メールもその一部で、各ショップが工夫して表現している世界観があるにもかかわらず、「BASE」から送信されるメールではショップのブランドが適切に表現できていませんでした。
実際にカスタマーサポート(以下CS)にも「ブランドのお店で注文をしたのに「BASE」からメールがきて混乱した」「銀行振込決済を選択して注文したあと、どこに振り込めば良いのかわかりづらかった」などお問い合わせがきていました。
そこで、メールのHTML化によってショップと購入者との接点における体験向上や「BASE」そのものの知覚品質向上にも大いにつながるとデザインチームで判断し、プロジェクトとしてとして取り組むことにしました。
BASEでは、プロジェクトを進めるとき、必ずドキュメントを作成しながら進行するようにしています。
今回もゴールやユースケースを想定しながら進めていきました。
そして、メールのHTML化ということはざっくりと決まってはいたものの、「どのメールからHTML化するべきなのか」を決めていく必要があったので、送られているメールの洗い出しから始めました (デザインマネージャーの早川さんが進めてくれました、ありがとうございます！)。
それでも、送られているメールが非常に多くの種類だったこともあり、「どのメールを改善することで一番知覚品質を向上させられるか」までは仮説が立てづらい状況でした。
そのため、購入者/ショップオーナーそれぞれの商品購入から商品到着までの体験をざっと整理してみて、改めて課題を見極めます。
すると、商品購入直後が購入者/ショップオーナーに双方とって最も温度感が高いタッチポイントであることが改めて見えてきたり、商品を購入したときに購入者に届く「購入完了メール」が、CSへのお問い合わせも多く、知覚品質を下げている部分であることがわかってきました (画像の赤い星をつけている部分が課題が大きいと判断したポイント)。
デザインチーム主導とはいえ、デザインチームだけで完結するプロジェクトではなかったので、ビジュアルをつくるよりもっと前からCSメンバーやUXライターも巻き込んでいきました。
購入完了メールに対してどんなお問い合わせがきているのかをヒアリングしたり、CSメンバーに情報項目やレイアウトなどからレビューをもらっていました。
また、決済方法や購入する商品の種類によっても、送られるメールのパターンが違うため、エンジニアメンバーに協力を求めながら、ソースコードを見てパターンの洗い出しもしました。
レビューをもらうときには、必ず最初に用意していたゴールやユースケースをまとめたドキュメントとともに、レビューをしてもらっています。
ドキュメントによるレビューは、かなり定着している文化なのですが、改めてドキュメントがあることでレビューがより有効なものになり、私としてもスムーズに進められた要因だと思っています。
こうして、無事にメールのビジュアルが決まっていきました。
細かな点ですが、決済方法ごとにリード文や注意書きの内容を変え、より注文後の支払い完了率が上がるよう意識しました。UXライターとも相談しながら細かな表現をFixさせていきました。
そして、開発リソースも限られていたことから、リリース前のテストもデザインチームで行いました。
このテストもボリュームが大きく、80項目に渡るテストを、8つのメールクライアント (iOSメールアプリや、Gmail、Thunderbirdなど) に渡ってテストを行いました。
購入者もショップオーナーも多い中、さまざまな環境でテストをしないことには知覚品質を向上できないため、メールクライアントも絞ったとはいえ8つの環境でテストしました。
怒涛のテストを経てようやくリリースを終えました。
リリース時のデザインがこちら。
デザインチーム主導で行っていたこのプロジェクトですが、結果的には当初目的に置いていた知覚品質の向上だけでなく、GMV (流通総額) の増加にもつながるものになりました。
また、今回つくったコンポーネントを「購入完了メール」以外のメールをHTMLする際にも役立てることができるので、非常にやりがいのあるプロジェクトでした...！
私自身も、まだデザイナー歴2年目ではあるのですが、テスト部分や施策の方向性決定部分など、広く関われたこと、購入者体験を大きく左右するものに関われたこと、とても嬉しく思っています。
今後もデザインチームの動き方を発信していくので、楽しみにしていてください！
最後までご覧いただきありがとうございました。