UXデザイナーが作るサービスの業務フロー設計

UX MILK All Night 2020 の登壇資料

Transcript

1. UXデザイナーが作るサービスの 業務フロー設計 UX MILK All Night 2020.09.12 21:15 - 21:45
2. ⾃⼰紹介 IA∕UXデザイナー 職種 ⾼橋 ⼀成 ⽒名 株式会社オロ 会社名 部署 DX事業部 UXチーム 職歴 WEBデザイナー ディレクター IA∕UXデザイナー
3. 業務内容 オロではデジタル戦略の策定、設計・開発、 広告プロモーションまでワンストップで⾏っています 3 ワークショップ実施、体験設計、情報設計、システム が絡むディレクションを担当。ふんわりした要件を具 体的にすることが得意です
4. ⽬次 4 前提について フローチャートを使った業務フロー設計 プロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4
5. 5 UXデザインは ユーザーを理解する ところから始まる Photo by Ryoji Iwata on Unsplash
6. 6 前提として ニーズが分かった上で依頼される案件も多い スキームの設計やプロダクトの開発⽅法、予算やスケジュー ルを確認されるところからスタート
7. 7 今回はそのような案件に対してUXを考える⼿法をご紹介 POC時の UXデザイン⼿法です 概念実証。新しいプロジェクトが本当に実現可能かどうか、 効果や効⽤、技術的な観点から検証する⾏程。スモールスタートで始める POC・・・
8. 8 前提について プロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4 フローチャートを使った業務フロー設計
9. 9 フローチャート を使った業務フロー設計
10. フローチャートの代表例 アクティビティ図 ユーザーの システム上での ⾏動を 把握しやすい 10
11. フローチャートの代表例 ユースケース図 システムで できることが 把握しやすい 11
12. フローチャートの代表例 シーケンス図 データの流れが 把握しやすい 12
13. フローチャートの代表例 視点 ユーザーの⾏動 データの流れ 処理の順序 13 システム中⼼の書き⽅
14. UX視点のフローチャート 14 UXからの視点 ユーザーの⾏動 データの流れ 処理の順序 ユーザーの⾏動が 中⼼の書き⽅
15. 15 モバイルオーダーでの 注⽂フローチャート
16. 16 Photo by Douglas Bagg on Unsplash
17. 17 Photo by Edward Franklin on Unsplash
18. 18 モバイルオーダーでの注⽂フローチャート UXフロー図
19. 質問 19 どこから書くんですか？
20. 回答 20 ステークホルダーを 書く ユーザー 管理者 オペレーター 店舗担当者 1 それぞれの⾏動を 書く オーダーを 開始する 店舗を 選択する 商品を 選択する 数量を 変更する カスタマイ ズする 2 注⽂を 受ける 商品を つくる 完了登録 する 商品を 袋に詰める 受け渡し カウンター に置く 受付番号を 確認する
21. 回答 21 ステークホルダーが 表⽰する画⾯を書く ユーザー 管理者 オペレーター 店舗担当者 3 機能やシステムの 振る舞いを書く 4 店舗画⾯を 表⽰ 商品画⾯を 表⽰ オーダー受付 画⾯を表⽰ 店舗登録 画⾯を表⽰ ユーザー登録 画⾯を表⽰ 履歴画⾯を 表⽰ 商品登録 画⾯を表⽰ オーダー履歴 画⾯を表⽰ クーポン 発⾏ 注⽂履歴 再オーダー ⼈気 ランキング 季節の メニュー ポイント メール送信 GPS取得 PUSH通知
22. 回答 22 ユーザー 管理者 店舗担当者 ユーザー 画⾯ 店舗担当⽤ 画⾯ 管理画⾯ パーツをならべる 5 オーダーを 開始する 店舗を 選択する 商品を 選択する 店舗画⾯を 表⽰ 商品画⾯を 表⽰ 店舗登録 画⾯を表⽰ 商品登録 画⾯を表⽰ オペレーター オペレーター 画⾯ 店舗を 登録する 商品を 登録する システム メール送信 GPS取得
23. 回答 23 ユーザー 店舗担当者 ユーザー 画⾯ 店舗担当⽤ 画⾯ ⽮印を使ってフローをつくる 6 オーダーを 開始する 店舗を 選択する 商品を 選択する 店舗画⾯を 表⽰ 商品画⾯を 表⽰ 管理者 管理画⾯ 店舗登録 画⾯を表⽰ 商品登録 画⾯を表⽰ オペレーター オペレーター 画⾯ 店舗を 登録する 商品を 登録する システム メール送信 GPS取得
24. 24 モバイルオーダーでの注⽂フローチャート アクティビティ図 UXフロー図
25. UX視点のフローチャート UXフロー図 ユーザーの ⾏動フローを 把握しやすい 25
26. 26 UXフロー図 店舗を選択する ・GPSを取得し近隣店舗を表⽰する or ・都道府県のプルダウンを表⽰する カスタマイズする 1. 店舗と同様の注⽂⽅法で選べる 2. カスタマイズ状態を表⽰する 時間を確認する ・受付番号と共に商品が できあがる時間を表⽰する オーダーを確認する 1. 店舗の注⽂画⾯に表⽰する 2. オーダーの優先順位を表⽰する モバイルオーダーでの注⽂フローチャート
27. 27 UXフロー図 ステークホルダーや関係ツール 全体の⾏動や振る舞いを⼀覧化 ・予算感が⾒える ・フェーズが⽴てられる モバイルオーダーでの注⽂フローチャート
28. 28 シェアバイクでの レンタルフローチャート
29. 29 アクティビティ図 UXフロー図 シェアバイクでのレンタルフローチャート
30. 30 UXフロー図 置き場を選択する ・GPSを取得し近隣バイク置き場を表⽰する or ・都道府県のプルダウンを表⽰する 読み取りをする ・バイクのQRコードを読み取る or ・バイクの番号を読み取る ⽬的地を選択する 1. ワンウェイ式では到着地の置き場確保が必要 2. 選択した場所が変更できるようにする レンタルバイクを表⽰する 1. レンタル状況を確認できるよう管理画⾯を⽤意 2. 未返却のバイクを探せるようにする シェアバイクでのレンタルフローチャート
31. 31 UXフロー図 意識しながら書くと良いこと ・必要な機能を確認しながら ・ユーザーのタッチポイントを 考えながら ・ユーザーの⾏動を追いながら シェアバイクでのレンタルフローチャート
32. 32 前提について フローチャートを使った業務フロー設計 sli.doの質疑応答 1 2 3 4 プロジェクトの進め⽅について
33. サービスの全体像∕ユーザーの理解 33 サービス全体をイメージする 必要なフローや機能を⾒つける ワイヤーフレーム・モックを作る 機能・画⾯・フローを考える 機能・画⾯・フローを調整する サービスの全体像からアプローチ つくるものがある程度決まっていて、 ユーザーが良いと感じるものを考える UXフロー図 ワイヤーフレーム 実装
34. ユーザーの⾏動を観察する ユーザーのインサイトを⾒つける サービスのアイデアを考える サービスの全体像∕ユーザーの理解 ユーザーの理解からアプローチ 34 ユーザーの課題を⾒つける 機能・画⾯・フローを考える ユーザーのインサイトを⾒つけて、つくるものを考える インタビュー ペルソナ エクスペリエンスマップ ワイヤーフレーム 機能設計
35. サービスの全体像∕ユーザーの理解 全体像からのアプローチ 35 まずは想定できる範囲でサービス全体を考える サービス全体から考えると優先順位が判断しやすい 必要なところでユーザーをリサーチすれば良い Photo by Ivan Bandura on Unsplash
36. まとめ 36 UXフロー図は ・ステークホルダー∕⾏動∕画⾯∕機能をまずは考えてみる ・システム上での⾏動だけでなく、リアルでの⾏動も含める ・サービスの全体像から考えると計画が⽴てやすい
37. 宣伝 37 オロの広報note ⾼橋∕UXチームnote https://note.com/oro_official https://note.com/zooooonari
38. 38 前提について プロジェクトの進め⽅について フローチャートを使った業務フロー設計 1 2 3 4 sli.doの質疑応答
39. 39 Fin