UIUXデザイナーのお仕事のフロー

シニアのUIUXデザイナーの方の「就職活動で出た宿題を解いてみた!これで受かったよ!」という記事がインターネットには出ています。それらを数日かけて紹介していきたいと思います。今日の課題は、Uberの入社の際の宿題。アプリを作ってプレゼンしてしてくださいというものです。


The traveler has landed at SF international airport and needs to find her checked bag. Create a low-fidelity interaction flow that helps the trailer find her bag from her mobile app.

When you’re done, email your work in presentation form. 

Make sure your presentation includes: 
-Communicate the process and thinking that went into the design. We are just interested in your workflow as we are your finished product. 
-Wireframes that illustrate how users would get from the start page of this offering to meet their goals. 
-Clearly articulate user goals and takes that need to be supported in the UI and how you would move users through to help them achieve their goals. 
-What constraints, requirements, and assumptions are you asking with your design? What are the tradeoffs you're making with the design and why?

今回作るアプリの内容

「とある旅行者がサンフランシスコ空港にて自分のバッグを探す必要があります。この旅行者が自分のカバンを見つけるための携帯アプリを作成してください」

ワイヤーフレームのインタラクションフローを作成しプレゼンしてください。ユーザーの目標達成、デザインプロセスやデザインの考え方を見ています。

1、紙で前提条件やゴール、アイデアを考える

自由で広くアイデアを考えるため、まずはパソコンではなく紙の上で手を動かすことがオススメです。まずは、ゴール、アイデア、ユーザーについてなど、思いつく限り書いていきます。

彼女はこう言います。「It is really important to consider what the scenario, environment, situations, and feelings the user might have at that particular moment where they are going to interact with your experience.(ユーザーが体験するその瞬間に、どのようなシナリオ、環境、状況、感情を持つかを考えることが重要です。)」

前提条件

  • プロジェクトゴール:空港スタッフに頼らず自分でバッグを見つける
  • アイデア:チケットのQRコードを読み取る、ボーディングナンバーを入力する、フライトナンバーや座席番号を入れる、フライト情報のアラート、 カバンまでの距離や時間を出す、アプリは空港か航空会社が作成する
  • ユーザー:アラートをつかう、ユーザーの時間や快適さを犠牲にしない、知らない土地で荷物を受け取る、Tech savvy かもしれないし、アナログかもしれない
  • ユーザーゴール:①荷物の状態を知る ②荷物を探す ③手荷物を受け取る
  • ユーザーのタスク:予約番号で検索、フライト番号で検索、地図で検索、ピックアップポイントまでルート検索
    などなど。。

次にさらに深掘りしていきます。

  • 前提条件(Assumption) ユーザーは携帯を持っておりWifiをつかえる、荷物の状態を確認するのは受け取りの際だけとは限らない、ユーザーはボーディングとフライトナンバーをもっており読み取りが可能、荷物にGPSをつけられる、ユーザーによってはひとりで10個の荷物を持っている人もいる。
  • トレードオフ(Trade-off) アプリを使うことによる障壁のようなものです。例えばアプリを使うためにはだうんろーどしログインしなくてはいけないなど。バッグのアプリのアプリを使うのは一回きりの可能性が高い中ユーザー情報を細かく入力させるのは困難
  • 要件(Requirements)
  • 制約(Constraings)

2、紙でユーザージャーニ、ユーザーフロー、シナリオを考える

イラストも混ぜながらスケッチしていくとより理解が深まります。

  • ユーザーフロー(User flow) タスクを並べて最適なフローを作ります。例えばEnter boarding number or scan code —search—show checked bag — view details — get directions (notifications)
  • 信頼性(Reliability) データの正確性、バッグがどこにあるかなど情報の透明性
  • 使いやすさ(Usability) タイムリーで違和感がないこと(例:ユーザーがAからBへ効率的に移動するのを助ける
  • シナリオ(scenario) ユーザーがもっともハッピーなシナリオをイラストも添えて書いていくとわかりやすいです。例えば、空港で荷物を受け取る時間がアプリによってわかったからコーヒー飲めちゃってハッピー💗荷物を受け取るのもスムーズだったよ!などなど。
  • ユーザーストーリー(User story)
    ①When landing in SF, I want to easily and quickly locate my bag, so I can have peace of mind and walk to it’s collection location. サンフランシスコ空港に到着した時に、簡単に素早くバッグの場所を確認し、安心して回収場所まで歩いていきたい。
    ②When locating my bag, I want to know how to get there, so I can save time and get there faster. 荷物受け取りの際、迷わず早くたどり着いて、時間を節約したい。
    ③When I cannot locate my bag easy way to trace it location. so I can find it. 荷物が見つからない時、アプリでたどれば、簡単に見つけることができます。

3、紙でワイヤーフレームを書く

美しくなくてもいいので、白黒でワイヤーでできたスケッチに必要な情報を記入していきます。情報の優先順位を考えてレイアウトすることが重要です。

4、紙でさらに必要なことがないか考えていく

  • ペインポイント(Pain point)
  • 優先順位をつける(Prioritization)
  • 強調する(Emphasize)

ワークフローの流れをプレゼンに

企業様のコーポレートイメージに近いデザインで作るのがおすすめです。

表紙

まずはアプリタイトル、プロジェクトタイトル、名前、何時間かけたかから始めます。

ゴール

大きなゴールを提示します。「After landing in San Fransisco Zara wants to quickly locate and pick up her checked bag in the airport, without having to ask or rely on airport staff or sign architecture.」

ユーザーゴールとタスク

大きなゴールから細かくしたゴールとタスクを考えます。

  • ユーザーゴール ①荷物の状態を知る ②荷物を探す ③手荷物を受け取る
  • タスク チケット予約番号かQRコードのスキャンによって荷物を検索する、荷物受け取りの場所を地図を使って案内する

デザインプロセス①前提条件

  • ユーザー理解
  • ユーザーの優先順位 ユーザーペインポイント
  • ユーザーストーリー
  • ユーザージャーニー
  • アプリに必要なこと(信頼性と使いやすさなど)
  • アサンプション、コンストレイン、トレードオフ

デザインプロセス②流れ

  • ユーザーフロー

デザインプロセス③ワイヤーフレーム

モバイルだと1枚で3画面を並べてプレゼンしているのが見やすかったです。それぞれのスクリーンで流れを見せてから、全体のフローがわかるようにプレゼンしていました。

まとめ

一番大切なのは課題を見つけ、ゴールを設定し、課題をどのように解決しているかを見せることが重要とのことです。