イオンカード暮らしのマネーサイト・イオンウォレット
新たなサービス創出を可能にする「金融プラットフォーム」へ
イオンカードのポータルサイト「暮らしのマネーサイト」と、カード利用者向けの公式アプリ「イオンウォレット」。事業パートナーであるNTTデータとの共同で、両サービスのリニューアルを行いました。特徴的なのは、アーキテクチャの再構築にまで踏み込み、チャレンジングな仕様を実装している点。複数のベンダーの叡智が結びつき、カード決済を起点とした未来のデジタルサービスの創出を可能にする、新たなサービス基盤が誕生しました。
Solution / Output
ResearchAnalysisStrategic PlanningInformation ArchitectureUX ConsultingUX DesignDesign Language SystemContents DesignUI DesignArt DirectionVisual DesignFrontend DevelopmentCMS DevelopmentProject ManagementMotion DesignUser Testing
「夢のある未来」を描き、土台から刷新
リニューアル以前のサイトは、長年にわたり運用が続けられ、新たな種別のカードが追加されたり、機能を拡張したりする度に改修が重ねられてきたもの。利用者のUXが考慮されておらず、サイト全体のUIの統一感にも課題を抱えていました。また、従来のオーソドックスな開発手法にのっとり、データや画面資材がサーバー側で密結合した状態で構築されているため、軽微な修正であっても反映までに数週間単位の時間を要するなど、運用改善と情報鮮度の維持が課題でした。
さらに、2016年にサービス提供が開始された公式アプリについても、サイトとの連携が十分ではなく、活用範囲が限定されていました。リニューアルにあたっては、こうした課題も念頭に、デジタル時代にふさわしい顧客中心のサービスが提供可能となる土台づくりを行い、夢のある未来への確かな道筋をつけることを目標に設定。こうして、デザインの刷新とあわせ、アーキテクチャの抜本的な見直しを行うことになりました。
さらに、2016年にサービス提供が開始された公式アプリについても、サイトとの連携が十分ではなく、活用範囲が限定されていました。リニューアルにあたっては、こうした課題も念頭に、デジタル時代にふさわしい顧客中心のサービスが提供可能となる土台づくりを行い、夢のある未来への確かな道筋をつけることを目標に設定。こうして、デザインの刷新とあわせ、アーキテクチャの抜本的な見直しを行うことになりました。
親しみやすく、幅広い層にとって心地よい UX/UI
UXの検討、UIのデザインにあたっては、既存のコアユーザーである30~50代の女性(主婦層)のみならず、今後具現化していきたいデジタルサービスのユーザーをも念頭に置いています。1,200名規模のアンケート調査や、インタビュー、さらにイオングループの複数の小売店舗での行動観察を実施し、ターゲットとなるペルソナを5タイプ策定しました。
そこから導き出したデザインのキーワードが、ユーザーにちょっとしたワクワク感を届ける「親しみやすさ」、そしてどのような人にとっても明快かつ受け入れやすい世界観となるような「シンプル&クリア」と「ニュートラル」。白を基調に、イオンカラーであるマゼンダ、そしてイオンカードのサービスカラーである茄子紺の2色をアクセントに用いています。また、アクションの優先度や位置づけに応じて、UIのパターンを分類。それをサイトとアプリの共通ルールとして適用することで、操作性の明快さと、両者を併用するユーザーにとって重要な、世界観の連続性を担保しています。
そこから導き出したデザインのキーワードが、ユーザーにちょっとしたワクワク感を届ける「親しみやすさ」、そしてどのような人にとっても明快かつ受け入れやすい世界観となるような「シンプル&クリア」と「ニュートラル」。白を基調に、イオンカラーであるマゼンダ、そしてイオンカードのサービスカラーである茄子紺の2色をアクセントに用いています。また、アクションの優先度や位置づけに応じて、UIのパターンを分類。それをサイトとアプリの共通ルールとして適用することで、操作性の明快さと、両者を併用するユーザーにとって重要な、世界観の連続性を担保しています。
1 2
サービスユーザーも情報発信者も嬉しい、プラットフォームのあり方
システム面では、静的コンテンツと動的アプリケーションのそれぞれについて、アーキテクチャを刷新しています。具体的には、サイト全体で1,000ページ超に上る静的コンテンツは、新たに導入したCMS*1ソリューション「Sitecore」を活用し、CMS上での構造化・テンプレート化を実現。これについては、CMS開発の知見を有するベンダーの協力を得ています。また、動的アプリケーションが必要な約250ページについては、SPA*2方式を採用した上で、すべての処理をOpen API*3化。新たなアーキテクチャでは、Webレイヤーの修正であればサーバーサイドの編集が不要となるため、スムーズな更新作業が可能になります。
また操作性の面でも、従来の開発方式のように画面描画の度にすべてのアセットを読み込むのではなく、必要な対象のみを都度読み込む作りにできるSPAだからこそ、アプリのように滑らかなUXを実現できます。さらに、処理単位ごとにOpen APIとして切り出す方法をとっているため、アプリケーション側の機能追加や外部システムとの連携も容易です。加えて、今回開発した大部分のOpen APIはサイトとアプリで共用ができるため、更改作業を一本化することができます。今回、サイトとアプリ両方のデザインに加え、サイトの画面ごとのロジック実装やシナリオ試験設計/打鍵もフォーデジットが担当しています。基盤以降の開発全般を担当したNTTデータをはじめとする複数のベンダーの総力で、難度の高いアーキテクチャを具現化することができました。
また操作性の面でも、従来の開発方式のように画面描画の度にすべてのアセットを読み込むのではなく、必要な対象のみを都度読み込む作りにできるSPAだからこそ、アプリのように滑らかなUXを実現できます。さらに、処理単位ごとにOpen APIとして切り出す方法をとっているため、アプリケーション側の機能追加や外部システムとの連携も容易です。加えて、今回開発した大部分のOpen APIはサイトとアプリで共用ができるため、更改作業を一本化することができます。今回、サイトとアプリ両方のデザインに加え、サイトの画面ごとのロジック実装やシナリオ試験設計/打鍵もフォーデジットが担当しています。基盤以降の開発全般を担当したNTTデータをはじめとする複数のベンダーの総力で、難度の高いアーキテクチャを具現化することができました。
デジタルサービス創出のスタートラインに
2020年9月にリリースを終え、その後はCMSとSPAそれぞれの領域について運用チームを組織しています。即時対応が求められる改修や運用更新はもちろん、リニューアル以後のサービス全体の利用状況のリサーチや分析、さらには今後の改善に関する提案やバックログ管理まで、幅広いサポートを行っています。ここまでは、いわばプロジェクトの「STEP1」。将来的に実現したいデジタルサービスを打ち出すためのプラットフォームがようやく整ったところです。今後は、お客様とともに効果検証を重ねながら、夢のある未来へと連なる「STEP2」に向けた準備を進めていきます。
- Content Management System:ページを構成するテキストや画像、描画に必要なテンプレートなどをデータベース上で管理しておき、構造に配慮した一括更新やコンテンツの配信制御を可能にする仕組み。
- Single Page Application:画面の描画に必要なHTMLやCSS、JavaScriptなどの資材を予めクライアント側にダウンロードしておき、新規のページを表示する際は、すべての資材を都度サーバーからロードするのではなく、JavaScriptを使い必要なデータのみを取得し、動的にページを書き換えるアプリケーション。シームレスな遷移体験が実現できる上、データと画面が分離しているため更新性が高い。
- Application Programming Interface:特定の機能に特化した、共有可能なプログラム。または共有のための仕組みがパッケージ化されたもの。Open APIならば、どこからでも参照・呼び出しが可能。
Client
イオンクレジットサービス株式会社
Credit
- UX CONSULTANT
- Takehiro SUENARI
- UX DESIGN
- Nozomu NITTA , Wataru SAITO , Hayato MURAI
- INFORMATION ARCHITECTURE
- Asato KATSUMATA
- UX DESIGN ASST.
- Miho TANAKA , Takafumi NAKAMURA
- RESEARCH
- Rika ISHIHARA
- ART DIRECTION
- Reiko OKUDA , Taro UEDA
- DESIGN
- Pengjun Liu , Yurika WATANABE
- TECHNICAL DIRECTION
- Takuya ABE , Kanon KAKUNO
- DEVELOPMENT
- Takayuki SAKIMOTO , Yoshitaka SHINMURA
- TESTER
- Iori HARADA , Aya KAJIMOTO , KaedeAOYAMA
- DATA ANALYSIS
- Masashi MIZUTANI
- PROJECT MANAGEMENT
- Kazuki YABE
- GROWTH UX DESIGN
- Yutaro INAI , Taro AIZAWA , Natsumi NAGANUMA , Keisuke KINOSHITA , Chihiro MORI , Yuta SHINADA
Partner
- PROJECT MANAGMENT / SYSTEM SUPERVISE
- NTT DATA Corporation
- CMS DEVELOPMENT
- LYZON Inc.
- DEVELOPMENT
- 3FORCOM
- TEST MANAGEMENT
- NTT DATA Vietnam
- MOVIE EDIT
- ELEPHANTSTONE Co., Ltd.
- PHOTOGRAPHY
- Tsukasa ISONO (RicoLeRisa)