glo — British American Tobacco

バナーから製品ローンチまで——クラフトの力で担当領域を広げる

役割
デジタルデザイナー → UXデザイナー
期間
11ヶ月(2018–2019)
会社
Geometry Ogilvy Japan
チーム
2名のUXチーム
主なクライアント
glo、Lexus、KODE

私はデジタルデザイナーとしてGeometry Ogilvy Japanに入社しました。担当業務はプロダクション制作——キャンペーンバナー、eDM、LINEクリエイティブ、駅貼りポスターなどです。主なクライアントは、British American Tobaccoの加熱式タバコブランドであるglo、そしてKODEでした。同僚が不在のため、CEO向けのPowerPoint資料を作っていたこともありました。

華やかなスタートとは言えませんでした。

しかし、この仕事は格好のトレーニングの場でした。一つひとつのバナー、一枚一枚のポスターを通じて、厳しい制約のなかでブランドシステムの枠内でいかに伝えるかを学びました。そしてチャンスが訪れたとき、私は準備ができていました。

契約の途中で、デジタルデザイナーからUXデザイナーへと役割が変わりました。担当領域はすぐに広がりました。

glo Series 2 Mini 製品ページのデザイン

glo Series 2 Mini——製品ページ

British American Tobaccoがコンパクトな加熱式タバコデバイス「glo Series 2 Mini」を発売した際、私は月間120万人以上が訪れるプラットフォームdiscoverglo.jpの製品ページを全面的に任されました。

既存の製品ページは、マーケティングバナーがびっしりと並んだ状態でした。大きく、騒がしく、複数のページに散らばっています。ユーザーは製品を比較するためだけに、いくつもの階層をクリックして進まなければなりませんでした。デザインはユーザーの理解ではなく、ブランドの声を届けることを目的に作られていたのです。

私は異なるアプローチを取りました。すべてを一つのページに集約。クリーンな白い背景。製品スペックは一目で見比べられるように配置。デバイスの写真にはゆとりを持たせる。ボリュームではなく、明快さを。ユーザーは大声でまくし立てられることなく、製品を理解できるようになりました。

クライアントの反応はすぐに返ってきました——ランディングページ全体を任せたい、と。

discoverglo.jp——ランディングページ全面リデザイン

UXディレクターとともに、discoverglo.jpのメイン体験を再設計しました。この取り組みは3つの原則を軸としています。

discoverglo.jp ランディングページ リデザインのフロー

シンプルにする。以前のサイトはナビゲーションが煩雑で、コンテンツはバナーの裏に埋もれていました。私は情報アーキテクチャを再構築し——ナビゲーションを簡素化し、キャンペーンやニュースにはカードベースのレイアウトを導入し、コンテンツの階層をマーケティングカレンダーではなくユーザーの行動の流れに沿わせました。

glo デザインシステムと画面デザイン

再分類する。製品、キャンペーン、リワード、ニュース、店舗情報——これらすべてを一貫したインタラクションパターンで再編成し、ユーザーがサイト内を移動するなかで操作に慣れていけるようにしました。

discoverglo.jp リデザインされたランディングページ上部

優先順位をつける。リワードページは、(交換可能なものだけでなく)利用可能なすべてのリワードを表示するよう再設計し、ユーザーがより多くのポイントを獲得する動機づけにしました。現在のポイント残高は、プロフィール内に隠すのではなく、ページ上に直接表示するようにしました。

discoverglo.jp リワードページのリデザイン

店舗ページは2つの明快なビューに分けました。「about(ラウンジ体験の紹介)」と「search(サービス種別で店舗を探す)」です。

discoverglo.jp 店舗ページのリデザイン

私はすべてのコンポーネント、アイコン、ビジュアルガイドラインを設計し——ブランドにそれまでなかった一貫性をもたらすデザインシステムを構築しました。

glo デザインのハンドオフ ドキュメント

glo Series 2 Mini——ローンチ体験

このプロジェクトが、私の役割を画面の枠を超えて広げてくれました。UXディレクターおよびイベントチームと協働し、glo Series 2 Miniのエンドツーエンドのローンチ体験をデザインしました。

オンライン:キャンペーンのランディングページ、イベント登録フロー、開催前のコミュニケーション。

オフライン:ポップアップイベントそのもの——単なる製品デモではなく、一つの体験です。来場者はガイド付きのテイスティングジャーニーを通じて自分に合ったタバコのフレーバーを発見し、gloラウンジのコンセプトを体感し、デバイスを超えてブランドと関わることができました。私はイベントのコンセプト、体験のフロー、そしてすべてのタッチポイント素材をデザインしました。

このイベントは、製品ページが果たした役割を別のスケールで実現するために設計されました——マーケティングのノイズを、記憶に残る体験へと置き換えること。

Lexus——ランディングページのリデザイン

Lexusの新しいランディングページもデザインしました。車種ではなく、記事やイベントといった同社のエディトリアルコンテンツに焦点を当てたものです。私はUXディレクターとともに、Lexusの経営層に直接この成果を提案しました。短期間ながら鋭く仕上げた、タバコ領域を超えた対応力を示すプロジェクトでした。

British American Tobacco——マーケティングポータル

別の案件として、BATのオフィスで社内マーケティングポータルのリデザインも担当しました。ユーザー向けではないものの、クライアントにとって重要な業務をエージェンシーが私に託してくれたことを示す、もう一つの証でした。

広がった担当領域

11ヶ月の間に、私はキャンペーンバナーの制作から、製品ローンチ体験全体のデザインへと歩を進めました——デジタルプロダクションからUX戦略へ。それは肩書きの変化によってではなく、一つひとつの成果物のクオリティが次の機会を引き寄せたことによるものでした。

築いた関係

UXディレクターは、親しい協働者であり友人になりました。PMたちも、同僚たちも——今でも連絡を取り合っています。人の入れ替わりが激しいエージェンシーの世界において、長く続く関係は、何を世に送り出したかだけでなく、どのように働いたかを物語る証です。

示した対応力

一つの契約期間のなかで、製品ページ、サイト全体のリデザイン、ローンチイベント体験、エディトリアルなランディングページ、そしてマーケティングポータルまで。キャンペーンレベルのクラフト。プロダクトレベルの思考。ブランドレベルの一貫性。

エージェンシーの仕事は、速く、正確に、そして多才であることを教えてくれます。しかしOgilvyで得た本当の学びは、担当領域を「勝ち取る」ということでした。丁寧に仕上げた一枚のバナーは、製品ページを任されるための一歩。クリーンな製品ページは、プラットフォームを再設計するための一歩。そしてプラットフォームのリデザインは、ローンチ体験をデザインするための一歩だったのです。