Experience Revamp
Japan Airlines
E-commerce Website
TIMELINE
Jun 2020 - Jul 2021
PLATFORM
PC / SP
MY ROLE
Project Lead
Prototyping
Usability research
Design facilitation
Design system
Agile project management
Introduction
Japan Airlines Co., Ltd. is certified as "The World's 5-Star Airlines", which is the highest rating in the airline rating by Skytrax in the United Kingdom. We aim to be "The world's most selected and loved airline by customers" by providing customers a seamless and personalized online user experience.
In this project, we revamped the user experience and redesigned the UI, which is one of the largest projects at JAL since 2019.
日本航空株式会社は、イギリス・スカイトラックスによる航空会社の格付けで、実質最高評価の「ザ・ワールド・ファイブ・スター・エアラインズ（The World’s 5-Star Airlines）」に認定されます。お客さまの気持ちに寄り添ったサービスを提供し、「世界で一番お客さまに選ばれ、愛される航空会社」を目指しています。
このプロジェクトでは、ユーザーエクスペリエンスを刷新し、ユーザーインターフェースを再設計しました。これは、2019年以来JALで最大のプロジェクトの1つです。
My Role
I am the lead UX designer for JAL domestic market. I collaborated with 2 UX designers, stakeholders, product manager, business analysts and engineers throughout this project.
私はJAL国内マーケットのリードUXデザイナーとして、2人のUXデザイナー、ステークホルダー、プロダクトマネージャー、ビジネスアナリスト、エンジニアたちと協力しました。
Problem
Since 2015, JAL's e-commerce experience has not been changed. Here are the key problems with the core experience.
2015年以降、JALのEコマース体験は変わっていません。ここでは、コアエクスペリエンスの主な問題点をご紹介します。
Defining the problem
Goal
Sufficient and flexible information
To work with engineers to build a flex search function that the lowest price of each day is automatically displayed in the air calendar according to date selection.
エンジニアと協力して、日付選択に応じて各日の最安値が自動的にエアカレンダーに表示されるフレックス検索機能を構築します。
Clear navigation
To ensure users understand their locations anytime in the flow with clear and consistent navigation in PC/SP.
PC/SPでの明確で一貫したナビゲーションにより、ユーザーがフローの中でいつでも自分の位置を把握できるように改善します。
A delightful, consistent consumer experience
To provide our consumers a better, consistent experience and to optimize internal operations, we will build a scalable PC/SP responsive design system, which will highlight JAL's brand principle.
お客さまにより良い一貫した体験を提供し、社内業務を最適化するために、スケーラブルなPC/SPレスポンシブデザインシステムを構築し、JALのブランド原則を強化します。
Impact
Our users
Before we started designing, we conducted a series of customer interviews to deep dive into the existing behavioral and purchase data of our users to understand them better.
We focused on identifying what are the pain points that our users are facing.
We defined 3 user archetypes and mapped them to their respective jobs-to-be-done.
デザインに着手する前に、一連のカスタマーインタビューを行い、ユーザーをより深く理解するために、ユーザーの既存の行動や購買データを深く掘り下げました。
次に、ユーザーが直面しているペインポイントを特定することに注力しました。
さらに、3つのアーキタイプを定義し、それぞれのjobs-to-be-doneにマッピングしました。
Process
Double Diamond and Agile
In this project, we utilized the Double Diamond strategy within Design thinking. We also fit the Double Diamond into the Scrum framework in development, which is an iterative approach that has at its core the Sprint - the scrum term for iteration. We used inspections throughout the agile project to ensure that we meet the goals of each part of the process.
今回のプロジェクトでは、デザイン思考のダブルダイヤモンド戦略を活用しました。また、ダブルダイヤモンドを開発におけるスクラムのフレームワークに応用しました。スクラムフレームワークとは、「スプリント」を核とした反復型アプローチです。アジャイルプロジェクトでは、プロセスの各部分の目標を達成するためにインスペクションを行いました。
Edited image from Design Thinking, Agile and Double Diamond working together
User Flows
Competitor Analysis
Early Designs
A sneak peek into our early low-fidelity designs. The designs have gone through at least 30 iterations per screen. It is due to several reasons: Change in business directions, shift in the product roadmap, or simply to improve the user experience.
The initial designs went through several user tests, discussions with operations, branding and business teams to ensure we have a friendly and scalable user experience.
初期のローフィデリティデザインをお見せします。1つの画面につき最低でも30回はイテレーションを行いました。これにはいくつかの理由が考えられます。ビジネスの方向性の変更、製品ロードマップの変更、あるいはユーザーエクスペリエンスの向上のためです。
初期のデザインは、フレンドリーでスケーラブルなユーザーエクスペリエンスを実現するために、何度もユーザーテストを行い、オペレーションチーム、ブランディングチーム、ビジネスチームとのディスカッションを経て完成しました。
Usability Testing & Customer Interviews
To validate our designs and test prototypes, we conducted moderated usability study, A/B testing in both a controlled testing environment and a guerilla way. After the moderated usability study, participants also completed the System usability scale survey.
デザインを検証し、プロトタイプをテストするために、コントロールされたテスト環境とゲリラ的な方法で、モデレートユーザビリティ・スタディとA/Bテストを実施しました。モデレートユーザビリティ・スタディの後、参加者はシステム・ユーザビリティ・スケールサーベイにも協力してもらいました。
Final Designs
Looks new. Feels like home.
It's now easier and faster to get access to the information according to each customer's travel objectives and needs. This renewal consolidates the pages for domestic and international flights, domestic and overseas tours, and JMB, JAL Card members, making it easier for customers to access the page of interest.
お客さま一人一人の旅の目的やご要望にあわせ、よりシンプルかつ素早く情報にアクセスできるようになりました。今回のリニューアルでは、国内線と国際線、国内ツアーと海外ツアー、JMBとJALカードのページをそれぞれ集約し、目的のページまでのアクセスが簡単になりました。
Select from sufficient flight information.
Personalized purchase experience with flex search
Customize your flight
Design system
JAL design system is a scalable design system that saves time, reduces technical debt over time. It solves the problem of inconsistent components and user experience.
It consists of 100+ components with properly defined typography styles, icons, and illustrations. Everything in the website is made up of these modular components—this gives a unified, consistent, robust UI.
The design system is never final. It evolves as we go along.
JALデザインシステムは、時間を節約し、長期にわたる技術的負債を減らすことができる、スケーラブルなデザインシステムです。コンポーネントとユーザーエクスペリエンスが一致しないという問題を解決します。
JALデザインシステムは、タイポグラフィ、アイコン、イラストなどが適切に定義された100以上のコンポーネントで構成されています。Webサイト内のすべてのものは、これらのモジュール化されたコンポーネントで構成されています。これにより、統一された、一貫性のあるUIを実現しています。
デザインシステムは最終的なものではなく、作業を進めながら進化していきます。
What we learned
Adapt to changing consumer expectations
We need to stay grounded and focused on the goal but also account for changes to the product to match the changing behavior of the consumers.
Products don’t exist in a vacuum
With a major user experience revamp, our internal processes are affected. For example, engineers need to change how they tag components.
If we didn’t collaborate with these teams, listened to their concerns, and evolved the tools they worked with, our website revamp would look nice only as a prototype, but fall flat once implemented in production. Hence, we had a lot of alignment initiatives going on in the background, such as re-defining our design guidelines.
Take it one phase at a time
We learned to break down complicated designs into small, manageable chunks. This eases development and testing as we go along.
This has been my proudest contribution at JAL EC project. Couldn't have done so without the amazing team. Huge kudos to our heroes in the product engineering team, business team, and our lovely stakeholders.
Thank you for reading through! Hope you enjoyed learning about my design and thought process. :)