リ・デザインフロー

Midium（英語版note的な）で公開されていた記事[McDonald’s Mobile App Redesign — UI/UX Case Study](https://medium.com/@bungaazhararosalisa/mcdonalds-mobile-app-redesign-ui-ux-case-study-861dd2511742)が面白かったので、備忘録。

MacDonald'sはアメリカのファストフード界においてトップとも言える巨大企業であるにも関わらず、UX/UI観点から見たアプリはどうにもこうにもよろしくない。ユーザーからのレビューも芳しくなく、ざっと挙げてみただけでも以下のような問題点がある。

- UIデザインがプロっぽくない
- オーダー履歴がない
- バウチャーを引換後のキャンセルができず、インターフェイスが止まる
- なんの通知もない
- チェックアウト時にカートが見られない
- ドライバートラッキングが動作しておらず、コンタクトも、なんのヘルプガイダンスもない
- チェックアウトと支払いがしにくい

大分クリティカルでは…

以下にまとめるのは、リデザインするときの著者の作業・思考フローだ。

Downloading semilar application

まずは同業他社がどのようなUX/UIを提供しているのか確認し、比較する。今回の場合は、フードデリバリーを提供しているアプリを、できるだけたくさん。

Review from Users

ユーザーからのレビューを集めて、どのような不満が出ているのかをリストアップする。自分では気が付かない点も指摘されているかもしれない。

Problem Statements

ユーザーからのレビューから、共通して文句が出ている機能をまとめる。スクショもあると見やすく、後から自分で見ても容易に思い出すことができる。

Getting Started

現在彼らが使用しているのはどのようなデザインシステムだろうか。まとめる。以下、例。
- フォント — Lovin’ Sans
- カラー
- コンテンツの構造
- ユーザーの購買フロー

その上で、他の評判の良いアプリでそれらがどうなっているかを比較する。
例：Gojek, Grab, Hangry app.
これらを比較するだけでも、インプットにおすすめ。

Wireflame

他社との比較で得られたインプットをもとに、ワイヤーを引く。この時は、紙とペンでラフに。

Redesign

デザインツールでデザインに落とし込む
実際に彼女が落とし込んだデザインは、本文から見られる。ブラウザから翻訳できるので英語アレルギーの方も怯まずに！