これまでのモバイル通信サービスは、幅広い年齢層の多様なニーズに応えようとするものでした。そのため、プランは複雑になりがち。またその多くは家族での利用を想定されたものでした。そこでNTTドコモでは、これから社会に進出していく若年世代をメインターゲットに設定した、個人として使いやすい、シンプルなモバイル通信サービスを新たに立ち上げることに。サービスデザインの第1ステップとして、「ユーザー理解」を目的としたワークショップが開催されました。

3日間に及んだワークショップでは、初めにZ世代へのインタビューを実施。スマートフォンの利用に関するZ世代の嗜好を多角的に調査するとともに、ユーザー体験の具体的な検討に先立ち、プロジェクトに関わる全てのメンバーが「ユーザー理解」を共有する機会としました。その上で、サービスとしてのあるべき姿を議論。そこで導き出された仮説をZ世代に提示し、サービスへの共感が喚起できるかを検証していきます。さらに画面設計では、あるべき姿との乖離が生まれないよう、作成したプロトタイプをZ世代に触れてもらいながらUXの磨き上げを行っていきました。こうして、すべてオンラインで完結するahamoのサービス体験が形づくられていきました。

UI／UXを貫くコンセプトは、情報を「隠さない・迷わせない・押し付けない」。店舗と異なりスタッフによるサポートができないオンラインサービスのため、ユーザー自身で操作が完了できる分かりやすさを追求しています。開発過程では「申し込み完了まで3分」という高い目標を掲げ、迷いのない操作ができるか各種検証を行っていきました。また、画面上のテキストについても、どのような言葉とトーンで語りかけるべきかをシーン毎に緻密に定義し、ユーザーにとって分かりやすく、かつ一貫性のある表現を目指しています。

ビジュアルでは、Z世代の嗜好とNTTドコモのアイデンティティ、その両方を加味しながら、リサーチを重ねてあるべき世界観を定義。「自由・エンジョイ・ワクワク・インスピレーション」をテーマに表現しています。随所で使用している波のモチーフは、ブランドロゴマークにある曲線を用いたもの。テーマを表現したカラーは、全8種類の組み合わせがランダムに表示される仕様です。その他にも、かわいいだけではない少し“毒”のあるキャラクターなど、ブランドのファンになってもらうための表現を追求。サービス体験を通してワクワクを途切れさせないための工夫を隋所に凝らしています。

また、アーキテクチャが異なるWebサイトの3領域（ブランド・申し込み・商品）すべてで統一された世界観を表現するため、JavaScriptのフレームワークReactをメインで使用しつつも、各領域に適した処理を追加。描いた体験を実装に落とし込んでいます。

100名以上のエンジニアが関わる体制のもと、サービス全体で統一された体験を創出するため、Webサイトのすべてのパーツをコンポーネントとして設計し、Storybookを活用してカタログ化。併せて、デザインガイドラインも明確化することで、大規模な開発体制でもクオリティの高いコーディングができる仕組みを整えました。

その上で、すべての体験を精査する横断的な組織として、DHQ（Design Head Quarter）をクライアントと共同で設置。プロダクトオーナーと、各領域のUXデザイナーおよびテックのプロフェッショナルの目を通すことで、サービスとデザイン両面の品質を担保しています。サービスリリース後の追加開発や機能改善の検討に際しても、DHQが実行推進する役目を担っており、サービスを継続的にアップデートし続けるプロジェクトの要として機能し続けています。